/* Practice components use the shared palette and typography. */
:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--color-ink)}
button,summary{min-height:48px}
.pal{grid-template-columns:repeat(auto-fill,minmax(48px,1fr))}.pal button{min-height:48px}
.mark{background:var(--color-ink)}.eyebrow{color:var(--grey)}
.progress{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.dots{display:flex;gap:5px;flex-wrap:wrap;width:100%;max-height:100px;overflow:auto;padding:3px}
.dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:1px solid var(--color-line);border-radius:var(--radius-tag);font:500 16px var(--font-mono)}
.dot.current{outline:2px solid var(--color-ink);outline-offset:1px}
.state-trap{--state-color:var(--color-amber)}.state-gap{--state-color:var(--grey)}.state-lucky{--state-color:var(--color-ocean)}.state-solid{--state-color:var(--color-emerald)}
.state-badge,.dot{color:var(--state-color,var(--grey))}
.state-badge{display:inline-block;font:700 17px var(--font-ui);padding:6px 0}
.state-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.state-cell{display:flex;flex-direction:column;text-align:left;gap:8px;border:1px solid var(--color-line);border-top:3px solid var(--state-color);border-radius:var(--radius-control);padding:14px;background:var(--color-paper-warm);color:var(--color-ink);font:400 16px/1.5 var(--font-ui)}
.state-cell>span:first-child{font-weight:700;color:var(--state-color)}.state-cell strong{font-size:28px}
[aria-pressed=true]{background:var(--color-paper-deep)}
.question .stem,.review-item .stem{margin:16px 0;font-size:var(--reading-size,17px)}
.opt{font-size:var(--reading-size,17px);min-height:48px}.opt:disabled{color:var(--color-ink);opacity:1;cursor:default}
.option-note,.language-note{display:block}
.option-note,.language-note{font:500 16px/1.6 var(--font-ui);color:var(--grey);margin-top:5px}
.te{line-height:1.75}
.sticky{z-index:3;padding:10px 0 max(10px,env(safe-area-inset-bottom));margin-top:12px;box-shadow:var(--shadow-sm)}
.confidence{display:flex;gap:8px;align-items:center;flex-wrap:wrap;width:100%;padding-bottom:10px}.confidence>span{flex:1}.confidence .btn{padding:10px 12px;gap:8px}.shortcut{font:500 16px var(--font-mono);color:var(--grey)}
#advance{min-width:130px}.feedback{border-top:1px solid var(--color-line);margin-top:14px;padding-top:10px}.feedback p{margin:6px 0 12px}
.reading{margin:16px 0}.reading .row{margin:10px 0}summary{cursor:pointer;padding:10px 0;font-family:var(--font-ui)}
.teardown{list-style:none;padding:0;margin:12px 0}.teardown li{padding:12px;border:1px solid var(--color-line);border-radius:var(--radius-control);margin:10px 0;font-size:var(--reading-size,17px)}.teardown li.chosen{border-left:4px solid var(--color-ink)}.teardown b{font:700 16px/1.6 var(--font-ui)}.teardown .reason{margin:8px 0 0;color:var(--grey)}
.topic-list,.review-list{display:grid;gap:12px;margin:16px 0}.stack{display:flex;height:10px;border-radius:var(--radius-tag);overflow:hidden;background:var(--color-paper-deep)}.stack i{background:var(--state-color)}
.next-step,.revisit{margin:16px 0}.next-step h2,.revisit h2{font-size:20px}#app>h2{margin:24px 0 12px;font-size:22px}
#save-status{position:relative;padding:10px 16px;font:400 16px/1.5 var(--font-ui);color:var(--grey);border-top:1px solid var(--color-line)}
.opt.right,.tag.ok{background:var(--color-paper-warm);border-color:var(--color-emerald)}.opt.wrong{background:var(--color-paper-warm);border-color:var(--color-amber)}.tag.warn{background:var(--color-paper-warm);border-color:var(--grey)}.opt.sel,.why{background:var(--color-paper-warm)}
.btn.pri{color:var(--color-paper);background:var(--color-emerald)}
@media(prefers-color-scheme:dark){.btn.pri{color:var(--color-night)}}
:root[data-theme=dark] .btn.pri{color:var(--color-night)}
@media(prefers-reduced-motion:no-preference){.opt,.state-cell{transition:border-color var(--motion-fast),background-color var(--motion-fast)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media(max-width:420px){.card{padding:14px}.opt{padding:12px 10px;gap:8px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}


.langsw{display:inline-flex;border:1.5px solid var(--color-line);border-radius:var(--radius-control);overflow:hidden}
.langsw button{border:0;background:var(--color-paper);padding:6px 12px;min-height:40px;font:600 16px var(--font-ui)}
.langsw button+button{border-left:1.5px solid var(--color-line);font-family:var(--font-telugu-ui)}
.langsw [aria-pressed=true]{background:var(--color-paper-deep);outline-offset:-3px}
.linkbtn{background:none;border:0;padding:8px 2px;min-height:48px;font:500 16px var(--font-ui);color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.report-row{margin-top:6px}
.sheet-back{position:fixed;inset:0;z-index:20;background:rgba(15,19,17,.55);display:flex;align-items:flex-end;justify-content:center;padding:0}
.sheet{width:100%;max-width:520px;background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-section) var(--radius-section) 0 0;padding:20px 16px max(20px,env(safe-area-inset-bottom));display:grid;gap:10px}
.sheet h2{font-size:22px}.sheet label{font:600 16px var(--font-ui)}
.sheet textarea,.sheet select{font:16px var(--font-body);padding:10px;border-radius:var(--radius-control);border:1.5px solid var(--color-line);background:var(--color-paper-warm);color:var(--color-ink);width:100%}
.sheet textarea{resize:vertical}
#lang-chooser{align-items:center;padding:16px}#lang-chooser .sheet{border-radius:var(--radius-section)}
#lang-chooser .btn{flex:1;min-height:52px;font-size:18px}
.promo{margin:16px 0}.promo h2{font-size:20px}.promo p{margin:8px 0 12px}

/* ===== v2: the new design (tokens only). Layout: tab roots, pushed screens, question screens. ===== */
:root{--edge:color-mix(in srgb,var(--grey) 70%,var(--color-paper));--fill:var(--color-emerald);--on-fill:var(--color-paper);--st-solid:var(--color-emerald);--st-lucky:var(--color-ocean);--st-trap:var(--color-amber);--st-gap:var(--grey)}
:root[data-theme=dark]{--fill:var(--color-emerald-fill-on-night);--on-fill:var(--color-paper-print)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--fill:var(--color-emerald-fill-on-night);--on-fill:var(--color-paper-print)}}
body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
body[data-view=run]{padding-bottom:0}
body:not([data-view=root]) header.top{display:none}
body[data-view=run] #tabs{display:none}
main.wrap{max-width:560px;padding:16px;display:flex;flex-direction:column;gap:14px;min-height:60vh}
header.top .wrap{max-width:560px;padding:12px 16px 0;flex-wrap:nowrap}
header.top{border-bottom:0}
.mono{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.clock2,.tmv,:is(.pal3,.sidepal) button,.qtop .n{font-family:var(--font-mono)}
.te{font-size:1.12em;line-height:1.6}
.te .te,.te2 .te{font-size:1em}
.sp{flex:1}
h1{font:800 26px/1.15 var(--font-display);letter-spacing:-.01em}
.rootT{font:700 28px/1.15 var(--font-heading)}
.btn{font:600 16px var(--font-ui)}
.btn.cta{width:100%;min-height:48px;font-size:16px;margin-top:4px}
.btn.pri{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.btn.icon{min-width:50px;padding:0 12px}
.btn:disabled{opacity:.45}
#advance:disabled{opacity:1;background:transparent;border-color:transparent;color:var(--grey);line-height:1.2}
.btn:not(.pri){border-color:var(--edge)}
.btn.on,.btn[aria-pressed=true],.langsw [aria-pressed=true]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.fine{font:400 16px/1.5 var(--font-ui);color:var(--grey)}
.fine.key-line{margin:-6px 0 0}
.subh{display:flex;justify-content:space-between;align-items:baseline;font:700 17px var(--font-ui);margin-top:6px}
.eb{font:600 16px var(--font-ui);color:var(--grey)}
.meta{font:600 16px/1.45 var(--font-ui);color:var(--grey)}
.rt{flex:1;min-width:0}.rt b{display:block;font:600 16px/1.3 var(--font-ui)}.rt small{display:block;font:600 16px/1.4 var(--font-ui);color:var(--grey)}
.ra{flex:none;display:flex;align-items:center;color:var(--grey)}
.go{font:600 16px var(--font-ui)}
/* header */
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--color-ink);flex:none;min-height:48px}
.mk{display:inline-block;width:26px;height:25px;flex:none;background:var(--color-emerald);-webkit-mask:url(assets/mark.png) center/contain no-repeat;mask:url(assets/mark.png) center/contain no-repeat}
.wm{font:700 21px/1 var(--font-display);color:var(--color-ink)}.wm i{font-style:normal;color:var(--color-emerald)}
.logo .ex{font:700 16px var(--font-ui);letter-spacing:.08em;color:var(--color-ink);border:0;padding:0}
.apphead{display:flex;align-items:center;gap:10px}
.here{display:inline-flex;align-items:center;gap:6px;font:600 16px var(--font-ui);color:var(--grey);border:1.5px solid var(--edge);border-radius:var(--radius-pill);padding:3px 12px 3px 10px;background:var(--color-paper);min-height:48px}
.avatar{position:relative;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--edge);background:var(--color-paper-warm);color:var(--color-ink);font:700 16px var(--font-ui);display:grid;place-items:center;padding:0}
.avatar .ok{position:absolute;right:-1px;bottom:-1px;width:16px;height:16px;border-radius:50%;background:var(--fill);color:var(--on-fill);display:grid;place-items:center;border:2px solid var(--color-paper)}
.avatar .ok svg{width:9px;height:9px}
/* tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--color-paper);border-top:1px solid var(--color-line);padding-bottom:env(safe-area-inset-bottom)}
.tabs-in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;text-decoration:none;font:600 16px var(--font-ui);color:var(--grey)}
.tabbar a.te{font-family:var(--font-telugu-ui)}
.tabbar svg{width:24px;height:24px}
.tabbar a.on{color:var(--color-ink);font-weight:800}.tabbar a.on svg{color:var(--color-ink)}.tabbar a.on svg{stroke-width:2.6}
/* pushed header */
.hpush{display:flex;gap:6px;align-items:flex-start}
.hpush .bk{flex:none;display:grid;place-items:center;width:48px;height:48px;margin:-6px 0 0 -10px;color:var(--color-ink);text-decoration:none}
.hpush h1{font-size:24px}
.crumb{font:600 16px var(--font-ui);color:var(--grey)}
/* countdown, next up, revisit */
.count{display:flex;flex-direction:column;border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-paper-warm);color:var(--color-ink)}.count .ctop{display:flex;align-items:center;gap:14px;padding:12px 14px;min-height:64px}.planrow{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 14px;border-top:1px solid var(--color-line);text-decoration:underline;text-underline-offset:3px;color:var(--color-ink);font:600 16px var(--font-ui)}
.count .cn{display:flex;flex-direction:column;align-items:center;min-width:64px}.count .num{font:700 40px/1 var(--font-display);font-variant-numeric:tabular-nums}.count .cn .u{font:600 16px var(--font-ui);color:var(--grey);white-space:nowrap}
.count .cl{flex:1;min-width:0}.count .cl b{display:block;font:700 16px/1.3 var(--font-ui)}
.count .go{color:var(--grey);display:flex}
.card2{background:var(--color-paper);border:1px solid var(--color-line);border-radius:var(--radius-card);padding:16px;box-shadow:var(--shadow-sm)}
.card2.next h2{font:700 21px/1.25 var(--font-heading);margin:4px 0;text-wrap:balance}
.card2.next .btn{margin-top:14px}
.strip2{display:flex;align-items:center;gap:12px;border:1px solid var(--color-line);border-radius:var(--radius-control);padding:10px 12px;background:var(--color-paper)}
.strip2 .rt b{font-size:16px}
.strip2 .go{display:inline-flex;align-items:center;min-height:48px;border:1.5px solid var(--color-ink);border-radius:var(--radius-control);padding:0 14px;color:var(--color-ink);text-decoration:none;white-space:nowrap}
.subjs{display:grid;gap:0;border-top:1px solid var(--color-line)}
.subr{display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:56px;padding:9px 0;border-bottom:1px solid var(--color-line);text-decoration:none;color:var(--color-ink)}
.subr .line{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.subr b{font:600 16px/1.3 var(--font-ui)}.subr .fr{font:600 16px var(--font-ui);color:var(--grey);white-space:nowrap}.subr .fr .mono{color:var(--color-ink)}
.subr{flex-direction:row;align-items:center;flex-wrap:wrap}.subr .line{flex:1 0 100%}
.subr:has(.rt){flex-wrap:nowrap}
.meter{flex:1 0 100%;height:6px;border-radius:3px;background:var(--color-paper-deep);overflow:hidden}.meter i{display:block;height:100%;background:var(--color-ink)}
.rows{display:flex;flex-direction:column}
.row2{display:flex;gap:12px;align-items:center;min-height:56px;padding:9px 0;border-top:1px solid var(--color-line);text-decoration:none;color:var(--color-ink)}
.rows .row2:first-child{border-top:0}
.ico{width:34px;height:34px;border-radius:10px;background:var(--color-paper-deep);display:grid;place-items:center;flex:none;color:var(--grey);font:700 16px var(--font-ui)}
.topline{font:400 16px/1.5 var(--font-ui);color:var(--grey)}.topline b{color:var(--color-ink)}
/* four states */
.fs{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;background:var(--color-paper-deep)}
.fs i{display:block;height:100%}.fs i.rest{background:transparent}.fs .solid{background:var(--st-solid)}.fs .lucky{background:var(--st-lucky)}.fs .trap{background:var(--st-trap)}.fs .gap{background:var(--st-gap)}
.fsk{display:flex;flex-wrap:wrap;gap:2px 12px;font:600 16px var(--font-ui);color:var(--grey)}.fsk .n{color:var(--color-ink)}
.s-solid{color:var(--st-solid)}.s-lucky{color:var(--st-lucky)}.s-trap{color:var(--st-trap)}.s-gap{color:var(--st-gap)}
.s-solid,.s-lucky,.s-trap,.s-gap,.g,.ic{font-family:var(--font-ui)}
.tbar{display:grid;gap:6px;padding:10px 0;border-top:1px solid var(--color-line)}.tbar:first-child{border-top:0}
.tbar .top{display:flex;justify-content:space-between;gap:10px;font:600 16px/1.3 var(--font-ui)}.tbar .top .fr{font:600 16px var(--font-ui);color:var(--grey);white-space:nowrap}
/* question */
.practice{display:flex;flex-direction:column;gap:14px}
.qtop{display:flex;align-items:center;gap:6px}
.qtop .x,.htop .x{display:grid;place-items:center;width:48px;height:48px;margin-left:-10px;color:var(--grey);text-decoration:none;flex:none}
.qtop .tt{flex:1;min-width:0;font:600 16px var(--font-ui);color:var(--grey);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtop .n{font-size:16px;white-space:nowrap}
.qdots{display:flex;gap:4px}
.qdots i{flex:1;min-width:0;height:8px;border-radius:4px;background:var(--color-paper-deep);display:grid;place-items:center;font-style:normal;color:var(--on-fill)}
.qdots.g i{height:24px;border-radius:7px;font:700 16px/1 var(--font-ui)}
.qdots i.solid{background:var(--st-solid)}.qdots i.lucky{background:var(--st-lucky)}.qdots i.trap{background:var(--st-trap)}.qdots i.gap{background:var(--st-gap)}
.qdots.one i,.qdots.g.one i{flex:0 0 28px;height:8px}.qdots i.held{background:transparent;box-shadow:inset 0 0 0 1.5px var(--color-ink-3)}
.qdots i.cur{box-shadow:inset 0 0 0 2px var(--color-ink)}.qdots i.cur:not(.solid):not(.lucky):not(.trap):not(.gap){background:var(--color-paper)}
.question{display:flex;flex-direction:column;gap:12px}
.question .stem{margin:0;font:500 18px/1.45 var(--font-body);font-size:max(18px,var(--reading-size,17px))}
.qtags{display:flex;gap:8px;flex-wrap:wrap}
#opts{display:flex;flex-direction:column;gap:8px}
.opt{margin:0;border:1.5px solid var(--edge);border-radius:var(--radius-control);background:var(--color-paper);align-items:flex-start;gap:10px}
.opt b{min-width:28px;font:700 16px var(--font-ui);color:var(--color-ink);padding-top:2px}
.opt.sel{border:2px solid var(--color-ink);background:var(--color-paper-warm)}
.opt.right,.opt.wrong,.opt.miss{border-width:2px}
.opt.right{border-color:var(--color-emerald);background:var(--color-paper-warm)}
.opt.wrong{border-color:var(--color-amber);background:var(--color-paper-warm)}
.opt.miss{border-color:var(--grey);background:var(--color-paper-warm)}
.opt.right .option-note{color:var(--color-emerald)}.opt.wrong .option-note{color:var(--color-amber)}
.conf{display:grid;gap:8px}.conf .lbl{font:600 16px var(--font-ui);color:var(--grey)}
.conf .two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chip2{min-height:46px;border-radius:var(--radius-control);border:1.5px solid var(--edge);background:var(--color-paper);color:var(--color-ink);font:600 16px var(--font-ui)}
.chip2[aria-pressed=true]{border:2px solid var(--color-ink);color:var(--color-ink);background:var(--color-paper-warm)}
.sbar{position:sticky;bottom:0;z-index:3;display:grid;grid-template-columns:auto 1fr;gap:10px;margin:10px -16px 0;padding:10px 16px max(14px,env(safe-area-inset-bottom));background:var(--color-paper);border-top:1px solid var(--color-line);box-shadow:var(--shadow-md)}
.sbar .btn{min-height:50px}
.sbar.three{grid-template-columns:auto auto 1fr}
.feedback{display:flex;flex-direction:column;gap:12px;padding:0 0 16px;border-top:0;margin-top:0}.feedback p{margin:0}
.verdict{display:grid;gap:4px;border-top:1px solid var(--color-line);padding-top:12px}
.verdict .st{font:700 19px var(--font-ui)}.verdict p{margin:0;font-size:16px;line-height:1.55}
.whyx{border-left:3px solid var(--color-ink);padding:4px 0 4px 12px;font-size:16px;line-height:1.55}
.whyx b{display:block;font:700 16px var(--font-ui);color:var(--grey)}
.td{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.td li{border:1px solid var(--color-line);border-radius:var(--radius-control);padding:10px 12px;margin:0;font-size:16px;line-height:1.5;background:var(--color-paper)}
.td li.mine{border-left:4px solid var(--grey)}.td li.mine.trap{border-left-color:var(--color-amber)}.td li.key{border-left:4px solid var(--color-emerald)}
.td li b{display:block;font:700 16px/1.5 var(--font-ui)}.td li .reason{margin:2px 0 0;color:var(--grey);font-size:16px}
details.disc{border:1px solid var(--color-line);border-radius:var(--radius-control);padding:0 12px}
details.disc summary{display:flex;justify-content:space-between;align-items:center;font:600 16px var(--font-ui);list-style:none}
details.disc summary::-webkit-details-marker{display:none}
details.disc summary:after{content:"";width:8px;height:8px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:rotate(45deg);margin-right:4px}
details.disc[open] summary:after{transform:rotate(-135deg)}
details.disc .td{padding-bottom:12px}
.held{display:inline-flex;align-items:center;gap:6px;font:600 16px var(--font-ui);color:var(--grey);border:1.5px dashed var(--color-ink-3);border-radius:var(--radius-tag);padding:2px 9px;align-self:flex-start}
.report-row{margin-top:2px}.report-row .linkbtn{min-height:48px;min-width:48px;display:inline-flex;align-items:center}
.banner{display:flex;gap:10px;align-items:center;background:var(--color-paper-warm);border:1px solid var(--color-line);border-radius:var(--radius-control);padding:9px 12px;font:600 16px/1.4 var(--font-ui)}
.banner svg{flex:none;color:var(--grey)}.banner small{display:block;font:600 16px var(--font-ui);color:var(--grey)}
/* exam hall */
.htop{display:flex;align-items:center;gap:6px}
.htop .tt{flex:1;font:700 16px/1.25 var(--font-ui)}.htop .tt small{display:block;font:600 16px var(--font-ui);color:var(--grey)}
.clock2{font-size:22px;border:1.5px solid var(--edge);border-radius:var(--radius-control);padding:4px 10px;white-space:nowrap}
.stabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.stabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50px;padding:5px 2px;border-radius:var(--radius-control);border:1.5px solid var(--edge);background:var(--color-paper);color:var(--grey);font:600 16px/1.25 var(--font-ui)}
.stabs button em{font-style:normal;font-weight:500;font-variant-numeric:tabular-nums}
.stabs button.on,.stabs button[aria-pressed=true]{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.colh{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 16px var(--font-ui);color:var(--grey)}
.markr{display:inline-flex;align-items:center;gap:6px;border:0;background:none;font:600 16px var(--font-ui);color:var(--grey);padding:0 4px}
.markr{min-height:48px}.markr.on{color:var(--color-ink);font-weight:800}.markr.on svg{fill:currentColor}
:is(.pal3,.sidepal){display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
:is(.pal3,.sidepal) button{position:relative;min-height:48px;height:48px;border-radius:var(--radius-control);border:1.5px solid var(--edge);color:var(--color-ink);background:var(--color-paper);font-size:16px;padding:0}
:is(.pal3,.sidepal) button.a{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
:is(.pal3,.sidepal) button.m{border:2px dashed var(--color-ink);color:var(--color-ink)}:is(.pal3,.sidepal) .fl{position:absolute;top:3px;right:3px;width:11px;height:11px}
:is(.pal3,.sidepal) button.am{background:var(--color-ink);border:2px dashed var(--color-paper);box-shadow:0 0 0 1.5px var(--color-ink);color:var(--color-paper)}
:is(.pal3,.sidepal) button.c{box-shadow:0 0 0 2px var(--color-paper),0 0 0 4px var(--color-ink)}
.pkey2{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font:600 16px var(--font-ui);color:var(--grey)}
.pkey2 span{display:flex;align-items:center;gap:8px}
.pkey2 em{display:inline-block;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--edge);flex:none}
.pkey2 em.a{background:var(--color-ink);border-color:var(--color-ink)}.pkey2 em.m{border:2px dashed var(--color-ink);display:grid;place-items:center;color:var(--color-ink)}.pkey2 em .fl{width:10px;height:10px}.pkey2 em.c{box-shadow:0 0 0 2px var(--color-paper),0 0 0 3.5px var(--color-ink)}
.pkey2 .mono{color:var(--color-ink)}
.sheet-back .sheet{max-height:92vh;overflow:auto}
.dialog-back{align-items:center;padding:20px}
.dialog{width:100%;max-width:420px;background:var(--color-paper);border-radius:var(--radius-section);padding:20px;display:grid;gap:12px;box-shadow:var(--shadow-md)}
.dialog h2{font:700 24px var(--font-heading)}.dialog p{margin:0;font-size:16px}
.rows2{border:1px solid var(--color-line);border-radius:var(--radius-control)}
.rows2 div{display:flex;justify-content:space-between;padding:9px 12px;border-top:1px solid var(--color-line);font:600 16px var(--font-ui)}.rows2 div:first-child{border-top:0}
/* result */
.score{display:flex;align-items:baseline;gap:8px}.score .mono{font:800 48px/1.05 var(--font-display)}.score small{font:700 20px var(--font-ui)}
.sres{display:grid;gap:8px}
.srow{display:flex;gap:10px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--color-line)}
.sres .fs+.srow{border-top:0}
.srow .g{width:22px;text-align:center;font:700 17px/1.4 var(--font-ui)}
.srow .rt b{color:inherit}.srow .rt small{color:var(--grey)}.arow .rt small{font-size:16px}
.srow .n{font:600 20px/1.3 var(--font-ui);color:var(--color-ink)}
.nsteps{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:12px 14px 14px;background:var(--color-paper);display:flex;flex-direction:column;gap:2px}
.nsteps .row2:first-of-type{border-top:0}
.review-list{display:flex;flex-direction:column;gap:0;margin:0}
.review-list .card.review-item{margin:8px 0}
details.review-item{border-top:1px solid var(--color-line);padding:0}
.arow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 0;list-style:none;cursor:pointer}
.arow::-webkit-details-marker{display:none}
.arow .ic{font:700 16px var(--font-ui);width:22px;text-align:center;color:var(--grey)}
.arow .rt b{font:500 16px/1.45 var(--font-body)}
details.review-item[open] .arow .ra svg{transform:rotate(180deg)}
details.review-item>:not(summary){padding-bottom:12px}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchips button{min-height:48px;font:600 16px var(--font-ui);border:1.5px solid var(--edge);border-radius:var(--radius-pill);padding:3px 14px;color:var(--grey);background:var(--color-paper)}
.fchips button[aria-pressed=true]{border:2px solid var(--color-ink);color:var(--color-ink);background:var(--color-paper)}
.save-line{margin:0;font:400 16px/1.5 var(--font-ui);color:var(--grey)}
.promo2{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:14px;background:var(--color-paper-warm);display:grid;gap:8px}
.promo2 b{font:700 17px/1.3 var(--font-ui)}.promo2 p{margin:0;font-size:16px;line-height:1.5;color:var(--grey)}
.promo2 .acts{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.promo2 .acts .btn{min-height:48px}
.bfoot{margin-top:6px;padding:16px 0 6px;border-top:1px solid var(--color-line);display:grid;gap:4px}
.bfoot .logo{min-height:0}.bfoot .wm{font-size:18px}.bfoot .mk{width:22px;height:21px}
.bfoot p{margin:0;font:400 16px/1.5 var(--font-ui);color:var(--grey)}.bfoot p.tag-line{font-weight:600;color:var(--grey)}
.bfoot .ex{font:700 16px var(--font-ui);letter-spacing:.08em}
/* mistakes */
.mgrps{display:grid;gap:10px}
.mgrp{display:grid;gap:4px;border:1px solid var(--color-line);border-radius:var(--radius-card);padding:12px 14px;background:var(--color-paper);text-decoration:none;color:var(--color-ink)}
.mgrp .h{display:flex;justify-content:space-between;align-items:baseline}
.mgrp .h b{font:700 18px var(--font-ui)}.mgrp.trap .h b{color:var(--st-trap)}.mgrp.lucky .h b{color:var(--st-lucky)}.mgrp.gap .h b{color:var(--st-gap)}
.mgrp .fr{display:flex;align-items:center;gap:6px;font-size:24px;color:var(--color-ink)}
.mgrp p{margin:0;font-family:var(--font-ui);font-weight:500;font-size:16px;line-height:1.45;color:var(--grey)}.mgrp small{font:600 16px/1.4 var(--font-ui);color:var(--color-ink)}
.redo{display:grid;gap:6px;position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));background:var(--color-paper);padding:8px 0}
.redo .fine{margin:0;text-align:center}
/* plan */
.days{display:grid;grid-template-columns:repeat(9,1fr);gap:0;margin:0 -16px}
.dcol{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:0;border:0;background:none;font:600 16px var(--font-ui);color:var(--grey)}
.days i{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font:500 16px var(--font-ui);font-variant-numeric:tabular-nums;border:1.5px solid var(--edge);color:var(--color-ink)}
.days i.done{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}
.days i.today{border:2.5px solid var(--color-ink)}.days i.mock{border-style:dashed}
.dayc{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:12px 14px;display:grid;gap:4px;background:var(--color-paper)}
.dayc.today{border:2px solid var(--color-ink)}
.dayc .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;list-style:none}
.dayc .h::-webkit-details-marker{display:none}
.dayc .h b{font:700 17px var(--font-ui)}.dayc .h span{font:600 16px var(--font-ui);color:var(--grey);white-space:nowrap}
.dayc p{margin:0;font-size:16px;line-height:1.45;color:var(--grey)}
details.dayc summary{min-height:48px;display:flex;align-items:center}
.unit{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;min-height:56px;padding:8px 0;border-top:1px solid var(--color-line);text-decoration:none;color:var(--color-ink)}
.unit b{font:600 16px/1.3 var(--font-ui)}
.unit small{grid-column:2;font:600 16px/1.35 var(--font-ui);color:var(--grey)}
.unit .go{grid-row:1/3;grid-column:3;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:24px;text-decoration:none;color:var(--grey)}
details.more{border-top:1px solid var(--color-line);width:100%}details.more summary{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;font:600 16px var(--font-ui);color:var(--color-ink);list-style:none}details.more summary::-webkit-details-marker{display:none}
details.more summary:after{content:"";width:8px;height:8px;border-right:2px solid var(--grey);border-bottom:2px solid var(--grey);transform:rotate(45deg);margin-right:4px}details.more[open] summary:after{transform:rotate(-135deg)}
.unit .chk{grid-row:1/3}
.unit.done b{color:var(--grey)}
.chk{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;color:var(--color-paper)}
.chk:not(.on)::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--color-ink-ghost)}
.chk.on{background:var(--color-ink)}
.dayc .btn{margin-top:6px;justify-self:start}
/* states */
.errbox{margin-top:10%;display:grid;gap:12px}
.errbox .ic2{display:grid;place-items:center;width:52px;height:52px;color:var(--grey)}
/* sheets */
.field-set{display:grid;gap:6px}
.field-set .mut{font-size:16px}
.sheet input[type=date]{font:16px var(--font-ui);padding:10px;border-radius:var(--radius-control);border:1.5px solid var(--edge);background:var(--color-paper-warm);color:var(--color-ink);min-height:48px}
.langsw{display:inline-flex;border:1.5px solid var(--edge);border-radius:var(--radius-control);overflow:hidden;width:max-content}
.langsw button{border:0;background:var(--color-paper);padding:6px 16px;min-height:48px;font:600 16px var(--font-ui)}
.langsw button+button{border-left:1.5px solid var(--edge);font-family:var(--font-telugu-ui)}

.sel-ui{font:16px var(--font-ui);padding:10px;border-radius:var(--radius-control);border:1.5px solid var(--edge);background:var(--color-paper-warm);color:var(--color-ink);width:100%;margin-top:6px;min-height:48px}
.row.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.row.nums .btn{font-variant-numeric:tabular-nums;font-family:var(--font-ui);border:1.5px solid var(--edge)}
#lang-chooser .sheet{gap:14px}
#lang-chooser h2{display:grid;gap:6px;font-size:22px}#lang-chooser .sub-en{font:600 16px var(--font-ui);color:var(--grey)}
.lc-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bfoot.in-sheet{border-top:1px solid var(--color-line)}
#save-status{position:static;margin-bottom:8px}
.review-note{margin:0}
@media(max-width:420px){main.wrap{padding:16px}.sbar{margin-left:-16px;margin-right:-16px}}

body[data-view=run] main.wrap{min-height:100vh}
.practice{flex:1}
.practice .sbar{margin-top:auto}
.colh h2{color:var(--color-ink)}

.sheet .mut,.field-set .mut,#bld .mut{font-family:var(--font-ui)}
#bld b,#bld label{font-family:var(--font-ui)}
#bld [data-m]{width:100%;justify-content:flex-start}
.qdots.one i,.qdots.one i.held,.qdots.one i.cur:not(.solid):not(.lucky):not(.trap):not(.gap){background:var(--grey);box-shadow:none}
.tbar .top .fr .mono{color:inherit}
:root{--grey:color-mix(in srgb,var(--color-ink-2) 78%,var(--color-ink))}

/* ===== v3: simple and readable for 35+, and a real desktop. Tokens only. Phone below 700px, tablet 700 to 1023px, desktop 1024px and up. ===== */
main.wrap{--gut:16px}
body{line-height:1.6}
/* reading text: rem so the browser's own text size and zoom both work. Large is the default. */
.question .stem,.review-item .stem{font-size:calc(var(--reading-size,1.25rem) + .125rem);line-height:1.55}
.opt{font-size:var(--reading-size,1.25rem);line-height:1.5;min-height:56px;padding:14px;gap:12px}
.opt b{font-size:1rem;min-width:36px}
.opt .option-note,.language-note{font-size:1rem}
.td li,.td li .reason,.verdict p,.whyx,.dayc p,.promo2 p,.dialog p,.fine,.topline,.mgrp p,.sheet .mut,.field-set .mut,.intro p{font:400 1.125rem/1.6 var(--font-body)}
.td li .reason{color:var(--grey)}
.td li b,.whyx b{font-size:1rem}
.mut{font-size:1.125rem}
.arow .rt b{font:500 1.125rem/1.5 var(--font-body)}
.rt b,.subr b,.tbar .top,.unit b,.mgrp .h b{font-size:1.0625rem}
.rt small,.unit small,.rt b+small{font-size:1rem}
.verdict .st{font-size:1.25rem}
.chip2{min-height:52px;font-size:1.125rem}
.conf .lbl{font-size:1rem}
.btn{font-size:1.0625rem}
.btn.pri,.btn.cta{font-size:1.125rem;font-weight:700}
.btn.cta{min-height:52px}
.sbar{margin:10px calc(-1*var(--gut)) 0;padding-left:var(--gut);padding-right:var(--gut)}
.sbar .btn{min-height:56px;font-size:1.125rem}
.sbar #prev{min-width:104px}
.sbar.three{grid-template-columns:1fr 1fr}.sbar.three .pri{grid-column:1/-1}
.sbar.three .btn svg,.sbar .btn svg{flex:none}
.sbar.three .btn{gap:8px}
#advance:disabled{font-size:1.0625rem;min-height:56px}
/* visible text labels on controls that were icon-only */
.hpush{flex-direction:column;gap:2px;align-items:flex-start}
.hpush .bk{display:inline-flex;align-items:center;gap:4px;width:auto;height:auto;min-height:48px;padding:0 14px 0 6px;margin:-8px 0 0 -8px;font:600 1.0625rem var(--font-ui);border-radius:var(--radius-control)}
.hpush .ht{min-width:0}
.hpush h1{font-size:1.625rem}
.qtop .x,.htop .x{display:inline-flex;align-items:center;gap:4px;width:auto;min-height:48px;padding:0 12px 0 6px;margin-left:-8px;color:var(--color-ink);font:600 1.0625rem var(--font-ui)}
.qtop .tt,.htop .tt{font-size:1rem}
.qtop .tt{white-space:normal;overflow:visible}
.here{font-size:1rem;color:var(--color-ink)}
.here .ok{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--fill);color:var(--on-fill)}
.here .ok svg{width:10px;height:10px}
.tabbar a{font-size:1rem}
.sheet h2,.dialog h2{font-size:1.5rem}
.sheet label{font-size:1.0625rem}
.sel-ui,.sheet select,.sheet textarea,.sheet input[type=date]{font-size:1.0625rem}
.setsz{display:flex;gap:8px;flex-wrap:wrap}.setsz .btn{flex:1 1 90px}
/* clutter and helpers moved out of inline styles */
.pg{display:flex;flex-direction:column;gap:14px;min-width:0}
.sech{font-size:1.375rem;margin:16px 0 4px}.sech2{margin-top:24px}.secp{margin:0 0 8px}
.setlist{display:grid;gap:10px}
.setcard{align-items:center}.setname{flex:1;min-width:200px}.setname .mut{font-size:1rem}
.mockgrid .card .mm{margin:4px 0 10px;font-size:1rem}
.mockgrid .card .btn{text-decoration:none}
#bld{display:grid;gap:18px}#bld .row.nums{margin-top:6px}#bld .styles{margin-top:6px}#bld .bnote{font-size:1rem;margin-top:6px}
#bld label{display:block}
.tbars{display:grid;gap:0}
.daylist{display:grid;gap:12px}
.rhead,.rgrid,.rleft,.rright,.rfoot{min-width:0}
.rgrid{display:flex;flex-direction:column;gap:14px}.rleft{display:flex;flex-direction:column;gap:14px}.rright{display:flex;flex-direction:column;gap:12px}.rfoot{display:flex;flex-direction:column;gap:14px}
/* first-time explanation of the four words */
.intro{display:grid;gap:12px;border:1px solid var(--color-line);border-radius:var(--radius-card);padding:16px;background:var(--color-paper-warm)}
.intro h2{font:700 1.25rem/1.25 var(--font-heading)}
.intro p{margin:0}
.intro ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.intro li{display:flex;gap:12px;align-items:flex-start}
.intro li .g{flex:none;width:24px;text-align:center;font:700 1.125rem/1.4 var(--font-ui)}
.intro li .rt b{font:700 1.0625rem/1.4 var(--font-ui);color:inherit}
.intro li .rt small{font:400 1.0625rem/1.5 var(--font-body);color:var(--color-ink)}
.intro .btn{justify-self:start;min-width:120px}
#feedback .intro{margin-bottom:4px}
/* question layout: one column on phone and tablet, two on desktop */
.qlayout{flex:1;display:flex;flex-direction:column;min-width:0}
.qmain{flex:1;display:flex;flex-direction:column;gap:14px;min-width:0}
.side,.kbhint{display:none}
.sidepal button{font:600 1rem var(--font-ui);display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:0 4px}
.sidepal button.c{box-shadow:0 0 0 2px var(--color-paper),0 0 0 4px var(--color-ink)}
.sidepal button.solid{color:var(--st-solid);border-color:var(--st-solid)}.sidepal button.lucky{color:var(--st-lucky);border-color:var(--st-lucky)}.sidepal button.trap{color:var(--st-trap);border-color:var(--st-trap)}.sidepal button.gap{color:var(--st-gap);border-color:var(--st-gap)}
.sidepal button.held{border-style:dashed;color:var(--grey)}
.side-h{font:700 1.25rem var(--font-heading)}.side-n{font:600 1.0625rem var(--font-ui)}.side-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font:600 1rem var(--font-ui);color:var(--grey)}
.side .fsk{font-size:1rem}
.side .pkey2{font-size:1rem}
/* focus and hover, for keyboard and mouse */
:focus-visible{outline:3px solid var(--color-ink);outline-offset:3px;border-radius:var(--radius-tag)}
.opt:focus-visible,.chip2:focus-visible,.btn:focus-visible{outline-offset:2px}
#tabs .rail-logo,#tabs .rail-set{display:none}
@media(hover:hover){
 .btn:not(:disabled):not(.pri):hover,.chip2:hover,.fchips button:hover,.stabs button:hover,.sidepal button:hover,:is(.pal3,.sidepal) button:hover{background:var(--color-paper-deep)}
 .btn.pri:not(:disabled):hover{filter:brightness(.92)}
 .opt:not(:disabled):hover{border-color:var(--color-ink);background:var(--color-paper-warm)}
 .row2:hover,.unit:hover,.subr:hover,.mgrp:hover,.tabbar a:hover,.arow:hover,summary:hover,.here:hover{background:var(--color-paper-warm)}
 .linkbtn:hover,.hpush .bk:hover,.qtop .x:hover,.htop .x:hover{color:var(--color-ink);background:var(--color-paper-warm)}
}
/* tablet */
@media(min-width:700px){
 main.wrap{--gut:24px;max-width:760px;padding:24px}
 header.top .wrap{max-width:760px;padding:16px 24px 0}
 .tabs-in{max-width:760px}
 .pg-practice .rows,.setlist,.tbars,.daylist{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-practice .rows{display:grid;gap:12px}
 .daylist>#day-1{grid-column:1/-1}.daylist{align-items:start}
 .days{margin:0}
 #bld{padding:20px;border:1px solid var(--color-line);border-radius:var(--radius-section);background:var(--color-paper-warm)}
 .pg-build{max-width:640px;width:100%;margin:0 auto}
 .sheet-back{align-items:center;padding:24px}
 .sheet{border-radius:var(--radius-section);max-width:560px}
 .mgrps{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
 .row2{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:14px 16px;background:var(--color-paper)}
 .rows .row2:first-child{border-top:1px solid var(--color-line)}
 .pg-practice .rows{gap:12px}
 .nsteps .row2,.nsteps .row2:first-of-type{border:0;border-top:1px solid var(--color-line);border-radius:0;padding:9px 0;background:none}
 .nsteps .row2:first-of-type{border-top:0}
 .tbars>.tbar{border:1px solid var(--color-line);border-radius:var(--radius-card);padding:16px;background:var(--color-paper)}
 .tbars>.tbar:first-child{border-top:1px solid var(--color-line)}
 .rgrid .tbar{border:0;border-top:1px solid var(--color-line);padding:10px 0;border-radius:0}
}
/* desktop */
@media(min-width:1024px){
 body{display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto 1fr;max-width:1120px;margin:0 auto;padding-bottom:0;min-height:100vh}
 body[data-view=run]{grid-template-columns:minmax(0,1fr)}
 header.top{display:none}
 #tabs{grid-column:1;grid-row:1/span 2;position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;display:flex;flex-direction:column;gap:12px;padding:28px 16px 24px;border-top:0;border-right:1px solid var(--color-line);z-index:2}
 body[data-view=run] #tabs{display:none}
 #tabs .rail-logo{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px 12px;text-decoration:none;color:var(--color-ink)}
 .rail-logo .mk{width:28px;height:27px}.rail-logo .wm{font-size:1.375rem}.rail-logo .ex{font:700 1rem var(--font-ui);letter-spacing:.08em}
 .tabs-in{display:flex;flex-direction:column;gap:6px;max-width:none;margin:0}
 .tabbar a{flex-direction:row;justify-content:flex-start;gap:14px;min-height:52px;padding:0 14px;border-radius:var(--radius-control);font-size:1.125rem}
 .tabbar a.on{background:var(--color-paper-deep)}
 .tabbar svg{width:24px;height:24px;flex:none}
 #tabs .rail-set{display:flex;align-items:center;gap:14px;margin-top:auto;min-height:52px;padding:0 14px;border:0;border-top:1px solid var(--color-line);border-radius:0 0 var(--radius-control) var(--radius-control);background:none;color:var(--color-ink);font:600 1.125rem var(--font-ui);text-align:left;width:100%}
 .rail-set svg{width:24px;height:24px;flex:none;color:var(--grey)}
 main.wrap{grid-column:2;grid-row:1/span 2;--gut:0px;max-width:none;width:100%;margin:0;padding:36px 40px 56px;gap:18px}
 body[data-view=run] main.wrap{grid-column:1;padding:28px 40px 32px}
 #save-status{grid-column:1/-1}
 h1.rootT{font-size:2rem}
 /* Today */
 .pg-today{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:18px 24px;align-items:start}
 .pg-today>.rootT{grid-column:1/-1}
 .pg-today>.next{grid-column:1;grid-row:2/span 3}
 .pg-today>.count{grid-column:2;grid-row:2}
 .pg-today>.revisit{grid-column:2;grid-row:3}
 .pg-today>.fine{grid-column:2;grid-row:4;margin:0}
 .pg-today .card2.next{padding:24px}.pg-today .card2.next h2{font-size:1.625rem}
 .pg-today .next .btn.cta{width:auto;min-width:260px}
 /* grids */
 .pg-practice .rows{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pg-practice .rows .row2{min-height:84px}
 .setlist,.daylist,.tbars{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mgrps{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
 .redo{position:static;max-width:420px}
 .pg-build{max-width:640px}
 /* result: summary left, answers right */
 .rgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"l r" "f r";gap:20px 40px;align-items:start}
 .rleft{grid-area:l}.rright{grid-area:r}.rfoot{grid-area:f}
 .score .mono{font-size:3.25rem}
 /* question: two columns */
 .qlayout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;flex:none}
 .qmain{max-width:760px}
 .side{display:flex;flex-direction:column;gap:14px;position:sticky;top:28px;border:1px solid var(--color-line);border-radius:var(--radius-card);padding:18px;background:var(--color-paper)}
 .qdots,#pal-open,.htop .clock2{display:none}
 .sbar,.sbar.three{margin:12px 0 0;padding:14px 0 18px;grid-template-columns:auto 1fr;box-shadow:none}
 .sbar.three .pri{grid-column:auto}
 .practice .qtop,.practice .htop{margin-bottom:6px}
 .qtop .tt,.htop .tt{font-size:1.0625rem}
 .htop .tt{font-size:1.125rem}
 .stabs{max-width:560px}
 .days{max-width:640px}
 .count .num{font-size:3rem}
}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){
 .kbhint{display:block;margin:0;font:500 1rem/1.5 var(--font-ui);color:var(--grey);border-left:3px solid var(--color-line);padding-left:12px}
}
@media(max-width:699px){
 .sheet-back{padding:0}
}
.rail-logo .ex,.logo .ex{white-space:nowrap}
.opt{align-items:baseline}.opt b{padding-top:0}
.side .pkey2{grid-template-columns:1fr}
.ico{background:var(--color-paper-warm);border:1px solid var(--color-line)}
@media(max-width:350px){.logo .ex{display:none}.here{padding:3px 10px 3px 8px}}
:root[data-theme=dark]{--fill:var(--color-emerald);--on-fill:var(--color-night)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--fill:var(--color-emerald);--on-fill:var(--color-night)}}
:root[data-theme=dark] .btn.pri{color:var(--color-night)}
@media(max-width:380px){.days i{width:32px;height:32px}}
.tbars{grid-template-columns:minmax(0,1fr)}.tbar .top{flex-wrap:wrap}.tbar .top .fr{white-space:normal}
@media(min-width:700px){.tbars,.pg-practice .rows,.setlist,.daylist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:700px){.tbars{gap:12px}}