:root{color-scheme:dark;font-family:system-ui,-apple-system,'Noto Sans SC','Microsoft Yahei',sans-serif;color:#f7e9d0;background:#18130f}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #e9b782;outline-offset:3px}
.app{width:100vw;height:100dvh;position:relative;isolation:isolate;background:radial-gradient(ellipse at 49% 47%,#383027 0%,#211b16 44%,#110f0d 100%);overflow:hidden}
.scene{position:absolute;inset:0;z-index:0;touch-action:none}.scene canvas{display:block;width:100%;height:100%;outline:0}
.vignette{z-index:1;position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0b090888 0%,transparent 20%,transparent 66%,#0f0b09a6 100%),linear-gradient(90deg,#150e0d9c 0%,transparent 24%,transparent 78%,#100c0a7a 100%)}
.topbar{z-index:6;position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(22px,3.9vw,60px);pointer-events:none}.identity{display:flex;align-items:center;gap:13px;pointer-events:auto;text-decoration:none;color:#ecd9ba;font-size:11px;font-weight:800;letter-spacing:.22em}.identity-symbol{font-size:25px;color:#dbaa6b;font-weight:400}.identity i{font-style:normal;color:#b37f54;margin:0 2px}.top-note{font-size:10px;letter-spacing:.19em;color:#cbbda9}.live-indicator{display:inline-block;width:6px;height:6px;margin-right:9px;border-radius:50%;background:#e8c48e;box-shadow:0 0 8px #c58b5488}
.intro{position:absolute;left:clamp(24px,4.3vw,67px);top:20%;z-index:3;pointer-events:none;text-shadow:0 3px 25px #130d0ba8}.eyebrow{font-size:10px;color:#d1ad7b;letter-spacing:.17em;font-weight:700}.intro h1{font-weight:650;font-size:clamp(35px,4vw,64px);line-height:1.1;letter-spacing:-.07em;margin:13px 0 16px}.intro h1 span{color:#f5bc7b}.intro p{color:#efd0a7;font-size:15px;letter-spacing:.10em;margin:0 0 14px}.intro-foot{display:block;color:#9e8771;font-size:11px;letter-spacing:.08em}
.scene-label{position:absolute;z-index:3;right:4.6%;top:26%;font-size:12px;line-height:1.9;color:#ddc8a7;pointer-events:none;text-align:right;opacity:.86;transition:opacity .3s}.scene-label strong,.scene-label small{display:block}.scene-label small{color:#a89880;font-size:10px}
.hint{position:absolute;z-index:3;bottom:159px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#d0bda6b6;font-size:11px;letter-spacing:.05em;pointer-events:none}.hint span{color:#8c6c51;padding:0 7px}
.dock{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:6;min-width:min(790px,calc(100% - 32px));max-width:calc(100vw - 24px);padding:13px 16px 12px;display:flex;align-items:center;flex-direction:column;gap:11px;border:1px solid #9f7b5680;border-radius:17px;background:linear-gradient(120deg,#231d18ed,#191713e8);box-shadow:0 18px 70px #090706b8,0 1px 0 #ffffff17 inset;backdrop-filter:blur(20px)}
.dock-main,.dock-settings{display:flex;justify-content:space-between;align-items:center;width:100%;gap:14px}.segmented{display:flex;border:1px solid #866b5170;padding:3px;gap:2px;background:#17120faa;border-radius:9px}.segmented button{border:0;background:transparent;color:#a99884;font-size:12px;white-space:nowrap;padding:10px 16px;border-radius:6px}.segmented button.active{background:#d7ad79;color:#20160e;font-weight:700}.toggles{display:flex;gap:7px}.toggle-button{border:1px solid #866b5173;border-radius:8px;color:#c3af92;background:#17130fc0;padding:9px 11px;font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:6px}.toggle-button.is-active{color:#f6d0a5;border-color:#ba956cb4;background:#4c3326}.button-icon{font-size:17px;line-height:13px}
.dock-settings{border-top:1px solid #a080593d;padding-top:11px}.dock-settings label{color:#cdb79a;display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:11px}.dock-settings output{font-size:10px;color:#e3c08f;min-width:28px;text-align:right;font-variant-numeric:tabular-nums}.dock-settings input{accent-color:#dfae76;width:88px;height:4px;cursor:pointer}.reference-button{border:1px solid #98755585;background:#2d231ae0;color:#dec8a9;border-radius:9px;padding:9px 11px;font-size:11px;white-space:nowrap}
.bottom-credit{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);color:#917f6c;font-size:10px;letter-spacing:.08em;white-space:nowrap;z-index:4}
.inspector{position:absolute;z-index:9;right:5%;bottom:190px;max-width:260px;background:#241b16e9;border:1px solid #ad845b8a;backdrop-filter:blur(16px);border-radius:12px;padding:18px 23px;box-shadow:0 20px 70px #0b0604c2;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s}.inspector.visible{opacity:1;transform:none;pointer-events:auto}.inspector-num{font-size:10px;color:#d6aa74;letter-spacing:.16em}.inspector h2{font-size:19px;margin:8px 0 8px}.inspector p{font-size:12px;line-height:1.8;color:#d5bea5;margin:0}.icon-button{position:absolute;right:7px;top:7px;background:none;border:0;color:#dbc7aa;font-size:20px}
.toast{position:absolute;top:12%;left:50%;transform:translate(-50%,-10px);opacity:0;transition:.25s;pointer-events:none;background:#f4d2a2;color:#3e2718;border-radius:40px;padding:10px 17px;font-size:12px;z-index:14}.toast.show{opacity:1;transform:translate(-50%,0)}
.reference{position:absolute;inset:0;z-index:30;visibility:hidden;pointer-events:none}.reference.is-open{visibility:visible;pointer-events:auto}.reference-backdrop{position:absolute;inset:0;background:#080604ad;backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}.reference.is-open .reference-backdrop{opacity:1}.reference-panel{position:absolute;top:0;bottom:0;right:0;width:min(720px,96vw);padding:27px clamp(20px,3vw,44px);background:#1c1815;border-left:1px solid #725339;overflow-y:auto;transform:translateX(100%);transition:transform .32s ease}.reference.is-open .reference-panel{transform:translateX(0)}.reference-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.reference-heading span{font-size:10px;color:#c69b64;letter-spacing:.19em}.reference-heading h2{font-size:25px;margin:10px 0}.reference-heading p{font-size:12px;color:#ae9e8c;line-height:1.7;margin:0 0 18px}.reference-close{width:37px;height:37px;border-radius:50%;border:1px solid #805f41;background:#2e251e;color:#dfc59f;font-size:20px}.concept{display:block;width:100%;border:1px solid #6b533b;border-radius:11px}.gallery-title{font-size:12px;color:#c6a889;margin-top:22px}.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.photos img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:7px}
.loading{position:absolute;inset:0;background:#16110e;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .65s,visibility .65s}.loading.done{opacity:0;visibility:hidden;pointer-events:none}.loading strong{font-size:45px;font-weight:700;letter-spacing:-.08em}.loading strong span{color:#dfb481}.loading small{font-size:10px;color:#aa8a6b;letter-spacing:.18em}.loading-line{width:160px;height:2px;background:#5d4432;overflow:hidden}.loading-line i{height:100%;width:50%;display:block;background:#dba56b;animation:progress 1.1s infinite linear}@keyframes progress{from{transform:translateX(-130%)}to{transform:translateX(310%)}}

@media(max-width:760px){.topbar{padding:17px 19px}.identity{font-size:9px;letter-spacing:.11em}.identity-symbol{font-size:18px}.top-note{font-size:8px;letter-spacing:.09em}.intro{top:84px;left:20px}.intro h1{font-size:30px;margin:8px 0}.intro p{font-size:12px}.intro-foot{font-size:9px}.eyebrow{font-size:8px}.scene-label{display:none}.hint{bottom:197px;font-size:10px}.dock{bottom:28px;gap:12px;padding:11px 12px}.dock-main{flex-direction:column;align-items:stretch}.segmented{justify-content:space-between}.segmented button{flex:1;padding:10px 11px}.toggles{justify-content:space-between}.toggle-button{flex:1;justify-content:center;padding:9px 5px;font-size:11px}.dock-settings{display:grid;grid-template-columns:1fr 1fr;row-gap:10px}.dock-settings label{justify-content:space-between;font-size:10px;gap:4px}.dock-settings label input{width:57px}.reference-button{grid-column:span 2;padding:7px}.bottom-credit{bottom:6px;font-size:8px}.inspector{right:16px;left:16px;bottom:214px;max-width:none}.reference-heading h2{font-size:21px}}
@media (max-width:380px){.top-note{display:none}.dock-settings input{width:40px}.dock-settings label{font-size:9px}}

/* V4 - quiet camera / cinematic preview. No visible UI overlays in this mode. */
.preview-button{border:1px solid #c9a1748c;background:#5a3c27;color:#f8ddb8;border-radius:9px;padding:9px 12px;font-size:11px;white-space:nowrap;box-shadow:0 1px 0 #ffffff12 inset}
.preview-button:hover{background:#765036}
#preview-exit{position:absolute;z-index:15;top:max(0px,env(safe-area-inset-top));right:0;width:68px;height:68px;border:0;padding:0;background:transparent;opacity:0;visibility:hidden;pointer-events:none;touch-action:manipulation}
.app.preview-mode .topbar,.app.preview-mode .intro,.app.preview-mode .scene-label,.app.preview-mode .inspector,.app.preview-mode .hint,.app.preview-mode .dock,.app.preview-mode .bottom-credit,.app.preview-mode .toast{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.app.preview-mode #preview-exit{visibility:visible;pointer-events:auto}
.app.preview-mode .vignette{opacity:.83}
@media(max-width:760px){.dock-settings{grid-template-columns:1fr 1fr}.dock-settings .reference-button,.dock-settings .preview-button{grid-column:auto;min-width:0;padding:10px 4px;font-size:11px}.dock{padding-bottom:11px}.hint{bottom:198px}}

/* V5 ultra-quality controls — the preview button is still hidden in clean mode. */
.dock-settings label[for="reflection-slider"]{color:#ead0a7}
@media(max-width:760px){
  .dock-settings label[for="reflection-slider"]{grid-column:span 2;justify-content:space-between}
  .dock-settings label[for="reflection-slider"] input{flex:1;max-width:135px}
}
@media(min-width:761px){
  .dock-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .dock-settings label{justify-content:space-between;gap:5px}
  .dock-settings label input{flex:1;width:70px;min-width:34px}
  .dock-settings .reference-button{grid-column:2}
  .dock-settings .preview-button{grid-column:3}
}


/* V6: actual 3D rendering status. Never put concept artwork behind an unloaded WebGL canvas. */
.no-webgl .scene { background: none !important; }
.runtime-status { position:absolute;right:24px;bottom:12px;z-index:12;font-size:10px;letter-spacing:.02em;color:#ddc9a6;background:#1c1816c9;border:1px solid #5b4436;padding:6px 10px;border-radius:8px;pointer-events:none; }
.runtime-status.success {color:#aad8b7;border-color:#385d42;}
.runtime-status.error {color:#ffd0c2;border-color:#ad665b;}
.render-error[hidden] {display:none!important;}
.render-error { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:42;max-width:min(560px,calc(100vw - 28px));width:100%;background:#241a16f5;color:#f4dcc1;border:1px solid #ba7958;border-radius:18px;padding:28px;box-shadow:0 14px 70px #000a;box-sizing:border-box; }
.render-error-kicker {font-size:10px;color:#caa376;letter-spacing:.19em;}
.render-error h2 {font-size:23px;margin:14px 0 8px;}
.render-error-kind {font-weight:650;color:#ffa78d;}
.render-error-reason {max-width:100%;white-space:pre-wrap;word-break:break-word;color:#f6e7d7;font:12px/1.7 ui-monospace,monospace;max-height:100px;overflow:auto;}
.render-error p {font-size:12px;line-height:1.8;color:#cbb59c;}
.render-error-actions {display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.render-error-actions a {text-decoration:none;border-radius:8px;padding:12px 14px;color:#1a130e;background:#efc48e;font-size:12px;font-weight:650;}
.render-error-actions a + a {background:#3e3027;color:#f3dbc1;border:1px solid #886750;}
.app.preview-mode .runtime-status {opacity:0;visibility:hidden;}
@media(max-width:760px){.runtime-status{right:10px;bottom:4px;font-size:9px;padding:4px 7px}.render-error{padding:22px;}}