:root{color-scheme:dark;--bg:#121013;--panel:#1c181c;--line:#342b32;--muted:#a69aa3;--text:#f4edf2;--accent:#b9ff66;--accent-secondary:#b9ff66;font-family:'DM Sans',sans-serif;font-size:14px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--text)}button,a,input,select{-webkit-tap-highlight-color:transparent}button,input,select{font:inherit}button,a,select,input[type=color]{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button{border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:disabled{opacity:.5;cursor:wait}.masthead,main,footer{max-width:1536px;margin:auto;padding-left:64px;padding-right:64px}.masthead{height:98px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Manrope',sans-serif;font-size:27px;font-weight:750;letter-spacing:-1.4px;display:flex;align-items:center;gap:9px}.brand-period{color:var(--accent);margin-left:-9px}.edition{font-size:10px;letter-spacing:1.7px;color:var(--muted);display:flex;gap:24px}.edition span{color:var(--text)}.nav-link{font-size:12px}.nav-link span{margin-left:17px;color:var(--accent)}.intro{padding:64px 0 43px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:10px;letter-spacing:1.9px;font-weight:550;display:flex;align-items:center;gap:9px;color:var(--muted);margin:0 0 22px}.dot{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block;flex-shrink:0}h1{font-family:'Manrope',sans-serif;font-size:clamp(38px,4.4vw,64px);line-height:1.12;letter-spacing:-3px;margin:0;font-weight:500}.intro-aside{padding-bottom:5px}.intro-aside p{color:#c4b9c1;font-size:14px;line-height:1.7;margin:0 0 20px}.intro-note{color:var(--muted);font-size:10px;letter-spacing:.3px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:20px}.preview{position:relative;height:550px;border-radius:12px;overflow:hidden;background:#1f3542;isolation:isolate}.canvas-host{position:absolute;inset:0;z-index:-1}.preview-top,.preview-bottom{position:absolute;left:28px;right:28px;display:flex;align-items:center;justify-content:space-between;z-index:2}.preview-top{top:26px}.preview-bottom{bottom:22px}.preview-label,.live-tag{font-size:9px;letter-spacing:1.5px;color:#fff; text-shadow:0 1px 8px #0006}.preview-label{border:1px solid #ffffff30;background:#14242b25;padding:8px 11px;border-radius:4px;backdrop-filter:blur(12px)}.live-tag{display:flex;align-items:center;gap:7px}.live-tag .dot{background:var(--accent-secondary)}.sample-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;text-align:center;text-shadow:0 2px 30px #10202b60;padding:70px 20px;pointer-events:none;transition:opacity .3s}.sample-content.hidden{opacity:0}.sample-eyebrow{font-size:9px;letter-spacing:3px;margin-bottom:20px}.sample-content h2{font-family:'Manrope',sans-serif;font-weight:450;font-size:clamp(34px,3.7vw,58px);line-height:1.14;letter-spacing:-2.2px;margin:0}.sample-content p{font-size:12px;color:#fffD;margin:19px 0 25px}.sample-pill{background:#ffffffdf;color:#263730;font-size:10px;padding:12px 16px;border-radius:24px;display:flex;gap:28px;text-shadow:none;box-shadow:0 4px 20px #0001}.cursor-hint{color:#fffD;font-size:10px;text-shadow:0 1px 8px #0008;display:flex;align-items:center;gap:9px}.cursor-hint>span{font-size:22px}.preview-actions{display:flex;gap:6px}.glass-button{width:33px;height:33px;border:1px solid #ffffff35;border-radius:6px;background:#10202b30;backdrop-filter:blur(12px);font-size:15px}.glass-button:hover{background:#ffffff25}.preview:fullscreen{width:100vw;height:100vh;border-radius:0}.preview:fullscreen .sample-content h2{font-size:80px}.material-caption{display:flex;justify-content:space-between;gap:24px;padding:22px 2px}.material-caption>div{display:flex;align-items:center;gap:14px;white-space:nowrap}.material-caption h2{font-family:'Manrope',sans-serif;font-size:17px;font-weight:550;margin:0}.material-caption span{font-size:10px;color:var(--muted)}.material-caption p{color:var(--muted);font-size:11px;max-width:360px;line-height:1.6;margin:0}.controls{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;height:550px;display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel-heading h2{font-size:16px;font-weight:500;margin:0;letter-spacing:-.4px}.text-button{background:none;padding:0;font-size:10px;color:var(--muted)}.text-button:hover{color:var(--text)}.panel-subtitle{font-size:10px;color:var(--muted);margin:9px 0 23px}.control-section{margin-bottom:19px}.control-label{font-size:9px;letter-spacing:1.2px;display:flex;justify-content:space-between;color:#c9bcc5;margin-bottom:10px}.control-label span{font-size:8px;color:#897d86}.presets{display:flex;gap:5px}.preset-button{border:1px solid #45333f;background:transparent;font-size:10px;border-radius:5px;flex:1;padding:9px 4px;color:var(--muted)}.preset-button.active{background:#b9ff6618;border-color:#b9ff66;color:var(--accent)}.colors{display:flex;gap:7px}.color-field{width:33.333%;display:flex;flex-direction:column;gap:7px}.color-field input{width:100%;height:28px;padding:0;border:0;background:none;border-radius:4px;overflow:hidden}.color-field input::-webkit-color-swatch-wrapper{padding:0}.color-field input::-webkit-color-swatch{border:1px solid #ffffff18;border-radius:4px}.color-field span{font-size:8px;letter-spacing:.25px;color:var(--muted);font-family:monospace}.sliders{display:grid;grid-template-columns:1fr 1fr;gap:17px 15px}.slider-field{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px}.slider-field label{font-size:10px;color:#c5b7c0}.slider-field output{font-family:monospace;font-size:10px;color:#b7c3d2}.slider-field input{grid-column:1/-1;width:100%;height:3px;appearance:none;background:linear-gradient(to right,var(--accent) 0 var(--value),#ffffff20 var(--value) 100%);margin:3px 0 1px;border-radius:3px;cursor:pointer}.slider-field input::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#b9ff66}.slider-field input::-moz-range-thumb{width:9px;height:9px;border:0;background:#b9ff66;border-radius:50%}.quality-row{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px;margin-top:17px;font-size:10px;color:var(--muted)}.quality-row select{border:0;background:var(--panel);color:#b7c3d2;font-size:10px}.export-button{display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:#17200f;padding:13px 15px;border-radius:5px;font-size:11px;font-weight:550;transition:background .2s}.export-button:hover{background:#d1ff9c}.controls>.export-button{width:100%;margin-top:auto}.export-note{font-size:9px;color:#93818d;text-align:center;margin:10px 0 0}.collection{padding-top:52px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:25px}.section-heading .eyebrow{margin-bottom:13px}.section-heading h2{font-family:'Manrope',sans-serif;font-size:28px;font-weight:500;letter-spacing:-1px;margin:0}.count{font-size:9px;color:var(--muted);letter-spacing:1.3px;padding-bottom:4px}.effect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px}.effect-card{text-align:left;padding:0;background:none;border-radius:8px;position:relative}.thumbnail{height:205px;position:relative;border-radius:8px;overflow:hidden;transition:box-shadow .2s;isolation:isolate}.effect-card.active .thumbnail{box-shadow:0 0 0 2px var(--accent),0 0 0 5px var(--bg)}.effect-card:hover .thumbnail{box-shadow:0 0 0 2px #b9ff6688}.card-number{position:absolute;left:16px;top:15px;font-size:9px;letter-spacing:1px;color:#fffB}.card-arrow{position:absolute;right:14px;bottom:13px;width:29px;height:29px;border-radius:50%;background:#ffffff18;backdrop-filter:blur(8px);display:grid;place-items:center;color:#fff;font-size:16px;border:1px solid #fff3}.card-meta{display:flex;align-items:center;justify-content:space-between;padding:14px 1px 2px}.card-name{font-size:14px;font-family:'Manrope',sans-serif;font-weight:550}.card-category{font-size:10px;color:var(--muted)}.selected-badge{position:absolute;right:14px;top:13px;font-size:8px;background:var(--accent);color:#17200f;border-radius:3px;padding:5px 7px;letter-spacing:.9px}.closing{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;gap:24px;align-items:center;margin-top:58px;padding:35px 0}.closing-symbol{color:var(--accent);font-size:46px}.closing h2{font-family:'Manrope',sans-serif;font-weight:500;font-size:19px;margin:0 0 8px;letter-spacing:-.4px}.closing p{font-size:11px;color:var(--muted);margin:0;max-width:610px;line-height:1.6}.closing-label{margin-left:auto;font-size:8px;letter-spacing:1.3px;color:var(--muted);white-space:nowrap}footer{display:flex;justify-content:space-between;align-items:center;padding-top:28px;padding-bottom:35px}footer .brand{font-size:20px}footer>span{font-size:10px;color:var(--muted)}footer>span:last-child{font-size:8px;letter-spacing:1px}dialog{width:min(850px,calc(100vw - 32px));max-height:90vh;background:var(--panel);color:var(--text);border:1px solid #ffffff22;border-radius:14px;padding:30px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#0d080db8;backdrop-filter:blur(8px)}.dialog-top{display:flex;justify-content:space-between;align-items:flex-start}.dialog-top .eyebrow{font-size:9px;margin-bottom:14px}.dialog-top h2{font-family:'Manrope',sans-serif;font-size:27px;letter-spacing:-.8px;font-weight:500;margin:0}.close-button{background:none;font-size:26px;color:var(--muted);padding:0 4px}.dialog-description{font-size:12px;color:var(--muted);margin:14px 0 24px}.code-tabs{display:flex;border-bottom:1px solid var(--line);gap:24px}.code-tabs button{background:none;color:var(--muted);font-size:12px;padding:0 0 13px}.code-tabs button[aria-selected=true]{color:var(--accent);border-bottom:2px solid var(--accent)}#code-instructions{font-size:11px;color:#c5b7c0;line-height:1.6;min-height:18px}pre{background:#151015;border:1px solid var(--line);border-radius:7px;padding:18px;max-height:340px;overflow:auto;font-size:11px;line-height:1.7;tab-size:2;color:#b7c3d2;margin:0}.dialog-actions{display:flex;justify-content:space-between;margin-top:21px;gap:12px}.dialog-actions .export-button{min-width:130px}.secondary-button{background:none;border:1px solid #b9ff6644;border-radius:5px;padding:12px 15px;font-size:11px;color:var(--accent)}.kit-note{font-size:9px;color:var(--muted);margin:14px 0 0}#toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;background:var(--accent);color:#17200f;border-radius:6px;padding:12px 20px;font-size:12px;z-index:10;pointer-events:none;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1450px){.preview,.controls{height:600px}.sliders{gap:17px}.panel-subtitle{margin-bottom:30px}.control-section{margin-bottom:24px}.thumbnail{height:235px}}@media(max-width:1100px){.masthead,main,footer{padding-left:32px;padding-right:32px}.edition{display:none}.studio{grid-template-columns:minmax(0,1fr) 280px;gap:15px}.controls{padding:20px}.material-caption{flex-direction:column;gap:8px}.material-caption p{max-width:none}.thumbnail{height:170px}.closing-label{display:none}}@media(max-width:760px){.masthead,main,footer{padding-left:20px;padding-right:20px}.masthead{height:76px}.brand{font-size:24px}.nav-link{font-size:10px}.intro{padding:38px 0 30px;display:block}.intro .eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:18px}h1{font-size:43px;letter-spacing:-2px}.intro-aside{margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.intro-aside p{font-size:11px;margin:0}.intro-note{font-size:8px;max-width:100px;line-height:1.6}.studio{grid-template-columns:1fr}.preview{height:440px}.preview-top,.preview-bottom{left:18px;right:18px}.preview-top{top:18px}.sample-content h2{font-size:44px}.cursor-hint{font-size:8px;max-width:155px;line-height:1.5}.controls{height:auto;padding:23px}.sliders{grid-template-columns:1fr 1fr;gap:20px 25px}.quality-row{margin-top:23px}.controls>.export-button{margin-top:20px}.color-field input{height:36px}.panel-subtitle{margin-bottom:24px}.material-caption{padding:17px 0 9px}.collection{padding-top:38px}.section-heading{align-items:flex-start}.section-heading h2{font-size:23px}.count{font-size:8px;max-width:80px;line-height:1.8;text-align:right;margin-top:2px}.effect-grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}.thumbnail{height:145px}.card-meta{display:block;padding-top:12px}.card-name,.card-category{display:block}.card-category{font-size:9px;margin-top:4px}.closing{margin-top:36px;padding:26px 0;gap:16px}.closing-symbol{font-size:34px}.closing h2{font-size:16px;line-height:1.5}.closing p{font-size:10px}footer{flex-wrap:wrap;gap:16px;padding-top:22px}footer>span:last-child{display:none}footer>span{font-size:8px}dialog{padding:22px}.dialog-top h2{font-size:23px}.code-tabs{gap:18px}.code-tabs button{font-size:10px}.dialog-actions{flex-direction:column}.dialog-actions .export-button{justify-content:center;gap:20px}.preview:fullscreen .sample-content h2{font-size:50px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

[hidden]{display:none!important}

#render-stats{display:block;font:8px monospace;color:#93818d;margin-top:5px;letter-spacing:.2px}

.preview.reference-material{border:1px solid #ffffff14;background:#0a0a0b}
.reference-material .sample-eyebrow{display:none}
.reference-material .sample-content h2{font-size:clamp(28px,3vw,44px);letter-spacing:-1.8px;line-height:1.15}
.reference-material .sample-content p{margin:17px 0 22px;color:#ffffff85}
.reference-material .sample-pill{background:#ffffff0a;color:#e0e1e4;border:1px solid #ffffff22;box-shadow:inset 0 0 12px #ffffff06;backdrop-filter:blur(12px)}
.preview.reference-material:fullscreen{height:100vh;width:100vw}
@media(max-width:760px){.reference-material .sample-content h2{font-size:30px}}

.reference-material .sample-content{z-index:3}.reference-material .preview-top,.reference-material .preview-bottom{z-index:4}

.thumbnail.ambient-prism-stage .card-number,.thumbnail.ambient-prism-stage .card-arrow,.thumbnail.ambient-prism-stage .selected-badge{z-index:3}

.collection-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.collection-filters .preset-button{flex:none;padding:10px 16px}
.effect-card[hidden]{display:none}
.light-material .sample-content{color:#182128;text-shadow:none}.light-material .sample-content p{color:#28343db3}
.light-material .preview-label,.light-material .live-tag,.light-material .cursor-hint{color:#26353b;text-shadow:none}
.light-material .preview-label{border-color:#26353b25;background:#ffffff30}.light-material .live-tag .dot{background:#714960}
.light-material .glass-button{color:#26353b;background:#ffffff50;border-color:#26353b25}.light-material .sample-pill{background:#243940;color:#f5f3ed}
.light-material .sample-eyebrow{color:#26353ba0}
.thumbnail.light-material .card-number{color:#26353b}.thumbnail.light-material .card-arrow{color:#26353b;background:#ffffff60}

.camera-panel{margin-top:14px;padding:18px 20px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.camera-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:9px;letter-spacing:1.2px;color:var(--muted)}.camera-heading>div{display:flex;gap:20px}.camera-heading button[aria-pressed=true]{color:var(--accent)}.camera-panel .sliders{grid-template-columns:repeat(4,minmax(0,1fr))}.camera-panel p{font-size:10px;line-height:1.5;color:var(--muted);margin:16px 0 0}.preview.camera-mode{cursor:grab;touch-action:none;user-select:none}.preview.camera-mode:active{cursor:grabbing}@media(max-width:560px){.camera-panel .sliders{grid-template-columns:1fr}.camera-heading>div{gap:14px}}

/* Neon green supports the primary pink actions. */
.brand-period,.nav-link span,.closing-symbol{color:var(--accent-secondary)}
.eyebrow .dot,.light-material .live-tag .dot{background:var(--accent-secondary)}
.selected-badge{background:var(--accent-secondary);color:#172008}
.collection-filters .preset-button.active{background:#a3ff1210;border-color:var(--accent-secondary);color:var(--accent-secondary)}
.camera-panel{--accent:var(--accent-secondary)}
.camera-panel input::-webkit-slider-thumb{background:var(--accent-secondary)}
.camera-panel input::-moz-range-thumb{background:var(--accent-secondary)}

/* Longer material controls scroll without changing the preview dimensions. */
.controls{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.controls>*{flex-shrink:0}

.path-field{grid-column:1/-1}.path-field select{width:100%;margin-top:10px;padding:9px 10px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:5px;font:inherit;font-size:11px}.path-field select:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* Align the settings card with both the preview and its camera panel. */
@media(min-width:761px){
 .studio{grid-template-rows:550px auto auto;row-gap:0}
 .preview-wrap{display:contents}
 .studio>.preview-wrap>.preview{grid-column:1;grid-row:1}
 .studio>.preview-wrap>.camera-panel{grid-column:1;grid-row:2}
 .studio>.preview-wrap>.material-caption{grid-column:1;grid-row:3}
 .studio>.controls{grid-column:2;grid-row:1 / 3;height:auto;min-height:0}
}
@media(min-width:1450px){.studio{grid-template-rows:600px auto auto}}

@media(min-width:561px) and (max-width:1100px){.camera-panel .sliders{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Keep longer material labels inside their two-column control grid. */
.controls .sliders{grid-template-columns:repeat(2,minmax(0,1fr))}
.slider-field{grid-template-columns:minmax(0,1fr) auto}

@media(min-width:761px){.studio>.controls{contain:size}}

.presentation-controls{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;margin-top:8px;display:grid;gap:10px}.presentation-controls>label,.overlay-settings-content>label{font-size:10px;color:var(--muted)}.presentation-controls input[type=url]{width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--text);font:inherit;font-size:11px}.presentation-controls select{text-transform:capitalize}.presentation-controls .eyebrow{margin:0 0 4px}.overlay-actions{display:flex;gap:8px;align-items:center}.overlay-actions .secondary-button,.presentation-controls>#replay-fade{font-size:10px;padding:9px 12px;cursor:pointer}.overlay-actions input[type=file]{position:absolute;width:1px;height:1px;opacity:0}.overlay-actions input[type=file]:focus-visible+button{outline:2px solid var(--accent)}.overlay-status{font-size:10px;color:var(--muted);margin:0;overflow-wrap:anywhere}
.presentation-controls select{width:100%;padding:9px 10px;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:5px;font:inherit;font-size:11px}.presentation-controls select:focus-visible,.presentation-controls input:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

.camera-panel .slider-field[hidden]{display:none}
@media(min-width:1101px){.camera-panel .sliders.has-tilt{grid-template-columns:repeat(5,minmax(0,1fr))}}

.randomize-button{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.randomize-button[hidden]{display:none}.overlay-settings{display:block}.overlay-settings summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.overlay-settings summary::-webkit-details-marker{display:none}.overlay-settings summary::after{content:"+";font-size:18px;letter-spacing:0;color:var(--accent)}.overlay-settings[open] summary::after{content:"−"}.overlay-settings summary:focus-visible{outline:1px solid var(--accent);outline-offset:5px}.overlay-settings-content{display:grid;gap:10px;padding-top:16px}.replay-fade{grid-column:1/-1;font-size:10px;padding:9px 12px;cursor:pointer}

.settings-section{display:block;min-width:0}.settings-section summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;font-size:9px;letter-spacing:1.2px;color:#c9bcc5}.settings-section summary::-webkit-details-marker{display:none}.settings-section summary>span{margin-left:auto;font-size:8px;color:var(--muted)}.settings-section summary::after{content:"+";margin-left:auto;font-size:18px;line-height:1;letter-spacing:0;color:var(--accent)}.settings-section summary>span+*{margin-left:0}.settings-section[open] summary::after{content:"−"}.settings-section summary:focus-visible{outline:1px solid var(--accent);outline-offset:5px}.section-content{padding-top:14px}.settings-section .overlay-settings-content>label{font-size:10px;color:var(--muted)}.quality-section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px;margin-bottom:18px}.quality-section .quality-row{margin:0;border:0;padding-top:14px}#sliders>.settings-section{margin-top:0}#sliders{row-gap:18px}