@font-face{font-family:"Pretendard";src:url(fonts/PretendardVariable.woff2) format("woff2");font-weight:45 920;font-display:swap}
:root{
  --ink:#f5f3ee;--dim:rgba(245,243,238,.56);--faint:rgba(245,243,238,.32);
  --hair:rgba(255,255,255,.09);--hair-2:rgba(255,255,255,.16);
  --shell:rgba(255,255,255,.045);--core:rgba(13,13,15,.8);
  --gold:#e8cf9f;--spring:cubic-bezier(.32,.72,0,1);--gutter:16px;
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#050506;color:var(--ink);
  font:400 14px/1.5 "Pretendard",-apple-system,"Apple SD Gothic Neo",sans-serif;word-break:keep-all;-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3,p{margin:0}
.eyebrow{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:2px}

#view{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#view.dragging{cursor:grabbing}#view.placing{cursor:crosshair}
#curtain{position:fixed;inset:0;background:#050506;opacity:1;pointer-events:none;transition:opacity .9s var(--spring);z-index:1}
#curtain.open{opacity:0}
#yt-frame{position:fixed;left:0;top:0;width:640px;height:360px;transform-origin:0 0;background:#000;display:none;z-index:2;border-radius:6px;overflow:hidden}
#yt-frame.on{display:block}#yt-frame iframe{width:100%;height:100%;border:0;display:block}

/* ---------- Ignition ---------- */
#intro{position:fixed;inset:0;z-index:6;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:28px 56px;padding:clamp(24px,5vw,72px);
  background:linear-gradient(100deg,rgba(5,5,6,.93) 0%,rgba(5,5,6,.72) 46%,rgba(5,5,6,.3) 100%);
  transition:opacity 1s var(--spring),transform 1.3s var(--spring);overflow:auto}
body:not(.in-intro) #intro{opacity:0;pointer-events:none;transform:scale(1.04)}
.intro-copy{align-self:end;animation:rise 1.1s var(--spring) both}
.intro-copy h1{font-size:clamp(34px,5.2vw,76px);line-height:1.08;font-weight:300;letter-spacing:-.045em;margin:18px 0 18px}
.intro-copy p{color:var(--dim);font-size:clamp(14px,1.2vw,16px);max-width:32em}
.garage{grid-column:2;grid-row:1/3;align-self:center;display:grid;gap:2px;max-height:100%;overflow:auto;padding:8px;background:var(--shell);border:1px solid var(--hair);border-radius:26px;backdrop-filter:blur(30px);animation:rise 1.3s .08s var(--spring) both}
.car{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;min-height:58px;padding:9px 18px;border-radius:18px;text-align:left;transition:background .5s var(--spring),transform .5s var(--spring)}
.car:hover:not(:disabled){background:rgba(255,255,255,.05)}
.car:active:not(:disabled){transform:scale(.99)}
.car strong{display:block;font-weight:500;font-size:15px;letter-spacing:-.015em}
.car em{font-style:normal;font-size:12px;color:var(--dim)}
.car .tag{font-size:11px;color:var(--faint)}
.car[aria-checked=true]{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.car[aria-checked=true] .tag{color:var(--gold)}
.car:disabled{cursor:default}.car:disabled strong{color:var(--dim)}.car:disabled em{color:var(--faint)}
.ignition{display:flex;align-items:center;gap:22px;animation:rise 1.3s .16s var(--spring) both}
.ignition p{color:var(--dim);font-size:13px;max-width:18em}
#start{position:relative;width:112px;height:112px;flex:none;border-radius:50%;padding:0;background:radial-gradient(circle at 50% 25%,#3a3a3e,#0d0d0f 72%);box-shadow:0 18px 50px -14px rgba(0,0,0,.9),inset 0 1px 1px rgba(255,255,255,.28);transition:transform .45s var(--spring),opacity .4s}
#start:disabled{opacity:.42;cursor:progress}
#start:not(:disabled):hover{transform:scale(1.03)}
#start:not(:disabled):active{transform:scale(.95)}
#start .ring{position:absolute;inset:5px;border-radius:50%;border:1.5px solid var(--gold);opacity:.42}
#start:not(:disabled) .ring{opacity:1;box-shadow:0 0 18px rgba(232,207,159,.42),inset 0 0 12px rgba(232,207,159,.16);animation:breath 2.8s ease-in-out infinite}
#start .cap{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle at 50% 18%,#26262a,#101012 78%);box-shadow:inset 0 -1px 1px rgba(255,255,255,.08),inset 0 2px 3px rgba(0,0,0,.65);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.08}
#start b{font-size:10.5px;font-weight:600;letter-spacing:.14em}#start i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.14em;color:var(--gold)}#start small{font-size:8px;letter-spacing:.2em;color:var(--dim);margin-top:2px}
@keyframes rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes breath{50%{opacity:.55}}

/* ---------- HUD ---------- */
#hud{position:fixed;z-index:4;top:max(var(--gutter),env(safe-area-inset-top));left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none;transition:opacity .7s var(--spring),transform .7s var(--spring)}
.chip{pointer-events:auto;display:inline-flex;align-items:baseline;gap:9px;min-height:40px;padding:9px 16px;border-radius:999px;background:rgba(10,10,12,.46);border:1px solid var(--hair);backdrop-filter:blur(20px);transition:background .4s var(--spring),transform .4s var(--spring)}
button.chip:hover{background:rgba(32,32,36,.6)}button.chip:active{transform:scale(.98)}
.chip span{font-weight:500}.chip em{font-style:normal;color:var(--dim);font-size:13px}
.chip.plain{pointer-events:none;gap:10px}.chip.plain strong{font-weight:300;font-variant-numeric:tabular-nums;font-size:15px;letter-spacing:.02em}.chip.plain span{color:var(--dim);font-size:13px;font-weight:400}

/* ---------- Dock ---------- */
#dock{position:fixed;z-index:5;left:50%;bottom:max(var(--gutter),env(safe-area-inset-bottom));transform:translateX(-50%);padding:5px;border-radius:26px;background:var(--shell);border:1px solid var(--hair);transition:transform .8s var(--spring),opacity .6s var(--spring)}
.dock-core{display:flex;align-items:center;gap:2px;padding:4px;border-radius:21px;background:var(--core);backdrop-filter:blur(34px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.dock-core button{display:grid;justify-items:center;gap:1px;width:62px;padding:7px 0 5px;border-radius:17px;color:var(--dim);transition:background .45s var(--spring),color .45s var(--spring),transform .45s var(--spring)}
.dock-core button:hover{color:var(--ink)}.dock-core button:active{transform:scale(.94)}
.dock-core svg{width:22px;height:22px}.dock-core span{font-size:11px}
.dock-core button.on{background:rgba(255,255,255,.12);color:var(--ink)}
.dock-core .sep{width:1px;height:26px;background:var(--hair);margin:0 4px}

/* ---------- Panel ---------- */
#panel{position:fixed;z-index:5;right:var(--gutter);bottom:calc(max(var(--gutter),env(safe-area-inset-bottom)) + 84px);top:72px;width:372px;max-width:calc(100vw - 2*var(--gutter));display:flex;align-items:flex-end;pointer-events:none;transition:opacity .55s var(--spring),transform .75s var(--spring)}
.panel-core{width:100%;max-height:100%;overflow:auto;padding:22px;pointer-events:auto;border-radius:28px;background:var(--core);border:1px solid var(--hair);backdrop-filter:blur(34px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.65);scrollbar-width:none}
.panel-core::-webkit-scrollbar{display:none}
body:not(.panel-open) #panel{opacity:0;transform:translateY(18px) scale(.985);visibility:hidden;transition:opacity .35s var(--spring),transform .5s var(--spring),visibility 0s .5s}
.pane-head{margin-bottom:16px}.pane-head h2{font-size:22px;font-weight:400;letter-spacing:-.03em;margin-top:5px}
h3{font-size:12px;font-weight:500;color:var(--dim);margin:22px 0 10px}
[hidden]{display:none!important}
body.immersive #hud,body.immersive #panel{opacity:0;pointer-events:none}
body.immersive #hud{transform:translateY(-10px)}
body.immersive #dock{opacity:.0;transform:translate(-50%,16px)}body.immersive #dock:hover,body.immersive #dock:focus-within{opacity:1;transform:translateX(-50%)}
body.in-intro #hud,body.in-intro #dock,body.in-intro #panel{opacity:0;pointer-events:none;visibility:hidden}

.moods{display:flex;gap:6px;overflow-x:auto;margin:0 -22px 16px;padding:0 22px;scrollbar-width:none}.moods::-webkit-scrollbar{display:none}
.mood{flex:none;display:flex;align-items:center;gap:7px;min-height:34px;padding:0 12px 0 8px;border-radius:999px;background:rgba(255,255,255,.055);font-size:12.5px;transition:background .4s var(--spring),transform .4s var(--spring)}
.mood:hover{background:rgba(255,255,255,.11)}.mood:active{transform:scale(.96)}
.mood i{width:16px;height:16px;border-radius:50%;background:var(--g);box-shadow:0 0 10px -1px var(--s)}

.plan-wrap{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}
#plan{width:100%;height:auto;overflow:visible;stroke-width:1.1}
#plan .shell{stroke:var(--hair-2);fill:rgba(255,255,255,.018)}#plan .glass{stroke:var(--hair-2);stroke-dasharray:1 4}
#plan .seats{stroke:var(--hair);fill:rgba(255,255,255,.03)}
#plan [data-zone]{cursor:pointer;color:var(--c,#555);stroke-width:3;transition:color .4s var(--spring),opacity .4s var(--spring);opacity:var(--o,.25);filter:drop-shadow(0 0 var(--g,0) var(--c,transparent))}
#plan [data-zone] .hit{stroke:transparent;stroke-width:22}
#plan [data-zone].sel path:not(.hit){stroke-width:4.6}
#plan [data-zone].missing{opacity:.08;pointer-events:none}
#plan .dots{stroke-width:4}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.legend button{display:flex;align-items:center;gap:8px;width:100%;min-height:29px;padding:2px 8px;border-radius:9px;font-size:12.5px;color:var(--dim);transition:background .3s var(--spring),color .3s var(--spring);text-align:left}
.legend button:hover{color:var(--ink)}.legend button.sel{background:rgba(255,255,255,.1);color:var(--ink)}
.legend i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--c);box-shadow:0 0 7px var(--c)}
.legend .off i{background:rgba(255,255,255,.14);box-shadow:none}.legend button:disabled{opacity:.3;cursor:default}

.editor{margin-top:16px;padding:14px;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.editor-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.editor-head .dim{display:block;font-size:11px;color:var(--dim)}.editor-head strong{font-weight:500;font-size:15px}
.power{position:relative;width:42px;height:25px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .4s var(--spring)}
.power span{position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.4);transition:transform .5s var(--spring)}
.power[aria-checked=true]{background:var(--c,var(--gold))}.power[aria-checked=true] span{transform:translateX(17px)}
.swatches{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-bottom:12px}
.swatches button,.swatches label{display:block;position:relative;aspect-ratio:1;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:transform .4s var(--spring),box-shadow .4s var(--spring)}
.swatches button:hover,.swatches label:hover{transform:scale(1.12)}
.swatches .cur{box-shadow:0 0 0 2px #111,0 0 0 3.5px var(--ink)}
.swatches label{background:conic-gradient(#f43,#fb3,#3f6,#3cf,#63f,#f3c,#f43)}
.swatches input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}

.range{display:block;margin:12px 0;font-size:13px;color:var(--dim)}
.range>span{display:flex;justify-content:space-between}.range output{color:var(--ink);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;margin:2px 0 0;background:none;cursor:pointer;--p:50%;--t:var(--ink)}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:9px;background:linear-gradient(90deg,var(--t) var(--p),rgba(255,255,255,.14) var(--p))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 -1px 1px rgba(0,0,0,.14);transition:transform .35s var(--spring)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]::-moz-range-track{height:4px;border-radius:9px;background:rgba(255,255,255,.14)}
input[type=range]::-moz-range-progress{height:4px;border-radius:9px;background:var(--t)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff}

.toggle{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--dim);margin:10px 0 0;cursor:pointer;min-height:26px}
.toggle input{appearance:none;-webkit-appearance:none;flex:none;margin:0;width:18px;height:18px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--hair-2);transition:background .3s var(--spring)}
.toggle input:checked{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23201808' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.500 9.500 3 3 6-7'/%3E%3C/svg%3E") center/100%;box-shadow:none}
.row{display:flex;gap:6px;margin-top:12px}
.pill{min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.08);font-size:13px;font-weight:500;flex:1;transition:background .4s var(--spring),transform .4s var(--spring),color .4s}
.pill:hover{background:rgba(255,255,255,.14)}.pill:active{transform:scale(.98)}
.pill.on{background:var(--gold);color:#1f1809}.pill.subtle{flex:0 0 auto;color:var(--dim)}

.clock output{display:block;font-size:44px;font-weight:200;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.ticks{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:6px}
.ticks button{min-height:34px;border-radius:11px;font-size:12.5px;color:var(--dim);transition:background .35s var(--spring),color .35s var(--spring)}.ticks button:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.weather{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.weather button{display:grid;justify-items:center;gap:3px;padding:12px 0 9px;border-radius:16px;background:rgba(255,255,255,.04);font-size:12.5px;color:var(--dim);transition:background .45s var(--spring),color .45s var(--spring),transform .45s var(--spring)}
.weather button:hover{color:var(--ink)}.weather button:active{transform:scale(.97)}
.weather svg{width:23px;height:23px}
.weather button.on{background:var(--ink);color:#141414}

.url{display:block;font-size:13px;color:var(--dim)}.url input{display:block;width:100%;height:48px;margin-top:8px;padding:0 16px;border-radius:15px;border:0;background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1px var(--hair);color:var(--ink);font:inherit;font-size:16px}
.url input:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--gold)}
.cta{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;min-height:52px;padding:6px 6px 6px 22px;border-radius:999px;background:var(--ink);color:#141414;font-weight:600;transition:transform .45s var(--spring)}
.cta:active{transform:scale(.98)}
.cta i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.08);transition:transform .5s var(--spring)}.cta:hover i{transform:translateX(-1px) scale(1.06)}
.cta svg{width:17px;height:17px;fill:currentColor;stroke-width:1}
.note{color:var(--dim);font-size:12.5px;margin-top:12px}.note a{color:var(--ink);text-underline-offset:3px}

#status,#toast{position:fixed;z-index:7;left:50%;transform:translateX(-50%);padding:11px 18px;border-radius:999px;background:rgba(10,10,12,.72);border:1px solid var(--hair);backdrop-filter:blur(20px);font-size:13px;opacity:0;pointer-events:none;transition:opacity .45s var(--spring);text-align:center;max-width:calc(100vw - 32px)}
#status{top:50%}#toast{top:72px}
#status.on,#toast.on{opacity:1}
body.in-intro #status{display:none}

@media (max-width:860px){
  #intro{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding:max(28px,env(safe-area-inset-top)) var(--gutter) 28px;align-content:start;gap:20px;background:rgba(5,5,6,.76)}
  .intro-copy{align-self:start}.intro-copy h1{font-size:34px;margin:10px 0}
  .garage{grid-column:1;grid-row:auto;max-height:none}
  .ignition{justify-content:flex-start}#start{width:92px;height:92px}#start b,#start i{font-size:9px}#start small{font-size:7px}
  #panel{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:calc(max(var(--gutter),env(safe-area-inset-bottom)) + 82px);height:min(58dvh,520px)}
  .panel-core{padding:18px}.moods{margin-inline:-18px;padding-inline:18px}
  .dock-core button{width:56px}
  .chip em{display:none}
}
@media (max-width:390px){.dock-core button{width:50px}.dock-core .sep{margin:0 1px}}
@media (max-height:760px) and (min-width:861px){.pane-head h2{font-size:19px}.plan-wrap{grid-template-columns:128px 1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}