:root{
--bg:#f7f6f2;--panel:#ffffff;--panel2:#f0eee8;--ink:#15171c;--muted:#5b6070;--line:#e2dfd6;--line2:#d3cfc4;
--accent:#c2410c;--accent-ink:#fff;--accent-soft:#fdeee5;--link:#1d4ed8;--good:#15803d;--bad:#b91c1c;
--key:#ffffff;--key-ink:#15171c;--key-op:#eceae3;--key-fn:#f3f1eb;--shadow:0 1px 2px rgba(20,20,30,.06),0 4px 16px rgba(20,20,30,.05);
--radius:14px;--font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;
color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
--bg:#0e1014;--panel:#161920;--panel2:#1c2029;--ink:#eef0f4;--muted:#a3a9b7;--line:#262b36;--line2:#323846;
--accent:#f59e0b;--accent-ink:#1a1206;--accent-soft:#2a2112;--link:#8ab4ff;--good:#4ade80;--bad:#f87171;
--key:#1e222b;--key-ink:#eef0f4;--key-op:#262b36;--key-fn:#1a1e26;--shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme=dark]{
--bg:#0e1014;--panel:#161920;--panel2:#1c2029;--ink:#eef0f4;--muted:#a3a9b7;--line:#262b36;--line2:#323846;
--accent:#f59e0b;--accent-ink:#1a1206;--accent-soft:#2a2112;--link:#8ab4ff;--good:#4ade80;--bad:#f87171;
--key:#1e222b;--key-ink:#eef0f4;--key-op:#262b36;--key-fn:#1a1e26;--shadow:0 1px 2px rgba(0,0,0,.4);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--font)}
a{color:var(--link);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;z-index:9}
.skip:focus{left:8px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.narrow{max-width:780px}
.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:60px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.02em}
.brand svg{width:30px;height:30px;flex:none}
.brand b{color:var(--accent)}
.nav{display:flex;gap:2px;margin-left:auto;align-items:center}
.nav a{color:var(--ink);text-decoration:none;padding:7px 11px;border-radius:9px;font-weight:600;font-size:15px}
.nav a:hover,.nav a[aria-current=page]{background:var(--panel2)}
.iconbtn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;width:38px;height:38px;display:inline-grid;place-items:center;cursor:pointer;font:inherit}
.iconbtn:hover{background:var(--panel2)}
.iconbtn svg{width:18px;height:18px}
@media (max-width:720px){
.top .wrap{flex-wrap:wrap;gap:6px 10px;padding-top:8px;padding-bottom:6px}
.nav{order:3;width:100%;margin:0 -4px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap;font-size:14px;padding:6px 10px}
.top .tools{margin-left:auto}
}
main{padding:22px 0 40px}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 6px}
.crumbs a{color:var(--muted)}
.crumbs span[aria-hidden]{margin:0 6px}
h1{font-size:clamp(28px,4.6vw,40px);line-height:1.15;letter-spacing:-.02em;margin:4px 0 10px}
h2{font-size:23px;line-height:1.25;letter-spacing:-.01em;margin:34px 0 10px}
h3{font-size:18px;margin:22px 0 6px}
.lede{font-size:18px;color:var(--muted);margin:0 0 18px;max-width:760px}
.byline{font-size:13px;color:var(--muted);margin:-8px 0 18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.tool{padding:20px}
@media (max-width:560px){.tool{padding:16px}}
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
@media (max-width:820px){.cols{grid-template-columns:1fr}}
.content{max-width:780px}
.content p,.content li{max-width:72ch}
.content table{border-collapse:collapse;width:100%;margin:10px 0 16px;font-size:15px}
.content th,.content td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.content th{background:var(--panel2);font-weight:700}
.tablewrap{overflow-x:auto}
.formula{font-family:var(--mono);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;overflow-wrap:anywhere;font-size:15px}
.note{background:var(--accent-soft);border-left:4px solid var(--accent);padding:10px 14px;border-radius:0 10px 10px 0;margin:14px 0}
.muted{color:var(--muted)}
.small{font-size:14px}
.field{display:flex;flex-direction:column;gap:5px;margin:0 0 14px}
.field>span,.lbl{font-weight:650;font-size:15px}
.hint{font-size:13px;color:var(--muted);font-weight:400}
input[type=text],input[type=number],input[type=search],input[type=date],select,textarea{
font:inherit;font-size:17px;color:var(--ink);background:var(--panel);border:1.5px solid var(--line2);border-radius:10px;padding:10px 12px;width:100%;min-height:46px}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
input[aria-invalid=true]{border-color:var(--bad)}
.unit{position:relative;display:flex;align-items:center}
.unit input{padding-right:46px}
.unit.pre input{padding-left:30px;padding-right:12px}
.unit i{position:absolute;right:13px;font-style:normal;color:var(--muted);pointer-events:none;font-size:15px}
.unit.pre i{left:12px;right:auto}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.row .field{margin-bottom:0}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px;margin:0 0 14px}
.seg button,.seg label{border:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:600;padding:7px 12px;border-radius:8px;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg button[aria-pressed=true],.seg input:checked+span{background:var(--panel);box-shadow:var(--shadow)}
.seg label span{display:block;padding:0}
.seg label:has(input:checked){background:var(--panel);box-shadow:var(--shadow)}
.seg label:has(input:focus-visible){outline:3px solid var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1.5px solid var(--line2);background:var(--panel);color:var(--ink);font:inherit;font-weight:650;font-size:15px;border-radius:10px;padding:9px 14px;cursor:pointer;text-decoration:none;min-height:42px}
.btn:hover{background:var(--panel2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.05)}
.btn svg{width:17px;height:17px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.err{color:var(--bad);font-weight:600;font-size:15px;min-height:1px}
.result{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.result .big{font-size:clamp(28px,5vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;word-break:break-word}
.result .sub{color:var(--muted);font-size:15px;margin-top:4px}
.result dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 0;font-size:15px}
.result dt{color:var(--muted)}
.result dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.result .lab{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0 0}
.steps>li{counter-increment:s;position:relative;padding:0 0 12px 38px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px;display:grid;place-items:center}
.steps b{display:block}
.steps code,.mono{font-family:var(--mono);font-size:15px}
.steps .ln{font-family:var(--mono);font-size:15px;overflow-wrap:anywhere}
.cols>*,.hero>*{min-width:0}
.ov{text-decoration:overline}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .12em;font-variant-numeric:tabular-nums}
.frac>span:first-child{border-bottom:2px solid currentColor;padding:0 .15em}
.frac>span{padding:0 .15em}
.bars{display:grid;gap:8px;margin-top:12px}
.bar{display:flex;align-items:center;gap:10px;font-size:14px}
.bar .cells{display:flex;flex:1;height:22px;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;min-width:0}
.bar .cells i{flex:1;border-right:1px solid var(--line2)}
.bar .cells i:last-child{border-right:0}
.bar .cells i.on{background:var(--accent)}
.bar .cap{width:62px;flex:none;font-family:var(--mono);text-align:right}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:12px 0}
.tile{display:block;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);transform:translateY(-1px)}
.tile b{display:block;font-size:16px}
.tile span{display:block;color:var(--muted);font-size:14px;line-height:1.45;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chips a,.chip{display:inline-block;padding:6px 11px;border:1px solid var(--line2);border-radius:999px;text-decoration:none;color:var(--ink);font-size:14px;background:var(--panel);font-family:var(--mono)}
.chips a:hover{border-color:var(--accent)}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;font-weight:650;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--muted);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 12px}
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px;align-items:start}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
.calc{padding:16px}
.calc-top{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
.calc-top .seg{margin:0}
.calc-top .spacer{flex:1}
.calc-top .kbd{min-height:38px;padding:6px 12px;font-size:14px}
.calc-top .kbd[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}
.screen{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
.screen input{border:0;background:transparent;font:500 22px/1.3 var(--mono);padding:2px 0;min-height:0;box-shadow:none!important}
.screen input:focus{box-shadow:none}
.screen .out{font:800 clamp(30px,6vw,44px)/1.15 var(--font);text-align:right;font-variant-numeric:tabular-nums;min-height:1.15em;word-break:break-all;letter-spacing:-.02em}
.screen .alt{text-align:right;color:var(--muted);font-size:15px;min-height:1.4em}
.screen .alt b{color:var(--ink);font-family:var(--mono);font-weight:600}
.screen .msg{text-align:right;color:var(--bad);font-size:14px;min-height:0}
.screen .tipline{text-align:right;font-size:14px;color:var(--muted)}
.keys{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.keys.basic{grid-template-columns:repeat(4,1fr)}
.keys button{font:600 19px/1 var(--font);min-height:52px;border-radius:11px;border:1px solid var(--line);background:var(--key);color:var(--key-ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0 2px}
.keys button:hover{filter:brightness(.97)}
.keys button:active{transform:translateY(1px)}
.keys .op{background:var(--key-op)}
.keys .fn{background:var(--key-fn);font-size:16px;font-weight:600}
.keys .eq{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.keys .wide{grid-column:span 2}
.keys [hidden]{display:none}
@media (max-width:420px){.keys button{min-height:48px;font-size:17px}.keys .fn{font-size:14px}}
.tape{margin-top:14px}
.tape h2{font-size:15px;margin:0 0 6px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tape ol{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tape li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:4px 6px 4px 10px;border-bottom:1px solid var(--line);background:var(--panel)}
.tape li:last-child{border-bottom:0}
.tape li input{border:0;background:transparent;font:16px/1.3 var(--mono);min-height:40px;padding:4px 0}
.tape li .r{font:700 15px var(--mono);min-height:40px;white-space:nowrap;cursor:pointer;color:var(--ink);background:none;border:0;padding:4px 6px;border-radius:6px}
.tape li .r:hover{background:var(--panel2)}
.tape li .r.e{color:var(--bad);font-weight:500;font-family:var(--font);font-size:13px;white-space:normal;max-width:180px;text-align:right}
.tape li .x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:20px;width:40px;height:40px;border-radius:8px}
.tape li .x:hover{background:var(--panel2);color:var(--ink)}
.tape .empty{padding:12px;color:var(--muted);font-size:14px;background:var(--panel)}
.tape .tools{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.side h2{font-size:18px;margin:4px 0 8px}
.side .tile{padding:10px 14px}
.side .grid{grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:420px){.side .grid{grid-template-columns:1fr}}
.examples{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.examples button{font:13px var(--mono);border:1px dashed var(--line2);background:transparent;color:var(--muted);border-radius:999px;padding:8px 12px;min-height:36px;cursor:pointer}
.examples button:hover{color:var(--ink);border-color:var(--accent)}
.search{position:relative;margin:0 0 16px}
.search input{padding-left:40px}
.search svg{position:absolute;left:13px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted)}
.cat h2{display:flex;align-items:center;gap:10px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;z-index:50;box-shadow:var(--shadow)}
.foot{border-top:1px solid var(--line);background:var(--panel);margin-top:30px;padding:26px 0 calc(34px + env(safe-area-inset-bottom));font-size:14px;color:var(--muted)}
.foot .cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:720px){.foot .cols4{grid-template-columns:1fr 1fr}}
.foot h2{font-size:14px;margin:0 0 8px;color:var(--ink);text-transform:uppercase;letter-spacing:.06em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 5px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot .legal{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media print{.top,.foot,.actions,.keys,.tape .tools,.nav{display:none!important}body{background:#fff}.card{box-shadow:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.sysgrid input{width:66px;display:inline-block;padding:10px 8px}
.sysgrid td{white-space:nowrap}
@media (max-width:380px){.sysgrid input{width:54px;padding:10px 5px}.sysgrid td{padding:3px 2px!important}}
.screen .out{word-break:normal;overflow-wrap:anywhere}
.screen .out.long{font-size:clamp(22px,5vw,30px)}
@media (max-width:720px){
.top{position:static}
h1{font-size:clamp(26px,7vw,34px)}
.lede{font-size:16px;margin-bottom:12px}
.byline{font-size:12px;margin:-4px 0 12px}
main{padding-top:14px}
}
@media (max-width:560px){.keys.sci button{min-height:42px}}
.shield{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin:12px 0 0}
.shield svg{width:18px;height:18px;flex:none;color:var(--good)}
.shield b{color:var(--ink);font-weight:650}
.hwtoggle{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;margin:0 0 12px;cursor:pointer;min-height:40px}
.hwtoggle input{width:20px;height:20px;accent-color:var(--accent)}
.hwtoggle .hint{font-weight:400}
.reveal{display:none}
.hw-on:not(.revealed) [data-answer]{display:none!important}
.hw-on:not(.revealed) .reveal{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:var(--panel2);border:1px dashed var(--line2);border-radius:12px;padding:16px 18px}
.whatif{margin:6px 0 0;padding-left:20px;font-size:15px}
.whatif li{margin:0 0 6px}
.top .tools{display:flex;gap:8px;align-items:center}
.lookmenu{position:relative}
.lookmenu summary{list-style:none}
.lookmenu summary::-webkit-details-marker{display:none}
.lookpanel{position:absolute;right:0;top:46px;width:270px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:14px;z-index:40}
.lookpanel .lab{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:0 0 8px}
.looks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.looks button{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:8px;font:600 13px var(--font);cursor:pointer;text-align:left;min-height:42px}
.looks button[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.looks .sw{width:22px;height:22px;border-radius:6px;border:1px solid rgba(128,128,128,.4);display:grid;place-items:center;flex:none}
.looks .sw i{width:9px;height:9px;border-radius:50%}
.lookpanel .seg{margin:0}
.lookpanel .seg button{min-width:52px;min-height:40px}
:root{--screen:var(--panel2);--screen-ink:var(--ink);--screen-font:var(--font)}
.screen{background:var(--screen);color:var(--screen-ink)}
.screen .out{color:var(--screen-ink);font-family:var(--screen-font)}
.screen input{color:var(--screen-ink)}
:root[data-size="2"] main{zoom:1.12}
:root[data-size="3"] main{zoom:1.25}
:root[data-size="2"] .keys button{min-height:58px}
:root[data-size="3"] .keys button{min-height:64px}
:root[data-look=retro]{--bg:#d9d4c7;--panel:#ece7da;--panel2:#e2dccd;--ink:#22201b;--muted:#5a5446;--line:#c9c2b0;--line2:#b5ad98;--accent:#c4520f;--accent-ink:#fff;--accent-soft:#f3dccb;--link:#1c4fa8;--good:#2f6b1f;--bad:#a3201b;
--key:#f6f2e7;--key-ink:#22201b;--key-op:#cfc8b6;--key-fn:#ddd6c4;--screen:#aebb98;--screen-ink:#1f2a12;--screen-font:var(--mono);color-scheme:light}
:root[data-look=retro] .screen{border:3px solid #6f705f;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
:root[data-look=retro] .screen .alt,:root[data-look=retro] .screen .tipline,:root[data-look=retro] .screen .alt b{color:#2c3a1c}
:root[data-look=retro] .keys button{box-shadow:0 2px 0 #b5ad98}
:root[data-look=neon]{--bg:#0b0613;--panel:#140b24;--panel2:#1b0f33;--ink:#f3edff;--muted:#b9a8dc;--line:#2c1b4d;--line2:#3d2766;--accent:#ff3ddc;--accent-ink:#1a0016;--accent-soft:#3a0f37;--link:#5cecff;--good:#5dffa8;--bad:#ff7a8a;
--key:#1a0f30;--key-ink:#f3edff;--key-op:#26124a;--key-fn:#170c2b;--screen:#06030c;--screen-ink:#5cecff;--screen-font:var(--mono);--shadow:0 0 0 1px #2c1b4d;color-scheme:dark}
:root[data-look=neon] .screen .out{text-shadow:0 0 12px rgba(92,236,255,.55)}
:root[data-look=neon] .keys .eq{box-shadow:0 0 16px rgba(255,61,220,.5)}
:root[data-look=neon] .screen .alt,:root[data-look=neon] .screen .alt b{color:#cfc2ee}
:root[data-look=pastel]{--bg:#fbf5fa;--panel:#ffffff;--panel2:#f6eefb;--ink:#2a2140;--muted:#6b5f86;--line:#ece1f3;--line2:#dccdea;--accent:#7c3aed;--accent-ink:#fff;--accent-soft:#efe5fd;--link:#6d28d9;--good:#15803d;--bad:#be123c;
--key:#ffffff;--key-ink:#2a2140;--key-op:#f1e8fd;--key-fn:#fbf7fe;color-scheme:light}
:root[data-look=contrast]{--bg:#000;--panel:#000;--panel2:#111;--ink:#fff;--muted:#e6e6e6;--line:#fff;--line2:#fff;--accent:#ffd400;--accent-ink:#000;--accent-soft:#332b00;--link:#7cd4ff;--good:#7dff8a;--bad:#ff8a8a;
--key:#000;--key-ink:#fff;--key-op:#1a1a1a;--key-fn:#000;--screen:#000;--screen-ink:#fff;--shadow:none;color-scheme:dark}
:root[data-look=contrast] .keys button,:root[data-look=contrast] .card,:root[data-look=contrast] .tile{border-width:2px}
:root[data-look=contrast] .keys button{font-weight:800}
:root[data-look=retro] .screen a{color:#1b3a8a}
:root[data-shape=square] .keys button,:root[data-shape=square] .btn,:root[data-shape=square] input,:root[data-shape=square] select,:root[data-shape=square] .card,:root[data-shape=square] .screen,:root[data-shape=square] .tile{border-radius:3px}
:root[data-shape=pill] .keys button,:root[data-shape=pill] .btn{border-radius:999px}
:root[data-space=compact] .keys{gap:4px}
:root[data-space=compact] .keys button{min-height:44px}
:root[data-space=compact] .tool,:root[data-space=compact] .calc{padding:12px}
:root[data-space=compact] main{padding-top:12px}
:root[data-space=roomy] .keys{gap:12px}
:root[data-space=roomy] .keys button{min-height:62px}
:root[data-space=roomy] .tool,:root[data-space=roomy] .calc{padding:26px}
.lookpanel{max-height:calc(100vh - 80px);overflow:auto}
.lookpanel .seg button{min-width:0;flex:1;padding:7px 8px;font-size:13px}
.lookpanel .seg{display:flex}
.next{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:14px 0 0;font-size:15px}
.checked ul{list-style:none;padding:0}
.checked li{padding:6px 0;border-bottom:1px solid var(--line)}
.checked .ok{color:var(--good);font-weight:800;margin-left:4px}
:root[data-detail=answer] .steps,:root[data-detail=answer] .whatif,:root[data-detail=answer] .lab:has(+ .whatif),:root[data-detail=answer] .result .tablewrap:not(.keep),:root[data-detail=answer] .lab:has(+ .tablewrap:not(.keep)),:root[data-detail=answer] .result svg,:root[data-detail=answer] .lab:has(+ svg),:root[data-detail=answer] #fpic,:root[data-detail=answer] [data-answer] .lab:has(+ .steps){display:none!important}
:root[data-detail=steps] .whatif,:root[data-detail=steps] .lab:has(+ .whatif),:root[data-detail=steps] .result .tablewrap:not(.keep),:root[data-detail=steps] .lab:has(+ .tablewrap:not(.keep)),:root[data-detail=steps] .result svg,:root[data-detail=steps] .lab:has(+ svg){display:none!important}
.brow{display:grid;grid-template-columns:1.4fr 1fr .9fr .8fr auto;gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--line)}
.brow.out-row{grid-template-columns:1.2fr .8fr 2fr .9fr auto}
.brow .field{margin:0}
.brow .field>span{font-size:12.5px;color:var(--muted);font-weight:600}
.brow input,.brow select{font-size:16px;min-height:42px;padding:8px 10px}
.brow .x{border:0;background:none;color:var(--muted);font-size:22px;width:40px;height:42px;cursor:pointer;border-radius:8px}
.brow .x:hover{background:var(--panel2);color:var(--ink)}
@media (max-width:720px){.brow,.brow.out-row{grid-template-columns:1fr 1fr}.brow .wide{grid-column:1/-1}.brow .x{justify-self:end}}
.mine{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.shared-note{display:none}
.is-shared .shared-note{display:block}
.is-shared .editor{display:none}
.bp-title{margin:0 0 12px;font-size:21px}
.tplbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.brow>*{min-width:0}.brow input,.brow select{width:100%;min-width:0}
@media (max-width:820px){#builder .cols>div:last-child{order:-1}}