:root{color:#eef0ff;font-synthesis:none;text-rendering:geometricprecision;background:#050711;font-family:SFMono-Regular,Cascadia Mono,Menlo,monospace}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button{font:inherit}#app{isolation:isolate;background:radial-gradient(circle at 50% 44%,#1e226052,#0000 46%),radial-gradient(70% 60% at 50% 46%,#0c123880,#0000 70%),linear-gradient(150deg,#04060f 0%,#070b1c 46%,#03050e 100%);position:relative}#app:before{z-index:-1;content:"";opacity:.22;background-image:linear-gradient(#7178bb0d 1px,#0000 1px),linear-gradient(90deg,#7178bb0a 1px,#0000 1px);background-size:64px 64px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000 76%);mask-image:linear-gradient(#000,#0000 76%)}#app:after{z-index:5;pointer-events:none;content:"";opacity:.16;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");position:absolute;inset:0}.viewport{position:absolute;inset:0}.viewport canvas{width:100%;height:100%;display:block}.masthead{z-index:8;pointer-events:none;align-items:flex-start;gap:30px;display:flex;position:absolute;top:36px;left:42px}.brand{padding-left:15px;position:relative}.brand:before{content:"";background:linear-gradient(#8e7cff,#0000);width:2px;position:absolute;top:2px;bottom:4px;left:0;box-shadow:0 0 24px #6255ff}.eyebrow,.control-label,.footer-note,.panel-heading,.status{text-transform:uppercase;letter-spacing:.14em}.eyebrow{color:#8f94b9;margin-bottom:8px;font-size:10px;display:block}h1{color:#f4f3ff;letter-spacing:-.055em;text-transform:uppercase;margin:0;font-family:DIN Condensed,Avenir Next Condensed,sans-serif;font-size:clamp(42px,5vw,68px);font-weight:600;line-height:.73}.status{color:#767c9b;align-items:center;gap:8px;margin-top:3px;font-size:9px;display:flex}.status-dot{background:#6558e9;border:1px solid #a99cff;border-radius:50%;width:7px;height:7px;animation:2.4s ease-in-out infinite pulse;box-shadow:0 0 14px #6c5cff}.reference-panel{z-index:9;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#050712c7;border:1px solid #8b90ce2e;border-radius:3px;width:min(26vw,390px);transition:opacity .22s,transform .22s;position:absolute;top:34px;right:38px;overflow:hidden;box-shadow:0 22px 80px #00000052}.reference-panel.hidden{opacity:0;pointer-events:none;transform:translateY(-10px)}.panel-heading{color:#858aab;justify-content:space-between;align-items:center;height:32px;padding:0 11px;font-size:9px;display:flex}.panel-heading button{color:#8d91aa;cursor:pointer;background:0 0;border:0}.reference-panel img{border-top:1px solid #8b90ce1f;width:100%;display:block}.inspector{z-index:9;grid-template-columns:auto auto 1fr;align-items:end;gap:44px;display:grid;position:absolute;bottom:42px;left:42px;right:38px}.control-group{gap:10px;display:grid}.control-label{color:#686d8a;font-size:9px}.segmented,.camera-actions,.utility-actions{gap:4px;display:flex}.segmented button,.camera-actions button,.utility-actions button{color:#737997;text-transform:uppercase;letter-spacing:.08em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;background:#0a0d1d94;border:1px solid #7d82b533;border-radius:2px;min-height:32px;padding:0 13px;font-size:10px;transition:color .15s,border-color .15s,background .15s,box-shadow .15s}.segmented button:hover,.camera-actions button:hover,.utility-actions button:hover,.segmented button.active,.camera-actions button.active,.utility-actions button.active{color:#e4e1ff;background:#4334a347;border-color:#8b7bff94;box-shadow:inset 0 -1px #9789ff8c}.utility-actions{justify-self:end}.footer-note{z-index:9;color:#4f546e;gap:23px;font-size:8px;display:flex;position:absolute;bottom:12px;left:42px}.capture-mode .masthead,.capture-mode .reference-panel,.capture-mode .inspector,.capture-mode .footer-note,.capture-mode #app:after{display:none}@keyframes pulse{50%{opacity:.45;box-shadow:0 0 5px #6c5cff}}@media (width<=850px){.masthead{top:24px;left:22px}.reference-panel{width:36vw;top:22px;right:20px}.inspector{grid-template-columns:1fr;gap:12px;bottom:38px;left:22px;right:20px}.utility-actions{justify-self:start}.footer-note{left:22px}}
