:root{color-scheme:dark;--bg: #0d1419;--panel: rgba(17, 27, 34, .84);--panel-edge: rgba(120, 214, 255, .14);--text: #eef9ff;--muted: #9db8c8;--accent: #ff7b1f;--accent-2: #8cecff;--accent-3: #ffbf69;--grid-off: #1d2b35;--grid-on: #ff8c41;--shadow: 0 28px 72px rgba(0, 0, 0, .36);--radius: 28px}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Segoe UI,Trebuchet MS,sans-serif;background:radial-gradient(circle at 12% 8%,rgba(140,236,255,.14),transparent 28%),radial-gradient(circle at 84% 10%,rgba(255,123,31,.18),transparent 24%),radial-gradient(circle at 50% 100%,rgba(28,85,122,.22),transparent 40%),linear-gradient(180deg,#101920,#0b1116);color:var(--text)}body.slot-drawer-open{overflow:hidden}.app-shell{width:min(1240px,calc(100% - 24px));margin:0 auto;padding:28px 0 42px}.slot-drawer-toggle{position:fixed;top:14px;right:14px;z-index:60;display:none;width:56px;height:56px;padding:0;border-radius:18px;background:linear-gradient(135deg,#8cecffeb,#ff7b1feb),#0b1116eb;box-shadow:0 18px 38px #00000061}.slot-drawer-toggle span{display:block;width:22px;height:2px;margin:3px auto;background:#10202a}.slot-drawer-backdrop{position:fixed;inset:0;z-index:54;background:#03080c9e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.slot-drawer{position:fixed;top:0;left:0;z-index:55;width:min(86vw,360px);height:100vh;padding:18px 16px 24px;background:linear-gradient(180deg,#141f28f7,#0a1016fc),#0d1419;border-right:1px solid rgba(140,236,255,.14);box-shadow:20px 0 54px #00000070;transform:translate(-110%);transition:transform .18s ease;overflow-y:auto}.slot-drawer.is-open{transform:translate(0)}.slot-drawer-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.slot-drawer-close{border-radius:14px;padding:10px 12px}.slot-drawer-copy{margin:10px 0 0;color:var(--muted);line-height:1.5}.slot-list-mobile{margin-top:16px}.hero{padding:10px 6px 30px}.eyebrow{margin:0 0 10px;color:var(--accent-2);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}.hero h1{margin:0;font-size:clamp(2.5rem,7vw,4.7rem);line-height:.94;letter-spacing:-.04em}.hero-copy{max-width:760px;margin:14px 0 0;color:var(--muted);font-size:1.03rem;line-height:1.65}.layout{display:grid;gap:18px;grid-template-columns:repeat(12,minmax(0,1fr))}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:22px}.settings-panel{grid-column:span 4}.editor-panel{grid-column:span 5}.protocol-panel{grid-column:span 3}.protocol-panel.is-hidden{display:none}.drawer-top{margin:-2px -2px 18px;padding:18px 18px 16px;border-radius:24px;background:linear-gradient(135deg,#8cecff1f,#ff7b1f24),#ffffff08;border:1px solid rgba(255,255,255,.05)}.drawer-top h2{margin:6px 0 0;font-size:1.26rem}.drawer-top p{margin:10px 0 0;color:var(--muted);line-height:1.56}.drawer-kicker{margin:0;color:var(--accent-2);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}.panel-heading h2{margin:0;font-size:1.12rem;letter-spacing:.01em}.panel-heading p{margin:8px 0 0;color:var(--muted);line-height:1.52}.field,.field-row{display:grid;gap:8px;margin-top:16px}.field-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field-row.triple{grid-template-columns:repeat(3,minmax(0,1fr))}.field span{font-size:.85rem;color:var(--accent-2)}.field-inline{display:flex;align-items:center;justify-content:space-between;gap:12px}.field-value{color:var(--text);font-size:.9rem;letter-spacing:.02em}.inline-tool-row{display:flex;align-items:center;gap:8px}input,select,textarea,button{font:inherit}input[type=text],select,textarea{width:100%;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:12px 14px;background:#ffffff0d;color:var(--text)}select{color-scheme:dark}select option,select optgroup{background:#16222b;color:#eef9ff}input[type=range]{width:100%;accent-color:var(--accent)}textarea{min-height:180px;resize:vertical}.button-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.symbol-picker{display:flex;flex-wrap:wrap;gap:8px}.mini-button{padding:8px 12px;font-size:.78rem}.symbol-chip{border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:8px 12px;background:#ffffff0d;color:var(--text);font-size:.84rem;font-weight:700}.symbol-chip:hover{background:#8cecff1f}.symbol-editor-panel{margin-top:14px;padding:16px;border:1px solid rgba(255,255,255,.05);background:linear-gradient(180deg,#ffffff0a,#ffffff05),#ffffff05}.symbol-editor-panel.is-hidden{display:none}.symbol-editor-top{grid-template-columns:minmax(0,2fr) minmax(0,1fr);margin-top:0}.symbol-editor-actions{align-content:end}.compact-row{margin-top:0}.field+.compact-row{margin-top:10px}.symbol-editor-grid-wrap{margin-top:16px;overflow-x:auto;padding:12px;background:#09111880;border:1px solid rgba(255,255,255,.04)}.symbol-editor-grid{display:inline-grid;gap:2px;touch-action:none}.symbol-editor-pixel{display:block;width:16px;height:16px;padding:0;margin:0;border:1px solid rgba(140,236,255,.1);background:#243643;appearance:none;-webkit-appearance:none;border-radius:0;box-shadow:none;font-size:0;line-height:0;cursor:pointer}.symbol-editor-pixel.is-on{background:#ff914d;border-color:#ffd2a047;box-shadow:0 0 8px #ff8c412e}button{border:0;border-radius:999px;padding:12px 16px;background:linear-gradient(135deg,var(--accent),var(--accent-3));color:#17110d;cursor:pointer;font-weight:800;letter-spacing:.01em}button.ghost{background:#ffffff12;color:var(--text)}button.accent{background:linear-gradient(135deg,var(--accent-2),var(--accent))}button:disabled{opacity:.55;cursor:not-allowed}.status-card{margin-top:18px;padding:14px;border-radius:20px;background:linear-gradient(180deg,#ffffff0a,#ffffff05),#ffffff08;border:1px solid rgba(255,255,255,.04)}.status-line{margin:0;color:var(--muted)}.status-line+.status-line{margin-top:8px}.section-heading{margin-top:24px}.slot-section{display:block}.slot-list{display:grid;gap:10px;margin-top:16px}.slot-card{display:grid;gap:6px;width:100%;text-align:left;border-radius:0;padding:15px 16px;background:linear-gradient(135deg,#ffffff0d,#ffffff04),#ffffff08;color:var(--text);border:1px solid rgba(255,255,255,.04)}.slot-card.is-active{background:linear-gradient(135deg,#8cecff29,#ff7b1f24),#ffffff0d;outline:1px solid rgba(140,236,255,.2);transform:translateY(-1px)}.slot-title{font-weight:800}.slot-meta{color:var(--muted);font-size:.81rem;line-height:1.45}.slot-chip{width:fit-content;border-radius:0;padding:5px 10px;background:#8cecff1a;color:var(--accent-2);font-size:.71rem;letter-spacing:.05em;text-transform:uppercase}.toggle-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}.toggle-pill{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:0;padding:12px 14px;background:#ffffff0d;color:var(--text);border:1px solid rgba(255,255,255,.04)}.toggle-pill input{accent-color:var(--accent)}.pixel-grid{display:inline-grid;grid-template-columns:repeat(55,minmax(0,1fr));gap:3px;margin-top:18px;padding:14px;border-radius:0;background:linear-gradient(180deg,#ffffff0b,#ffffff05),#0000002e;touch-action:none;border:1px solid rgba(255,255,255,.04)}.editor-scroller{margin-top:18px;overflow-x:auto;overflow-y:hidden;padding:14px 14px 22px;border-radius:0;background:linear-gradient(180deg,#ffffff0b,#ffffff05),#0000002e;border:1px solid rgba(255,255,255,.04);scrollbar-width:thin;scrollbar-color:rgba(140,236,255,.35) transparent;box-sizing:border-box;scrollbar-gutter:stable}.editor-scroll-control{margin-top:12px}.editor-scroll-control input[type=range]{height:22px}.editor-scroller::-webkit-scrollbar{height:10px}.editor-scroller::-webkit-scrollbar-thumb{background:#8cecff4d;border-radius:999px}.pixel-grid-preview{min-width:max-content;margin-top:0;padding:10px 12px 12px 10px;border-radius:0;background:linear-gradient(180deg,#ffffff09,#ffffff03),#1a2832;border:1px solid rgba(255,255,255,.04);box-sizing:border-box}.editor-grid{gap:2px;align-self:start}.pixel{box-sizing:border-box;display:block;width:100%;height:100%;padding:0;margin:0;border-radius:0;appearance:none;-webkit-appearance:none;background:var(--grid-off);border:1px solid rgba(255,255,255,.025);min-width:0;min-height:0;box-shadow:none;font-size:0;line-height:0;cursor:pointer}.pixel.is-on{background:var(--grid-on);box-shadow:0 0 18px #ff8c4173,inset 0 0 10px #ffc88c1f}.editor-grid .pixel{border-radius:0;background:#243643;border-color:#8cecff17}.editor-grid .pixel.is-on{background:#ff914d;border-color:#ffd2a047;box-shadow:0 0 8px #ff8c412e}#previewCanvas{width:100%;margin-top:18px;border-radius:0;background:linear-gradient(180deg,#ffffff0f,#ffffff05),#090d10;image-rendering:pixelated;border:1px solid rgba(255,255,255,.04)}.note{color:var(--muted);line-height:1.58}code{font-family:Consolas,Courier New,monospace}@media(max-width:980px){.settings-panel,.editor-panel,.protocol-panel{grid-column:1 / -1}}@media(max-width:720px){.app-shell{width:min(100%,calc(100% - 16px));padding-top:18px}.panel{padding:16px;border-radius:22px}.field-row{grid-template-columns:1fr}.field-row.triple,.toggle-grid{grid-template-columns:1fr 1fr}.pixel-grid{gap:2px;padding:10px}.editor-scroller{padding-bottom:10px}.editor-scroller::-webkit-scrollbar{height:6px}.editor-scroll-control input[type=range]{height:28px}.slot-drawer-toggle{display:grid;place-items:center}.slot-section{display:none}}