@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --red:#c7202f; --orange:#ff6a2b; --ink:#191b1d; --muted:#6f7478;
  --line:#d9dcde; --paper:#f1f0ec; --white:#fff; --header-h:68px;
  color-scheme:light;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:3px solid rgba(255,100,43,.68); outline-offset:2px; }
.skip-link { position:fixed; z-index:1000; top:8px; left:8px; padding:10px 14px; background:#fff; color:#111; transform:translateY(-160%); }
.skip-link:focus { transform:none; }

.site-header { height:var(--header-h); padding:0 clamp(16px,3.4vw,54px); display:flex; align-items:center; justify-content:space-between; gap:18px; background:#fff; border-bottom:1px solid #e0e0dd; position:relative; z-index:20; }
.brand { display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; background:var(--red); color:#fff; clip-path:polygon(50% 0,61% 34%,98% 34%,68% 55%,80% 91%,50% 70%,20% 91%,32% 55%,2% 34%,39% 34%); }
.brand-mark span { font-size:12px; transform:translateY(-1px); }
.brand-copy { display:grid; line-height:1; }
.brand-copy strong { font:600 21px/1 "Barlow Condensed",sans-serif; letter-spacing:.08em; }
.brand-copy small { margin-top:5px; color:#777; font:600 8px/1 Manrope,sans-serif; letter-spacing:.13em; }
.header-copy { display:flex; align-items:center; gap:20px; }
.reference-label { color:#777; font:600 9px/1 Manrope,sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.mode-switch { background:#e7e6e2; padding:3px; display:flex; }
.mode-button { min-height:34px; min-width:72px; padding:0 10px; border:0; background:transparent; color:#666; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.mode-button.is-active { background:#fff; color:#17191b; box-shadow:0 1px 4px rgba(0,0,0,.09); }

.explorer { min-height:calc(100vh - var(--header-h)); padding:clamp(16px,2vw,28px) clamp(12px,2.6vw,40px) 18px; }
.explorer-heading { max-width:1600px; margin:0 auto clamp(14px,1.6vw,22px); display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-kicker { margin:0 0 8px; color:#777; font:700 9px/1 Manrope,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.section-kicker::before { content:""; display:inline-block; width:22px; height:2px; margin-right:9px; vertical-align:middle; background:var(--red); }
.explorer-heading h1 { margin:0; font:600 clamp(36px,4vw,56px)/.88 "Barlow Condensed",sans-serif; letter-spacing:.005em; text-transform:uppercase; }
.heading-note { margin:0; color:#686c6e; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.heading-note span { color:var(--red); font:700 26px/1 "Barlow Condensed",sans-serif; margin-right:7px; vertical-align:-2px; }

.workspace { max-width:1600px; margin:auto; background:#fff; border:1px solid #d5d5d1; overflow:hidden; box-shadow:0 18px 46px rgba(24,27,29,.11); }
.viewport-wrap { position:relative; height:clamp(540px,66vh,760px); min-height:520px; overflow:hidden; isolation:isolate; background:#bcc2bd; }
#scene { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#scene:active { cursor:grabbing; }
.viewport-vignette { position:absolute; inset:0; z-index:2; pointer-events:none; box-shadow:inset 0 -110px 120px rgba(18,20,19,.24),inset 0 0 100px rgba(255,255,255,.06); }

.hero-layer { position:absolute; inset:0; z-index:8; overflow:hidden; opacity:1; visibility:visible; pointer-events:none; transition:opacity 1.05s cubic-bezier(.22,.8,.22,1),visibility 1.05s; background:#262a29; }
.hero-layer::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 120px rgba(0,0,0,.18); pointer-events:none; }
.hero-layer img { width:100%; height:100%; object-fit:cover; object-position:50% 52%; transform:scale(1.002); transition:transform 1.4s cubic-bezier(.2,.75,.2,1); }
.hero-layer img.fallback-art { object-fit:contain; padding:4%; filter:invert(1); background:#ecebe5; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,9,10,.42),transparent 46%),linear-gradient(0deg,rgba(7,9,10,.56),transparent 40%); }
.hero-prompt { position:absolute; left:clamp(18px,3.4vw,50px); bottom:clamp(24px,4vw,50px); color:#fff; text-shadow:0 2px 16px rgba(0,0,0,.55); }
.hero-prompt p { margin:0 0 11px; color:rgba(255,255,255,.74); font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.hero-prompt strong { display:block; font:600 clamp(30px,4.4vw,62px)/.92 "Barlow Condensed",sans-serif; letter-spacing:.01em; text-transform:uppercase; }
.hero-prompt span { display:block; margin-top:9px; color:rgba(255,255,255,.82); font-size:11px; }
body.model-mode .hero-layer { opacity:0; visibility:hidden; }
body.model-mode .hero-layer img { transform:scale(1.035); }
.transition-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

.loading { position:absolute; inset:0; z-index:7; display:flex; justify-content:center; align-items:center; gap:10px; background:#d3d7d3; color:#4e5352; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; transition:opacity .45s,visibility .45s; }
.loading.is-done { opacity:0; visibility:hidden; }
.loading span { width:14px; height:14px; border:2px solid #999; border-top-color:var(--red); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.pin-labels { position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden; }
.pin-label { position:absolute; transform:translate(-50%,-100%); display:flex; align-items:center; gap:5px; opacity:0; transition:opacity .12s,transform .12s; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.pin-label.is-visible { opacity:1; }
.pin-label span { display:grid; place-items:center; width:25px; height:25px; border:2px solid #fff; border-radius:50%; background:var(--red); color:#fff; font:700 10px/1 Manrope,sans-serif; }
.pin-label b { display:none; background:#1c1e20; color:#fff; padding:5px 8px; font-size:9px; white-space:nowrap; }
.pin-label.is-active { z-index:3; transform:translate(-50%,-100%) scale(1.08); }
.pin-label.is-active b { display:block; }

.drag-hint { position:absolute; left:16px; top:16px; z-index:5; display:flex; align-items:center; gap:9px; padding:8px 11px; background:rgba(24,26,27,.82); color:#fff; pointer-events:none; opacity:0; transition:opacity .35s; }
body.model-mode .drag-hint { opacity:1; }
.drag-hint.is-hidden { opacity:0 !important; }
.drag-icon { width:26px; height:26px; border:1px solid #686b6c; display:grid; place-items:center; }
.drag-hint b,.drag-hint small { display:block; }
.drag-hint b { font-size:8px; letter-spacing:.1em; text-transform:uppercase; }
.drag-hint small { margin-top:2px; color:#b9bbbb; font-size:8px; }
.editor-notice { display:none; position:absolute; top:14px; left:50%; z-index:6; transform:translateX(-50%); padding:8px 12px; background:#fff; color:#333; border-left:3px solid var(--red); box-shadow:0 4px 14px rgba(0,0,0,.13); font-size:10px; white-space:nowrap; }
body.editor-mode .editor-notice { display:block; }
body.editor-mode #scene { cursor:crosshair; }

.view-controls { position:absolute; right:14px; top:14px; z-index:6; display:flex; background:rgba(255,255,255,.94); box-shadow:0 5px 18px rgba(0,0,0,.16); }
.view-controls button { min-height:38px; padding:0 11px; border:0; border-right:1px solid #ddd; background:transparent; color:#555; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; cursor:pointer; }
.view-controls button:hover,.view-controls button[aria-pressed="true"] { background:#202224; color:#fff; }
.control-divider { width:3px; background:#d0d0cd; }
.view-controls .icon-control span { font-size:14px; margin-right:3px; }

.inspector { position:absolute; z-index:5; left:16px; bottom:16px; width:min(520px,calc(100% - 32px)); min-height:116px; padding:14px 15px; display:grid; grid-template-columns:46px minmax(170px,1fr) minmax(138px,.7fr) 76px; gap:12px; align-items:center; color:#fff; background:rgba(18,20,21,.88); border:1px solid rgba(255,255,255,.13); backdrop-filter:blur(10px); box-shadow:0 12px 35px rgba(0,0,0,.2); }
.inspector-index { align-self:start; padding-top:4px; color:#ef8d69; font:600 10px/1 "Barlow Condensed",sans-serif; letter-spacing:.12em; }
.detail-type { margin:0 0 5px; color:#ff8a5a; font-size:8px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.inspector h2 { margin:0; font:600 27px/.95 "Barlow Condensed",sans-serif; text-transform:uppercase; }
#detailBody { margin:7px 0 0; color:#d0d2d2; font-size:9px; line-height:1.5; }
.detail-specs { margin:0; border-left:1px solid rgba(255,255,255,.15); padding-left:12px; }
.detail-specs div+div { margin-top:9px; }
.detail-specs dt { color:#85898a; font-size:7px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.detail-specs dd { margin:2px 0 0; color:#fff; font-size:8px; font-weight:600; }
.focus-button { min-height:38px; padding:0 9px; border:1px solid rgba(255,255,255,.2); background:var(--red); color:#fff; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; cursor:pointer; }
.focus-button:hover { background:#a81422; }
.editor-actions { display:none; grid-column:1/-1; padding-top:9px; border-top:1px solid rgba(255,255,255,.16); }
body.editor-mode .editor-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.editor-actions p { margin:0; color:#aaa; font-size:8px; }
.editor-actions button { min-height:30px; border:1px solid #777; background:transparent; color:#fff; font-size:8px; text-transform:uppercase; cursor:pointer; }

.trim-tray { display:grid; grid-template-columns:126px minmax(0,1fr); border-top:1px solid #d9d9d6; background:#fff; }
.tray-label { padding:13px 16px; display:flex; flex-direction:column; justify-content:center; border-right:1px solid #dededb; text-transform:uppercase; }
.tray-label span { font:700 13px/1 "Barlow Condensed",sans-serif; letter-spacing:.1em; }
.tray-label small { margin-top:5px; color:#999; font-size:7px; letter-spacing:.1em; }
.trim-list { display:flex; min-width:0; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#aaa #efefec; }
.trim-item { flex:0 0 136px; min-height:72px; padding:9px 12px; display:grid; grid-template-columns:25px 1fr; align-content:center; gap:4px; border:0; border-right:1px solid #e4e4e1; background:#fff; color:#56595b; text-align:left; cursor:pointer; scroll-snap-align:start; transition:background .18s,color .18s; }
.trim-item:hover { background:#f4f3f0; color:#17191a; }
.trim-item.is-active { background:#202224; color:#fff; }
.trim-item .num { color:#999; font:600 10px/1 "Barlow Condensed",sans-serif; }
.trim-item.is-active .num { color:#ff8a5a; }
.trim-item .name { font-size:10px; font-weight:700; line-height:1.25; }
.trim-item .arrow { display:none; }
.disclaimer { max-width:1600px; margin:9px auto 0; color:#96999a; font-size:8px; line-height:1.4; }
.noscript { padding:20px; text-align:center; background:#fff4f4; color:#721c24; }

@media (max-width:900px) {
  .reference-label { display:none; }
  .explorer { padding-left:0; padding-right:0; }
  .explorer-heading { padding:0 16px; }
  .workspace { border-left:0; border-right:0; }
  .viewport-wrap { height:clamp(520px,69vh,680px); }
  .inspector { grid-template-columns:38px minmax(150px,1fr) 72px; width:min(455px,calc(100% - 24px)); left:12px; bottom:12px; }
  .detail-specs { display:none; }
  .trim-tray { grid-template-columns:95px minmax(0,1fr); }
  .trim-item { flex-basis:126px; }
  .disclaimer { padding:0 12px; }
}
@media (max-width:600px) {
  :root { --header-h:60px; }
  .site-header { padding:0 12px; }
  .brand-mark { width:32px; height:32px; }
  .brand-copy strong { font-size:18px; }
  .brand-copy small { display:none; }
  .mode-button { min-width:58px; min-height:32px; padding:0 7px; font-size:8px; }
  .explorer { padding-top:13px; }
  .explorer-heading { margin-bottom:12px; align-items:start; }
  .explorer-heading h1 { font-size:35px; }
  .heading-note { display:none; }
  .viewport-wrap { height:calc(100svh - 185px); min-height:470px; max-height:670px; }
  .hero-layer img { object-position:58% 50%; }
  .hero-prompt { left:17px; bottom:114px; max-width:300px; }
  .hero-prompt strong { font-size:36px; }
  .view-controls { left:8px; right:8px; top:8px; }
  .view-controls button { flex:1; padding:0 5px; font-size:8px; }
  .drag-hint { top:54px; left:8px; }
  .editor-notice { top:54px; max-width:calc(100% - 16px); white-space:normal; text-align:center; }
  .inspector { grid-template-columns:34px minmax(0,1fr) 64px; width:calc(100% - 16px); left:8px; bottom:8px; min-height:100px; padding:11px 10px; gap:8px; }
  .inspector h2 { font-size:23px; }
  #detailBody { max-height:42px; overflow:hidden; }
  .focus-button { padding:0 5px; }
  body.editor-mode .editor-actions { display:block; }
  .editor-actions p { display:none; }
  .tray-label { display:none; }
  .trim-tray { grid-template-columns:1fr; }
  .trim-item { min-height:65px; flex-basis:119px; padding:8px 9px; }
  .pin-label b { display:none !important; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}