:root{color-scheme:dark;--bg:#090b0e;--panel:#101318;--line:#242930;--text:#eeeae2;--muted:#8c949b;--gold:#c9a86b;--accent:#72d5cb;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-synthesis:none}
.wake-button{height:45px;justify-content:space-between;padding:0 15px;background:linear-gradient(115deg,#25463e,#253c4b);border-color:#678f7b;font-size:12px}.wake-spark{font-size:21px;color:#e7c47e}.presence-response{font-size:10px;line-height:1.65;color:#a9bab4;min-height:32px;margin:10px 0 22px}.controls .panel-description{margin-bottom:16px}#face-canvas{pointer-events:none}.stage{cursor:pointer}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 22% 36%,#10191c80,transparent 52%),var(--bg);color:var(--text);min-width:300px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #bce9e2;outline-offset:5px}button:disabled{opacity:.55;cursor:wait}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}
.site-header{height:82px;max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 54px;border-bottom:1px solid #ffffff0c}.brand{display:flex;gap:12px;align-items:center;color:#d4c7ac;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:2.2px}.brand svg{color:var(--gold);width:26px;height:26px}.header-note,.artist{font-size:9px;letter-spacing:2px;color:var(--muted)}.artist{color:#b4aea2}.header-note{margin-left:-35px}
main{max-width:1332px;margin:0 auto;padding:35px 40px 0}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--gold);font-weight:500;margin:0 0 10px}h1{font:normal 61px/1 Georgia,"Times New Roman",serif;letter-spacing:-2px;margin:0}.title-dot{color:var(--gold)}.intro-copy{font-size:12px;line-height:1.8;margin:0 0 2px;color:#c1c7cb}.intro-copy span{color:var(--muted)}.experience{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:32px;align-items:center}.art-section{min-width:0;max-width:780px;width:min(100%,calc(100dvh - 260px));justify-self:center}.stage{position:relative;isolation:isolate;aspect-ratio:1;max-height:none;width:100%;overflow:hidden;background:#000;border:1px solid #252d30;border-radius:20px;perspective:1300px;outline-offset:4px;touch-action:pan-y;box-shadow:0 20px 70px #0004}.art-volume{position:absolute;inset:0;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1);will-change:transform}.portrait,#effects-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}.portrait{transform:translateZ(0)}#effects-canvas{pointer-events:none;transform:translateZ(22px)}.ambient{position:absolute;inset:-10%;background:radial-gradient(ellipse at 15% 40%,#16415525,transparent 60%);pointer-events:none}.stage-top{position:absolute;top:21px;left:23px;display:flex;gap:7px;align-items:center;color:#b3c2c5;font-size:9px;letter-spacing:.8px;pointer-events:none;text-shadow:0 1px 6px #000}.live-dot{width:5px;height:5px;box-shadow:0 0 9px #6fe6d0;background:#6fe6d0;border-radius:50%}.live-dot.paused{background:#ada58f;box-shadow:none}.stage-bottom{position:absolute;bottom:18px;left:23px;right:23px;display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:.8px;color:#b9c8c5;pointer-events:none;text-shadow:0 1px 8px #000}.depth-hint span{margin-left:6px;font-size:13px;color:var(--gold)}.stage-signature{display:flex;align-items:center;gap:5px;font-size:7px;letter-spacing:1.6px;color:#d2b477}.stage-signature svg{width:14px;height:14px}.load-error{position:absolute;inset:0;background:#0a0e13ed;display:flex;flex-direction:column;align-items:center;justify-content:center}.load-error button{padding:10px 20px;color:var(--text);background:#1e2c37;border:1px solid #51626c;border-radius:8px}.art-toolbar{height:54px;display:flex;align-items:center;justify-content:space-between;gap:15px}.quiet-button{display:flex;align-items:center;gap:7px;font-size:10px;color:#b4bbb9;background:none;border:0;padding:9px 0}.quiet-button:hover{color:#fff}.quiet-button svg{width:14px;height:14px}.art-note{font-size:8px;letter-spacing:1.8px;color:#636c74}.reset-button{margin-left:auto}.art-note{margin-left:auto}
.controls{padding:30px 24px 21px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(155deg,#161b20a0,#101318b5);box-shadow:0 16px 60px #0002}.control-heading{display:flex;align-items:center;gap:7px}.control-heading .eyebrow{font-size:8px;letter-spacing:1.4px;margin:0}.small-line{width:16px;height:1px;background:var(--gold)}h2{font:normal 29px/1.2 Georgia,serif;letter-spacing:-.6px;margin:15px 0 8px}.panel-description{font-size:11px;color:var(--muted);margin:0 0 30px;line-height:1.6}fieldset{border:0;margin:0;padding:0}legend,.control-label label,.depth-control p{font-size:11px;color:#d6d8d7;font-weight:500}legend{margin-bottom:12px}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette-button{position:relative;display:flex;flex-direction:column;gap:9px;align-items:flex-start;min-height:81px;padding:12px 12px 10px;border-radius:9px;background:#0d1116;border:1px solid #282d35;color:#a7afb3;font-size:10px;transition:background .2s,border-color .2s}.palette-button:hover{background:#182126;border-color:#5a6c72}.palette-button.selected{background:#152422;border-color:#679f91;color:#e0eee8}.palette-button svg{position:absolute;top:12px;right:10px;width:13px;height:13px;opacity:0;color:#a6d7c5}.palette-button.selected svg{opacity:1}.swatch{width:23px;height:23px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff30,0 0 12px #ffffff08}.swatch-prism{background:linear-gradient(120deg,#2168ff,#23dfb5)}.swatch-sapphire{background:linear-gradient(120deg,#092d91,#58bdff)}.swatch-amethyst{background:linear-gradient(120deg,#7c43d2,#f29dcd)}.swatch-ember{background:linear-gradient(120deg,#9a352d,#f4bd79)}.intensity-control{margin-top:27px;padding-bottom:25px;border-bottom:1px solid var(--line)}.control-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}output{color:var(--gold);font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:4px;border-radius:10px;appearance:none;background:linear-gradient(to right,#a8cec1 55%,#2b343b 55%);cursor:pointer;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:#e1ece3;border:2px solid #101619;box-shadow:0 0 0 1px #8aaf9f}input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#e1ece3;border:2px solid #101619}.range-captions{display:flex;justify-content:space-between;margin-top:11px;font-size:9px;color:#707c84}.depth-control{display:flex;justify-content:space-between;align-items:center;margin:23px 0 27px}.depth-control p{margin:0 0 5px}.depth-control div>span{font-size:10px;color:var(--muted)}.switch{width:34px;height:20px;border-radius:20px;border:1px solid #526f64;background:#345b4e;padding:2px;display:flex;align-items:center;transition:background .2s}.switch>span{height:12px;width:12px;border-radius:50%;background:#e0eadf;transform:translateX(13px);transition:transform .2s}.switch[aria-checked=false]{background:#212830;border-color:#414b54}.switch[aria-checked=false]>span{transform:translateX(0);background:#9fa9ac}.panel-actions{display:flex;flex-direction:column;gap:8px}.primary-button,.secondary-button{display:flex;justify-content:center;align-items:center;gap:9px;width:100%;border:1px solid #3e5e54;border-radius:8px;height:41px;font-size:10px;color:#e6eee7;background:#223a31;transition:background .2s}.primary-button:hover{background:#304b41}.secondary-button{background:transparent;border-color:#2c343b;color:#b3babc}.secondary-button:hover{background:#1b242b}.panel-actions svg{width:14px;height:14px}.panel-footnote{font:italic 12px/1.7 Georgia,serif;color:#8e8f85;text-align:center;margin:22px 0 0}
footer{max-width:1332px;margin:18px auto 0;padding:0 40px 23px;display:flex;justify-content:space-between;color:#6d756f;font-size:9px}footer>span:first-child{display:flex;align-items:center;gap:6px;color:#9b927b}footer svg{width:14px;height:14px;color:var(--gold)}.toast{position:fixed;bottom:26px;left:50%;z-index:100;transform:translate(-50%,12px);padding:13px 20px;border:1px solid #4c635b;border-radius:10px;background:#17231ff5;color:#e3eee7;font-size:12px;box-shadow:0 8px 30px #0004;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.visible{transform:translate(-50%,0);opacity:1}
.art-section:fullscreen,.art-section.expanded{background:#050709;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100dvh;max-width:none}.art-section::backdrop{background:#050709}.art-section:fullscreen .stage,.art-section.expanded .stage{width:min(calc(100dvh - 105px),calc(100vw - 40px));max-height:none;flex-shrink:0}.art-section:fullscreen .art-toolbar,.art-section.expanded .art-toolbar{width:min(calc(100dvh - 105px),calc(100vw - 40px))}.art-section.expanded{position:fixed;inset:0;z-index:99;max-width:none}.fullscreen-exit{display:none}.art-section:fullscreen .fullscreen-exit,.art-section.expanded .fullscreen-exit{display:flex;margin-left:10px}body.has-expanded{overflow:hidden}
@media(min-width:1500px){main{padding-top:42px}.site-header{height:90px}.intro{margin-bottom:28px}.controls{padding-top:34px;padding-bottom:25px}.panel-description{margin-bottom:35px}}
@media(max-width:1000px){.site-header{padding:0 30px}.header-note{display:none}main{padding:28px 28px 0}.experience{grid-template-columns:minmax(0,1fr) 265px;gap:22px}.controls{padding:25px 19px 20px}h1{font-size:54px}footer{padding-left:28px;padding-right:28px}.art-note{display:none}.stage-signature{font-size:6px;letter-spacing:1px}.stage-top{top:16px;left:17px}.stage-bottom{left:17px;right:17px;bottom:15px}}
@media(max-width:760px){.site-header{height:64px;padding:0 22px}.brand{font-size:9px;letter-spacing:1.6px;gap:8px}.brand svg{width:21px;height:21px}.artist{font-size:8px;letter-spacing:1.1px}main{padding:27px 18px 0}.intro{margin-bottom:20px;align-items:center}.eyebrow{font-size:8px;letter-spacing:1.7px;margin-bottom:8px}h1{font-size:49px}.intro-copy{font-size:10px;line-height:1.7;max-width:145px;text-align:right}.intro-copy span{display:none}.experience{display:flex;flex-direction:column;gap:9px;align-items:stretch}.art-section{max-width:none;width:100%}.stage{max-height:none;border-radius:15px}.art-toolbar{height:48px}.quiet-button{font-size:10px}.art-note{display:inline;font-size:6px;letter-spacing:1.2px}.controls{padding:24px 21px 20px;margin-top:2px}.control-heading .eyebrow{font-size:7px}h2{font-size:28px;margin-top:12px}.panel-description{margin-bottom:24px}.palette-grid{grid-template-columns:repeat(4,1fr);gap:7px}.palette-button{min-height:75px;padding:11px 10px;font-size:9px}.palette-button svg{top:10px;right:6px;width:10px;height:10px}.swatch{height:21px;width:21px}.intensity-control{margin-top:24px}.depth-control{margin:21px 0 24px}.panel-actions{flex-direction:row}.panel-footnote{margin-top:18px}footer{padding:0 20px 25px;margin-top:26px;gap:12px;flex-wrap:wrap;font-size:8px}.stage-top{font-size:8px}.stage-bottom{font-size:7px}.stage-signature{font-size:6px}.stage-signature svg{width:12px;height:12px}.toast{font-size:11px;max-width:calc(100% - 30px);white-space:normal;text-align:center}}
@media(max-width:370px){.artist{display:none}.art-note{display:none}.palette-grid{gap:5px}.palette-button{padding-left:8px;font-size:8px}.intro-copy{max-width:120px}.stage-signature{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.art-volume{will-change:auto}}
.export-dialog{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;padding:24px;border:1px solid #3a4d48;border-radius:18px;background:#101619;color:var(--text);box-shadow:0 25px 100px #0008}.export-dialog::backdrop{background:#020609df;backdrop-filter:blur(6px)}.export-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.export-heading .eyebrow{font-size:8px;margin:0 0 7px}.export-heading h2{margin:0;font-size:29px}.export-close{display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;font-size:25px;font-weight:300;color:#becbc7;background:#1b2529;border:1px solid #34413f;border-radius:50%;line-height:1}.export-preview{display:block;width:100%;height:auto;max-height:52dvh;object-fit:contain;background:#000;border-radius:11px;border:1px solid #2a3437;user-select:auto;-webkit-touch-callout:default}.export-format{text-align:center;font-size:9px;letter-spacing:1.1px;color:#a4b6b0;margin:11px 0 17px}.export-help,.export-message{font-size:12px;line-height:1.65;color:#b9c6c1;margin:0 0 17px}.export-message{color:#e0c08e}.export-actions{display:flex;gap:9px}.export-actions a{text-decoration:none}.export-actions>*{flex:1;height:43px;font-size:11px}.export-fallback{font-size:10px;line-height:1.7;color:#8e9e96;margin:16px 0 0}.export-fallback a{color:#d6c499;text-underline-offset:3px}.export-dialog:focus-visible{outline:none}@media(max-width:500px){.export-dialog{padding:20px}.export-heading h2{font-size:26px}.export-preview{max-height:48dvh}.export-help{font-size:11px}.export-actions>*{min-height:44px}}