:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#24235d;--indigo:#2f2ec9;--indigo-deep:#22218f;--azure:#2e8fc9;--gold:#c99a2e;--white:#fff}*{box-sizing:border-box}html{background:var(--indigo-deep);min-width:320px}body{color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-family:Segoe UI,Arial,sans-serif;font-size:16px}button,input{font:inherit}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.app-shell{min-height:100svh;color:var(--white);background:radial-gradient(at 50% 42%,#4d4cd56e,#0000 47%),linear-gradient(154deg,#2928ae 0%,#24239f 40%,#1c1b79 100%);flex-direction:column;display:flex;position:relative;overflow:hidden}.app-shell:before,.app-shell:after{z-index:0;pointer-events:none;content:"";position:absolute}.app-shell:before{opacity:.23;background-image:radial-gradient(#ffffff38 .7px,#0000 .7px);background-size:18px 18px;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 23% 77%,#0000);mask-image:linear-gradient(#0000,#000 23% 77%,#0000)}.app-shell:after{border-left:1px solid #ffffff14;border-right:1px solid #ffffff14;width:min(76vw,940px);height:100%;top:0;left:50%;transform:translate(-50%)}.topbar,.practice,.page-footer{z-index:1;position:relative}.topbar{border-bottom:1px solid #ffffff30;justify-content:space-between;align-items:center;width:min(100% - 48px,1220px);height:78px;margin-inline:auto;display:flex}.wordmark{min-height:44px;color:var(--white);letter-spacing:.13em;align-items:center;gap:11px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}.wordmark-light{letter-spacing:.08em;margin-left:5px;font-weight:400}.wordmark-mark{border:1px solid #ffffff8a;border-radius:50%;align-items:flex-end;gap:3px;width:27px;height:27px;padding:5px;display:flex}.wordmark-mark span{background:var(--gold);border-radius:2px;width:3px}.wordmark-mark span:first-child{height:7px}.wordmark-mark span:nth-child(2){height:13px}.wordmark-mark span:nth-child(3){height:9px}.topbar-note,.page-footer,.stage-label,.topic-index,.timer-hint{letter-spacing:.14em;font-size:10px;font-weight:700}.topbar-note{color:#d0d0f1;margin:0}.practice{flex:1;align-self:center;width:min(100% - 40px,940px);padding:50px 0 42px}.practice-intro{text-align:center;max-width:630px;margin:0 auto 33px}.intro-rule{background:var(--gold);width:33px;height:3px;margin:0 auto 17px}.practice-intro h1{color:var(--white);letter-spacing:-.045em;margin:0;font-size:clamp(34px,5.1vw,55px);font-weight:600;line-height:1.06}.practice-intro h1 span{color:#d7d7ff}.intro-copy{color:#e0e0f5;max-width:40ch;margin:14px auto 0;font-size:15px;line-height:1.6}.stage{background:linear-gradient(110deg,#ffffff0d,#0000 30% 70%,#ffffff0a),#1312634a;border:1px solid #ffffff4d;padding:18px 25px 16px;box-shadow:0 16px 44px #0e0d532b}.stage-label{color:#d1d1f0;align-items:center;gap:9px;min-height:24px;font-size:9px;display:flex}.stage-dot{background:var(--gold);border-radius:50%;width:7px;height:7px}.stage-rule{background:#ffffff38;flex:1;height:1px}.stage-state{color:#fff;font-size:8px}.stage-main{grid-template-columns:1fr 260px;align-items:center;gap:20px;min-height:270px;padding:15px clamp(4px,3vw,35px) 11px;display:grid}.topic-area{border-left:2px solid #c99a2ecc;max-width:540px;padding:10px 0 10px 18px;transition:border-color .18s ease-out}.topic-area.has-topic{border-left-color:var(--gold)}.topic-index{color:#c4c4e9;margin-bottom:10px;font-size:9px;display:inline-block}.topic-text{color:#fff;letter-spacing:-.035em;overflow-wrap:anywhere;max-width:13ch;margin:0;font-size:clamp(26px,4.3vw,42px);font-weight:500;line-height:1.16}.topic-area:not(.has-topic) .topic-text{color:#c9c9e9;max-width:16ch;font-size:clamp(20px,3vw,27px);font-weight:400}.timer-area{place-items:center;display:grid}.timer-button{width:236px;min-height:236px;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;border-radius:50%;align-content:center;justify-items:center;padding:0;transition:transform .18s cubic-bezier(.2,.8,.2,1);display:grid;position:relative}.timer-button:not(:disabled):hover{transform:scale(1.025)}.timer-button:not(:disabled):active{transform:scale(.98)}.timer-button:disabled{cursor:default}.timer-face{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.dial-outer{fill:#f7f7fd;stroke:#c7c7ee;stroke-width:1px}.dial-track,.dial-progress{fill:none;transform-origin:120px 120px;transform:rotate(-90deg)}.dial-track{stroke:#e2e2f1;stroke-width:3px}.dial-progress{stroke:var(--gold);stroke-linecap:round;stroke-width:3px;transition:stroke-dashoffset .18s linear}.dial-tick{stroke:#a9aac9;stroke-width:1px}.dial-tick.major{stroke:var(--indigo);stroke-width:2px}.dial-hand{stroke:var(--indigo);stroke-linecap:round;stroke-width:3px}.dial-pin{fill:var(--gold);stroke:#fff;stroke-width:1.5px}.timer-readout{z-index:1;color:var(--indigo-deep);font-variant-numeric:tabular-nums;letter-spacing:-.055em;margin-top:-7px;font-size:39px;font-weight:600;line-height:1;position:relative}.timer-hint{z-index:1;color:#55558b;letter-spacing:.12em;margin-top:9px;font-size:9px;position:relative}.timer-button.is-running .dial-progress{stroke:var(--azure)}.timer-button.is-finished .dial-progress{stroke:var(--gold)}.stage-footer{border-top:1px solid #ffffff30;justify-content:space-between;align-items:center;gap:12px;min-height:34px;padding:8px 4px 0;display:flex}.status-message{color:#d7d7f0;margin:0;font-size:12px;line-height:1.5}.text-action{color:#fff;cursor:pointer;background:0 0;border:0;min-height:44px;padding:7px 4px 7px 12px;font-size:12px;font-weight:600}.text-action span{color:var(--gold);margin-left:5px}.controls{grid-template-columns:minmax(240px,1fr) 105px minmax(205px,242px);align-items:end;gap:18px;margin-top:23px;display:grid}.variant-fieldset{border:0;min-width:0;margin:0;padding:0}.variant-fieldset legend,.duration-control>label{color:#e2e2f5;margin-bottom:8px;font-size:12px;font-weight:600;display:block}.variant-options{background:#1413663d;border:1px solid #ffffff4d;gap:4px;min-height:52px;padding:4px;display:flex}.variant-options label{color:#dfdff2;text-align:center;cursor:pointer;flex:1;justify-content:center;align-items:center;min-width:0;min-height:44px;padding:6px 9px;font-size:12px;transition:color .16s ease-out,background-color .16s ease-out;display:flex;position:relative}.variant-options label.selected{background:var(--white);color:var(--indigo-deep);font-weight:700}.variant-options input{clip:rect(0, 0, 0, 0);white-space:nowrap;clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.variant-options label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}.duration-input-wrap{background:#1413663d;border:1px solid #ffffff61;justify-content:space-between;align-items:center;min-height:48px;padding:0 12px;display:flex}.duration-input-wrap input{color:#fff;font-variant-numeric:tabular-nums;background:0 0;border:0;width:52px;min-height:44px;padding:4px 0;font-size:16px}.duration-input-wrap input:focus-visible{outline-offset:0}.duration-input-wrap input::-webkit-inner-spin-button{opacity:1;margin:0}.duration-input-wrap input::-webkit-outer-spin-button{opacity:1;margin:0}.duration-input-wrap>span{color:#ddddef;font-size:12px}.duration-help{color:#cacae5;margin-top:5px;font-size:10px;display:block}.duration-help.invalid{color:#ffe18a}.generate-button{background:var(--gold);color:#25224f;cursor:pointer;border:1px solid #e4b948;justify-content:space-between;align-items:center;gap:12px;min-height:50px;padding:0 17px;font-size:13px;font-weight:700;transition:background-color .16s ease-out,transform .16s ease-out;display:flex}.generate-button:hover:not(:disabled){background:#dfb344}.generate-button:active:not(:disabled){transform:translateY(1px)}.generate-button:disabled{cursor:wait;opacity:.82}.key-control{gap:7px;margin-top:17px;display:grid}.key-control>label{color:#e2e2f5;font-size:12px;font-weight:600}.key-input-wrap{background:#1413663d;border:1px solid #ffffff61;align-items:center;gap:12px;min-height:48px;padding:0 12px;display:flex}.key-input-wrap input{color:#fff;background:0 0;border:0;width:100%;min-width:0;min-height:44px}.key-input-wrap input:focus-visible{outline-offset:0}.key-input-wrap button{color:#fff;cursor:pointer;background:0 0;border:0;flex:none;min-height:44px;padding:0 8px;font-size:12px;text-decoration:underline}.key-help,.key-warning{color:#d7d7f0;font-size:12px;line-height:1.5}.key-warning{color:#ffe18a}.button-arrow{font-size:18px;font-weight:400}.loading-mark{border:2px solid #24235d52;border-top-color:var(--ink);border-radius:50%;width:15px;height:15px;animation:.75s linear infinite turn}.error-message{color:#76212a;background:#fff0f0;border:1px solid #e9a9ad;justify-content:space-between;align-items:center;gap:12px;min-height:46px;margin-top:15px;padding:8px 12px;font-size:13px;display:flex}.error-message button{color:#76212a;cursor:pointer;background:0 0;border:0;min-width:70px;min-height:44px;font-size:12px;font-weight:700;text-decoration:underline}.page-footer{color:#c8c8e9;border-top:1px solid #ffffff30;align-self:center;align-items:center;gap:12px;width:min(100% - 48px,1220px);min-height:58px;font-size:8px;display:flex}.footer-divider{background:var(--gold);width:22px;height:1px}@keyframes turn{to{transform:rotate(360deg)}}@media (min-width:900px){.practice{padding-top:58px;padding-bottom:48px}.practice-intro{margin-bottom:39px}.stage{padding-inline:34px}.stage-main{grid-template-columns:1fr 282px;min-height:292px}.timer-button{width:260px;min-height:260px}}@media (max-width:640px){.app-shell{min-height:100svh}.app-shell:after{width:calc(100% - 28px)}.topbar{width:calc(100% - 32px);height:64px}.wordmark{gap:8px;font-size:12px}.wordmark-mark{width:25px;height:25px}.topbar-note{text-align:right;max-width:128px;font-size:10px}.practice{width:calc(100% - 28px);padding:36px 0 28px}.practice-intro{margin-bottom:25px}.practice-intro h1{font-size:clamp(33px,9.2vw,45px)}.intro-copy{max-width:32ch;font-size:14px}.stage{padding:13px 14px}.stage-label{letter-spacing:.08em;gap:6px;font-size:10px}.stage-main{grid-template-columns:1fr;gap:8px;min-height:0;padding:19px 4px 15px}.topic-area{width:100%;max-width:none;min-height:88px;padding:2px 5px 5px 12px}.topic-index{margin-bottom:8px;font-size:10px}.topic-text{max-width:100%;font-size:clamp(25px,7.3vw,36px)}.topic-area:not(.has-topic) .topic-text{max-width:100%;font-size:21px}.timer-button{width:min(62vw,234px);min-height:min(62vw,234px)}.timer-readout{font-size:clamp(35px,10vw,41px)}.stage-footer{flex-wrap:wrap;align-items:flex-start;padding:10px 1px 0}.status-message{flex:100%;font-size:11px}.text-action{min-height:44px;margin-left:auto}.controls{grid-template-columns:minmax(0,1fr) minmax(84px,100px);gap:14px 11px;margin-top:18px}.variant-fieldset{grid-column:1/-1}.variant-options{min-height:52px}.variant-options label{font-size:12px}.duration-control>label{margin-bottom:6px}.duration-input-wrap{min-height:48px;padding-inline:9px}.generate-button{align-self:end;min-height:50px;padding-inline:12px;font-size:12px}.page-footer{width:calc(100% - 32px);min-height:48px;font-size:9px}}@media (max-width:360px){.practice{width:calc(100% - 22px)}.stage{padding-inline:10px}.controls{grid-template-columns:minmax(0,1fr) 84px}.generate-button{grid-column:1/-1}.variant-options label{padding-inline:5px;font-size:11px}.generate-button{padding-inline:9px;font-size:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
