:root{color:#28282b;font-synthesis:none;background:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,.upload{color:#303034;cursor:pointer;background:#fff;border:1px solid #dedee2;border-radius:12px;min-height:44px;padding:10px 16px;transition:background .18s,transform .18s}button:hover,.upload:hover{background:#f2f2f3}button:active{transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,#viewport:focus-visible{outline-offset:4px;outline:2px solid #777}header{justify-content:space-between;align-items:center;gap:12px;max-width:1280px;margin:auto;padding:24px clamp(20px,5vw,64px);display:flex}.brand{color:inherit;letter-spacing:4px;font-size:24px;font-weight:600;text-decoration:none}.brand span{letter-spacing:3px;color:#777;margin-top:5px;font-size:9px;display:block}.brand small{letter-spacing:0;font-size:8px}.upload{color:#fff;background:#333;border-color:#333;font-weight:500;position:relative;overflow:hidden}.upload:hover{background:#505054}.upload input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.upload:focus-within{outline-offset:4px;outline:2px solid #777}main{max-width:1152px;margin:auto;padding:0 20px}.intro{padding:30px 0 26px}.eyebrow{letter-spacing:3px;color:#888;font-size:10px}.intro h1{letter-spacing:1px;margin:14px 0;font-size:clamp(24px,4vw,36px);font-weight:500}.intro>p:last-child{color:#85858b;line-height:1.7}.glass{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffc7;border:1px solid #eeeef0;border-radius:24px;box-shadow:0 12px 40px #30303d0d,0 3px 9px #30303d05}.viewer{background:radial-gradient(#fafafa,#fff 75%);height:clamp(340px,51vh,600px);position:relative;overflow:hidden}#viewport{touch-action:none;position:absolute;inset:0}canvas{touch-action:none;width:100%;height:100%;display:block}.stage-top,.stage-bottom{pointer-events:none;z-index:1;color:#89898e;justify-content:space-between;gap:12px;font-size:11px;display:flex;position:absolute;left:22px;right:22px}.stage-top{align-items:center;top:20px}#filename{text-overflow:ellipsis;white-space:nowrap;max-width:60%;overflow:hidden}.local-badge{white-space:nowrap;border:1px solid #e8e8ea;border-radius:20px;padding:6px 9px;font-size:10px}.stage-bottom{flex-wrap:wrap;font-size:10px;bottom:18px}#empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:60px 15px}#empty[hidden],#busy[hidden]{display:none}.empty-icon{color:#bdbdc2;font-size:66px;line-height:1}#empty h2{margin:18px 0 0;font-size:18px;font-weight:500}#empty p{color:#999;margin-bottom:22px;font-size:12px;line-height:1.9}#busy{z-index:2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#ffffffb8;place-items:center;display:grid;position:absolute;inset:0}#message{color:#85858b;min-height:21px;margin:14px 4px 22px;font-size:12px;line-height:1.7}#message.error{color:#963f32}.panels{grid-template-columns:1fr 1fr;gap:20px;display:grid}.panels>section{min-width:0;padding:24px}.section-title{justify-content:space-between;align-items:center;gap:8px;margin-bottom:22px;display:flex}.section-title h2{margin:0;font-size:15px;font-weight:500}.section-title>span{color:#98989d;font-size:11px}.button-row,.view-row{flex-wrap:wrap;gap:8px;display:flex}.button-row{margin-bottom:12px}.button-row button{white-space:nowrap;flex:1;padding:10px}.view-row button{flex:1;min-width:45px;padding:9px 8px;font-size:12px}.hint{color:#999;margin:20px 0 0;font-size:11px;line-height:1.9}#swatches{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:24px;display:grid}.swatch{white-space:normal;text-align:center;background:0 0;border:0;flex-direction:column;align-items:center;gap:9px;padding:3px 0;font-size:10px;display:flex}.swatch span{background:var(--metal);border-radius:50%;width:30px;height:30px;display:block;box-shadow:inset 0 1px 4px #ffffffa0,inset 0 -2px 4px #0002}.swatch[aria-pressed=true] span{outline-offset:4px;outline:1px solid #888}button[aria-pressed=true]:not(.swatch){background:#eeeef0}.gloss-label{color:#777;justify-content:space-between;font-size:12px;display:flex}input[type=range]{accent-color:#777;cursor:pointer;width:100%;height:32px}.range-labels{color:#aaa;justify-content:space-between;font-size:10px;display:flex}.quality-control{color:#888;align-items:center;gap:7px;min-height:32px;margin-top:16px;font-size:11px;display:flex}input[type=checkbox]{accent-color:#666;width:17px;height:17px}footer{color:#aaa;letter-spacing:2px;justify-content:space-between;gap:10px;max-width:1152px;margin:28px auto;padding:15px 20px 25px;font-size:9px;display:flex}footer a{color:#888;letter-spacing:0}@media (max-width:650px){header{padding:20px}.intro{padding-top:14px}.intro h1{font-size:24px}.panels{grid-template-columns:1fr;gap:16px}.panels>section{padding:22px 18px}.viewer{height:46svh;min-height:330px}.brand{font-size:21px}main{padding:0 16px}.stage-top,.stage-bottom{left:16px;right:16px}.button-row button{padding:10px 8px}.intro>p:last-child{font-size:12px}footer{letter-spacing:1px;font-size:8px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}.manual-material{border-top:1px solid #eee;margin-top:20px;padding-top:18px}.color-control{color:#777;align-items:center;gap:12px;margin-bottom:16px;font-size:12px;display:flex}.color-control input{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:8px;width:48px;height:36px;padding:3px}.color-control output{font-variant-numeric:tabular-nums;margin-left:auto}.manual-material output{font-variant-numeric:tabular-nums}.swatch{min-height:65px}.swatch:last-child{grid-column:span 2}.mesh-panel{margin-bottom:20px;padding:22px}.mesh-controls{grid-template-columns:1fr 1fr 1fr;gap:18px;display:grid}.mesh-controls label,.lighting-label{color:#777;font-size:12px;line-height:1.8;display:block}select{color:#444;width:100%;min-height:44px;font:inherit;background:#fff;border:1px solid #ddd;border-radius:10px;padding:8px}.mesh-controls output{float:right}.debug-row{color:#666;flex-wrap:wrap;gap:24px;margin-top:16px;font-size:12px;display:flex}.debug-row label{align-items:center;gap:7px;min-height:44px;display:flex}.lighting-label{margin-bottom:22px}.mesh-panel .hint{overflow-wrap:anywhere;margin-top:12px}#normal-status{white-space:nowrap}@media (max-width:650px){.mesh-controls{grid-template-columns:1fr;gap:12px}.mesh-panel{padding:20px 18px}}#swatches{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.swatch{white-space:normal;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:6px 4px 10px;font-size:12px;display:flex}.swatch span{display:none}.swatch canvas{aspect-ratio:1;pointer-events:none;border-radius:10px;width:min(100%,96px);height:auto;display:block}.swatch[aria-pressed=true]{border-color:#777;box-shadow:0 3px 12px #00000012}#material-reset{width:100%;margin:12px 0}#swatches .swatch:last-child{grid-column:2}