/* 3D Studio — THE LOOK, to the owner's order.
   One accent, used rarely. Greyscale for everything else. Every measurement
   a multiple of 4. Three families, three weights, six sizes: 32/24/18/15/13/11.
   Panels separate by surface colour, never by border. Nothing snaps. */
:root{
  --bg:#0A0A0B; --surface:#131316; --raised:#1A1A1E; --border:#26262B;
  --text:#FAFAFA; --text-2:#A1A1AA; --text-3:#52525B;
  --accent:#8B5CF6; --accent-glow:rgba(139,92,246,.20);
  --good:#10B981; --bad:#EF4444;
  --r:8px;
  --micro:120ms ease-out;
  --panel:240ms cubic-bezier(.32,.72,0,1);
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body.s3-body{margin:0;background:var(--bg);color:var(--text);
  font:400 15px/1.5 Inter,system-ui,sans-serif;overflow:hidden;
  -webkit-font-smoothing:antialiased}

.s3-app{display:grid;height:100dvh;
  grid-template-columns:320px 1fr 320px;
  grid-template-rows:calc(48px + env(safe-area-inset-top,0px)) 1fr 96px;
  grid-template-areas:"top top top" "create view props" "library library library"}

/* ── Top bar ─────────────────────────────────────────────────────────── */
/* viewport-fit=cover pushes the page under the iPhone status bar; the
   safe-area padding keeps the logo and credits out from under the clock. */
.s3-top{grid-area:top;display:flex;align-items:center;gap:16px;
  padding:env(safe-area-inset-top,0px) 24px 0;
  background:var(--surface)}
.s3-top .s3-logo{font:600 18px/1.2 'Space Grotesk',Inter,sans-serif;letter-spacing:-0.02em;
  text-decoration:none;color:var(--text)}
.s3-top .s3-logo b{color:var(--accent);font-weight:600}
.s3-title{color:var(--text-3);font-size:13px}
.s3-top .s3-credits{margin-left:auto;font:400 13px/1.5 var(--mono);color:var(--text-2)}

/* ── Panels: a different surface, not a border ───────────────────────── */
.s3-panel{background:var(--surface);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.s3-create{grid-area:create;padding:24px}
.s3-props{grid-area:props;padding:24px}
/* overflow:hidden and the pinned canvas are load-bearing: when iPhone
   Safari resizes the page mid-gesture the drawing buffer lags a frame,
   and an unclipped canvas painted the model over the library strip and
   under the tab bar (photographed live, 15 Aug 2026). */
.s3-view{grid-area:view;position:relative;background:var(--bg);min-width:0;min-height:0;overflow:hidden}
.s3-view>canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.s3-view canvas{display:block;outline:none;touch-action:none}
/* The vignette: the model sits in space, not on a flat backdrop. */
.s3-view::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 90% 80% at 50% 42%,transparent 58%,rgba(0,0,0,.42) 100%)}

.s3-h{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-3);margin:24px 0 12px;line-height:1.5}
.s3-h:first-child{margin-top:0}
.s3-field{margin:0 0 12px}
.s3-field>label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin-bottom:8px}
.s3-hint{font-size:13px;color:var(--text-3);line-height:1.5;margin-top:8px}

/* Collapsible sections in the right panel */
details.s3-sec>summary{display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;list-style:none;user-select:none;padding:8px 0;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
details.s3-sec>summary::-webkit-details-marker{display:none}
details.s3-sec>summary::after{content:"";width:8px;height:8px;flex:none;
  border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);transition:transform 200ms cubic-bezier(.32,.72,0,1)}
details.s3-sec[open]>summary::after{transform:rotate(225deg)}
details.s3-sec{margin-bottom:12px}

/* Segmented choice rows */
.s3-seg{display:flex;flex-wrap:wrap;gap:8px}
.s3-seg button{flex:1 1 auto;min-height:40px;padding:0 12px;background:var(--raised);
  border:1px solid transparent;border-radius:var(--r);color:var(--text-2);
  font:500 13px/1.5 Inter,sans-serif;cursor:pointer;
  transition:color var(--micro),border-color var(--micro),transform var(--micro)}
.s3-seg button:hover{color:var(--text);transform:translateY(-1px)}
.s3-seg button:active{transform:translateY(1px)}
.s3-seg button[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}

/* Tabs */
.s3-tabs{display:flex;gap:8px;margin-bottom:16px}
.s3-tabs button{flex:1;min-height:40px;background:none;border:none;
  border-bottom:1px solid var(--border);color:var(--text-3);
  font:500 13px/1.5 Inter,sans-serif;cursor:pointer;transition:color var(--micro),border-color var(--micro)}
.s3-tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}

/* Drop zone */
.s3-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:112px;border:1px dashed var(--border);border-radius:var(--r);
  color:var(--text-3);font-size:13px;cursor:pointer;text-align:center;padding:12px;
  transition:border-color var(--micro),color var(--micro)}
.s3-drop:hover,.s3-drop.s3-over{border-color:var(--accent);color:var(--text-2)}
.s3-drop img{max-width:100%;max-height:128px;border-radius:4px}
.s3-drop .s3-clear{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;border-radius:var(--r);
  background:rgba(10,10,11,.7);color:var(--text);font-size:15px;cursor:pointer;display:none;
  transition:background var(--micro)}
.s3-drop.s3-has .s3-clear{display:block}
.s3-multigrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.s3-multigrid .s3-drop{min-height:88px;font-size:11px}

textarea.s3-text{width:100%;min-height:96px;resize:vertical;background:var(--raised);
  border:1px solid var(--border);border-radius:var(--r);color:var(--text);
  padding:12px;font:400 15px/1.5 Inter,sans-serif;transition:border-color var(--micro),box-shadow var(--micro)}
textarea.s3-text::placeholder{color:var(--text-3)}
textarea.s3-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

/* The options panel — always visible, like the workspace panels the pros
   ship. A quiet raised card; every row is a real engine parameter. */
.s3-opts{margin:16px 0 0;padding:16px;background:var(--raised);
  border-radius:12px;display:flex;flex-direction:column;gap:16px}
.s3-opts .s3-field{margin:0}
.s3-opts .s3-field>label,.s3-opts .s3-optrow>label{display:block;font-size:13px;
  font-weight:500;color:var(--text);margin-bottom:8px}
.s3-opts .s3-optrow{display:flex;align-items:center;justify-content:space-between}
.s3-opts .s3-optrow>label{margin-bottom:0}
.s3-opts .s3-seg{margin-bottom:0}
.s3-opts .s3-seg+.s3-hint,.s3-opts .s3-optrow+.s3-seg{margin-top:8px}
.s3-opts .s3-seg button{background:var(--surface)}
.s3-opts input[type=number]{width:100%;min-height:40px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r);color:var(--text);padding:0 12px;
  font:400 13px/1.5 var(--mono);transition:border-color var(--micro),box-shadow var(--micro)}
.s3-opts input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.s3-opts .s3-field.s3-off{opacity:.4}
.s3-opts .s3-field.s3-off .s3-seg,.s3-opts .s3-field.s3-off input,.s3-opts .s3-field.s3-off .s3-switch{cursor:not-allowed;pointer-events:none}
.s3-opts .s3-field.s3-off>label::after,.s3-opts .s3-field.s3-off .s3-optrow>label::after{content:" · not on this route";font-weight:400;color:var(--text-3)}

/* The switch: a pill that reads on/off at a glance. */
.s3-switch{position:relative;display:inline-block;width:40px;height:24px;flex:none;cursor:pointer}
.s3-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.s3-switch i{position:absolute;inset:0;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;transition:background var(--micro),border-color var(--micro)}
.s3-switch i::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;
  border-radius:50%;background:var(--text-2);transition:transform var(--micro),background var(--micro)}
.s3-switch input:checked+i{background:var(--accent);border-color:var(--accent)}
.s3-switch input:checked+i::after{transform:translateX(16px);background:var(--text)}
.s3-switch input:focus-visible+i{box-shadow:0 0 0 3px var(--accent-glow)}

/* Toggle */
.s3-toggle{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;
  background:var(--raised);border:1px solid transparent;border-radius:var(--r);
  font-size:13px;color:var(--text-2);cursor:pointer;user-select:none;
  transition:border-color var(--micro)}
.s3-toggle:hover{border-color:var(--border)}
.s3-toggle input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}

/* Generate */
.s3-price{display:flex;align-items:baseline;justify-content:space-between;margin:16px 0 8px;min-height:20px}
.s3-price .s3-label{font-size:13px;color:var(--text-2);max-width:100%}
.s3-price .s3-cost{display:none}
.s3-generate{width:100%;min-height:44px;border:none;border-radius:var(--r);
  background:linear-gradient(180deg,#9d74f8,var(--accent));color:#FAFAFA;
  font:500 15px/1.5 Inter,sans-serif;cursor:pointer;
  transition:transform var(--micro),filter var(--micro),opacity var(--micro)}
.s3-generate .s3-gen-cost{font-family:var(--mono);font-size:13px;opacity:.85;margin-left:8px}
.s3-generate:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.s3-generate:active:not(:disabled){transform:translateY(1px)}
.s3-generate:disabled{opacity:.4;cursor:not-allowed}
.s3-err{margin-top:8px;font-size:13px;color:var(--bad);line-height:1.5;min-height:0}

/* PLAY IT NOW — the most prominent control on the properties panel. */
.s3-play{display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:44px;margin-bottom:16px;border-radius:var(--r);
  background:linear-gradient(180deg,#9d74f8,var(--accent));color:#FAFAFA;
  font:500 15px/1.5 Inter,sans-serif;text-decoration:none;
  transition:transform var(--micro),filter var(--micro)}
.s3-play:hover{transform:translateY(-1px);filter:brightness(1.08)}
.s3-play:active{transform:translateY(1px)}
.s3-play:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.s3-play[hidden]{display:none}
.s3-play-tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.85;padding:2px 8px;border-radius:4px;
  background:rgba(10,10,11,.25)}

/* Progress — one continuous bar, moving always, never in jumps */
.s3-progress{margin-top:16px;display:none}
.s3-progress.s3-on{display:block}
.s3-bar{height:4px;border-radius:2px;background:var(--raised);overflow:hidden;margin-bottom:8px}
.s3-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);
  transition:width 3.8s linear}
.s3-progress .s3-stage-name{font-size:13px;color:var(--text-2);display:flex;justify-content:space-between}
.s3-progress .s3-stage-name span:last-child{font-family:var(--mono)}

/* ── Viewport chrome ─────────────────────────────────────────────────── */
.s3-toolbar{position:absolute;top:16px;left:50%;transform:translateX(-50%);display:flex;gap:4px;
  background:rgba(19,19,22,.85);border-radius:12px;padding:4px;
  backdrop-filter:blur(12px);z-index:5;max-width:calc(100% - 32px);flex-wrap:wrap;justify-content:center}
.s3-tool{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:none;border-radius:var(--r);color:var(--text-2);cursor:pointer;
  font:500 13px/1.5 Inter,sans-serif;padding:0 8px;
  transition:color var(--micro),background var(--micro)}
.s3-tool:hover{background:rgba(250,250,250,.06);color:var(--text)}
.s3-tool[aria-pressed="true"]{color:var(--accent)}
.s3-tool svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.s3-toolbar .s3-sep{width:1px;background:var(--border);margin:8px 4px}

.s3-stats{position:absolute;left:16px;bottom:16px;z-index:5;
  font:400 11px/1.5 var(--mono);color:var(--text-2);
  background:rgba(10,10,11,.6);border-radius:var(--r);padding:8px 12px;
  backdrop-filter:blur(12px);pointer-events:none;letter-spacing:0}
.s3-stats b{color:var(--text);font-weight:400}

.s3-envbar{position:absolute;right:16px;top:16px;z-index:5;display:flex;flex-direction:column;gap:4px;
  background:rgba(19,19,22,.85);border-radius:12px;padding:4px;backdrop-filter:blur(12px)}

/* ── Properties ──────────────────────────────────────────────────────── */
.s3-mat{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--raised);
  border-radius:var(--r);margin-bottom:8px}
.s3-mat .s3-mat-name{font-size:13px;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s3-mat .s3-maps{margin-left:auto;display:flex;gap:4px}
.s3-mat .s3-maps button{width:24px;height:24px;border-radius:4px;border:none;
  background:var(--surface);color:var(--text-3);font:400 9px/1 var(--mono);cursor:pointer;
  transition:color var(--micro),background var(--micro)}
.s3-mat .s3-maps button:hover{color:var(--text);background:var(--bg)}
.s3-mat input[type=color]{width:24px;height:24px;padding:0;border:none;border-radius:50%;
  background:none;cursor:pointer;-webkit-appearance:none;appearance:none;flex:none}
.s3-mat input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.s3-mat input[type=color]::-webkit-color-swatch{border:1px solid var(--border);border-radius:50%}

.s3-row{display:flex;gap:8px;align-items:center}
.s3-row>*{flex:1}
.s3-btn{min-height:40px;padding:0 12px;background:var(--raised);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font:500 13px/1.5 Inter,sans-serif;cursor:pointer;
  transition:transform var(--micro),border-color var(--micro),opacity var(--micro)}
.s3-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--text-3)}
.s3-btn:active:not(:disabled){transform:translateY(1px)}
.s3-btn:disabled{opacity:.4;cursor:not-allowed}
.s3-btn.s3-primary{background:linear-gradient(180deg,#9d74f8,var(--accent));border:none;color:#FAFAFA}
select.s3-select,input.s3-input{width:100%;min-height:40px;background:var(--raised);
  border:1px solid var(--border);border-radius:var(--r);color:var(--text);padding:0 12px;
  font:400 13px/1.5 Inter,sans-serif;transition:border-color var(--micro),box-shadow var(--micro)}
select.s3-select:focus,input.s3-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
input[type=range].s3-range{width:100%;accent-color:var(--accent);min-height:28px}

.s3-anim-clips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.s3-anim-clips button{min-height:32px;padding:0 12px;border-radius:12px;border:1px solid var(--border);
  background:var(--raised);color:var(--text-2);font:500 13px/1.5 Inter,sans-serif;cursor:pointer;
  transition:color var(--micro),border-color var(--micro)}
.s3-anim-clips button[aria-pressed="true"]{border-color:var(--accent);color:var(--text)}

.s3-tris{font:400 13px/1.5 var(--mono);color:var(--text-2);text-align:right;min-width:88px}

/* ── Library ─────────────────────────────────────────────────────────── */
.s3-library{grid-area:library;display:flex;gap:12px;align-items:center;padding:16px 24px;
  background:var(--surface);overflow-x:auto;overflow-y:hidden}
.s3-lib-item{flex:none;width:128px;display:flex;gap:8px;align-items:center;padding:8px;
  background:var(--raised);border:1px solid transparent;border-radius:var(--r);cursor:pointer;
  transition:border-color var(--micro),transform var(--micro),opacity var(--micro)}
.s3-lib-item:hover{transform:translateY(-1px);border-color:var(--border)}
.s3-lib-item.s3-current{border-color:var(--accent)}
/* New arrivals fade and rise. Applied only to items ADDED after first paint —
   never on page load. */
.s3-lib-item.s3-enter{animation:s3rise 240ms cubic-bezier(.32,.72,0,1)}
@keyframes s3rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.s3-lib-item img{width:44px;height:44px;border-radius:4px;object-fit:cover;background:var(--bg);flex:none}
.s3-lib-item .s3-lib-meta{min-width:0;font-size:11px;line-height:1.5;color:var(--text-3)}
.s3-lib-item .s3-lib-meta b{display:block;color:var(--text-2);font-weight:500;font-size:11px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s3-lib-empty{color:var(--text-3);font-size:13px}

/* Context menu — the one floating element that earns elevation */
.s3-menu{position:fixed;z-index:60;background:var(--raised);border:1px solid var(--border);
  border-radius:var(--r);padding:4px;min-width:148px}
.s3-menu button{display:block;width:100%;text-align:left;min-height:36px;padding:0 12px;background:none;
  border:none;border-radius:4px;color:var(--text-2);font:400 13px/1.5 Inter,sans-serif;cursor:pointer;
  transition:color var(--micro),background var(--micro)}
.s3-menu button:hover{background:var(--surface);color:var(--text)}

/* Skeleton pulse, gentle */
@keyframes s3pulse{50%{opacity:.55}}
.s3-skel{animation:s3pulse 1.6s ease-in-out infinite}

/* ── Mobile: side panels become bottom sheets ─────────────────────────── */
.s3-sheetbar{display:none}
@media (max-width:900px){
  .s3-app{grid-template-columns:1fr;
    grid-template-rows:calc(48px + env(safe-area-inset-top,0px)) 1fr 88px calc(52px + env(safe-area-inset-bottom,0px));
    grid-template-areas:"top" "view" "library" "sheetbar"}
  .s3-create,.s3-props{position:fixed;left:0;right:0;
    bottom:calc(52px + env(safe-area-inset-bottom,0px));top:auto;max-height:62dvh;
    border-radius:12px 12px 0 0;z-index:40;
    transform:translateY(105%);transition:transform var(--panel)}
  .s3-create.s3-open,.s3-props.s3-open{transform:translateY(0)}
  .s3-sheetbar{display:flex;grid-area:sheetbar;background:var(--surface);z-index:45;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .s3-sheetbar button{flex:1;min-height:52px;background:none;border:none;color:var(--text-3);
    font:500 13px/1.5 Inter,sans-serif;cursor:pointer;transition:color var(--micro)}
  .s3-sheetbar button[aria-pressed="true"]{color:var(--text)}
  .s3-toolbar{top:auto;bottom:16px;left:16px;transform:none;max-width:calc(100% - 32px)}
  /* Top-left, not above the toolbar: on a narrow screen the toolbar wraps
     to two rows and grows upward, and the counters sat inside it
     (photographed live, 15 Aug 2026). The top-left corner is free - the
     environment buttons hold the top right. */
  .s3-stats{left:16px;top:16px;bottom:auto}
  .s3-envbar{top:16px;right:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ══ THE JOURNEY (onboarding order) ═══════════════════════════════════ */
.s3-journey{display:flex;gap:8px;list-style:none;margin:0 auto;padding:0;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.s3-journey li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.s3-journey li+li::before{content:"→";color:var(--text-3)}
.s3-journey li.now{color:var(--accent);font-weight:500}
.s3-journey li.done{color:var(--text-2)}
.s3-journey li.done::after{content:"✓";color:var(--text-2)}
@media(max-width:900px){.s3-journey{display:none}}
.s3-how{background:none;border:none;color:var(--text-3);font-size:13px;cursor:pointer;
  padding:8px;transition:color var(--micro)}
.s3-how:hover{color:var(--text-2)}
.s3-how:focus-visible{outline:none;color:var(--accent)}

/* One line of plain English, visible — never a tooltip. */
.s3-sub{display:block;font-size:13px;color:var(--text-3);font-weight:400;line-height:1.5}

/* Kind cards: pictures, not a dropdown. */
.s3-kinds{display:flex;flex-direction:column;gap:8px}
.s3-kinds button{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;text-align:left;padding:12px;min-height:56px;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font:500 15px/1.5 Inter,sans-serif;cursor:pointer;
  transition:border-color var(--micro),transform var(--micro)}
.s3-kinds button svg{grid-row:1/3;width:32px;height:32px;color:var(--text-2)}
.s3-kinds button .s3-sub{grid-column:2}
.s3-kinds button:hover{border-color:var(--text-3);transform:translateY(-1px)}
.s3-kinds button[aria-pressed="true"]{border-color:var(--accent)}
.s3-kinds button[aria-pressed="true"] svg{color:var(--accent)}
.s3-kinds button:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.s3-more-kinds{background:none;border:none;color:var(--text-3);font-size:13px;cursor:pointer;
  padding:8px 0;text-align:left}
.s3-more-kinds:hover{color:var(--text-2)}
#s3KindMore{margin-top:4px}

/* Example images under the drop zone. */
.s3-examples{margin-top:8px}
.s3-example-row{display:flex;gap:8px;margin-top:4px}
.s3-example-row img{width:56px;height:56px;border-radius:var(--r);border:1px solid var(--border);
  cursor:pointer;transition:border-color var(--micro),transform var(--micro)}
.s3-example-row img:hover{border-color:var(--accent);transform:translateY(-1px)}
.s3-example-row img:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}

/* Example model chips in the empty library. */
.s3-example-models{display:flex;gap:8px}
.s3-example-chip{padding:8px 16px;min-height:40px;background:var(--raised);
  border:1px solid var(--border);border-radius:var(--r);color:var(--text-2);
  font-size:13px;cursor:pointer;transition:border-color var(--micro),color var(--micro)}
.s3-example-chip:hover{border-color:var(--accent);color:var(--text)}

/* What-next cards: the applicable one carries the accent. */
/* The one question the studio asks: make it move? Sits above the next
   steps, accented, and gone the moment it is answered either way. */
.s3-offer{display:flex;flex-direction:column;gap:12px;margin-bottom:16px;padding:16px;
  background:var(--raised);border:1px solid var(--accent);border-radius:8px}
.s3-offer[hidden]{display:none}
.s3-offer b{font-size:18px}
.s3-offer p{font-size:13px;color:var(--text-2);line-height:1.45}
.s3-offer-row{display:flex;gap:8px}
.s3-offer-row .s3-btn{flex:1}
#s3MoveCost{margin-left:8px;opacity:.85}
.s3-next{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.s3-next[hidden]{display:none}
.s3-next-card{display:grid;grid-template-columns:16px 1fr auto;grid-template-rows:auto auto;
  column-gap:12px;align-items:center;text-align:left;padding:12px;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font:500 15px/1.5 Inter,sans-serif;cursor:pointer;text-decoration:none;
  transition:border-color var(--micro),transform var(--micro)}
.s3-next-card svg{grid-row:1/3}
.s3-next-card .s3-sub{grid-column:2}
.s3-next-card:hover{border-color:var(--text-3);transform:translateY(-1px)}
.s3-next-card.s3-accent{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.s3-next-card:disabled{opacity:.4;cursor:not-allowed}
.s3-next .s3-play{margin-bottom:0}
.s3-next .s3-play .s3-sub{color:rgba(250,250,250,.75)}

/* Guide by state: before a model exists the properties panel is quiet. */
body.s3-j0 .s3-props,body.s3-j1 .s3-props,body.s3-j2 .s3-props{opacity:.45;pointer-events:none}
body.s3-j0 .s3-props .s3-next,body.s3-j1 .s3-props .s3-next{display:none}

/* Export destination presets. */
.s3-presets{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.s3-preset{display:flex;flex-direction:column;gap:4px;text-align:left;padding:12px;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font:500 15px/1.5 Inter,sans-serif;cursor:pointer;
  transition:border-color var(--micro)}
.s3-preset:hover{border-color:var(--text-3)}
.s3-preset[aria-checked="true"]{border-color:var(--accent)}
.s3-preset:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.s3-warn{font-size:13px;color:#e0b055;line-height:1.5;margin-bottom:12px;
  padding:8px 12px;background:rgba(224,176,85,.08);border-radius:var(--r)}
.s3-warn[hidden]{display:none}

/* How this works. */
.s3-howdlg{background:var(--surface);color:var(--text);border:1px solid var(--border);
  border-radius:12px;padding:24px;max-width:520px;width:calc(100% - 32px)}
.s3-howdlg::backdrop{background:rgba(10,10,11,.7)}
.s3-howdlg h2{font:600 18px "Space Grotesk",Inter,sans-serif;margin:0 0 16px}
.s3-how-steps{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:12px}
.s3-how-steps li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center;font-size:13px;color:var(--text-2)}
.s3-how-steps img{width:96px;height:64px;object-fit:cover;border-radius:var(--r);border:1px solid var(--border);background:var(--raised)}
.s3-toggle{flex-wrap:wrap;padding-top:8px;padding-bottom:8px;height:auto}
.s3-toggle .s3-sub{flex-basis:100%;padding-left:28px}

/* ══ THE FIRST SCREEN ═════════════════════════════════════════════════ */
/* z 55, not 20: the phone's bottom sheets sit at 40 and their tab bar at
   45, and both were floating OVER the takeover screen the quick block
   replaced. The owner's order, 15 Aug 2026, second correction: the
   question lives IN the Create panel, never over the page. */
.s3-quick{margin-bottom:16px}
.s3-quick-box{width:100%;min-height:44px;padding:0 12px;
  background:var(--raised);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);font:400 15px/1.5 Inter,sans-serif;
  transition:border-color var(--micro),box-shadow var(--micro)}
.s3-quick-box::placeholder{color:var(--text-3)}
.s3-quick-box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.s3-quick-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.s3-quick-chips .s3-example-chip{padding:4px 12px;min-height:32px;font-size:13px}

/* Arrival: over the viewport, the model turning behind the title. */
.s3-arrive{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;padding:24px;pointer-events:none;
  background:linear-gradient(rgba(10,10,11,.65),transparent 30%,transparent 62%,rgba(10,10,11,.75))}
.s3-arrive[hidden]{display:none}
.s3-arrive h2{font:600 24px/1.2 'Space Grotesk',Inter,sans-serif;margin:8px 0 0;pointer-events:auto}
.s3-arrive-cards{display:grid;grid-template-columns:repeat(2,minmax(200px,240px));gap:8px;pointer-events:auto}
@media(max-width:600px){.s3-arrive-cards{grid-template-columns:1fr}}
.s3-arrive-cards .s3-next-card{background:rgba(26,26,30,.9)}

/* Modals for "See it in your room" and the turntable video: one quiet
   card over a dim, click-outside or Close to leave. */
.s3-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(10,10,11,.72);backdrop-filter:blur(4px)}
.s3-modal[hidden]{display:none}
.s3-modal-card{width:min(420px,94vw);background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px;text-align:center}
.s3-modal-card h3{font:600 18px/1.2 'Space Grotesk',Inter,sans-serif;margin:0}
.s3-modal-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.s3-modal-row .s3-btn{text-decoration:none;display:inline-flex;align-items:center}
/* THE WAIT, SHOWN. A spinner that turns, a bar that fills, and a line that
   changes as the work moves - so a few silent seconds read as working
   rather than dead (the owner, 16 Aug 2026). */
.s3-arwait{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0}
.s3-arwait[hidden]{display:none}
.s3-arspin{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);
  border-top-color:var(--accent);animation:s3arspin 800ms linear infinite}
@keyframes s3arspin{to{transform:rotate(360deg)}}
.s3-arbar{width:200px;height:4px;border-radius:2px;background:var(--border);overflow:hidden}
.s3-arbar i{display:block;height:100%;width:0;background:var(--accent);
  transition:width 400ms linear}
@media (prefers-reduced-motion:reduce){.s3-arspin{animation-duration:2400ms}}
.s3-qr{background:#FAFAFA;border-radius:12px;padding:16px;margin:0 auto;line-height:0}
.s3-qr:empty{display:none}
.s3-qr svg{width:200px;height:200px;display:block}

/* The desktop journey-dimming (opacity .45 on Properties before a model
   exists) leaked onto the phone's bottom sheet: the owner photographed a
   see-through sheet with the model and toolbar showing THROUGH the
   material list. A sheet the user explicitly opened is always solid and
   always interactive; the dimming stays a desktop-only hint. */
@media (max-width:900px){
  body.s3-body .s3-create.s3-open,body.s3-body .s3-props.s3-open{opacity:1;pointer-events:auto}
}

/* The way OUT of a phone sheet: a visible handle. Desktop never sees it. */
.s3-sheet-handle{display:none}
@media (max-width:900px){
  .s3-sheet-handle{display:flex;align-items:center;justify-content:center;
    width:100%;min-height:28px;background:none;border:none;cursor:pointer;padding:8px 0 4px;margin:-8px 0 4px}
  .s3-sheet-handle i{display:block;width:36px;height:4px;border-radius:2px;background:var(--text-3)}
}

/* Open your own model: a quiet full-width card under the question. */
.s3-open-file{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;
  background:var(--raised);border:1px solid transparent;border-radius:var(--r);
  color:var(--text);font:500 13px/1.5 Inter,sans-serif;text-align:left;text-decoration:none;
  padding:12px;margin-bottom:16px;cursor:pointer;transition:border-color var(--micro)}
.s3-open-file:hover{border-color:var(--accent)}
.s3-open-file svg{color:var(--text-3)}
.s3-open-file .s3-sub{font-weight:400}