@font-face{font-family:'Figtree';src:url('fonts/Figtree.ttf');font-weight:100 900;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond.ttf');font-weight:400 800;font-display:swap}
@font-face{font-family:'EB Garamond';font-style:italic;src:url('fonts/EBGaramond-Italic.ttf');font-weight:400 800;font-display:swap}
@font-face{font-family:'Lexend';src:url('fonts/Lexend.ttf');font-weight:100 900;font-display:swap}
@font-face{font-family:'Google Sans Code';src:url('fonts/GoogleSansCode.ttf');font-weight:300 800;font-display:swap}

/* ClaraVoca UI 1.22 (file name kept as clarity-ui.css until the build renames paths) - one component sheet for every page, the Reader and pop-ups.
   Theme: add .light to .app (dark is default). Fonts: --app-font / --heading-font follow the user's choice. */
.app{--bg:#191714;--side:#14120f;--card:#221f1b;--raised:#2b2721;--input:#1d1a16;--ink:#e8e2d4;--head:#f0e9da;--sub:#b3aa96;--desc:#a39a86;--ctrl:#7a7262;--hair:rgba(232,226,212,.09);--acc:#d99a55;--acct:#e6a866;--accfg:#191714;--sel:#2a2419;--ok:#7cc47a;--warn:#e6b45c;--err:#e8907f;--word:#f5eee0;
  --off:#7cc47a;--offbg:rgba(124,196,122,.12);--speech:#8fb6e8;--speechbg:rgba(143,182,232,.13);--ai:#f2c14e;--aibg:rgba(242,193,78,.13);--pro:#c9a4f0;--probg:rgba(201,164,240,.14);
  --shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --app-font:'Figtree','Segoe UI',sans-serif;--heading-font:'EB Garamond',serif;--read-font:'Lexend',sans-serif;--mono:'Google Sans Code',monospace;
  box-sizing:border-box;background:var(--bg);color:var(--ink);font-family:var(--app-font);font-size:14px;line-height:1.5;display:flex;overflow:hidden}
.app.light{--bg:#f5edda;--side:#efe4c9;--card:#fdf8ec;--raised:#f4ead7;--input:#fffdf6;--ink:#3d3427;--head:#2e2619;--sub:#6b604f;--desc:#6e634f;--ctrl:#9e8d70;--hair:rgba(61,52,39,.12);--acc:#ea7a2a;--acct:#a14f12;--accfg:#1f1406;--sel:#fbe6cc;--ok:#3a7034;--warn:#8a5a00;--err:#a33a2a;--word:#3d3427;
  --off:#2f6b2c;--offbg:rgba(47,107,44,.1);--speech:#2f5d93;--speechbg:rgba(47,93,147,.1);--ai:#8a5a00;--aibg:rgba(201,146,26,.16);--pro:#6b3fa0;--probg:rgba(107,63,160,.1);--shadow:0 18px 40px -20px rgba(61,52,39,.35)}
.app *,.app *::before,.app *::after{box-sizing:border-box}
.app.big .main{zoom:2}.app.big .side{width:64px;padding:16px 8px}.app.big .side .brand small,.app.big .side .wm,.app.big .nav a span,.app.big .nav a .k,.app.big .side-foot{display:none}
/* ---- layout ---- */
.side{width:220px;flex:none;background:var(--side);border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:18px;padding:20px 12px 16px}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
.brand small{display:block;font-size:12px;color:var(--desc);margin-top:2px;white-space:nowrap}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 10px;border-radius:10px;color:var(--sub);font-weight:500;text-decoration:none}
.nav a svg{flex:none}
.nav a.on{background:var(--sel);box-shadow:inset 0 0 0 1px var(--acc);color:var(--head);font-weight:600}
.nav a .k{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--desc)}
.side-foot{margin-top:auto;border-top:1px solid var(--hair);padding:12px 8px 0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--desc)}
.main{flex:1;min-width:0;padding:26px 36px 36px;display:flex;flex-direction:column;gap:16px;overflow:hidden}
.col{max-width:860px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.stack{display:flex;flex-direction:column;gap:10px}.line{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.grow{flex:1;min-width:0}
/* ---- type ---- */
.ph{display:flex;align-items:flex-start;gap:16px}
.ph .t{flex:1;min-width:0}
.h1{margin:0;font-family:var(--heading-font);font-weight:400;font-size:34px;line-height:1.15;color:var(--head)}
.lede{margin:4px 0 0;color:var(--sub);max-width:62ch}
.sec{margin:0;font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--desc)}
.ct{margin:0;font-size:16px;font-weight:650;color:var(--head)}
.desc{margin:0;font-size:13.5px;color:var(--desc)}
.sub{color:var(--sub)}
.read{font-family:var(--read-font);font-size:17px;line-height:1.9;color:var(--ink)}
/* ---- surfaces ---- */
.card{background:var(--card);border:1px solid var(--hair);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.card.tight{padding:14px 16px;gap:8px}
.card.sel{border:2px solid var(--acc);background:var(--sel)}
.well{background:var(--raised);border-radius:12px;padding:12px 14px}
.hr{height:1px;background:var(--hair);margin:2px 0}
/* ---- controls ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--ctrl);background:transparent;color:var(--ink);font:inherit;font-weight:550;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--accfg);font-weight:650}
.btn.text{border-color:transparent;color:var(--acct);padding:0 8px;font-weight:600}
.btn.quiet{border-color:transparent;color:var(--sub)}
.btn.danger{border-color:var(--err);color:var(--err)}
.btn.sm{min-height:34px;padding:0 12px;font-size:13.5px}
.btn.icon{width:40px;padding:0}
.btn:disabled,.btn.off{opacity:.45;cursor:not-allowed}
.btn.big{min-height:48px;padding:0 24px;font-size:15px}
.kbd{display:inline-flex;gap:3px}.kbd kbd{font-family:var(--mono);font-size:12px;padding:2px 7px;border-radius:7px;border:1px solid var(--ctrl);border-bottom-width:2px;background:var(--input);color:var(--ink)}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.lbl{font-weight:600;color:var(--head);font-size:14px}
.input,.select,.textarea{font:inherit;color:var(--ink);background:var(--input);border:1px solid var(--ctrl);border-radius:10px;min-height:42px;padding:0 12px;width:100%}
.select{appearance:none;padding-right:34px;background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.textarea{padding:12px 14px;min-height:120px;resize:vertical;line-height:1.7}
.seg{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--raised)}
.seg button{min-height:34px;padding:0 14px;border-radius:999px;border:0;background:transparent;color:var(--sub);font:inherit;font-weight:600;cursor:pointer}
.seg button.on{background:var(--acc);color:var(--accfg)}
.switch{width:50px;height:28px;flex:none;border-radius:999px;border:0;padding:3px;background:var(--ctrl);display:flex;justify-content:flex-start;cursor:pointer}
.switch::after{content:'';width:22px;height:22px;border-radius:50%;background:#fdf8ec;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch.on{background:var(--acc);justify-content:flex-end}
.check{display:inline-flex;align-items:center;gap:10px;font-weight:550;cursor:pointer}
.check i{width:22px;height:22px;border-radius:7px;border:2px solid var(--ctrl);flex:none;display:grid;place-items:center}
.check.on i{background:var(--acc);border-color:var(--acc)}
.check.on i::after{content:'';width:10px;height:5px;border-left:2.5px solid var(--accfg);border-bottom:2.5px solid var(--accfg);transform:rotate(-45deg) translate(1px,-1px)}
.rcards{display:grid;gap:10px}
.rc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:13px 15px;border-radius:14px;border:1px solid var(--ctrl);background:var(--input);color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.rc b{color:var(--head)}
.rc.on{border:2px solid var(--acc);background:var(--sel)}
.rc .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--ctrl)}
.rc.on .dot{border:5px solid var(--acc)}
.slider{display:flex;align-items:center;gap:12px}
.slider .trk{flex:1;height:6px;border-radius:3px;background:var(--raised);position:relative}
.slider .trk b{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--acc)}
.slider .trk i{position:absolute;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px var(--bg)}
.slider .v{font-family:var(--mono);font-size:12.5px;color:var(--sub);min-width:46px;text-align:right}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--ctrl);border-radius:999px;overflow:hidden}
.stepper button{width:38px;height:38px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:18px;cursor:pointer}
.stepper span{min-width:52px;text-align:center;font-family:var(--mono);font-size:13px}
.tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--hair);padding-bottom:10px}
.tabs button,.tabs a{min-height:38px;padding:0 15px;border-radius:999px;border:0;background:transparent;color:var(--sub);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.tabs .on{background:var(--sel);color:var(--head);box-shadow:inset 0 0 0 1px var(--acc)}
.search{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--ctrl);background:var(--input);color:var(--desc)}
/* ---- settings row ---- */
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:18px;padding:13px 0;border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row .rt{flex:1;min-width:0}.row .rt b{display:block;color:var(--head);font-weight:600}.row .rt span{display:block;font-size:13.5px;color:var(--desc)}
.row .rc2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.app.narrow .row{flex-direction:column;align-items:stretch;gap:10px}.app.narrow .row .rc2{justify-content:flex-start}
/* ---- badges, status ---- */
.badge{display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.badge svg{flex:none}
.b-off{color:var(--off);background:var(--offbg)}.b-speech{color:var(--speech);background:var(--speechbg)}.b-ai{color:var(--ai);background:var(--aibg)}.b-pro{color:var(--pro);background:var(--probg)}
.status{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650}
.status::before{content:'';width:9px;height:9px;flex:none;border-radius:50%;background:currentColor}
.st-ok{color:var(--ok)}.st-warn{color:var(--warn)}.st-err{color:var(--err)}.st-idle{color:var(--desc)}
.st-warn::before{border-radius:2px;transform:rotate(45deg)}.st-err::before{border-radius:1px}
.st-busy::before{background:transparent;border:2px solid currentColor;border-right-color:transparent}
.st-busy{color:var(--acct)}
.notice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:var(--raised);border-left:0}
.notice .ni{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--sel)}
.notice.warn .ni{background:rgba(230,180,92,.16)}.notice.err .ni{background:rgba(232,144,127,.16)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:28px 20px;color:var(--sub)}
.empty .ei{width:52px;height:52px;border-radius:16px;background:var(--raised);display:grid;place-items:center}
.progress{height:8px;border-radius:4px;background:var(--raised);overflow:hidden}.progress b{display:block;height:100%;background:var(--acc);border-radius:4px}
/* ---- writing marks ---- */
.m-spell{text-decoration:underline wavy var(--err);text-decoration-thickness:1.5px;text-underline-offset:5px}
.m-mean{text-decoration:underline dotted var(--ai);text-decoration-thickness:2.5px;text-underline-offset:5px}
.m-cur{background:var(--sel);box-shadow:0 0 0 2px var(--acc);border-radius:4px}
del.d{color:var(--err);text-decoration:line-through;text-decoration-thickness:2px}
ins.d{color:var(--ok);text-decoration:none;font-weight:700;background:var(--offbg);border-radius:4px;padding:0 3px}
.hl-gold{background:rgba(242,193,78,.42);border-radius:3px}.hl-blue{background:rgba(143,182,232,.4);border-radius:3px}.hl-green{background:rgba(124,196,122,.38);border-radius:3px}
.predict{display:inline-flex;gap:4px;padding:5px;border-radius:14px;background:var(--card);border:1px solid var(--ctrl);box-shadow:var(--shadow)}
.predict span{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 6px 0 10px;border-radius:10px;font-family:var(--read-font);font-size:15px}
.predict span.on{background:var(--sel)}
.predict em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--desc)}
.predict button{width:26px;height:26px;border-radius:8px;border:0;background:transparent;color:var(--sub);display:grid;place-items:center;cursor:pointer}
/* ---- overlays ---- */
.scrim{position:absolute;inset:0;background:rgba(10,9,8,.6)}
.dialog{position:absolute;background:var(--card);border:1px solid var(--hair);border-radius:20px;box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.pop{position:absolute;background:var(--card);border:1px solid var(--ctrl);border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.toast{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--card);border:1px solid var(--acc);box-shadow:var(--shadow)}
.drawer{width:340px;flex:none;background:var(--card);border-left:1px solid var(--hair);display:flex;flex-direction:column}
.focus-ring{outline:3px solid var(--acc);outline-offset:3px}
@media (prefers-reduced-motion: reduce){.app *{animation:none!important;transition:none!important}}
.app.narrow .ph{flex-direction:column;align-items:stretch}.app.narrow .ph .line{justify-content:flex-start}.app.narrow .grow{min-width:160px}
.app.narrow .grid2,.app.narrow .grid3,.app.narrow .grid4,.app.narrow .split,.app.narrow .rcards{grid-template-columns:1fr!important}
.app.narrow .notice{flex-wrap:wrap}

/* ---- ClaraVoca logo (claravoca_logo.py) ---- */
.app{--cv1:#f7d77a;--cv2:#f2c14e;--cv3:#e6a24e}.app.light{--cv1:#9a6400;--cv2:#b07812;--cv3:#c98a12}
.cv-logo{display:inline-flex;flex:none}.cv-l{display:none}.app.light .cv-l{display:inline-flex}.app.light .cv-d{display:none}
.cv-word{font-family:'Figtree','Segoe UI',sans-serif;font-weight:800;letter-spacing:-.01em;line-height:1;white-space:nowrap}
.cv-word .cv-a{color:var(--head)}.cv-word .cv-b{background:linear-gradient(90deg,var(--cv1),var(--cv2),var(--cv3));-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- ClaraVoca live mark (claravoca_logo.state_mark) ---- */
.app .cv-live{display:inline-flex}.app .cv-live .band{transform-box:view-box}.app .cv-live .scrib{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.app .cv-live.st-done .hl{stroke:#7cc47a}.app .cv-live.st-done .band rect{fill:#7cc47a}
@media (prefers-reduced-motion: no-preference){
.app .cv-live.st-ready .cv-pulse{transform-box:fill-box!important;transform-origin:50% 100%!important;animation:cv-hello 1.1s cubic-bezier(.3,0,.3,1) .35s 1 backwards!important}
.app .cv-live.st-ready .cv-pulse.d2{animation:cv-hello 1.1s cubic-bezier(.3,0,.3,1) .7s 1 backwards!important}
.app .cv-live.st-read .band{animation:cv-scan 7.2s cubic-bezier(.6,0,.3,1) infinite!important}
.app .cv-live.st-read .cv-pulse{transform-box:fill-box!important;transform-origin:50% 100%!important;animation:cv-res 1.6s cubic-bezier(.3,0,.3,1) -.5s infinite!important}
.app .cv-live.st-read .cv-pulse.d2{animation:cv-res 1.6s cubic-bezier(.3,0,.3,1) -.18s infinite!important}
.app .cv-live.st-write .scrib{animation:cv-scrib 1.8s ease-in-out infinite!important}
.app .cv-live.st-write .pn{transform-box:fill-box!important;transform-origin:50% 100%!important;animation:cv-write 1.8s ease-in-out infinite!important}
.app .cv-live.st-write .hl{transform-box:fill-box!important;transform-origin:left center!important;animation:cv-draw 1.8s ease-in-out infinite!important}
}
.force-motion .cv-live.st-ready .cv-pulse{transform-box:fill-box!important;transform-origin:50% 100%!important;animation:cv-hello 1.1s cubic-bezier(.3,0,.3,1) .35s 1 backwards!important}
.force-motion .cv-live.st-ready .cv-pulse.d2{animation:cv-hello 1.1s cubic-bezier(.3,0,.3,1) .7s 1 backwards!important}
.force-motion .cv-live.st-read .band{animation:cv-scan 7.2s cubic-bezier(.6,0,.3,1) infinite!important}
.force-motion .cv-live.st-read .cv-pulse{transform-box:fill-box!important;transform-origin:50% 100%!important;animation:cv-res 1.6s cubic-bezier(.3,0,.3,1) -.5s infinite!important}
.force-motion .cv-live.st-read .cv-pulse.d2{animation:cv-res 1.6s cubic-bezier(.3,0,.3,1) -.18s infinite!important}
.force-motion .cv-live.st-write .scrib{animation:cv-scrib 1.8s ease-in-out infinite!important}
.force-motion .cv-live.st-write .pn{transform-box:fill-box!important;transform-origin:50% 100%!important;animation:cv-write 1.8s ease-in-out infinite!important}
.force-motion .cv-live.st-write .hl{transform-box:fill-box!important;transform-origin:left center!important;animation:cv-draw 1.8s ease-in-out infinite!important}
@keyframes cv-scan{0%,13%{transform:translate(0,0)}16.7%,30%{transform:translate(0,10px)}33.3%,46%{transform:translate(0,20px)}50%,63%{transform:translate(52px,0)}66.7%,80%{transform:translate(52px,10px)}83.3%,96%{transform:translate(52px,20px)}100%{transform:translate(0,0)}}
@keyframes cv-hello{0%{opacity:.08;transform:translateY(6px) scale(.9)}55%{opacity:1;transform:translateY(-1px)}100%{opacity:1;transform:none}}
@keyframes cv-res{0%{opacity:.12;transform:translateY(5px) scale(.92)}30%{opacity:1;transform:none}62%{opacity:1;transform:translateY(-1px)}100%{opacity:.12;transform:translateY(-4px) scale(1.04)}}
@keyframes cv-scrib{0%{stroke-dashoffset:1;opacity:0}4%{opacity:1}60%{stroke-dashoffset:0;opacity:1}82%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes cv-write{0%,100%{transform:rotate(0)}12%{transform:rotate(-5deg)}26%{transform:rotate(3deg)}40%{transform:rotate(-4deg)}54%{transform:rotate(2deg)}66%{transform:rotate(0)}}
@keyframes cv-draw{0%{transform:scaleX(.15)}70%,100%{transform:scaleX(1)}}

/* ---- sidebar connection lights: NeuroDynamic and LexVoca ---- */
.sf-conn{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--desc);text-decoration:none;border-radius:8px;padding:4px 6px;margin:0 -6px}
.sf-conn:hover{background:var(--raised)}.sf-conn:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.sf-dot{width:9px;height:9px;border-radius:50%;flex:none}.sf-dot.ok{background:var(--ok)}.sf-dot.warn{background:var(--warn);border-radius:2px;transform:rotate(45deg) scale(.9)}
.sf-dot.err{background:var(--err);border-radius:2px}.sf-dot.idle{background:transparent;box-shadow:inset 0 0 0 1.6px var(--ctrl)}
.sf-name{color:var(--sub);font-weight:600}.sf-st{margin-left:auto;white-space:nowrap}

/* ---- prototype shell (not part of the app) ---- */
html,body{height:100%;margin:0}
[hidden]{display:none!important}
body{background:#191714}
#proto{flex-direction:column;height:100%;padding-left:max(0px, env(safe-area-inset-left, 0px));padding-right:max(0px, env(safe-area-inset-right, 0px))}
#proto.light~*,body:has(#proto.light){background:#f5edda}
#bar{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));background:var(--side);border-bottom:1px solid var(--hair);font-size:13px;color:var(--sub);position:relative;z-index:30}
#bar b{color:var(--head)} #bar .tag{font-family:var(--mono);font-size:12px;color:var(--acct)}
#bar select{min-width:0;max-width:min(380px, 70vw)}
#bar .seg button,#bar .btn{min-height:30px}
#bar .note{margin-left:auto;font-size:12px;color:var(--desc)}
#stage{flex:1;min-height:0;position:relative}
#stage .main{overflow:auto}
#stage .dialog{left:50%!important;top:50%!important;transform:translate(-50%,-50%);max-width:calc(100% - 32px)}
.boardwrap{flex:1;min-width:0;overflow:auto}
.board{position:relative;flex:none}
.board.fixed{display:flex}
#reader{position:fixed;left:0;right:0;bottom:0;z-index:20;flex-direction:column;box-shadow:0 -10px 40px rgba(0,0,0,.4)}
#reader[hidden]{display:none!important}
#reader .read{width:780px;max-width:100%!important} /* same wrap as the boards, so line focus lines up */
#index{position:fixed;inset:0;z-index:40;background:rgba(10,9,8,.6);display:flex;justify-content:center;padding:40px 16px}
#index[hidden]{display:none!important}
#index .card{width:min(900px,100%);max-height:100%;overflow:auto}
#index a{color:var(--acct);text-decoration:none} #index a:focus-visible,#index a:hover{text-decoration:underline}
#index .cols{columns:2 280px;column-gap:28px} #index .grp{break-inside:avoid;margin-bottom:14px}
#ptoast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:50;max-width:calc(100% - 32px)}
#ptoast[hidden]{display:none!important}
.app button:focus-visible,.app a:focus-visible,.app select:focus-visible,.app input:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
/* below 760 px the sidebar collapses to icons, as the handover says */
.app.compact .side{width:64px;padding:16px 8px}.app.compact .side .brand small,.app.compact .side .wm,.app.compact .nav a span,.app.compact .nav a .k,.app.compact .side-foot{display:none}
.app.compact .main{padding:18px 16px 28px}

/* website tour: hide the design-review bar; the tour page has its own frame */
#bar{display:none!important}