:root{--ground: #f9f8f8;--surface: #ffffff;--ink: #211215;--muted: #744e55;--accent: #9c1b33;--on-accent: #ffffff;--accent-2: #0f1b3d;--on-accent-2: #ffffff;--line: #e3dedf;--font-display: "Rubik", sans-serif;--font-text: "Heebo", sans-serif;--r-sm: 14px;--r-md: 20px;--r-btn: 16px;--shadow: 0 24px 50px -28px rgba(33, 18, 21, .35);--ease: cubic-bezier(.34, 1.56, .64, 1);--dur: .32s}*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:var(--font-text);background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased}button,select,input{font-family:inherit}#app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:18px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px}.brand__mark{width:38px;height:38px;border-radius:var(--r-sm);background:linear-gradient(145deg,var(--accent),var(--accent-2));flex:none}.brand__text h1{font-family:var(--font-display);font-weight:800;font-size:18px;margin:0;letter-spacing:-.01em}.brand__meta{margin:2px 0 0;font-size:12px;color:var(--muted)}.rooms{display:flex;gap:6px;overflow-x:auto;flex:1;min-width:220px;padding:2px}.rooms::-webkit-scrollbar{display:none}.room-tab{flex:none;padding:10px 16px;min-height:44px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--ground);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:transform var(--dur) var(--ease),background .16s,color .16s,border-color .16s}.room-tab:hover{transform:translateY(-1px)}.room-tab.is-on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.topbar__actions{display:flex;gap:8px}.btn{padding:10px 16px;min-height:44px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:transform var(--dur) var(--ease),background .16s}.btn:hover{transform:translateY(-1px);border-color:var(--accent)}.btn--ghost{background:var(--ground)}.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}.layout{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0}.panel{background:var(--surface);border-inline-end:1px solid var(--line);overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:18px}.block{display:flex;flex-direction:column;gap:8px}.block--grow{flex:1}.block h2{font-family:var(--font-display);font-size:13px;font-weight:700;color:var(--muted);margin:0;text-transform:none}.block h3{font-size:12px;font-weight:700;color:var(--muted);margin:10px 0 4px}select#styleSel{width:100%;min-height:44px;padding:8px 10px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--ground);font-size:14px}input[type=range]{width:100%;accent-color:var(--accent)}.seg{display:flex;gap:6px}.seg__btn{flex:1;padding:9px 6px;min-height:44px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--ground);font-size:13px;font-weight:600;cursor:pointer}.seg__btn.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid2 button,.cat-grid button{min-height:44px;padding:8px 6px;border-radius:var(--r-btn);border:1px solid var(--line);background:var(--ground);font-size:12.5px;cursor:pointer;text-align:center}.grid2 button:hover,.cat-grid button:hover{border-color:var(--accent)}.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}.stage{position:relative;min-width:0;min-height:0;background:#000}#view{position:absolute;top:0;right:0;bottom:0;left:0}.selbar{position:absolute;inset-inline:14px;bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fffffff7;border-radius:var(--r-md);padding:10px 14px;box-shadow:var(--shadow)}.selbar[hidden]{display:none}.selbar strong{font-size:14px}.selbar input[type=color]{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);padding:2px;background:#fff}.hint{position:absolute;inset-inline:0;bottom:14px;text-align:center;font-size:12.5px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);pointer-events:none;margin:0}.hint[hidden]{display:none}@media (max-width: 820px){.layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}.panel{max-height:38vh;border-inline-end:0;border-bottom:1px solid var(--line)}.topbar{gap:10px}}@media (prefers-reduced-motion: reduce){.room-tab,.btn{transition:none}}