/* Layout concept: a classroom wall; the whole site is one framed chalkboard, sections are notes pinned to it,
   and the calculator and PI-DOS sit on the desk under the board. Dark board is the default; the light theme is a whiteboard. */
:root{
  --wall:#2b2f2c; --frame:#8a6840; --frame-d:#5f4727; --board:#1f3c36; --board-2:#27493f;
  --chalk:#f1efe4; --dim:#b3c1b9; --line:#f1efe466;
  --y:#f6d86b; --p:#f4aec4; --b:#a6d8f0; --g:#b4e6bd; --ink:#16231f;
  --yt:#f6d86b; --pt:#f4aec4; --bt:#a6d8f0; --gt:#b4e6bd;
  --desk:#b48a55; --desk-d:#8d6a3d; --ok:#7fe39a; --bad:#ff8a80;
  --dos-bg:#0a0a0a; --dos-fg:#33ff66; --dos-dim:#1e7a3a;
  --display:"Segoe Print","Bradley Hand","Chalkboard SE","Comic Sans MS","Vazirmatn",Tahoma,sans-serif;
  --body:"Vazirmatn","Vazir","IRANSansX","IRANSans","Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --wall:#d9d5c8; --frame:#a7b0b5; --frame-d:#7d868b; --board:#f8f8f3; --board-2:#ecece3;
  --chalk:#1a2b3d; --dim:#434f5c; --line:#1a2b3d55;
  --y:#fbe38a; --p:#f8c3d3; --b:#bfe3f5; --g:#c6edcc; --yt:#7a5200; --pt:#a0345f; --bt:#165d86; --gt:#1b6a37; --desk:#c9a574; --desk-d:#a58352;
  --ok:#1d8a46; --bad:#c0392b; color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--wall);color:var(--chalk);font-family:var(--body);font-size:16px;line-height:1.75;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.35;margin:0;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.6vw,3rem)} h2{font-size:1.5rem} h3{font-size:1.15rem}
p{margin:0 0 .8em}
.dim{color:var(--dim)} .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
:focus-visible{outline:2px solid var(--y);outline-offset:2px}
.wall{max-width:1140px;margin:0 auto}
.frame{border:12px solid var(--frame);outline:3px solid var(--frame-d);border-radius:6px}
.board{background:var(--board);padding:18px clamp(14px,3vw,28px) 30px;min-height:70vh;min-width:0}
main{outline:none;min-width:0}
main>section{margin-top:34px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-bottom:12px;border-bottom:2px dashed var(--line);position:relative}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-size:1.15rem}
.logo .pi{font-size:2rem;color:var(--yt);line-height:1}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:.95rem}
.nav a{text-decoration:none;padding:2px 6px;border-radius:4px;cursor:pointer}
.nav a:hover,.nav a.on{background:var(--line)}
.tools{display:flex;gap:8px;align-items:center;margin-inline-start:auto;flex-wrap:wrap}
.chip{font:inherit;font-size:.85rem;color:inherit;background:none;border:1.5px solid var(--line);border-radius:999px;padding:2px 12px;cursor:pointer;text-decoration:none;white-space:nowrap}
.chip:hover{background:var(--line)}
.srch{position:relative}
.srch input{width:150px}
#sres{position:absolute;inset-inline-end:0;top:calc(100% + 4px);width:min(300px,80vw);background:var(--board-2);border:2px dashed var(--line);z-index:30;padding:6px}
#sres a{display:block;padding:4px 8px;text-decoration:none;border-radius:4px}#sres a:hover{background:var(--line)}
#sres small{color:var(--dim);margin-inline-start:6px}
@media(max-width:860px){
  .nav{display:none}.tools{margin-inline-start:auto}
}

/* controls */
input,select,textarea,.btn{font:inherit;color:inherit}
input,select,textarea{background:transparent;border:1.5px dashed var(--line);border-radius:6px;padding:6px 10px;min-width:0}
input[type=checkbox]{accent-color:var(--y)}
select{background:var(--board-2)}
textarea{width:100%;min-height:120px}
.btn{background:none;border:2px solid var(--chalk);border-radius:8px;padding:6px 16px;cursor:pointer;text-decoration:none;display:inline-block;line-height:1.5}
.btn:hover{background:var(--line)}
.btn.y{background:var(--y);border-color:var(--y);color:var(--ink)}.btn.y:hover{filter:brightness(1.07)}
.btn.sm{padding:2px 10px;font-size:.9rem}
.pill{display:inline-block;font-size:.8rem;padding:0 10px;border-radius:999px;border:1.5px solid currentColor}
.pill.done{color:var(--ok)} .res{min-height:1.5em;margin-top:8px} .res.ok,.ok{color:var(--ok)} .res.bad,.bad{color:var(--bad)}

/* notes pinned to the board */
.note{--chalk:var(--ink);--line:#16231f66;--dim:#3b4a44;--ok:#14663a;--bad:#a62b20;
  background:var(--y);color:var(--ink);padding:14px 16px;border-radius:2px;box-shadow:3px 4px 0 #0000003d;
  transform:rotate(var(--r,0deg));text-decoration:none;display:block;position:relative}
.note.b{background:var(--b)}.note.p{background:var(--p)}.note.g{background:var(--g)}
a.note:hover{transform:rotate(0) translateY(-2px)}
.note .sym,.bigsym,.phead .sym,.val{direction:ltr;unicode-bidi:isolate;text-align:start}
.note .sym{display:block;font-family:var(--display);font-size:2rem;line-height:1.2}
.note small{display:block;line-height:1.5;margin-top:4px;color:#2c3a35}
.notes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px;margin-top:16px}
.notes .wide{grid-column:span 2}
.notes .soon{opacity:.45;filter:grayscale(.6)}
@media(max-width:420px){.notes .wide{grid-column:span 1}}
.sect{margin-bottom:4px}

/* hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;margin-top:26px}
.eyebrow{font-family:var(--mono);color:var(--yt);letter-spacing:.08em;direction:ltr;text-align:start;margin:0}
.lead{color:var(--dim);max-width:46ch;margin:10px 0 18px}
.hero svg{width:100%;max-width:340px;justify-self:center}
.hero .ring{stroke-dasharray:9 7;animation:spin 40s linear infinite;transform-origin:130px 120px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:760px){.hero{grid-template-columns:1fr}}

.tape{margin-top:30px;overflow:hidden;white-space:nowrap;border-block:2px dashed var(--line);padding:6px 0;font-family:var(--mono);font-size:1.05rem}
.tape span{display:inline-block;animation:slide 60s linear infinite;padding-inline-end:2em}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tape span,.hero .ring{animation:none}.tape{overflow-x:auto}}

.duo{display:grid;grid-template-columns:1.35fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.duo h2{margin-bottom:8px}
.bigsym{font-family:var(--display);font-size:3.4rem;line-height:1}

/* puzzles */
.puz .q{font-size:1.1rem;margin:8px 0}
.puz-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.hints{margin:4px 0;padding-inline-start:1.4em}
.puz .ans{width:120px}
.plist{display:grid;gap:18px;margin-top:16px}

/* desk */
.desk{background:var(--desk);border-top:10px solid var(--desk-d);display:flex;flex-wrap:wrap;gap:22px 34px;align-items:flex-end;justify-content:center;padding:22px 16px;
  margin-inline:calc(-1*clamp(14px,3vw,28px));color:var(--ink)}
.desk-note{max-width:34ch;margin:0;font-family:var(--display)}
.mini-calc{width:96px;background:#26334f;border-radius:8px;padding:7px;display:block;text-decoration:none;transform:rotate(-3deg)}
.mini-calc .lcd{display:block;background:#c9d8b6;color:#1f2a18;font:11px var(--mono);padding:5px 4px;text-align:end;direction:ltr;border-radius:3px}
.mini-calc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:6px}
.mini-calc i{height:11px;background:#44577f;border-radius:2px;display:block}.mini-calc i:nth-child(4n){background:#f59e0b}
.mini-pc{width:130px;display:block;text-decoration:none}
.mini-pc .scr{display:block;background:var(--dos-bg);color:var(--dos-fg);font:11px/1.4 var(--mono);padding:14px 8px;border:5px solid #cfc7b2;border-radius:6px;direction:ltr}
.mini-pc .base{display:block;width:60%;height:10px;background:#cfc7b2;margin:0 auto}
.desk a:hover{filter:brightness(1.08)}

/* page heads, lists */
.phead{display:flex;gap:16px;align-items:center;margin:24px 0 8px;flex-wrap:wrap}
.phead .sym{font-family:var(--display);font-size:3rem;color:var(--yt);line-height:1}
.phead p{margin:0;color:var(--dim)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chips .chip.on{background:var(--chalk);color:var(--board)}
.block{margin-top:26px}.block h2{border-bottom:2px dashed var(--line);padding-bottom:4px;margin-bottom:10px}
.block ul{margin:0;padding-inline-start:1.3em}
.val{font-family:var(--mono);direction:ltr;display:inline-block;color:var(--yt)}
.relrow{display:flex;gap:10px;flex-wrap:wrap}
.quiz .opts{display:grid;gap:8px;max-width:420px}
.quiz button.ok{border-color:var(--ok)}.quiz button.bad{border-color:var(--bad)}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin:16px 0}
.stat div{border:2px dashed var(--line);padding:10px 14px;border-radius:6px}.stat b{display:block;font-size:1.6rem;font-family:var(--display)}
.bar{height:12px;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;margin:8px 0}.bar i{display:block;height:100%;background:var(--y)}
.badges{display:flex;flex-wrap:wrap;gap:10px}.badges .pill{padding:4px 14px}.badges .off{opacity:.4}
.card{border:2px dashed var(--line);border-radius:6px;padding:14px 16px;min-width:0}

/* digits */
.dig{font-family:var(--mono);font-size:clamp(1.05rem,2.6vw,1.5rem);letter-spacing:.06em;direction:ltr;line-height:2;color:var(--chalk);word-spacing:.5em;text-align:start;overflow-wrap:anywhere}
.dig b{color:var(--yt);font-weight:400}
.pt-show{font-family:var(--mono);direction:ltr;font-size:1.3rem;min-height:3.4em;overflow-wrap:anywhere;border:2px dashed var(--line);padding:10px 12px;border-radius:6px;margin:10px 0}
.pt-show .okd{color:var(--ok)}.pt-show .nxt{color:var(--dim)}
.pt-in{width:100%;max-width:520px;font-family:var(--mono);direction:ltr;font-size:1.15rem}

/* games & tools */
.gstage{margin-top:16px}.gstage .big{font-family:var(--display);font-size:2.4rem}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:10px;max-width:560px;margin:14px 0}
.pgrid button{padding:14px 0;font-size:1.2rem;font-family:var(--mono)}.pgrid button.sel{background:var(--y);color:var(--ink);border-color:var(--y)}
.rbox{height:170px;display:grid;place-items:center;border-radius:10px;cursor:pointer;user-select:none;border:2px dashed var(--line);font-size:1.3rem;text-align:center;padding:10px}
.rbox.wait{background:#7a2a2a;color:#fff}.rbox.go{background:#1f8a4c;color:#fff}
.tool .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:10px 0}
.tool label{display:grid;gap:4px;font-size:.9rem;color:var(--dim)}
.tool .out{font-family:var(--mono);direction:ltr;text-align:start;margin:8px 0;color:var(--yt);overflow-wrap:anywhere}
table.tb{border-collapse:collapse;direction:ltr;font-family:var(--mono)}table.tb td,table.tb th{border:1px solid var(--line);padding:3px 12px;text-align:end}
.scroll-x{overflow-x:auto}

/* calculator */
.calc{max-width:420px;margin:16px auto;background:#1b2a4a;border:3px solid #0e1830;border-radius:22px;padding:16px;color:#eaf2f8;direction:ltr}
.calc .lcd{background:#c9d8b6;color:#1f2a18;border:3px solid #0e1830;border-radius:10px;padding:8px 12px;font-family:var(--mono);text-align:end}
.calc .lcd input{width:100%;border:0;background:transparent;text-align:end;font-size:1.05rem;color:#1f2a18;padding:2px 0;direction:ltr}
.calc .lcd .r{font-size:1.9rem;min-height:2.4rem;overflow-wrap:anywhere}
.calc .keys{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}
.calc .keys button{font:inherit;border:0;border-radius:8px;padding:10px 0;background:#3a4d7a;color:#eaf2f8;cursor:pointer}
.calc .keys button.f{background:#2b3d69}.calc .keys button.a{background:#f59e0b;color:#2a1a00}.calc .keys button.d{background:#c23433;color:#fff}.calc .keys button.t{background:#2dd4bf;color:#06302a}
.calc .keys button:hover{filter:brightness(1.12)}
.calc .hist{font-family:var(--mono);font-size:.85rem;color:#9fb0cc;margin-top:10px;min-height:3em}
.calc .top2{display:flex;justify-content:space-between;color:#9fb0cc;font-size:.8rem;margin-bottom:8px}

/* PI-DOS */
.dos{background:var(--dos-bg);color:var(--dos-fg);font-family:var(--mono);font-size:.92rem;line-height:1.6;border:2px solid var(--dos-dim);border-radius:6px;overflow:hidden;margin-top:14px}
.dos-bar{background:var(--dos-dim);color:#0a0a0a;padding:2px 12px;display:flex;justify-content:space-between}
.dos-out{padding:10px 14px;height:min(56vh,460px);overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere}
.dos-out .e{color:#ff6b6b}.dos-out .h{color:#9dffb8}
.dos-in{display:flex;gap:6px;padding:8px 14px;border-top:1px solid var(--dos-dim)}
.dos-in label{white-space:nowrap}.dos-in input{flex:1;border:0;background:transparent;color:var(--dos-fg);font-family:var(--mono);font-size:inherit;padding:0;caret-color:var(--dos-fg)}
.dos-in input:focus-visible{outline:none}

footer{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:.9rem;color:var(--chalk)}
footer a{margin-inline-end:14px}
/* code lab */
.labgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start;margin-top:8px}
@media(max-width:860px){.labgrid{grid-template-columns:minmax(0,1fr)}}
.labgrid h3{margin:0 0 6px;color:var(--dim);font-size:1rem}
.ed{display:grid;grid-template-columns:auto minmax(0,1fr);border:2px dashed var(--line);border-radius:6px;background:#0a0a0a;overflow:hidden;direction:ltr}
.ed .ln{margin:0;padding:10px 8px 10px 10px;color:var(--dos-dim);font:14px/1.6 var(--mono);text-align:right;overflow:hidden;user-select:none}
.ed textarea.code{border:0;border-radius:0;background:transparent;color:var(--dos-fg);font:14px/1.6 var(--mono);padding:10px;white-space:pre;overflow:auto;tab-size:2;width:100%;min-height:0;resize:vertical;caret-color:var(--dos-fg)}
.ed textarea.code:focus-visible{outline:2px solid var(--y);outline-offset:-2px}
.lab-out{height:230px}.lab-out div{display:flex;gap:4px}
.lab-in{flex:1;min-width:6ch;background:transparent;border:0;border-bottom:1px solid var(--dos-dim);border-radius:0;color:var(--dos-fg);font:inherit;padding:0 4px}
.chalkcv{width:100%;max-width:360px;aspect-ratio:1;background:var(--board-2);border:2px dashed var(--line);border-radius:6px;display:block}
.codeb{background:#0a0a0a;color:var(--dos-fg);font:14px/1.6 var(--mono);padding:10px 14px;border:1px solid var(--dos-dim);border-radius:6px;overflow-x:auto;margin:8px 0;white-space:pre}
details.block summary{cursor:pointer;padding:4px 0}
footer .legal{flex-basis:100%;border-top:1.5px dashed var(--line);margin-top:6px;padding-top:10px;font-size:.82rem;color:var(--dim);line-height:1.8}
footer .legal p{margin:0 0 4px}footer .legal b{color:var(--chalk);font-weight:400}
.tline{list-style:none;padding:0!important;margin:0;border-inline-start:2px dashed var(--line);padding-inline-start:14px!important}
.tline li{margin:6px 0}.tline b{color:var(--yt);font-weight:400;margin-inline-end:6px}
.chips .pill{color:var(--dim)}
#toast{position:fixed;inset-inline-start:50%;transform:translateX(-50%) translateY(20px);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--y);color:var(--ink);padding:6px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Formulas & Math School ---------- */
math{direction:ltr;unicode-bidi:isolate;font-size:1.15em;font-family:"STIX Two Math","Cambria Math","Latin Modern Math",serif}
math[display="block"]{display:block math;margin:6px 0}
.fmath{overflow-x:auto;overflow-y:hidden;max-width:100%}
.mm-fallback{display:block;padding:6px 10px;border:1px dashed var(--line);border-radius:6px;overflow-x:auto}
.fbar{margin:12px 0 4px}.fbar input{width:100%;max-width:460px;background:none;border:2px solid var(--line);border-radius:10px;padding:8px 12px}
.fsec{margin-top:22px}.fsec .sect small{font-size:.8rem;color:var(--dim);font-weight:400;margin-inline-start:8px}
.fsec .sect .sym{display:inline-block;min-width:2em;text-align:center;border:1.5px solid var(--line);border-radius:8px;padding:0 6px;margin-inline-end:6px;font-size:.9em}
.fl{display:flex;flex-direction:column;gap:8px}
.fcard{border:1.5px solid var(--line);border-radius:10px;padding:0 12px;background:rgba(255,255,255,.03)}
.fcard[open]{border-color:var(--y)}
.fcard summary{cursor:pointer;padding:9px 0;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.fcard summary .ftex{margin-inline-start:auto;max-width:100%;overflow-x:auto;overflow-y:hidden}
.fbody{padding:0 0 12px}.fbody h4{margin:14px 0 4px;color:var(--yt)}
.fmath{border:1.5px dashed var(--line);border-radius:8px;padding:6px 10px;font-size:1.1rem}
.fvars{display:grid;grid-template-columns:max-content 1fr;gap:3px 14px;margin:0}.fvars dt{font-family:"STIX Two Math","Cambria Math",serif;color:var(--yt)}.fvars dd{margin:0}
.lvp.lv1{color:var(--gt)}.lvp.lv2{color:var(--bt)}.lvp.lv3{color:var(--yt)}.lvp.lv4{color:var(--pt)}
.steps{margin:6px 0;padding-inline-start:1.4em}.fex{margin:10px 0}.exres{margin:6px 0 0}
.ftoolbox{margin-top:14px;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
.tfields{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0}.tfields label{display:flex;align-items:center;gap:6px}
.tfields input,.demo input[type=text],.demo-row input:not([type=range]),.demo-row select,.exr .ans{background:none;border:1.5px solid var(--line);border-radius:8px;padding:4px 8px;color:inherit;width:6.5em;min-width:0}
.tfields input.wide{width:min(18em,100%)}.demo-row input#gfx{width:min(14em,100%)}
.tout{display:flex;flex-wrap:wrap;gap:6px 18px}.tout.bad{color:var(--bad)}
.demo{border:1.5px solid var(--line);border-radius:12px;padding:12px;overflow:hidden}
.demo-row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-bottom:8px}.demo-row label{display:flex;align-items:center;gap:6px}
.demo-row select{background:var(--board);width:auto}
.schcv{display:block;width:100%;max-width:100%;border:1px solid var(--line);border-radius:8px}
.fsvg{display:flex;flex-direction:column;gap:6px;margin:8px 0}.fsum,.secout{margin:6px 0 0;direction:ltr}
.exr{border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}.exr.solved{border-color:var(--ok)}
.exr .q{margin:0 0 8px}.exrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.exrow2{display:flex;gap:8px;margin-top:8px}
.exr .opts{display:flex;flex-wrap:wrap;gap:8px}.exr .btn.ok{border-color:var(--ok)}.exr .btn.bad{border-color:var(--bad);opacity:.6}
.plist2{list-style:none;padding:0;margin:12px 0}.plist2 li{padding:3px 0}
#pres{margin-top:16px}
@media (max-width:560px){.fcard summary .ftex{margin-inline-start:0;flex-basis:100%}.fvars{grid-template-columns:1fr}}
[hidden]{display:none!important}

/* ---------- toolbox skins ---------- */
.card[class*="skin-"]{border-style:solid}
.skin-calc{background:#1b2a4a;border:3px solid #0e1830;border-radius:22px;color:#eaf2f8;max-width:560px;margin-inline:auto;padding:18px}
.skin-calc .tool label{color:#9fb0cc}
.skin-calc input,.skin-calc select{background:#2b3d69;border:0;color:#eaf2f8;border-radius:8px;padding:8px 10px}
.skin-calc .out{background:#c9d8b6;color:#1f2a18;border:3px solid #0e1830;border-radius:10px;padding:10px 14px;font-size:1.5rem;text-align:end;min-height:3.4rem;direction:ltr}
.skin-calc .grid2 input{text-align:end;direction:ltr}
.skin-cal{background:#fbf7ea;color:#1c2420;border:0;border-top:34px solid #d6453d;border-radius:6px 6px 10px 10px;max-width:560px;margin-inline:auto;box-shadow:4px 6px 0 #0000004d;position:relative;padding:18px}
.skin-cal::before{content:"";position:absolute;top:-24px;inset-inline:0;height:14px;background:radial-gradient(circle,#fbf7ea 5px,transparent 6px) 0 0/34px 14px repeat-x}
.skin-cal .tool label{color:#3b4a44}.skin-cal input{background:#fff;border:1.5px solid #cdbfa0;color:#1c2420;border-radius:6px;padding:6px 10px}
.skin-cal .out{font-family:var(--display);font-size:1.35rem;color:#9b2c25;border-bottom:2px dashed #cdbfa0;padding:6px 0;margin-bottom:14px}
.skin-pad{background:#fffdf3 repeating-linear-gradient(transparent 0 31px,#9cc4e0 31px 32px);color:#1c2420;max-width:640px;margin-inline:auto;border:0;border-inline-start:4px solid #e9807a;box-shadow:4px 6px 0 #0000004d;padding:16px 18px;line-height:32px}
.skin-pad textarea{background:transparent;border:0;color:#1c2420;font-family:var(--mono);line-height:32px;min-height:192px;padding:0;resize:vertical}
.skin-pad .out{font-family:var(--mono);color:#8a3b1f;margin-top:10px}
.skin-dice{max-width:620px;margin-inline:auto}
.dicebox{margin-top:22px;border-top:2px dashed var(--line);padding-top:14px}.dicebox h3{margin:0 0 8px}
.dice{display:flex;gap:14px;margin:8px 0}
.die{width:72px;height:72px;background:#fbf7ea;border-radius:14px;box-shadow:inset 0 -4px 0 #00000026,3px 4px 0 #0000004d;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:10px;direction:ltr}
.die i{display:block;margin:auto;width:13px;height:13px;border-radius:50%}.die i.on{background:#1c2420}
.die.shake{animation:shake .14s infinite}
@keyframes shake{0%{transform:rotate(-8deg) translateY(-3px)}50%{transform:rotate(8deg) translateY(2px)}100%{transform:rotate(-4deg)}}
.coin{width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff3b0,#e0b73a 70%);color:#5c4309;display:grid;place-items:center;font:2.4rem var(--display);box-shadow:inset 0 0 0 5px #c9a02b,3px 4px 0 #0000004d;margin:8px 0 12px;direction:ltr}
.coin.flip{animation:flip .6s}
@keyframes flip{0%{transform:rotateY(0)}100%{transform:rotateY(900deg)}}
.skin-abacus{background:transparent;border:0;padding:0;max-width:640px;margin-inline:auto}
.abval{background:#c9d8b6;color:#1f2a18;border:3px solid #0e1830;border-radius:10px;font:2rem var(--mono);text-align:end;padding:6px 14px;margin:8px 0;direction:ltr}
.abacus{background:#8a6840;border:10px solid #5f4727;border-radius:10px;padding:8px 10px;display:grid;gap:4px;margin-bottom:12px;color:#f1efe4}
.arow{display:flex;align-items:center;gap:8px}.apw{width:2.6em;font:.8rem var(--mono);text-align:end;opacity:.8}
.wire{flex:1;display:flex;align-items:center;gap:3px;height:34px;position:relative;min-width:0}
.wire::before{content:"";position:absolute;inset-inline:0;top:50%;height:3px;background:#3a2a15;transform:translateY(-50%)}
.wire .gap{flex:1;min-width:6px}
.bead{position:relative;flex:1 1 0;max-width:34px;min-width:12px;height:26px;border-radius:50%;border:0;background:#d9534f;box-shadow:inset 0 -3px 0 #0003;cursor:pointer;padding:0}
.bead.mid{background:#f6d86b}.bead.on{filter:brightness(.8)}
.bead:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media(max-width:520px){.apw{width:2em}.bead{height:22px}}
.dicebox .out{direction:ltr;text-align:start;min-height:1.6em}
.pc{display:flex;flex-direction:column;gap:3px;min-width:0}.pc .btn{padding:14px 0;width:100%}
.pc .why{font-size:.78rem;color:var(--dim);min-height:1.2em;text-align:center;line-height:1.3;unicode-bidi:plaintext}
.pgrid .btn.m-ok{background:var(--ok);border-color:var(--ok);color:var(--ink)}
.pgrid .btn.m-bad{background:var(--bad);border-color:var(--bad);color:var(--ink)}
.pgrid .btn.m-miss{background:var(--y);border-color:var(--y);color:var(--ink)}
.pgrid .btn.m-none{opacity:.65}

.digcard{padding:14px 16px;overflow-x:auto}
.drow{display:flex;gap:14px;font-family:var(--mono);font-size:clamp(.85rem,2.2vw,1.1rem);line-height:1.9;color:var(--chalk);white-space:nowrap}
.drow i{flex:0 0 3.6em;color:var(--dim,#9db3aa);font-style:normal;text-align:end;font-size:.8em}
.drow b{color:var(--yt);font-weight:400}

.pbar{display:block;height:6px;border-radius:3px;background:#16231f26;margin-top:8px;overflow:hidden}
.pbar i{display:block;height:100%;background:#14663a;border-radius:3px}
.hh{margin:26px 0 0;font-family:var(--display)}
#bq{width:min(100%,360px)}

.mailbox{font-family:var(--mono);font-size:clamp(1.1rem,4vw,1.5rem);border:2px dashed var(--line);border-radius:6px;padding:10px 14px;display:inline-block;max-width:100%;overflow-wrap:anywhere;color:var(--yt)}
#ctt{width:100%;font:inherit;color:inherit;background:transparent;border:1.5px dashed var(--line);border-radius:6px;padding:10px;box-sizing:border-box;resize:vertical}

footer .fl1{display:flex;flex-wrap:wrap;gap:4px 20px}
footer .fl1 a{margin:0;padding:2px 0;text-decoration:none;white-space:nowrap;line-height:2;border-bottom:1.5px dashed transparent}
footer .fl1 a:hover,footer .fl1 a:focus-visible{border-bottom-color:currentColor}
.sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 28px;margin-top:10px}
.sitemap h3{font-size:1.15rem;color:var(--yt);margin-bottom:6px}
.sitemap ul{list-style:none;margin:0;padding:0}
.sitemap li{padding:5px 0;border-bottom:1px dashed var(--line);line-height:1.6}
.sitemap a{text-decoration:none;font-weight:700}
.sitemap a:hover{text-decoration:underline}
.sitemap span{display:block;color:var(--dim);font-size:.88rem}

.menu{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:40;background:var(--board-2);border:2px dashed var(--line);border-radius:6px;padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px 16px;box-shadow:0 10px 30px #0006}
.menu[hidden]{display:none}
.menu h3{font-size:1.05rem;color:var(--yt);margin-bottom:4px}
.menu a{display:block;padding:5px 8px;border-radius:4px;text-decoration:none}
.menu a:hover,.menu a:focus-visible,.menu a.on{background:var(--line)}
#burger{font-weight:700}