:root{--navy:#172c38;--ink:#23343d;--soft:#65727a;--paper:#f8f6f0;--white:#fffefb;--line:#ddd7ca;--sea:#276377;--gold:#a77e33;--goldlight:#e6d5ab;--green:#247d63;--shadow:0 15px 50px rgba(23,44,56,.065);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;line-height:1.55}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #c98d39;outline-offset:3px}a{color:#276377} .hidden{display:none!important}
.site-header{max-width:1360px;margin:auto;padding:18px clamp(17px,4vw,55px);display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;white-space:nowrap}.brand-mark{font-family:'Noto Serif Devanagari','Nirmala UI',serif;border:1px solid #a8997a;color:#a37f42;border-radius:50%;height:40px;width:40px;display:grid;place-items:center;font-size:24px}.brand strong{display:block;letter-spacing:.13em;font-size:12px}.brand small{font-size:11px;color:var(--soft);display:block;letter-spacing:.03em}.site-header nav{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.nav-link{border:0;color:#55646a;padding:10px 13px;border-radius:7px;background:transparent;font-size:12px;letter-spacing:.025em;text-decoration:none}.nav-link:hover{background:#efede7}.nav-link.active{background:var(--navy);color:white}
main{max-width:1300px;padding:0 clamp(17px,4vw,52px) 70px;margin:auto}.hero{padding:52px 0 48px;max-width:780px}.eyebrow{font-size:10px;letter-spacing:.19em;font-weight:750;color:var(--gold);text-transform:uppercase}.hero h1{font:normal clamp(37px,5.3vw,70px)/1.08 Georgia,serif;margin:18px 0;color:var(--navy);letter-spacing:-.038em}.hero h1 em{font-weight:normal;color:var(--sea)}.hero p{font-size:15px;max-width:635px;color:#55626a;line-height:1.8}
.workbench{border-top:1px solid var(--line);padding-top:30px}.work-title{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.work-title h2{font:normal clamp(27px,3vw,37px) Georgia,serif;margin:7px 0;color:var(--navy)}.work-title p{color:var(--soft);max-width:690px;font-size:14px;margin:6px 0}.download-btn{background:var(--white);border:1px solid #cdc6b8;border-radius:7px;padding:11px 15px;color:var(--navy);font-size:12px;white-space:nowrap}.download-btn:hover{border-color:var(--sea);color:var(--sea)}
.workspace-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr);gap:21px}.wheel-card,.control-card{background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.wheel-card{padding:25px 14px 12px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:550px}.wheel-svg{display:block;width:100%;max-width:560px;overflow:visible;user-select:none}.wheel-svg .wedge{cursor:pointer;transition:fill .14s,filter .14s}.wheel-svg .wedge:hover{filter:brightness(.97)}.wheel-svg .wedge:focus{outline:none}.wheel-svg .wedge:focus .sector{stroke:#263d50;stroke-width:3}.wheel-svg .sector{stroke:#b8b09e;stroke-width:1}.wheel-svg .wheel-text{font-family:'Noto Sans Devanagari','Nirmala UI','Mangal',sans-serif;pointer-events:none}.wheel-svg .center-main{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif}.wheel-legend{display:flex;justify-content:center;gap:20px;font-size:11px;color:var(--soft);padding:0 10px 13px}.wheel-legend span{display:flex;align-items:center;gap:7px}.legend-dot{display:inline-block;height:8px;width:8px;border-radius:50%}.legend-dot.sea{background:#6894a5}.legend-dot.gold{background:#b89249}
.control-card{padding:25px}.control-title{font:normal 21px Georgia,serif;margin-bottom:18px;display:flex;justify-content:space-between;gap:8px}.control-title span{font:normal 10px ui-sans-serif,sans-serif;color:#9c9890;letter-spacing:.1em;padding-top:8px}.rotator{padding:16px 0;border-bottom:1px solid #eee9dd}.rotator-label{font-size:11px;letter-spacing:.1em;font-weight:750;color:#435662}.rotator-label small{font-size:11px;color:#89918c;letter-spacing:0;font-weight:400;margin-left:8px}.rotator-buttons{display:flex;align-items:center;justify-content:space-between;text-align:center;margin-top:9px}.rotator-buttons button,.mini-btn{border:1px solid #d9d2c7;border-radius:7px;background:#f9f8f4;color:#435662;height:38px;width:38px;display:grid;place-items:center;font-size:23px;line-height:1}.rotator-buttons button:hover,.mini-btn:hover{background:#ecf0f1;border-color:#a6bcc1}.rotator-buttons b,.control-value{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;font-size:25px;font-weight:600;display:block;color:var(--navy);line-height:1.45}.rotator-buttons small{display:block;color:var(--soft);font-size:12px}.result-box{margin:21px 0 0;background:#f0f3f1;padding:23px 17px;text-align:center;border-radius:9px;border:1px solid #dfe7e1}.big-deva{font:600 43px/1.6 'Noto Sans Devanagari','Nirmala UI',sans-serif;color:var(--navy)}.result-box h3{font:normal 21px Georgia,serif;margin:0}.formula{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;font-size:14px;margin-top:11px;color:#52656c}.rule{font-size:10px;color:#89908b;margin:9px 0 0}.example{border-left:3px solid #c6a057;padding:6px 0 6px 15px;margin-top:22px}.deva-example{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;font-size:23px;line-height:1.75;margin-top:4px}.example #word-example-en{font-size:13px;color:#657078}.small-muted{font-size:11px;color:var(--soft);margin:6px 0 0}.action-row{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:18px}.toggle{font-size:12px;color:var(--soft);display:flex;align-items:center;gap:8px}.toggle input{accent-color:var(--sea)}.small-button{border:1px solid #cdd4d0;border-radius:7px;padding:8px 12px;background:var(--white);font-size:12px;color:var(--navy)}.small-button:hover{background:#f3f6f4}
.sentence-grid .wheel-card{min-height:605px}.ring-control{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #eeebe3}.ring-control label{min-width:83px;font-size:11px;letter-spacing:.08em;font-weight:700;color:#63727a}.ring-control .mini-btn{flex-shrink:0;height:30px;width:30px;font-size:20px}.ring-control .value-container{flex:1;text-align:center}.ring-control .control-value{font-size:19px;line-height:1.4}.ring-control .value-gloss{font-size:11px;color:#7b8686}.gender-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:13px;color:#647079;font-size:12px}.gender-row select{border:1px solid #d6d2c8;background:#f9f9f6;color:#30404b;padding:8px;border-radius:6px;font-size:12px;max-width:220px}.mode-title{font-size:10px;color:var(--gold);font-weight:750;letter-spacing:.13em;margin:23px 0 10px}.mode-picker{display:flex;flex-wrap:wrap;gap:7px}.mode-picker button{border:1px solid var(--line);padding:8px 12px;border-radius:7px;background:#fbfaf7;font-size:12px;color:#566069}.mode-picker button.active{background:var(--navy);color:white;border-color:var(--navy)}.mode-picker button:disabled{opacity:.34;cursor:not-allowed}
.sentence-result{margin-top:20px;background:#fffefb;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:27px;text-align:center}.big-sentence{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;font-size:clamp(23px,3vw,35px);line-height:1.9;color:var(--navy);margin:10px 0}.sentence-english{font-size:16px;color:#596a71}.sentence-actions{display:flex;justify-content:center;gap:10px;margin-top:21px}.grammar-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));text-align:left;gap:10px;margin-top:20px}.detail{background:#f5f4ef;border-radius:7px;padding:14px}.detail span{font-size:10px;letter-spacing:.1em;color:#88764f;display:block;text-transform:uppercase}.detail strong{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;font-size:19px;display:block}.detail p{font-size:12px;margin:5px 0 0;color:#69747a}.warning{background:#fff4e9;border:1px solid #e7c6a3;border-radius:7px;padding:11px;font-size:13px;color:#805d36}
.practice-panel{max-width:770px;margin:0 auto;background:#fffefb;padding:29px;border:1px solid var(--line);border-radius:13px}.practice-top{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--soft)}.progress-rail{height:6px;background:#e9e7de;border-radius:999px;overflow:hidden;margin:14px 0}.progress-rail div{background:#458e7a;height:100%;width:0%;transition:width .2s}.quiz-body{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 5px}.quiz-kind{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.14em;font-weight:700}.quiz-body h3{font:normal clamp(28px,4vw,43px) Georgia,serif;margin:18px 0;color:var(--navy)}.quiz-hint{font-family:'Noto Sans Devanagari','Nirmala UI',sans-serif;font-size:26px;margin-top:16px}.quiz-answer{background:#f0f3f1;border-radius:11px;padding:18px 32px;margin-top:25px;font:600 32px/1.7 'Noto Sans Devanagari','Nirmala UI',sans-serif}.quiz-note{font-size:12px;color:var(--soft);margin-top:12px}.quiz-buttons{display:flex;gap:11px;justify-content:center}.quiz-buttons button{padding:12px 22px;border:1px solid #d4d5d0;border-radius:8px;min-width:140px;font-size:13px;background:#fffefb}.quiz-buttons button.primary{color:white;background:var(--navy);border-color:var(--navy)}.quiz-buttons button:hover{filter:brightness(.95)}
.bottom-note{margin-top:50px;border-top:1px solid var(--line);padding:25px 0;color:var(--soft);font-size:13px;max-width:960px}.bottom-note h2{font:normal 24px Georgia,serif;color:var(--navy)}.bottom-note p{line-height:1.85}footer{border-top:1px solid var(--line);padding:20px max(24px,calc((100vw - 1190px)/2));display:flex;justify-content:space-between;gap:20px;color:#79817e;letter-spacing:.08em;font-size:10px}
@media(max-width:950px){.workspace-grid{grid-template-columns:1fr}.wheel-card{min-height:auto;padding:10px 5px 0}.wheel-svg{max-width:530px}.control-card{padding:20px}.hero{padding-top:36px}.site-header{flex-direction:column;align-items:flex-start;gap:15px}.site-header nav{width:100%}}
@media(max-width:560px){main{padding-left:15px;padding-right:15px}.work-title{flex-wrap:wrap}.work-title .download-btn{align-self:flex-start}.hero h1{font-size:40px}.site-header{padding:13px 14px}.nav-link{font-size:11px;padding:8px 9px}.nav-readme{display:none}.control-card{padding:17px}.wheel-legend{gap:10px}.practice-panel{padding:18px}.quiz-buttons button{min-width:0;flex:1}.sentence-result{padding:18px}.gender-row{flex-direction:column;align-items:flex-start}footer{padding:18px;flex-direction:column;gap:6px}}