:root{--ink:#1e1e1e;--ink-2:#6a6a6a;--line:#d6d6d2;--bg:#ecece8;--sb:#1e1e1e;--note:#d9480f;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14px/1.4 var(--sans);color:var(--ink);background:var(--bg);display:flex;height:100vh;overflow:hidden}
.sb{width:280px;flex:none;background:var(--sb);color:#e8e8e4;display:flex;flex-direction:column;height:100vh}
.sb-h{padding:20px 20px 14px;border-bottom:1px solid #3a3a3a}
.sb-logo{font:800 20px/1 var(--sans);letter-spacing:-.02em;color:#fff}
.sb-sub{font:500 10px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#9a9a96;margin-top:6px}
.sb-list{flex:1;overflow:auto;padding:10px 0}
.sb-g{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#8a8a86;padding:16px 20px 6px}
.sb-i{display:flex;gap:10px;align-items:baseline;padding:8px 20px;cursor:pointer;color:#d4d4d0;border-left:3px solid transparent}
.sb-i:hover{background:#2a2a2a;color:#fff}
.sb-i.on{background:#2f2f2f;color:#fff;border-left-color:var(--note)}
.sb-i .num{font:600 10px/1.6 var(--mono);color:#8a8a86;width:22px;flex:none}
.sb-i .t{font-size:13px}
.sb-f{padding:14px 20px;border-top:1px solid #3a3a3a;font-size:12px}
.sb-f a{display:block;color:#c8c8c4;text-decoration:underline;margin:4px 0}
.sb-help{color:#8a8a86;font-size:11px;margin-top:10px;line-height:1.5}
.sb-help b{color:#c8c8c4;font-family:var(--mono)}
.mn{flex:1;display:flex;flex-direction:column;min-width:0}
.tb{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 20px;background:#fff;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.tb-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.tb-title #num{font:600 11px var(--mono);color:var(--ink-2)}
.tb-title b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-group{font:500 11px var(--mono);color:var(--ink-2);letter-spacing:.04em}
.tb-ctrl{display:flex;align-items:center;gap:16px}
.seg{display:inline-flex;border:1px solid var(--ink);border-radius:6px;overflow:hidden}
.seg button{font:600 12px var(--sans);padding:7px 12px;border:0;background:#fff;color:var(--ink);cursor:pointer;border-right:1px solid var(--ink)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:#fff}
.tgl{display:inline-flex;gap:6px;align-items:center;font-size:12px;font-weight:600;cursor:pointer}
.tgl input{accent-color:var(--note)}
.tb-link{font-size:12px;color:var(--ink);text-decoration:underline}
.stage{flex:1;overflow:auto;padding:28px;display:flex;gap:28px;align-items:flex-start;justify-content:flex-start}
.stage>.device:first-child{margin-left:auto}
.stage>.device:last-child{margin-right:auto}
.stage>.device.hidden+.device,.stage>.device:only-child{margin-left:auto;margin-right:auto}
.device{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.14);border-radius:6px;position:relative;flex:none}
.device.hidden{display:none}
.dev-cap{font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);position:absolute;top:-18px;left:0}
.device iframe{border:0;display:block;background:#fff;border-radius:6px}
.device.desktop{width:1280px}
.device.desktop iframe{width:1280px;height:800px}
.device.tablet{width:820px}
.device.tablet iframe{width:820px;height:800px}
.device.mobile{width:390px;border-radius:38px;padding:12px;background:#111;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.device.mobile iframe{width:366px;height:792px;border-radius:26px}
.device.mobile::after{content:"";position:absolute;top:12px;left:50%;width:110px;height:24px;transform:translateX(-50%);background:#111;border-radius:0 0 16px 16px;z-index:2}
.device.mobile .dev-cap{top:-20px}
@media(max-width:900px){.sb{display:none}.stage{padding:12px}}