:root{--bg:#eceff4;--panel:#fff;--sub:#f3f5f9;--stage:#e2e6ee;--dot:#cbd2e0;--tx:#0f172a;--mut:#5d6980;--ln:#dde2ec;--ac:#3452e0;--acx:#fff;color-scheme:light;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0e14;--panel:#131822;--sub:#0d1118;--stage:#0f141d;--dot:#1e2635;--tx:#e7ebf4;--mut:#94a0b8;--ln:#232b3a;--ac:#7b93ff;--acx:#0b0e14;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b0e14;--panel:#131822;--sub:#0d1118;--stage:#0f141d;--dot:#1e2635;--tx:#e7ebf4;--mut:#94a0b8;--ln:#232b3a;--ac:#7b93ff;--acx:#0b0e14;color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:500 14px/1.45 Manrope,system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,.sw:focus-within{outline:2px solid var(--ac);outline-offset:2px}
.bar{background:var(--panel);border-bottom:1px solid var(--ln)}
.bar>div{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:16px;justify-content:space-between;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.01em}
.logo{width:30px;height:30px;border-radius:8px;background:var(--ac);color:var(--acx);display:grid;place-items:center}
.logo svg{width:20px;height:20px}
.icon{width:34px;height:34px;border-radius:8px;border:1px solid var(--ln);background:none;display:grid;place-items:center;color:var(--mut)}
.icon svg{width:18px;height:18px}
.seg{display:flex;background:var(--sub);border:1px solid var(--ln);border-radius:9px;padding:2px;gap:2px}
.seg button{flex:1;min-width:0;border:0;background:none;padding:6px 10px;border-radius:7px;font-weight:600;font-size:13px;color:var(--mut)}
.seg button[aria-pressed=true]{background:var(--panel);color:var(--tx);box-shadow:0 1px 2px rgba(15,23,42,.22),0 0 0 1px var(--ln)}
.wrap{max-width:1240px;margin:0 auto;padding:24px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.grid>*{min-width:0}
.stage{background:var(--stage) radial-gradient(var(--dot) 1px,transparent 1.5px) 0 0/18px 18px;border:1px solid var(--ln);border-radius:16px;padding:32px}
.sheet{position:relative;aspect-ratio:8/3;background:#fff;border-radius:6px;box-shadow:0 1px 2px rgba(15,23,42,.1),0 24px 48px -24px rgba(15,23,42,.45)}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
body[data-mode=draw] canvas{cursor:crosshair}
.meta{display:flex;justify-content:space-between;gap:12px;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--mut)}
.sh{display:flex;justify-content:space-between;align-items:baseline;margin:28px 0 12px}
h2{margin:0;font-size:14px;font-weight:700}
.sh span{font-size:12.5px;color:var(--mut)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{display:grid;gap:4px;padding:10px 12px;background:#fff;border:1px solid var(--ln);border-radius:10px;text-align:left;min-width:0}
.tile .s{height:52px;line-height:52px;font-size:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1b2d6b}
.tile .c{font-size:11.5px;font-weight:600;color:#667085}
.tile:hover{border-color:var(--mut)}
.tile[aria-pressed=true]{border-color:var(--ac);box-shadow:0 0 0 2px var(--ac)}
.panel{background:var(--panel);border:1px solid var(--ln);border-radius:14px;padding:4px 18px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--ln)}
.sec:first-child{border-top:0}
.sec h2{font-size:12.5px;color:var(--mut)}
.f{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.lr{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px}
output{color:var(--mut);font-variant-numeric:tabular-nums}
input[type=text]{width:100%;font:600 15px Manrope,system-ui,sans-serif;padding:10px 12px;border-radius:9px;border:1px solid var(--ln);background:var(--sub);color:var(--tx)}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:20px;margin:0;background:none;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ac) var(--p),var(--ln) var(--p))}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--ac) var(--p),var(--ln) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:#fff;border:2px solid var(--ac);box-shadow:0 1px 3px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ac)}
.sws{display:flex;gap:10px;flex-wrap:wrap}
.sw{width:28px;height:28px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--ln);padding:0;position:relative;overflow:hidden}
.sw[aria-pressed=true]{box-shadow:0 0 0 2px var(--ac)}
.sw input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer}
.sw.custom{background:conic-gradient(#e33,#fb3,#3c6,#3bf,#73f,#e3a,#e33)}
.tg{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px}
.tg input{-webkit-appearance:none;appearance:none;width:36px;height:20px;border-radius:99px;background:var(--ln);position:relative;margin:0;cursor:pointer;transition:background .15s}
.tg input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.tg input:checked{background:var(--ac)}
.tg input:checked::after{transform:translateX(16px)}
.btn{border:1px solid var(--ln);background:var(--panel);border-radius:9px;padding:10px 14px;font-weight:700;font-size:13.5px;width:100%}
.btn:hover{background:var(--sub)}
.btn.main{background:var(--ac);color:var(--acx);border-color:var(--ac);padding:12px 14px;font-size:14px}
.btn.main:hover{filter:brightness(1.08)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);background:var(--tx);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;z-index:20}
#toast.on{opacity:1;transform:translate(-50%,0)}
body[data-mode=type] [data-for=draw],body[data-mode=draw] [data-for=type]{display:none}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}.panel{position:static;max-height:none}.stage{padding:14px}.wrap{padding:16px}.bar>div{padding:12px 16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}