/* Shared desktop interface roles. The approved narrow-screen layout is unchanged. */
@media(min-width:701px){
 :root{--ui-font:'Inter Tight',Arial,Helvetica,sans-serif;--ui-body:16px;--ui-note:14px;--ui-meta:12px;--ui-button:14px;--ui-radius:14px;--ui-inset-radius:6px;--ui-control-height:56px;--ui-border:#11130d26;--ui-muted:#62635b}
 body{font-family:var(--ui-font);font-weight:450;font-size:var(--ui-body);line-height:1.45;letter-spacing:-.015em}
 button{font-family:var(--ui-font);font-weight:600;letter-spacing:-.015em;line-height:1.25}
 .logo{font-family:Arial,Helvetica,sans-serif;line-height:1}
 .reference-layout .headline-block,.story-label h1,.builder h2,.complete h2,.error h2{font-family:var(--ui-font);font-weight:800}
 .hero-copy p{font-size:clamp(18px,1.15vw,22px);font-weight:450;line-height:1.4;letter-spacing:-.025em;margin-bottom:24px}
 nav{border-radius:22px;padding:7px;gap:4px}
 nav button{height:var(--ui-control-height);border-radius:var(--ui-radius);font-size:var(--ui-button);font-weight:600;padding-inline:20px}
 .hero-cta,nav .nav-cta,.primary{display:flex;align-items:center;justify-content:space-between;flex:none;height:var(--ui-control-height);min-height:var(--ui-control-height);padding:8px 8px 8px 20px;gap:20px;border:0;border-radius:var(--ui-radius);background:var(--acid);color:var(--ink);font-size:var(--ui-button);font-weight:650;line-height:20px;text-align:left;transition:background .16s,box-shadow .16s}
 .hero-cta,nav .nav-cta{width:max-content;justify-content:flex-start}
 .builder .primary,.complete .primary{height:var(--ui-control-height);padding:8px 8px 8px 20px;border-radius:var(--ui-radius);margin-top:20px}
 .hero-cta .action-icon,nav .nav-cta .action-icon,.primary .action-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;border-radius:var(--ui-inset-radius);background:var(--ink);color:#fff}
 .action-icon svg{display:block;width:22px;height:22px;flex:none}
 .hero-cta:hover,nav .nav-cta:hover,.primary:hover{background:#cfe931;color:var(--ink)}
 .hero-cta:active,nav .nav-cta:active,.primary:active{background:#c2db29}
 button:focus-visible,a:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
 button:disabled{opacity:.42;cursor:not-allowed}
 .builder-top,.story-label>span,.complete>span{font-size:var(--ui-meta);font-weight:600;line-height:1.4;letter-spacing:.10em}
 .builder-top button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:6px 10px;border:1px solid var(--ui-border);border-radius:10px;font-size:var(--ui-meta);font-weight:550;letter-spacing:0;background:transparent}
 .builder-top button svg{width:16px;height:16px}
 .builder-top button:hover{background:#fff8}
 .builder .tabs{gap:0;margin:18px 0 24px;border-color:var(--ui-border)}
 .tabs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 6px;font-size:var(--ui-note);font-weight:550;opacity:1;color:var(--ui-muted);border-bottom:2px solid transparent}
 .tabs button small{font-size:var(--ui-meta);font-weight:500}
 .tabs button[aria-selected=true]{font-weight:650;color:var(--ink);border-color:var(--ink)}
 .tabs button:hover{color:var(--ink);background:#ffffff40}
 .builder h2{font-size:clamp(40px,2.5vw,48px);line-height:1.02;letter-spacing:-.05em;margin:0 0 12px}
 .part-note,.builder .part-note{font-size:var(--ui-note);line-height:1.5;font-weight:450;color:var(--ui-muted);opacity:1;letter-spacing:-.01em;margin:0 0 20px}
 .product-options button{border-radius:var(--ui-radius);padding:8px 8px 14px;box-shadow:none}
 .product-options button[aria-pressed=false]{border-color:#11130d16;box-shadow:none}
 .product-options button[aria-pressed=true]{border-color:var(--ink);background:#ffffffad;box-shadow:inset 0 0 0 1px var(--ink)}
 .product-options strong{font-family:var(--ui-font);font-size:14px;font-weight:650;line-height:1.4;letter-spacing:-.015em}
 .product-options small{font-family:var(--ui-font);font-size:12px;font-weight:450;line-height:1.5;color:var(--ui-muted);letter-spacing:0;margin-top:3px}
 .spec,.builder .spec{border-color:var(--ui-border);padding:14px 0;margin:20px 0 12px;gap:16px}
 .spec span{font-size:var(--ui-meta);font-weight:550;line-height:1.4;letter-spacing:.055em}
 .spec strong{font-size:18px;font-weight:650;line-height:1.4;letter-spacing:-.02em;white-space:nowrap}
 .compact-field{margin:18px 0}
 legend{font-size:var(--ui-note);font-weight:550;line-height:1.4;margin-bottom:12px}
 legend span{color:var(--ui-muted);font-weight:450;opacity:1}
 .segments{padding:4px;gap:4px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:#fff3}
 .compact-field .segments button,.segments button{min-height:40px;padding:10px 8px;border-radius:10px;font-size:var(--ui-note);font-weight:550;background:transparent}
 .segments button:hover{background:#fff8}
 .segments button[aria-pressed=true]{background:var(--ink);color:#fff}
 .compact-field .swatches{gap:14px;padding:5px}
 .compact-field .swatches button{width:30px;height:30px}
 .swatches button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:4px}
 .saved{font-size:var(--ui-note);font-weight:450;line-height:1.5;color:var(--ui-muted);margin:12px 0 0;min-height:0}
 .saved:empty{display:none}
 .complete{right:4%;width:min(620px,34vw)}
 .complete h2{font-size:clamp(56px,4.5vw,80px);line-height:.97;letter-spacing:-.055em;margin:24px 0}
 .complete p{font-size:var(--ui-body);font-weight:450;line-height:1.7;color:var(--ui-muted)}
 #summary{white-space:pre-line;border-block:1px solid var(--ui-border);padding:22px 0;margin:24px 0;line-height:1.85}
 .edit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin:12px 0 0;padding:12px 18px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-size:var(--ui-button);font-weight:600;text-decoration:none;background:transparent}
 .edit svg{width:18px;height:18px}
 .edit:hover{background:#fff8;border-color:#11130d66}
 footer p{font-size:var(--ui-note);font-weight:450;line-height:1.35;letter-spacing:-.015em}
 .playback{gap:12px;font-size:var(--ui-meta);line-height:1.4}
 .playback button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--ui-border);border-radius:12px;background:#ffffff40}
 .playback button:hover{background:#fff9}
 .playback svg{width:16px;height:16px}
 #scroll-hint{display:flex;align-items:center;gap:8px}
 #scroll-hint svg{width:16px;height:16px}
 #loading{font-family:var(--ui-font);font-size:18px;font-weight:500;letter-spacing:-.02em}
 .error p{font-size:var(--ui-body);line-height:1.5}
 .error .primary{width:max-content;min-width:200px}
}

@media(min-width:701px){
 footer{align-items:center}
 #scene:focus:not(:focus-visible){outline:none}
 #scene:focus-visible{outline:none}
 #scene:focus-visible+.model-view-controls{outline:2px solid var(--ink);outline-offset:6px;border-radius:10px}
 .model-view-controls{position:absolute;left:50%;bottom:26px;height:40px;z-index:3;display:flex;align-items:center;gap:16px;transform:translateX(-50%);white-space:nowrap;font-family:var(--ui-font);font-size:var(--ui-meta);line-height:1.4;color:var(--ui-muted)}
 .model-view-controls button{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 10px;border:1px solid var(--ui-border);border-radius:10px;background:#ffffff80;font-size:var(--ui-meta);color:var(--ink)}
 .model-view-controls button:hover{background:#fff}
}