:root{color-scheme:dark;--gold:#e8bc57;--cream:#f8f2df;--panel:#0b1018;--stage-height:clamp(290px,44svh,460px)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;width:100%;background:#080b0e;color:var(--cream);font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;min-height:44px}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button:hover{color:var(--gold)}[hidden]{display:none!important}
#stage{position:fixed;inset:0;z-index:0;overflow:hidden;transition:opacity .35s}#world{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.stage-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#03070ce6,transparent 36%,transparent 72%,#03070c90),linear-gradient(0deg,#03070cd9,transparent 22%,transparent 85%,#03070caa)}
body[data-mode="boot"] #stage{opacity:0}body[data-mode="boot"] .scene-label,body[data-mode="intro"] .scene-label{display:none}
#sweep{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:0;background:linear-gradient(110deg,transparent 20%,#e8bc5733 40%,#fff2ca99 50%,transparent 65%);transform:translateX(-100%)}#sweep.active{animation:sweep .65s ease-out}@keyframes sweep{0%{opacity:0;transform:translateX(-100%)}35%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
#garage{position:relative;z-index:2;min-height:100svh;pointer-events:none;display:flex;flex-direction:column}#garage button,#garage nav{pointer-events:auto}
header{height:100px;display:flex;justify-content:space-between;align-items:center;padding:24px 4%;gap:16px}.brand{display:flex;align-items:center;gap:18px;text-align:left}.brand b{font-size:46px;font-weight:900;font-style:italic;letter-spacing:-4px}.brand b span{color:var(--gold)}.brand>span{border-left:1px solid #ffffff30;padding-left:16px;font-size:12px;letter-spacing:1.5px;line-height:1.5}.header-right{display:flex;gap:20px;align-items:center}#sound{border:1px solid #ffffff28;border-radius:30px;padding:10px 16px;font-size:12px;letter-spacing:1px}
.route-button{position:relative;overflow:hidden;border:1px solid #ddb25888;padding:10px 20px;font-size:13px;font-weight:700;letter-spacing:1px;box-shadow:0 0 22px #e8bc571c;background:linear-gradient(120deg,#372b13,#12151b)}.route-button span{color:var(--gold);margin-left:14px}
.main-layout{display:grid;grid-template-columns:minmax(270px,330px) minmax(30px,1fr) minmax(290px,340px);gap:24px;margin:3vh 4% 35px;flex:1}.service-panel{grid-column:1}.eyebrow{color:var(--gold);font-size:12px;letter-spacing:1.8px;line-height:1.7;margin:0 0 12px}h2{font-size:38px;font-weight:900;letter-spacing:-1.5px;font-style:italic;margin:0 0 23px}h2>span{display:block;font-size:15px;font-style:normal;font-weight:400;letter-spacing:.2px;color:#a7abad;margin-top:8px}
nav{display:grid;gap:8px}nav button{display:flex;align-items:center;justify-content:space-between;text-align:left;width:100%;min-height:62px;padding:14px 17px;border-left:2px solid transparent;background:linear-gradient(90deg,#121b28c4,transparent);transition:background .2s,transform .2s}nav button>span{font-size:16px;font-weight:750;letter-spacing:.35px;line-height:1.3}nav button small{display:none;font-size:12px;letter-spacing:1.2px;font-weight:400;margin-top:6px}nav button b{opacity:0;font-size:23px;font-weight:400}nav button.selected{color:#17150f;background:linear-gradient(105deg,#f2cd72,#c79436);border-left-color:#fff1b9;transform:translateX(5px);box-shadow:0 0 35px #e8bc571a}nav button.selected small{display:block}nav button.selected b{opacity:1}nav button:not(.selected):hover{background:#ffffff14}
.camera-hint{font-size:12px;color:#929ba5;line-height:1.7;max-width:310px}.camera-hint span{display:block}.service-detail{grid-column:3;align-self:end;padding:24px 0 15px}.service-detail>span{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--gold)}h3{font-size:38px;line-height:1.04;font-weight:900;font-style:italic;letter-spacing:-1px;margin:17px 0}.service-detail p{font-size:16px;line-height:1.6;color:#b4bdc6}.steps{display:flex;gap:7px 12px;flex-wrap:wrap;font-size:12px;line-height:1.7;color:#85909c}.steps span{border-bottom:1px solid #ffffff1c}.steps span.active{color:var(--gold);border-color:var(--gold)}
.service-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}.service-actions button{font-size:12px;letter-spacing:.7px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 12px;min-height:54px}#watch{border-top:1px solid #ffffff50;border-bottom:1px solid #ffffff50;background:#09111b99}
.booking-button{position:relative;overflow:hidden;background:linear-gradient(110deg,#f7de91,#d5a43b 70%);color:#1b1609;font-size:13px;letter-spacing:.8px;font-weight:800;box-shadow:0 0 25px #dfb44b30;border:1px solid #fbe9b3;padding:14px 20px;animation:gold-pulse 3.5s ease-in-out infinite}.booking-button:hover{color:#000;background:#ffe49b}.booking-button::after,.route-button::after{content:"";position:absolute;inset:-80% auto -80% -80%;width:35%;background:linear-gradient(90deg,transparent,#fff9,transparent);transform:rotate(22deg);animation:shine 4s ease-in-out infinite;pointer-events:none}@keyframes shine{0%,55%{left:-80%}85%,100%{left:160%}}@keyframes gold-pulse{50%{box-shadow:0 0 32px #dfb44b60}}
.scene-label{position:absolute;top:19%;left:50%;transform:translateX(-50%);text-align:center;display:flex;flex-direction:column;gap:8px;pointer-events:none;font-size:12px;letter-spacing:1.3px;max-width:80%}.scene-label span:first-child{color:var(--gold);font-weight:700}.scene-label span:last-child{color:#a8b7c6}
#view-controls{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);display:flex;gap:3px;background:#060b13c9;border:1px solid #ffffff35;backdrop-filter:blur(8px);z-index:3}#view-controls button{padding:8px 15px;min-width:44px;font-size:24px}#view-controls #reset-view{font-size:12px;letter-spacing:1px}
footer{display:flex;gap:20px;align-items:center;padding:18px 4%;font-size:12px;letter-spacing:.8px;color:#949da7;border-top:1px solid #ffffff14}footer b{color:var(--gold);margin:0 10px}footer .prototype{margin-left:auto}footer button{font-size:12px}
#intro{position:fixed;inset:0;z-index:5;pointer-events:none}.intro-top{display:flex;justify-content:space-between;align-items:center;padding:30px 4%;gap:15px;font-size:12px;letter-spacing:2px}.intro-top button{pointer-events:auto;font-size:12px;letter-spacing:1px}#intro-title{position:absolute;top:22%;width:100%;text-align:center;opacity:0;filter:blur(12px);transform:scale(1.1);transition:opacity 1s,filter 1s,transform 1.4s;text-shadow:0 5px 50px #000}#intro-title.reveal{opacity:1;filter:blur(0);transform:scale(1)}#intro-title h1{font-size:clamp(95px,19vw,260px);line-height:1;letter-spacing:-.08em;font-style:italic;font-weight:950;margin:0}#intro-title h1 span{color:var(--gold)}#intro-title p{font-size:clamp(15px,2vw,30px);letter-spacing:.28em;margin:22px 0;opacity:0;transition:opacity 1s .8s}#intro-title.reveal p{opacity:1}#intro-title small{font-size:12px;letter-spacing:4px;color:var(--gold);opacity:0;transition:opacity 1s 1.4s}#intro-title.reveal small{opacity:1}
#process-ui{position:fixed;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,#03070de8,transparent 35%)}#process-ui button{pointer-events:auto}#exit-process{position:absolute;left:4%;top:25px;border:1px solid #ffffff40;background:#080e17bb;padding:12px 18px;font-size:12px;letter-spacing:1px}.process-caption{position:absolute;bottom:5%;left:5%;right:5%}.process-caption>span{color:var(--gold);font-size:14px;line-height:1.6}.process-caption h2{font-size:clamp(28px,4vw,54px);margin:10px 0 18px;text-transform:uppercase;max-width:80%}.process-track{max-width:550px;height:2px;background:#ffffff30;margin:0 0 18px}.process-track i{height:100%;display:block;background:var(--gold);width:0}
body[data-mode="process"] #view-controls{bottom:auto;top:25px;left:auto;right:4%;transform:none}body[data-mode="process"] .scene-label{top:100px}
dialog{max-width:500px;width:calc(100% - 32px);max-height:85svh;overflow:auto;border:1px solid #c69843;background:#0d131b;color:#ddd;padding:28px}dialog h2{font-size:28px}dialog p{font-size:16px;line-height:1.6}dialog a{color:var(--gold);text-underline-offset:3px}dialog button{background:var(--gold);color:#15110a;padding:12px 22px;margin-top:10px;font-size:13px}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}
#error{position:fixed;z-index:20;inset:25% 10% auto;max-width:600px;margin:auto;padding:28px;background:#12151a;border:1px solid var(--gold);line-height:1.6}#error button{background:var(--gold);color:#111;padding:12px}#custom-error,#mechanic-error{position:absolute;z-index:8;left:50%;top:40%;transform:translateX(-50%);background:#0b1019ed;border:1px solid var(--gold);padding:16px;width:min(90%,380px);font-size:14px;line-height:1.6}#custom-error button,#mechanic-error button{color:var(--gold);display:block}
@media(max-width:1100px) and (min-width:901px){.main-layout{grid-template-columns:270px 1fr 285px;gap:10px;margin-left:3%;margin-right:3%}nav button>span{font-size:14px}.service-actions{grid-template-columns:1fr}h3{font-size:32px}.scene-label{top:16%}}
@media(max-width:900px){
 #stage{position:absolute;top:82px;height:var(--stage-height);bottom:auto;width:100%}.stage-shade{background:linear-gradient(0deg,#080b0e,transparent 23%,transparent 87%,#080b0e66)}
 header{height:82px;padding:14px 5%;gap:10px}.brand{gap:11px}.brand b{font-size:37px}.brand>span{font-size:10px;letter-spacing:.6px;padding-left:11px}.header-right{gap:8px}.route-button{font-size:11px;padding:10px 13px;letter-spacing:.6px}.route-button span{margin-left:5px}#sound{display:none}
 .main-layout{display:flex;flex-direction:column;gap:0;margin:calc(var(--stage-height) + 18px) 5% 22px}.service-panel{width:100%}.eyebrow{font-size:12px;letter-spacing:1.1px}h2{font-size:31px;margin-bottom:19px}h2>span{font-size:14px}nav{grid-template-columns:1fr 1fr;gap:8px}nav button{min-height:66px;padding:12px;border:1px solid #ffffff18;background:#111925ad}nav button>span{font-size:13px;letter-spacing:.1px}nav button.selected{transform:none}nav button small{font-size:11px;letter-spacing:.5px}nav button b{display:none}.camera-hint{max-width:none;font-size:12px}.camera-hint span{display:none}
 .service-detail{width:100%;padding:22px 0 0;margin-top:8px;border-top:1px solid #ffffff24}.service-detail h3{font-size:32px;margin:13px 0}.service-detail h3 br{display:none}.service-detail p{margin:10px 0 18px}.service-actions{margin-top:20px}.service-actions button{font-size:12px;min-height:56px}.steps{font-size:12px}
 .scene-label{top:9px;left:5%;transform:none;text-align:left;max-width:75%;gap:6px;font-size:11px}.scene-label span:last-child{font-size:12px;letter-spacing:.3px}#view-controls{bottom:10px;left:auto;right:5%;transform:none}#view-controls button{padding:5px 13px}
 footer{padding:15px 5%;flex-wrap:wrap;gap:5px 15px;font-size:11px}footer .prototype{width:100%;order:3;margin-left:0;color:#798592}footer button{font-size:11px;margin-left:auto}
 body[data-mode="intro"] #stage,body[data-mode="process"] #stage{position:fixed;inset:0;height:100svh}
 #intro-title{top:26%}#intro-title p{font-size:14px;letter-spacing:.19em}#intro-title small{font-size:11px;letter-spacing:2.5px}.intro-top{padding:20px 5%;font-size:11px;letter-spacing:1px}.intro-top>span{max-width:130px;line-height:1.6}.intro-top button{font-size:11px}
 body[data-mode="process"] #view-controls{top:75px;right:5%}body[data-mode="process"] .scene-label{top:145px}#exit-process{left:5%;top:20px}.process-caption{bottom:max(25px,env(safe-area-inset-bottom));left:5%;right:5%}.process-caption h2{max-width:100%;font-size:29px}.process-caption>span{font-size:13px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:900px){.brand>span{font-size:12px}nav button>span{font-size:14px}nav button small{font-size:12px}.service-detail h3 br{display:initial}}
@media(max-width:360px){.brand>span{display:none}nav button{padding:10px}.service-actions button{padding:12px 9px;letter-spacing:0}}
@media(max-width:900px){
 #stage{position:fixed;inset:0;width:100%;height:100svh}
 body[data-mode="garage"] .stage-shade{background:linear-gradient(0deg,#050a11f5 0%,#050a11e6 30%,#050a1199 49%,transparent 67%,#050a1144 90%,#050a11a6)}
 .main-layout{margin-top:max(210px,calc(44svh - 82px))}
 body[data-mode="garage"] .scene-label{top:94px}
 body[data-mode="garage"] #view-controls{top:max(240px,calc(43svh - 48px));bottom:auto;right:5%}
}

.explore-button{position:relative;isolation:isolate;overflow:hidden;display:block;width:100%;padding:14px 24px;border:1px solid #e8bc5780;background:linear-gradient(125deg,#ffffff0b,#e8bc5709);color:var(--cream);font:inherit;font-style:italic;letter-spacing:.035em;text-align:left;box-shadow:inset 0 1px 0 #ffffff40,0 0 24px #e8bc5715;cursor:pointer}
.explore-button::after{content:"";position:absolute;inset:-80% -60%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#fff4 49%,#fff9 50%,transparent 58%);transform:translateX(-65%);animation:explore-shine 4s ease-in-out infinite}
.explore-button:hover{border-color:var(--gold);box-shadow:0 0 28px #e8bc5738}.explore-button:focus-visible,#exit-explore:focus-visible,#m1-interact:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@keyframes explore-shine{0%,30%{transform:translateX(-65%)}75%,100%{transform:translateX(65%)}}
#exit-explore{position:fixed;z-index:40;top:max(18px,env(safe-area-inset-top));left:18px;min-height:44px;padding:12px 16px;border:1px solid #e8bc5766;background:#080c13a6;backdrop-filter:blur(8px);color:var(--cream);font-size:12px;letter-spacing:.08em;cursor:pointer}
#move-joystick{display:none}
#m1-interact{position:fixed;z-index:40;right:max(18px,env(safe-area-inset-right));bottom:max(20px,calc(env(safe-area-inset-bottom) + 18px));min-width:132px;min-height:50px;padding:13px 24px;border:1px solid #f1ca6d;background:linear-gradient(120deg,#f3d27d,#c99535);box-shadow:0 8px 30px #0009,0 0 24px #e8bc5740;color:#171109;font-size:14px;font-weight:800;letter-spacing:.08em;cursor:pointer;transition:transform .18s,box-shadow .18s}
#m1-interact:hover{color:#000;transform:translateY(-2px);box-shadow:0 10px 34px #000b,0 0 30px #e8bc5766}#m1-interact[aria-pressed="true"]{background:#0a1019d9;color:var(--cream);backdrop-filter:blur(8px)}
#lift-control{position:fixed;z-index:40;right:max(18px,env(safe-area-inset-right));bottom:max(20px,calc(env(safe-area-inset-bottom) + 18px));width:min(330px,calc(100vw - 36px));padding:18px;border:1px solid #e8bc5769;background:#080d159c;box-shadow:0 12px 36px #0008,0 0 24px #e8bc571c;backdrop-filter:blur(7px);display:grid;gap:9px}#lift-control>span{color:var(--gold);font-size:12px;letter-spacing:.14em}#lift-control>strong{font-size:17px;font-style:italic;letter-spacing:.02em;text-shadow:0 1px 5px #000}#lift-control>small{min-height:18px;color:#c4ccd5;font-size:12px;text-shadow:0 1px 4px #000}.lift-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.lift-options button{min-height:50px;padding:10px;border:1px solid #ffffff2b;background:#101925c7;color:var(--cream);font-size:13px;line-height:1.25}.lift-options button:last-child:nth-child(odd){grid-column:1/-1}.lift-options button:hover,.lift-options button[aria-pressed="true"]{border-color:#e8bc57;background:#2c2415d1;color:#f6d783}.lift-options button:disabled{cursor:default;opacity:.68}#lift-open,#lift-lights{padding:13px 18px;border:1px solid #f4d47c;background:linear-gradient(120deg,#f3d27de8,#c99535e8);color:#171109;font-size:14px;font-weight:800;letter-spacing:.05em}#lift-open[aria-pressed="true"],#lift-lights[aria-pressed="true"]{background:#111925c9;color:var(--cream);box-shadow:inset 0 0 18px #f4d47c22,0 0 18px #f4d47c44}
body[data-mode="explore"]{overflow:hidden}body[data-mode="explore"] #stage{position:fixed;inset:0;height:100svh;width:100%}
body[data-mode="explore"] .stage-shade,body[data-mode="explore"] .scene-label,body[data-mode="explore"] #custom-error,body[data-mode="explore"] #mechanic-error,body[data-mode="explore"] #sweep{display:none!important}
@media(prefers-reduced-motion:reduce){.explore-button::after{animation:none}}

@media(max-width:900px){body[data-mode="garage"] #sound{display:block;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));right:12px;z-index:45;background:#090f18e8;border-color:#e8bc5780;font-size:11px;min-height:44px}}
@media(max-width:900px){
 body[data-mode="explore"] #move-joystick{display:block;position:fixed;z-index:42;left:14px;bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));width:88px;height:88px;border:1px solid #e8bc5766;border-radius:50%;background:radial-gradient(circle,#17202bbd 0 34%,#080d15a8 36% 100%);box-shadow:inset 0 0 20px #0008,0 6px 24px #0008;backdrop-filter:blur(7px);touch-action:none;user-select:none}
 #move-stick{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#f3d27d,#a87928);border:1px solid #fff7c9;box-shadow:0 3px 12px #000b;pointer-events:none}
 #move-joystick span{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);color:#d6bd7c;font-size:8px;letter-spacing:.16em;pointer-events:none}
 #lift-control{right:10px;bottom:max(10px,calc(env(safe-area-inset-bottom) + 8px));width:min(270px,calc(100vw - 20px));padding:12px;gap:6px}
 #lift-control>span{font-size:9px}#lift-control>strong{font-size:13px}#lift-control>small{min-height:14px;font-size:10px}.lift-options{gap:5px}.lift-options button{min-height:40px;padding:6px;font-size:10px}#lift-open,#lift-lights{min-height:42px;padding:9px 13px;font-size:12px}
}
