:root{--bg-void: #06080C;--bg-chassis: #0B0E14;--surface-1: #10141C;--surface-2: #171C27;--surface-3: #212837;--surface-inset: #0A0D12;--line: #232B39;--line-soft: #1A2130;--line-strong: #35405370;--text-hi: #EDF1F8;--text-mid: #9AA6BA;--text-lo: #64707F;--text-disabled: #454F5E;--accent: #4C9DFF;--accent-strong: #2E86FF;--accent-weak: #4C9DFF1F;--accent-ring: #4C9DFF;--on-accent: #06111F;--sig-live: #FF3B30;--sig-live-dim: #4A1512;--sig-live-glow: rgba(255, 59, 48, .55);--sig-live-frame: #FF5247;--sig-preview: #21D07A;--sig-preview-dim: #0C3322;--sig-preview-glow: rgba(33, 208, 122, .5);--sig-preview-frame: #35E08C;--sig-standby: #F5A623;--sig-standby-dim: #3A2A08;--sig-standby-glow: rgba(245, 166, 35, .45);--sig-standby-frame: #FFB742;--sig-off: #3B4658;--sig-off-lamp: #2A3140;--sig-off-frame: #2A3342;--sys-ok: #21D07A;--sys-degraded: #F5A623;--sys-error: #FF453A;--sys-ok-weak: #21D07A1A;--sys-degraded-weak: #F5A6231A;--sys-error-weak: #FF453A1A;--space-0: 0;--space-1: 2px;--space-2: 4px;--space-3: 6px;--space-4: 8px;--space-5: 10px;--space-6: 12px;--space-8: 16px;--space-10: 20px;--space-12: 24px;--space-16: 32px;--space-20: 40px;--space-24: 48px;--space-32: 64px;--space-40: 80px;--r-xs: 3px;--r-sm: 5px;--r-md: 8px;--r-lg: 12px;--r-xl: 16px;--r-full: 999px;--font-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;--fs-2xs: .6875rem;--fs-xs: .75rem;--fs-sm: .8125rem;--fs-base: .9375rem;--fs-md: 1.0625rem;--fs-lg: 1.375rem;--fs-xl: 1.75rem;--fs-2xl: 2.25rem;--fs-clock: 2.75rem;--lh-tight: 1.1;--lh-snug: 1.25;--lh-normal: 1.5;--fw-regular: 400;--fw-medium: 500;--fw-semibold:600;--fw-bold: 700;--ls-tight: -.02em;--ls-normal: 0;--ls-legend: .08em;--ls-legend-wide: .14em;--shadow-panel: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.35);--shadow-pop: 0 2px 6px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45);--shadow-inset: inset 0 1px 0 rgba(255,255,255,.03);--bloom-sm: 0 0 14px;--bloom-lg: 0 0 34px;--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-inout: cubic-bezier(.65, 0, .35, 1);--dur-fast: .12s;--dur-base: .18s;--dur-slow: .28s;--z-base: 0;--z-sticky: 100;--z-overlay: 800;--z-toast: 900}@media (prefers-reduced-motion: reduce){:root{--dur-fast: 1ms;--dur-base: 1ms;--dur-slow: 1ms}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}html,body,#root{height:100%}body{font-family:var(--font-ui);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--text-hi);background:var(--bg-void)}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit;font-size:var(--fs-base)}:focus-visible{outline:2px solid var(--accent-ring);outline-offset:2px;border-radius:var(--r-xs)}svg{display:block}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.legend{font-size:var(--fs-2xs);letter-spacing:var(--ls-legend-wide);text-transform:uppercase;color:var(--text-lo);font-weight:var(--fw-medium)}.hint{font-size:var(--fs-xs);color:var(--text-lo)}.brand{display:flex;align-items:center;gap:var(--space-4)}.brand__mark{width:24px;height:24px}.brand__word{font-size:var(--fs-md);font-weight:var(--fw-bold);letter-spacing:.02em}.brand__word b{color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);height:36px;padding:0 var(--space-12);border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-semibold);border:1px solid var(--line);background:var(--surface-2);color:var(--text-hi);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast)}.btn:hover{background:var(--surface-3);border-color:var(--line-strong)}.btn:active{transform:translateY(1px)}.btn--ghost{background:transparent}.btn--primary{background:var(--accent);color:var(--on-accent);border-color:transparent}.btn--primary:hover{background:var(--accent-strong)}.btn--sm{height:30px;padding:0 var(--space-8);font-size:var(--fs-xs)}.btn--block{width:100%}.chip{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:var(--fw-medium);border:1px solid var(--line);white-space:nowrap}.chip__dot{position:relative;width:8px;height:8px;border-radius:var(--r-full);flex:none}.chip--ok{background:var(--sys-ok-weak);color:#7fe9b4;border-color:#21d07a3d}.chip--ok .chip__dot{background:var(--sys-ok)}.chip--ok .chip__dot--pulse:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:var(--r-full);background:var(--sys-ok);opacity:.35;animation:ping 2s var(--ease-out) infinite}.chip--warn{background:var(--sys-degraded-weak);color:#ffd489;border-color:#f5a6234a}.chip--warn .chip__dot{background:var(--sys-degraded)}.chip--err{background:var(--sys-error-weak);color:#ff8b83;border-color:#ff453a4a}.chip--err .chip__dot{background:var(--sys-error)}@keyframes ping{0%{transform:scale(.6);opacity:.5}80%,to{transform:scale(2);opacity:0}}.bar{display:flex;align-items:center;gap:var(--space-12);flex:none;padding:var(--space-8) var(--space-16);background:linear-gradient(180deg,#0e131c,var(--bg-chassis));border-bottom:1px solid var(--line);z-index:var(--z-sticky)}.bar__spacer{flex:1}.bar__brand-mark{width:22px;height:22px}.bar__word{font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:.02em;color:var(--text-mid)}.room{display:flex;flex-direction:column;gap:1px;padding-left:var(--space-12);border-left:1px solid var(--line);min-width:0}.room__name{font-weight:var(--fw-semibold);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role{font-size:var(--fs-2xs);letter-spacing:var(--ls-legend);text-transform:uppercase;color:var(--text-lo);border:1px solid var(--line);border-radius:var(--r-full);padding:3px var(--space-6)}.stage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(var(--space-16),4vh,var(--space-32));padding:var(--space-24);overflow:hidden;transition:background var(--dur-slow) var(--ease-out)}.stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.9;transition:background var(--dur-slow) var(--ease-out);pointer-events:none}.stage__lamp{position:relative;width:clamp(120px,22vw,220px);height:clamp(120px,22vw,220px);border-radius:var(--r-full);flex:none;z-index:1}.stage__core{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--r-full)}.stage__slash{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;color:var(--text-lo)}.stage__slash svg{width:46%;height:46%}.stage__read{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);z-index:1;text-align:center}.state-word{display:flex;align-items:center;gap:var(--space-12);font-size:clamp(3rem,11vw,7rem);font-weight:var(--fw-bold);line-height:1;letter-spacing:var(--ls-tight)}.state-word__glyph{width:clamp(2rem,7vw,4.2rem);height:clamp(2rem,7vw,4.2rem);flex:none}.state-sub{font-size:clamp(var(--fs-base),2.4vw,var(--fs-lg));color:var(--text-mid);letter-spacing:var(--ls-legend);text-transform:uppercase}.since{font-size:var(--fs-sm);color:var(--text-lo);z-index:1}.since .mono{color:var(--text-mid)}.stage__hint{position:absolute;bottom:var(--space-16);left:0;right:0;text-align:center;color:var(--text-lo);font-size:var(--fs-xs);z-index:1}.stage.s-belegt:before{background:radial-gradient(60% 55% at 50% 46%,#ff3b3033,transparent 72%)}.stage.s-belegt .state-word{color:var(--sig-live)}.stage.s-belegt .stage__core{background:radial-gradient(circle at 40% 32%,#ff8a80,var(--sig-live));box-shadow:0 0 40px var(--sig-live-glow),0 0 120px var(--sig-live-glow),inset 0 0 24px #fff5}.stage.s-belegt .stage__lamp:after{content:"";position:absolute;top:-14px;right:-14px;bottom:-14px;left:-14px;border-radius:var(--r-full);border:3px solid var(--sig-live);opacity:0;animation:tally 1.8s var(--ease-out) infinite}@keyframes tally{0%{transform:scale(.9);opacity:.6}70%,to{transform:scale(1.3);opacity:0}}.stage.s-achtung:before{background:radial-gradient(60% 55% at 50% 46%,#f5a62330,transparent 72%)}.stage.s-achtung .state-word{color:var(--sig-standby)}.stage.s-achtung .stage__core{background:linear-gradient(180deg,var(--sig-standby) 0 50%,var(--sig-standby-dim) 50% 100%);box-shadow:0 0 34px var(--sig-standby-glow),0 0 90px var(--sig-standby-glow),inset 0 0 0 2px #ffffff18}.stage.s-frei:before{background:radial-gradient(60% 55% at 50% 46%,#21d07a2b,transparent 72%)}.stage.s-frei .state-word{color:var(--sig-preview)}.stage.s-frei .stage__core{background:transparent;border:clamp(18px,3vw,30px) solid var(--sig-preview);box-shadow:0 0 34px var(--sig-preview-glow),inset 0 0 30px var(--sig-preview-glow)}.stage.s-getrennt .stage__core{background:radial-gradient(circle at 40% 34%,#333c4c,var(--sig-off-lamp));box-shadow:inset 0 3px 12px #000000b3,inset 0 0 0 2px #ffffff08}.stage.s-getrennt .state-word,.stage.s-getrennt .state-sub{color:var(--text-lo)}.stage.s-connecting .stage__core{background:radial-gradient(circle at 40% 34%,#2a3140,#1a2028);box-shadow:inset 0 3px 12px #000000b3}.stage.s-connecting .state-word{color:var(--text-mid);font-size:clamp(2rem,7vw,4rem)}.spin{animation:spin 1s linear infinite;transform-origin:center}@keyframes spin{to{transform:rotate(360deg)}}.ctrl{min-height:100vh;padding:var(--space-16);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-12);background-image:radial-gradient(120% 80% at 50% -6%,#0d121c 0%,var(--bg-void) 55%)}.ctrl__wrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--space-12)}.ctrl__room{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}.ctrl__name{font-size:var(--fs-md);font-weight:var(--fw-semibold)}.bigtile{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-10);padding:var(--space-20);background:var(--surface-2);border:1px solid var(--sig-off-frame);border-radius:var(--r-xl);box-shadow:var(--shadow-panel);transition:border-color var(--dur-base),box-shadow var(--dur-base)}.biglamp{position:relative;width:104px;height:104px;border-radius:var(--r-full);flex:none}.biglamp__core{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--r-full)}.bigstate{display:flex;align-items:center;gap:var(--space-8);font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:var(--ls-legend);line-height:1}.bigstate__glyph{width:26px;height:26px;flex:none}.bigsub{font-size:var(--fs-sm);color:var(--text-mid);text-align:center}.bigtile.is-belegt{border-color:var(--sig-live-frame);box-shadow:var(--shadow-panel),0 0 0 1px var(--sig-live-frame),0 0 30px -6px var(--sig-live-glow)}.bigtile.is-belegt .bigstate{color:var(--sig-live)}.bigtile.is-belegt .biglamp__core{background:radial-gradient(circle at 38% 30%,#ff8a80,var(--sig-live));box-shadow:0 0 20px var(--sig-live-glow),0 0 46px var(--sig-live-glow),inset 0 0 10px #fff5}.bigtile.is-belegt .biglamp:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:var(--r-full);border:2px solid var(--sig-live);opacity:0;animation:tally 1.7s var(--ease-out) infinite}.bigtile.is-achtung{border-color:var(--sig-standby-frame)}.bigtile.is-achtung .bigstate{color:var(--sig-standby)}.bigtile.is-achtung .biglamp__core{background:linear-gradient(180deg,var(--sig-standby) 0 50%,var(--sig-standby-dim) 50% 100%);box-shadow:0 0 18px var(--sig-standby-glow),inset 0 0 0 1px #ffffff12}.bigtile.is-frei{border-color:var(--sig-preview-frame)}.bigtile.is-frei .bigstate{color:var(--sig-preview)}.bigtile.is-frei .biglamp__core{background:transparent;border:14px solid var(--sig-preview);box-shadow:0 0 18px var(--sig-preview-glow),inset 0 0 12px var(--sig-preview-glow)}.bigtile.is-getrennt{opacity:.6}.bigtile.is-getrennt .bigstate{color:var(--text-lo)}.bigtile.is-getrennt .biglamp__core{background:radial-gradient(circle at 40% 34%,#333c4c,var(--sig-off-lamp));box-shadow:inset 0 2px 8px #000000b3}.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);padding:var(--space-4);background:var(--surface-inset);border-radius:var(--r-md);border:1px solid var(--line-soft)}.seg3__btn{height:64px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:var(--ls-legend);color:var(--text-mid);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast)}.seg3__btn:hover{background:var(--surface-3);color:var(--text-hi)}.seg3__glyph{width:18px;height:18px}.seg3__glyph.belegt{color:var(--sig-live)}.seg3__glyph.achtung{color:var(--sig-standby)}.seg3__glyph.frei{color:var(--sig-preview)}.seg3__btn.belegt[aria-pressed=true]{background:var(--sig-live);color:#2a0603}.seg3__btn.achtung[aria-pressed=true]{background:var(--sig-standby);color:#2a1c02}.seg3__btn.frei[aria-pressed=true]{background:var(--sig-preview);color:#042314}.seg3__btn[aria-pressed=true] .seg3__glyph{color:inherit}.seg3.is-locked{opacity:.5;pointer-events:none;filter:grayscale(.4)}.lockrow{display:flex;align-items:center;gap:var(--space-4);font-size:var(--fs-xs);color:var(--text-lo);justify-content:center}.pending{display:inline-flex;align-items:center;gap:var(--space-4);font-size:var(--fs-2xs);color:var(--accent);letter-spacing:var(--ls-legend);text-transform:uppercase}.pending svg{width:12px;height:12px}.lockrow>svg{width:13px;height:13px;color:var(--sys-degraded)}.banner{display:flex;align-items:flex-start;gap:var(--space-8);padding:var(--space-8) var(--space-10);border-radius:var(--r-md);border:1px solid;font-size:var(--fs-sm)}.banner__icon{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none}.banner__icon svg{width:18px;height:18px}.banner__t{font-weight:var(--fw-semibold);color:var(--text-hi)}.banner__d{color:var(--text-mid);margin-top:2px;font-size:var(--fs-xs)}.banner--degraded{background:var(--sys-degraded-weak);border-color:#f5a6234a}.banner--degraded .banner__icon{background:#f5a62322;color:var(--sys-degraded)}.banner--error{background:var(--sys-error-weak);border-color:#ff453a4a}.banner--error .banner__icon{background:#ff453a22;color:var(--sys-error)}.rail{display:flex;align-items:center;gap:var(--space-12);padding:var(--space-8) var(--space-16);background:linear-gradient(180deg,#0e131c,var(--bg-chassis));border-bottom:1px solid var(--line)}.rail__brand{padding-right:var(--space-12);border-right:1px solid var(--line)}.rail__title{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}.rail__spacer{flex:1}.avatar{width:30px;height:30px;border-radius:var(--r-full);background:var(--surface-3);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-mid);border:1px solid var(--line)}.page{padding:var(--space-16) var(--space-16) var(--space-20)}.page__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-12);gap:var(--space-8)}.page__title{font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight)}.page__sub{color:var(--text-mid);font-size:var(--fs-sm)}.rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-10)}@media (max-width: 820px){.rooms{grid-template-columns:1fr 1fr}}.rcard{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-12);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);transition:border-color var(--dur-base),box-shadow var(--dur-base)}.rcard:hover{border-color:var(--line-strong)}.rcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6)}.rcard__name{font-size:var(--fs-md);font-weight:var(--fw-semibold);letter-spacing:-.01em}.rcard__meta{font-size:var(--fs-2xs);color:var(--text-lo);margin-top:2px}.rcard__foot{display:flex;align-items:center;gap:var(--space-6);margin-top:auto;padding-top:var(--space-6);border-top:1px solid var(--line-soft)}.rcard__stat{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-xs);color:var(--text-mid)}.rcard__stat svg{width:14px;height:14px}.rcard__actions{margin-left:auto;display:flex;gap:var(--space-4)}.iconbtn{width:30px;height:30px;display:grid;place-items:center;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface-1);color:var(--text-mid)}.iconbtn:hover{background:var(--surface-3);color:var(--text-hi)}.iconbtn svg{width:15px;height:15px}.statepill{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-6);border-radius:var(--r-full);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-legend);border:1px solid}.minilamp{width:12px;height:12px;border-radius:var(--r-full);flex:none}.statepill--belegt{color:var(--sig-live);border-color:var(--sig-live-frame);background:#ff3b301a}.statepill--belegt .minilamp{background:var(--sig-live);box-shadow:0 0 6px var(--sig-live-glow)}.statepill--achtung{color:var(--sig-standby);border-color:var(--sig-standby-frame);background:#f5a6231a}.statepill--achtung .minilamp{background:linear-gradient(180deg,var(--sig-standby) 50%,var(--sig-standby-dim) 50%)}.statepill--frei{color:var(--sig-preview);border-color:var(--sig-preview-frame);background:#21d07a1a}.statepill--frei .minilamp{background:transparent;border:3px solid var(--sig-preview)}.statepill--getrennt{color:var(--text-lo);border-color:var(--line);background:var(--surface-inset)}.statepill--getrennt .minilamp{background:var(--sig-off-lamp);border:1px solid #ffffff10}.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-6);padding:var(--space-32) var(--space-16)}.empty__art{color:var(--line-strong)}.empty__t{font-size:var(--fs-lg);font-weight:var(--fw-semibold)}.empty__d{color:var(--text-mid);font-size:var(--fs-sm);max-width:44ch}.sk{background:var(--surface-3);border-radius:var(--r-sm);animation:skpulse 1.5s var(--ease-out) infinite}@keyframes skpulse{0%,to{opacity:1}50%{opacity:.42}}.sk-card{display:flex;flex-direction:column;gap:var(--space-8);padding:var(--space-12);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-lg)}.login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-24);gap:var(--space-16);background-image:radial-gradient(120% 80% at 50% -6%,#0d121c 0%,var(--bg-void) 55%)}.login__card{width:100%;max-width:380px;background:var(--surface-1);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:var(--space-20)}.login__brand{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);margin-bottom:var(--space-16)}.login__brand .brand__mark{width:38px;height:38px}.login__title{font-size:var(--fs-lg);font-weight:var(--fw-semibold);letter-spacing:var(--ls-tight)}.field{margin-bottom:var(--space-10)}.field label{display:block;font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text-mid);margin-bottom:var(--space-3)}.input{width:100%;height:40px;padding:0 var(--space-10);background:var(--surface-inset);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text-hi);transition:border-color var(--dur-fast)}.input::placeholder{color:var(--text-disabled)}.input:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-weak)}.login__meta{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-6)}.link{color:var(--accent);font-size:var(--fs-xs);text-decoration:none}.login__legal{color:var(--text-lo);font-size:var(--fs-2xs);text-align:center;max-width:340px;line-height:1.5}.access{padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-12);max-width:520px;margin:0 auto}.access__h{display:flex;align-items:center;justify-content:space-between}.access__title{font-size:var(--fs-md);font-weight:var(--fw-semibold)}.acc-group{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}.acc-group__head{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-8) var(--space-10);background:var(--surface-2);border-bottom:1px solid var(--line-soft)}.acc-group__head svg{width:16px;height:16px}.acc-group__role{font-weight:var(--fw-semibold);font-size:var(--fs-sm)}.acc-group__tag{font-size:var(--fs-2xs);color:var(--text-lo)}.acc-group__body{padding:var(--space-10);display:flex;flex-direction:column;gap:var(--space-8);background:var(--surface-1)}.linkrow{display:flex;align-items:stretch;gap:var(--space-4)}.linkrow .input{flex:1;font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--text-mid);display:flex;align-items:center}.codebox{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap}.code{font-family:var(--font-mono);font-size:var(--fs-xl);font-weight:var(--fw-semibold);letter-spacing:.18em;color:var(--text-hi);background:var(--surface-inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--space-4) var(--space-10)}.gallery{max-width:1360px;margin:0 auto;padding:var(--space-24) var(--space-16) var(--space-32)}.gallery__intro h1{font-size:var(--fs-2xl);letter-spacing:var(--ls-tight);font-weight:var(--fw-bold)}.gallery__intro p{color:var(--text-mid);font-size:var(--fs-sm);max-width:80ch;margin-top:var(--space-4)}.gallery__note{margin-top:var(--space-8);padding:var(--space-8) var(--space-10);border-radius:var(--r-md);border:1px solid #f5a6234a;background:var(--sys-degraded-weak);color:#ffd489;font-size:var(--fs-xs);max-width:80ch}.artboard{margin-top:var(--space-24)}.artboard__cap{display:flex;align-items:baseline;gap:var(--space-8);margin-bottom:var(--space-8);padding-bottom:var(--space-4);border-bottom:1px solid var(--line-soft);flex-wrap:wrap}.artboard__id{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--accent);background:var(--accent-weak);border:1px solid #4c9dff3d;border-radius:var(--r-xs);padding:1px var(--space-4)}.artboard__t{font-size:var(--fs-md);font-weight:var(--fw-semibold)}.artboard__note{color:var(--text-lo);font-size:var(--fs-xs);margin-left:auto}.frame{background:var(--bg-chassis);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-panel);overflow:hidden}.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16)}@media (max-width: 900px){.row2{grid-template-columns:1fr}}