:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#070809;color:#eef3f7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: rgba(15, 17, 19, .92);--panel-border: rgba(255, 255, 255, .12);--muted: #9aa4ab;--line: rgba(255, 255, 255, .12);--cyan: #79d8ff;--teal: #5fe1c5;--amber: #ffc45a}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;background:radial-gradient(circle at 18% 18%,rgba(91,149,164,.2),transparent 30%),radial-gradient(circle at 80% 68%,rgba(196,146,91,.14),transparent 28%),linear-gradient(135deg,#070809,#141515 48%,#050607)}button,input{font:inherit}button{color:inherit}#app{display:grid;grid-template-columns:minmax(0,1fr) 410px;min-height:100vh}.viewport{position:relative;min-height:100vh;overflow:hidden}#scene{display:block;width:100%;height:100%;min-height:100vh}#labelLayer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.partLabel{position:absolute;display:flex;align-items:center;gap:8px;max-width:230px;transform:translate(-50%,-50%);padding:8px 11px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:#050708c7;color:#f4fbff;box-shadow:0 18px 54px #00000070;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap;opacity:0;transition:opacity .16s ease,transform .16s ease,border-color .16s ease}.partLabel:before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:999px;background:var(--label-color, var(--cyan));box-shadow:0 0 18px var(--label-color, var(--cyan))}.partLabel.is-visible{opacity:1}.partLabel.is-active{border-color:#79d8fff5;transform:translate(-50%,-58%) scale(1.05)}.brandLockup,.viewHud{position:absolute;z-index:2}.brandLockup{top:26px;left:28px;display:flex;align-items:center;gap:12px;color:#f7fbff;text-shadow:0 6px 24px rgba(0,0,0,.55)}.brandLockup strong,.brandLockup span{display:block}.brandLockup strong{font-size:clamp(20px,2.2vw,30px);letter-spacing:0}.brandLockup span{color:#b0bbc2;font-size:13px;margin-top:2px}.signalMark{width:38px;height:38px;border-radius:50%;border:2px solid rgba(121,216,255,.58);position:relative;background:#79d8ff14;box-shadow:inset 0 0 18px #79d8ff38,0 0 30px #79d8ff47}.signalMark:before,.signalMark:after{content:"";position:absolute;border:2px solid rgba(121,216,255,.78);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}.signalMark:before{top:9px;right:9px;bottom:9px;left:9px}.signalMark:after{top:15px;right:15px;bottom:15px;left:15px}.viewHud{right:24px;bottom:26px;display:flex;gap:10px}.iconButton{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(255,255,255,.14);border-radius:50%;background:#0a0d0fb8;cursor:pointer;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:transform .16s ease,border-color .16s ease,background .16s ease}.iconButton:hover,.iconButton:focus-visible,.iconButton.is-active{border-color:#79d8ffa8;background:#122227d6}.iconButton:hover{transform:translateY(-1px)}.iconButton span{font-size:23px;line-height:1}.controlPanel{position:relative;z-index:3;display:flex;flex-direction:column;gap:18px;height:100vh;padding:26px;border-left:1px solid var(--panel-border);background:linear-gradient(180deg,#121416f2,#090b0cf2),#080a0cf0;box-shadow:-28px 0 84px #0000005c;overflow-y:auto}.panelHeader{padding-bottom:4px}.eyebrow{margin:0 0 10px;color:var(--cyan);font-size:12px;font-weight:780;letter-spacing:.08em;text-transform:uppercase}h1,h2,p{margin-top:0}h1{margin-bottom:12px;max-width:13ch;color:#fff;font-size:clamp(30px,3vw,46px);line-height:.98;letter-spacing:0}.panelHeader p:not(.eyebrow),.workflow li{color:var(--muted);font-size:14px;line-height:1.55}.modeGroup{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;padding:4px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#ffffff0d}.modeButton{min-height:40px;border:0;border-radius:999px;background:transparent;color:#b2bdc4;cursor:pointer;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.modeButton.is-selected{background:#edf8ff;color:#071015;box-shadow:0 12px 30px #79d8ff33}.sliderControl,.colorPanel{display:grid;gap:10px;color:#dbe5eb;font-size:13px;font-weight:760}.sliderControl input{width:100%;accent-color:var(--cyan)}.actionButton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:100%;border:1px solid rgba(121,216,255,.44);border-radius:8px;background:linear-gradient(135deg,#79d8ff2e,#5fe1c51f);color:#f7fcff;cursor:pointer;font-weight:780;transition:transform .16s ease,border-color .16s ease,background .16s ease}.actionButton.secondary{background:#ffffff0e;border-color:#ffffff24}.actionButton.secondary.is-active{border-color:#ffc45ab8;background:#ffc45a1f}.actionButton:hover,.actionButton:focus-visible{transform:translateY(-1px);border-color:#79d8ffc7;background:linear-gradient(135deg,#79d8ff42,#5fe1c52e)}.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.swatch{position:relative;width:100%;aspect-ratio:1;border:1px solid rgba(255,255,255,.14);border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 2px #00000059}.swatch.is-selected{border-color:#79d8ffe6;box-shadow:inset 0 0 0 2px #00000073,0 0 0 3px #79d8ff29}.swatch[data-color=matteBlack]{background:linear-gradient(135deg,#020303,#25292c)}.swatch[data-color=graphite]{background:linear-gradient(135deg,#313337,#9a9c9b)}.swatch[data-color=roseGold]{background:linear-gradient(135deg,#53271e,#f5b9a4)}.swatch[data-color=midnightBlue]{background:linear-gradient(135deg,#071029,#174ca4)}.swatch[data-color=ivory]{background:linear-gradient(135deg,#fff8e9,#cdbf9e)}.swatch[data-color=forest]{background:linear-gradient(135deg,#0d1f17,#526f58)}.swatch[data-color=chrome]{background:linear-gradient(135deg,#f6f8f8,#5c6970)}.swatch[data-color=bronze]{background:linear-gradient(135deg,#312012,#b27a47)}.specGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.specGrid div{min-height:78px;padding:14px;border:1px solid var(--line);border-radius:8px;background:#ffffff0b}.specGrid span,.specGrid strong{display:block}.specGrid span{color:#96a3ac;font-size:12px}.specGrid strong{margin-top:8px;color:#f5fbff;font-size:21px;line-height:1}.componentList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.componentList button{min-height:40px;padding:0 10px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#ffffff0d;color:#dce7ed;cursor:pointer;font-size:13px;text-align:left;transition:border-color .16s ease,background .16s ease,color .16s ease}.componentList button:hover,.componentList button:focus-visible,.componentList button.is-active{border-color:#79d8ffa6;background:#79d8ff1f;color:#fff}.workflow{padding-top:2px}.workflow h2{margin-bottom:10px;color:#f7fbff;font-size:18px;letter-spacing:0}.workflow ol{display:grid;gap:10px;margin:0;padding-left:20px}.workflow strong{color:#fff}@media (max-width: 1080px){body{overflow:auto}#app{grid-template-columns:1fr}.viewport,#scene{min-height:62vh}.controlPanel{height:auto;min-height:38vh;border-top:1px solid var(--panel-border);border-left:0}h1{max-width:18ch}}@media (max-width: 640px){.brandLockup{top:16px;left:16px}.viewHud{right:16px;bottom:16px}.controlPanel{padding:20px}.componentList{grid-template-columns:1fr}.specGrid{grid-template-columns:1fr 1fr}.partLabel{max-width:160px;white-space:normal}}