:root{--bg:#09090B;--panel:rgba(0,0,0,.4);--line:rgba(255,255,255,.1);--fg:#FAFAFA;--mut:#A1A1AA;--zinc:#18181B;--zinc2:#232326;--ac:#7DD3FC;--bad:#F87171;--warn:#FACC15;--good:#4ADE80;--sheet:72px}
:root[data-theme=light]{--bg:#F4F4F5;--panel:rgba(255,255,255,.8);--line:rgba(0,0,0,.12);--fg:#18181B;--mut:#52525B;--zinc:#E4E4E7;--zinc2:#D4D4D8;--ac:#0369A1;--bad:#B91C1C;--warn:#A16207;--good:#15803D}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.5 Sora,system-ui,-apple-system,sans-serif;overscroll-behavior-y:none}
a{color:inherit}
button{font:inherit;color:inherit;background:var(--zinc);border:1px solid var(--line);border-radius:9px;padding:8px 13px;cursor:pointer;transition:transform .12s,background .15s}
button:hover{background:var(--zinc2)}
button:active{transform:scale(.96)}
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

/* ---- header ---- */
header.app{display:flex;align-items:center;gap:10px;padding:10px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative;z-index:20;background:var(--bg)}
.brand{font-weight:700;font-size:19px;letter-spacing:-.03em;margin-right:auto;text-decoration:none;display:flex;align-items:center;gap:7px}
.brand .dot{width:9px;height:9px;border-radius:2px;background:var(--ac);display:inline-block}
.tabs{display:flex;gap:3px;background:var(--zinc);padding:3px;border-radius:11px;overflow-x:auto;scrollbar-width:none;max-width:100%}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:8px 14px;flex:none;white-space:nowrap}
.tabs button[aria-pressed=true]{background:var(--bg);box-shadow:0 0 0 1px var(--line);color:var(--ac)}
.tabs button:disabled{opacity:.35;cursor:not-allowed}
#splitBtn[aria-pressed=true]{border-color:var(--ac);color:var(--ac)}
#theme{padding:8px}
button:disabled{opacity:.45;cursor:not-allowed}
input:disabled{opacity:.4;cursor:not-allowed}
label:has(input:disabled){opacity:.55}

/* ---- sticky desktop header ---- */
@media(min-width:1074px){
 header.app{position:sticky;top:0}
 .stage{top:78px}
}

/* ---- value strip ---- */
.value-strip{max-width:1160px;margin:0 auto;padding:14px 18px 4px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px}
.value-strip p{margin:0;font-size:15px;color:var(--fg);font-weight:600;letter-spacing:-.01em}
.value-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;margin:0;padding:0;font-size:12.5px;color:var(--mut)}
.value-strip li{display:flex;align-items:center;gap:5px;white-space:nowrap}
.value-strip li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ac);flex:none}
@media(max-width:640px){.value-strip{padding:12px 16px 2px;gap:6px 12px}.value-strip p{font-size:14px;width:100%}.value-strip ul{font-size:12px;gap:6px 12px}}

/* ---- ad slots ---- */
.ad{margin:0 auto;text-align:center;overflow:hidden}
.ad small{display:block;color:var(--mut);font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:4px}
.ad ins,.ad .stub{display:block;margin:0 auto;background:var(--zinc);border:1px dashed var(--line);border-radius:8px;color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:12px}
.ad-top{padding:10px 16px;min-height:70px}
.ad-top .stub,.ad-top ins{width:728px;max-width:100%;height:90px}
.ad-mid{max-width:760px;margin:36px auto;min-height:120px}
.ad-mid .stub,.ad-mid ins{width:100%;height:120px}
.ad-foot{max-width:760px;margin:36px auto;min-height:120px}
.ad-foot .stub,.ad-foot ins{width:100%;height:120px}
@media(max-width:900px){.ad-top .stub,.ad-top ins{height:50px}}

/* ---- fixed side ad rails (desktop only, viewport-pinned, don't scroll) ---- */
.ad-rail-fixed{display:none;position:fixed;top:50%;transform:translateY(-50%);width:160px;z-index:15}
.ad-rail-fixed .stub,.ad-rail-fixed ins{width:160px;height:600px}
.ad-rail-fixed.left{left:14px}
.ad-rail-fixed.right{right:14px}
@media(min-width:1550px){.ad-rail-fixed{display:block}}

/* ---- layout shell ---- */
.shell{max-width:1160px;margin:0 auto}
.layout{display:grid;grid-template-columns:62fr 38fr;gap:18px;padding:18px 14px 18px 18px;align-items:start}

/* ---- stage / canvas ---- */
.stage{position:sticky;top:12px;align-self:start;display:flex;justify-content:center;min-width:0}
#one canvas{height:min(78vh,880px);width:auto;max-width:100%}
#three{display:flex;gap:10px;width:100%}
#three figure{margin:0;flex:1;min-width:0;text-align:center;color:var(--mut);font-size:13px}
#three canvas{width:100%;height:auto}
#three figure.on{color:var(--ac)}
canvas{aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line);touch-action:none;background:#000;display:block;cursor:grab;object-fit:contain}
canvas:active{cursor:grabbing}

/* ---- panels ---- */
.glass{background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:14px}
h2{font-size:13px;margin:0 0 10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--mut)}
label{display:flex;align-items:center;gap:9px;margin:7px 0;min-height:26px}
input[type=range]{flex:1;accent-color:var(--ac)}
input[type=checkbox]{accent-color:var(--ac);width:17px;height:17px;flex:none}
.row{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.row.center{justify-content:center}
.row.fit3{flex-wrap:nowrap;gap:6px}
.row.fit3 button{flex:1;min-width:0;padding:8px 5px;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table{width:100%;border-collapse:collapse;font-size:13px}
td{padding:5px 0;border-bottom:1px solid var(--line)}td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--fg)}td:first-child{color:var(--mut)}
.mut{color:var(--mut);font-size:12.5px}
#info{white-space:pre-line;margin-top:8px}
textarea{width:100%;min-height:110px;box-sizing:border-box;background:var(--zinc);color:var(--fg);border:1px solid var(--line);border-radius:9px;padding:10px;font:inherit;font-size:16px;resize:vertical}
.cnt{display:flex;justify-content:space-between;margin:7px 0;font-variant-numeric:tabular-nums;font-size:13px}
.bad{color:var(--bad)}.warn{color:var(--warn)}.good{color:var(--good)}
#pv{white-space:pre-wrap;background:var(--zinc);border-radius:9px;padding:11px;margin-top:7px;min-height:22px;font-size:13px}
#pv b{color:var(--mut)}.hidtext{opacity:.35;margin-top:6px;border-top:1px dashed var(--line);padding-top:6px}
#ocrmsg{margin-top:8px;font-size:13px;display:flex;gap:7px;align-items:flex-start}
#ocrmsg .ic{flex:none}

/* ---- modal / toast ---- */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.86);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;z-index:40;color:#fff}
#modal img{max-height:76vh;max-width:100%;border-radius:10px}
#toast{position:fixed;left:50%;bottom:74px;transform:translateX(-50%);background:var(--zinc);border:1px solid var(--line);padding:9px 15px;border-radius:10px;z-index:41;font-size:13px}

/* ---- doc / pSEO article ---- */
.doc{max-width:720px;margin:44px auto;padding:0 14px 0 18px;line-height:1.7;font-size:16px}
.doc h1{font-size:31px;letter-spacing:-.02em;line-height:1.18;margin:6px 0 14px}
.doc h2{font-size:21px;margin:34px 0 9px;letter-spacing:-.01em;text-transform:none;color:var(--fg);font-weight:700}
.doc h3{font-size:16px;margin:22px 0 5px;font-weight:700}
.doc p{color:var(--fg)}
.doc a{color:var(--ac);text-underline-offset:2px}
.doc ul{padding-left:20px}
.callout{background:var(--zinc);border:1px solid var(--line);border-left:3px solid var(--ac);padding:13px 15px;border-radius:9px;margin:18px 0}
.doc table{margin:16px 0}
.pt{font-size:19px;margin:14px 18px 2px;text-align:center;letter-spacing:-.01em;font-weight:700}

#sheet{display:none}

footer.site{border-top:1px solid var(--line);padding:28px 14px 28px 18px;text-align:center;color:var(--mut);font-size:13px;max-width:1160px;margin:0 auto}
footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 6px}
footer.site a{margin:0 6px;display:inline-block;padding:6px 2px;color:var(--mut);text-decoration:none}
footer.site a:hover{color:var(--fg)}
footer.site p{max-width:640px;margin:12px auto 0}

/* ================= RESPONSIVE ================= */

/* Tablet: 768–1073 */
@media(min-width:768px) and (max-width:1073px){
 .layout{grid-template-columns:1fr;gap:12px;padding:12px;max-width:640px}
 .stage{position:sticky;top:0;z-index:10;background:var(--bg);padding:10px 0}
 #one canvas{height:min(80vh,80svh)}
 .pillbar{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none}
 .pillbar::-webkit-scrollbar{display:none}
 .pillbar button{flex:none;border-radius:999px;padding:9px 15px}
 .panels{display:block}
 .doc{margin:32px auto}
}

/* Mobile: <768, bottom-sheet controls */
@media(max-width:767px){
 #panelsDesktop{display:none}
 header.app{padding:8px 12px;gap:8px}
 .tabs{order:3;width:100%;gap:1px;justify-content:space-between}
 .tabs button{flex:0 1 auto;min-width:0;padding:7px 3px;font-size:10.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .brand{font-size:17px}
 .layout{display:block;padding:0;max-width:none}
 .stage{position:sticky;top:0;z-index:10;background:var(--bg);padding:10px 12px 12px;margin:0}
 #one canvas{height:auto;width:min(100%,calc(58svh * .5625));margin:0 auto}
 #three{gap:6px}
 body.sheet-open .stage #one canvas{width:min(100%,calc(36svh * .5625))}

 #sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--bg);border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.35);touch-action:none}
 #sheet .handle-row{display:flex;justify-content:center;padding:9px 0 3px;cursor:grab}
 #sheet .handle{width:38px;height:5px;border-radius:3px;background:var(--line)}
 .sheet-head-row{display:flex;align-items:center;gap:6px;padding:2px 14px 8px}
 .sheet-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
 .sheet-tabs::-webkit-scrollbar{display:none}
 .sheet-tabs button{flex:none;border-radius:999px;padding:7px 13px;font-size:13px;border:0;background:var(--zinc)}
 .sheet-tabs button[aria-pressed=true]{background:var(--ac);color:#09090B}
 #sheetToggleBtn{flex:none;padding:7px 11px;border-radius:999px;border:0;background:var(--zinc);font-size:13px;line-height:1}
 #sheet .sheet-body{overflow-y:hidden;max-height:0;padding:0 14px;transition:max-height .28s cubic-bezier(.32,.72,0,1);-webkit-overflow-scrolling:touch}
 body.sheet-open #sheet .sheet-body{overflow-y:auto;max-height:calc(60svh - 74px);padding:0 14px 18px}
 #sheet .panel{display:none}
 #sheet .panel.on{display:block}
 .glass{margin-bottom:12px;padding:13px}

 .doc{margin:26px auto;font-size:15.5px;padding:0 16px}
 .doc h1{font-size:25px}
 .doc h2{font-size:19px;margin:26px 0 8px}
 .ad-mid,.ad-foot{margin:26px auto}
}

/* short landscape phones */
@media(max-width:900px) and (orientation:landscape) and (max-height:500px){
 #one canvas{width:min(60vw,calc(86svh * .5625));height:auto}
 #sheet{max-height:88svh}
 #sheet .sheet-body{max-height:calc(88svh - 74px)}
}

/* coarse pointer: bigger tap targets */
@media(pointer:coarse){
 button{min-height:44px}
 .tabs button,.sheet-tabs button{min-height:40px}
 input[type=checkbox]{width:22px;height:22px}
 input[type=range]{min-height:34px}
 footer.site a{padding:10px 6px}
}
@media(prefers-reduced-motion:reduce){button{transition:none}#sheet{transition:none}}