:root{color-scheme:dark;font-family:IBM Plex Sans,Avenir Next,sans-serif;--viewer-grade-hue: 192deg;--viewer-grade-saturation: 1.72;--viewer-grade-brightness: .42;--viewer-grade-lightness: 0;--viewer-grade-opacity: .68;--viewer-lights-intensity: 1.18;--viewer-lights-coverage: 24%;--viewer-rain-intensity: .72;--viewer-rain-wind: .28;background:radial-gradient(circle at top left,rgba(193,147,68,.22),transparent 32%),radial-gradient(circle at bottom right,rgba(10,94,88,.28),transparent 36%),linear-gradient(180deg,#081412,#0d1717 46%,#10161f);color:#edf3ee}*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{min-height:100vh}.app-shell{position:relative;min-height:100vh;overflow:hidden}.viewer{position:fixed;inset:0;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),radial-gradient(circle at center,#182a2a47,#050a0bf5);background-size:40px 40px,40px 40px,auto;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.viewer.is-dragging{cursor:grabbing}.viewer-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none}.viewer-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.viewer-canvas--fx{opacity:.92;mix-blend-mode:screen}.viewer-canvas--ui{z-index:4}.hud{position:fixed;top:18px;left:18px;width:min(360px,calc(100vw - 36px));padding:18px 18px 16px;border:1px solid rgba(240,236,222,.12);border-radius:22px;background:#091418b8;box-shadow:0 24px 80px #00000047;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.hud--dismissible{padding-top:48px}.hud__close{position:absolute;top:12px;left:12px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;appearance:none;border:1px solid rgba(240,236,222,.14);border-radius:999px;background:#f0f6f20f;color:#edf3eee0;font:inherit;font-size:1rem;line-height:1;cursor:pointer}.hud__close:hover{background:#f0f6f21f}.hud__close:focus-visible{outline:2px solid rgba(255,239,196,.88);outline-offset:2px}.hud__eyebrow{margin:0 0 10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#dbb26e}.hud h1,.hud p,.hud dt,.hud dd{margin:0}.hud h1{font-family:Iowan Old Style,Palatino Linotype,serif;font-size:clamp(1.8rem,3vw,2.5rem);line-height:.94;letter-spacing:-.04em}.hud__lede{margin-top:10px;color:#e7efeac7;line-height:1.55}.mode-toggle{margin-top:16px;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:6px;border-radius:18px;background:#f0f6f20d;border:1px solid rgba(240,246,242,.08)}.mode-toggle__button{appearance:none;border:0;border-radius:14px;padding:10px 14px;font:inherit;font-weight:600;color:#e9f0ebc7;background:transparent;cursor:pointer}.mode-toggle__button.is-active{color:#081412;background:linear-gradient(135deg,#d7e5d8,#f0d8a4)}.mode-toggle__button:disabled{opacity:.45;cursor:default}.grade-controls,.rain-controls,.lights-controls,.mask-controls,.subway-controls,.selection-controls{margin-top:16px;padding:14px 14px 12px;border-radius:18px;background:#f0f6f20d;border:1px solid rgba(240,246,242,.06)}.selection-controls__button{width:100%;appearance:none;border:0;border-radius:14px;padding:12px 14px;font:inherit;font-weight:700;color:#081412;background:linear-gradient(135deg,#f3d492,#ffefc4);cursor:pointer}.selection-controls__button:disabled{opacity:.45;cursor:default}.selection-controls__status{margin:10px 0 0;color:#e7efeabd;line-height:1.45;font-size:.88rem}.grade-controls__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.grade-controls__header h2{margin:0;font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#e7efeabd}.grade-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}.grade-control+.grade-control{margin-top:12px}.grade-control__label{font-size:.88rem;color:#e7efeabd}.grade-control__value{font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:.82rem;color:#f3f7f4}.grade-control__input{grid-column:1 / -1;width:100%;margin:0;accent-color:#98b7ff}.control-button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.control-button{appearance:none;border:1px solid rgba(240,246,242,.12);border-radius:14px;padding:11px 12px;font:inherit;font-weight:600;color:#e9f0ebd1;background:#f0f6f20a;cursor:pointer;transition:background-color .12s ease,border-color .12s ease,color .12s ease,transform .12s ease}.control-button:hover{transform:translateY(-1px);border-color:#f0f6f22e}.control-button:disabled{opacity:.45;cursor:default;transform:none}.control-button.is-active{color:#081412;border-color:transparent;background:linear-gradient(135deg,#d7e5d8,#f0d8a4)}.grade-controls .grade-control+.control-button,.grade-controls .control-button+.grade-control,.grade-controls .control-button+.control-button{margin-top:12px}.grade-controls__lightning-buttons{margin-top:12px}.control-button--full{grid-column:1 / -1}.mask-controls .grade-control,.mask-controls .control-button+.grade-control,.mask-controls .grade-control+.control-button{margin-top:12px}.mask-controls .control-copy,.subway-controls .control-copy{margin-top:12px;margin-bottom:0}.subway-controls .control-button+.control-button{margin-top:10px}.control-copy{margin:0 0 12px;color:#e7efeaad;line-height:1.45;font-size:.88rem}.stats{margin-top:16px;display:grid;gap:10px}.stats__row{display:grid;grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:10px;align-items:baseline;padding:10px 12px;border-radius:14px;background:#f0f6f20d;border:1px solid rgba(240,246,242,.06)}.stats dt{color:#e7efeaad;font-size:.88rem;letter-spacing:.03em}.stats dd{justify-self:end;text-align:right;font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:.88rem;color:#f3f7f4}.empty-state{position:absolute;inset:auto 18px 18px auto;max-width:min(460px,calc(100vw - 36px));padding:16px 18px;border-radius:18px;border:1px solid rgba(233,213,171,.22);background:#29150fdb;color:#f2dfc0;line-height:1.55;box-shadow:0 24px 80px #00000047}@media(max-width:720px){.hud{top:12px;left:12px;width:calc(100vw - 24px);padding:14px}.stats__row{grid-template-columns:1fr}.stats dd{justify-self:start;text-align:left}.empty-state{inset:auto 12px 12px;max-width:none}}
