*{box-sizing:border-box}body{margin:0;background:#141719;color:#ecedee;font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;overflow:hidden}button,a,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d2b887;outline-offset:4px}button{border:0}#stage{position:fixed;inset:0}canvas{display:block;touch-action:none}header{height:84px;position:absolute;top:0;left:4vw;right:3vw;display:flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff14}.brand{color:#fff;text-decoration:none;font-size:25px;letter-spacing:.15em}.brand span{border-left:1px solid #7d8588;margin-left:15px;padding-left:20px;font-size:20px;letter-spacing:.12em}.header-note{font-size:10px;letter-spacing:.22em;color:#8c9398}header>button{margin-left:auto;background:transparent;font-size:12px;color:#b9bfc3}.title{position:absolute;top:118px;left:4vw;pointer-events:none}.title p{font-size:13px;letter-spacing:.17em;color:#c2b69c;margin:0 0 10px}h1{font-size:clamp(35px,4vw,62px);font-weight:400;letter-spacing:.025em;margin:0}h1 span{font-size:.38em;letter-spacing:.2em;font-weight:300}.edition{font-size:12px;color:#8d969b;margin-top:12px;letter-spacing:.05em}.panel{position:absolute;right:3vw;top:112px;bottom:106px;width:300px;padding:24px;background:#202528dc;border:1px solid #ffffff10;border-radius:3px;backdrop-filter:blur(22px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#626761 transparent}.panel-heading{display:flex;align-items:center;justify-content:space-between;font-size:16px}.panel-heading button{font-size:11px;background:none;color:#a6adaf}.tabs{display:flex;border-bottom:1px solid #ffffff16;margin:24px 0 22px}.tabs button{flex:1;background:none;color:#939c9f;padding:0 0 13px;font-size:13px;border-bottom:2px solid transparent}.tabs button[aria-selected=true]{border-color:#cfb885;color:#e7d5af}.section-label{display:flex;justify-content:space-between;font-size:13px;margin:0 0 14px}.section-label span{font-size:11px;color:#8d969a}.door-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.door-grid button,.wide{font-size:12px;border:1px solid #ffffff14;background:#ffffff03;border-radius:3px;padding:13px 12px;text-align:left;transition:background .2s,border-color .2s}.door-grid button i{display:block;font-size:10px;margin-top:7px;color:#8f9b9f;font-style:normal}.door-grid button:hover,.wide:hover{background:#ffffff0b;border-color:#a08e6b}.door-grid button[aria-pressed=true],.wide[aria-pressed=true],.door-grid button.active,.wide.active{border-color:#b89b65;color:#e4c792;background:#b3986512}.wide{width:100%;margin-top:9px;display:flex;align-items:center;gap:9px}.wide span,.wide i{margin-left:auto;color:#b5bfc1;font-size:11px;font-style:normal}.wide small{font-size:9px;color:#bca574;border:1px solid #bca57455;padding:1px 4px}.line{height:1px;background:#ffffff12;margin:20px 0}.control-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:15px}output{font-size:11px;color:#95a0a5}input[type=range]{width:100%;height:3px;accent-color:#c5ad80;margin:0 0 18px;display:block}.micro{font-size:10px!important;color:#8d999f;line-height:1.7;margin:12px 0 0}.swatches{display:flex;align-items:center;gap:10px}.swatches button{background:var(--swatch);width:25px;height:25px;border-radius:50%;border:2px solid #ffffff22;outline-offset:3px}.swatches button.selected{outline:1px solid #e0c798}.swatches span{font-size:11px;color:#a7b0b4;margin-left:2px}.specs{position:absolute;left:4vw;bottom:111px;display:flex;gap:35px;pointer-events:none}.specs>div{display:flex;flex-direction:column;gap:7px}.specs strong{font-size:25px;font-weight:350;letter-spacing:.035em}.specs span{font-size:10px;color:#869195}.camera-bar{position:absolute;bottom:38px;left:calc((100% - 350px)/2);transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:6px;border:1px solid #ffffff18;border-radius:5px;background:#242a2cbb;backdrop-filter:blur(15px);white-space:nowrap}.camera-bar button{font-size:12px;padding:10px 17px;background:none;color:#8e999e;border-radius:3px}.camera-bar button.active,.camera-bar button[aria-pressed=true]{background:#ffffff0c;color:#e8d3ac}.camera-bar span{height:17px;width:1px;background:#ffffff20;margin:0 4px}.hint{position:absolute;bottom:17px;left:4vw;font-size:10px;color:#818a90}.ads-badge{font-size:10px;color:#95dada;letter-spacing:.1em}h2{font-size:19px;font-weight:400;line-height:1.5}.desc{font-size:12px;color:#a0abaf;line-height:1.8}.stop{margin-top:22px;color:#cfb685}#demo-state{font-size:12px;line-height:1.7;padding:13px 0;color:#80d9d4}#loading{position:absolute;inset:0;background:#141719;display:flex;gap:16px;align-items:center;justify-content:center;z-index:20;font-size:14px;letter-spacing:.1em}.loader{height:22px;width:22px;border:1px solid #d1b78433;border-top-color:#d1b784;border-radius:50%;animation:spin 1s infinite linear}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:absolute;bottom:105px;left:calc((100% - 350px)/2);transform:translateX(-50%);font-size:12px;background:#2c383eee;color:#e6d2ab;padding:13px 20px;border:1px solid #b8a47d30;border-radius:5px;display:none;max-width:55vw;text-align:center}dialog{background:#202628;color:#dde2e4;border:1px solid #ffffff30;border-radius:8px;max-width:600px;max-height:85vh;padding:28px;overflow:auto}dialog::backdrop{background:#050809cc;backdrop-filter:blur(8px)}dialog img{width:100%;border-radius:3px}dialog p{font-size:13px;color:#aab4b9;line-height:1.9}dialog a{color:#d7c29a}dialog .close{float:right;background:none;font-size:25px;color:#adb5b8}.download{display:inline-block;font-size:13px;margin:10px 0;text-decoration:none;border:1px solid #bba47a66;padding:12px 18px} [hidden]{display:none!important}
@media(min-width:1700px){.panel{width:330px;padding:28px}.door-grid button,.wide{font-size:14px;padding:16px}.micro{font-size:11px!important}}@media(max-width:900px){header{height:62px;left:5vw;right:5vw}.header-note{display:none}.brand{font-size:20px}.brand span{font-size:16px}.title{top:88px;left:5vw}.title p{font-size:11px}h1{font-size:34px}.edition{font-size:10px}.panel{top:auto;bottom:12px;left:3vw;right:3vw;width:auto;max-height:33vh;padding:14px 18px;overflow:auto;border-radius:10px}.panel-heading{font-size:14px}.tabs{margin:15px 0}.tabs button{padding-bottom:9px}.door-grid{grid-template-columns:repeat(4,1fr)}.door-grid button{font-size:11px;padding:10px 8px}.wide{padding:11px}.specs{bottom:auto;top:165px;left:5vw;gap:22px}.specs strong{font-size:18px}.specs span{font-size:9px}.camera-bar{left:50%;bottom:calc(33vh + 27px);gap:0}.camera-bar button{padding:9px 12px;font-size:11px}.hint{bottom:calc(33vh + 78px);left:50%;transform:translateX(-50%);white-space:nowrap}.micro{font-size:10px!important}#toast{bottom:calc(33vh + 95px);left:50%;max-width:85vw}.line{margin:15px 0}.section-label{margin-bottom:10px}.control-row{margin-top:8px}.swatches{padding-bottom:4px}}

/* Keep control labels readable on compact displays. */
.tabs button,.section-label,.door-grid button,.wide,.control-row,.camera-bar button{font-size:14px}.door-grid button i,.wide i,output,.swatches span,.micro,.specs span,.hint{font-size:12px!important}.section-label span,.panel-heading button,.edition{font-size:12px}.wide small{font-size:10px}.desc{font-size:14px}@media(max-width:900px){.door-grid button,.camera-bar button{font-size:12px}.hint{font-size:10px!important}.panel .micro{font-size:11px!important}}