#ug-studio { display:block; padding:0; overflow:visible; isolation:isolate; --ug-bg:#171b1d; --ug-panel:#232829; --ug-text:#f3f0e9; --ug-muted:#b7b5ad; --ug-bronze:#d1ac77; --ug-walnut:#44352b; color:var(--ug-text); background:var(--ug-bg); font-family:var(--sans); container-type:inline-size; width:100%; }
#ug-studio * { box-sizing:border-box; }
#ug-studio button { font:inherit; cursor:pointer; color:inherit; }
#ug-studio button:disabled { cursor:wait; opacity:.55; }
#ug-studio .ug-hero { max-width:1480px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr); align-items:center; gap:clamp(24px,3vw,48px); padding:40px clamp(24px,3vw,48px); position:relative; isolation:isolate; background:radial-gradient(ellipse at 77% 48%,#62513d35,transparent 63%); }
#ug-studio .ug-copy { min-width:0; position:relative; padding-block:12px; }
#ug-studio .ug-kicker { display:flex; align-items:center; gap:10px; margin:0 0 22px; font-size:.8125rem; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--ug-bronze); }
#ug-studio .ug-kicker:before { content:''; width:24px; height:1px; background:var(--ug-bronze); }
#ug-studio h1 { margin:0; font:500 clamp(3.25rem,5vw,5rem)/1.08 'Manrope',sans-serif; letter-spacing:-.055em; overflow-wrap:anywhere; }
#ug-studio h1 span { display:block; color:var(--ug-bronze); }
#ug-studio .ug-description { color:var(--ug-muted); font-size:1rem; line-height:1.7; max-width:34ch; margin:26px 0 22px; }
#ug-studio .ug-assemble { pointer-events:auto; display:inline-flex; align-items:center; gap:16px; min-height:46px; padding:0 18px; background:var(--ug-bronze); color:#211c16; border:1px solid var(--ug-bronze); border-radius:25px; font-size:.875rem; font-weight:600; transition:background .2s,transform .2s; }
#ug-studio .ug-assemble:hover { background:#e5c89d; transform:translateY(-2px); }
#ug-studio .ug-scene { min-width:0; }
#ug-studio .ug-stage { height:clamp(420px,42vw,560px); position:relative; }
#ug-studio .ug-canvas { position:absolute; width:100%; height:100%; inset:0; display:block; touch-action:pan-y; cursor:grab; }
#ug-studio .ug-canvas:active { cursor:grabbing; }
#ug-studio .ug-load { position:absolute; top:48%; left:50%; transform:translate(-50%,-50%); color:var(--ug-muted); font-size:.875rem; text-align:center; width:230px; pointer-events:none; }
#ug-studio .ug-load[hidden] { display:none; }
#ug-studio .ug-stage-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:12px; font-size:.8125rem; color:var(--ug-muted); letter-spacing:1px; }
#ug-studio .ug-orbit { display:flex; flex-shrink:0; gap:5px; }
#ug-studio .ug-orbit button { min-width:44px; min-height:44px; border:1px solid #ffffff25; border-radius:50%; background:#202526; font-size:19px; transition:background .2s; }
#ug-studio .ug-orbit button:hover { background:#40382f; }
#ug-studio .ug-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px max(var(--gutter),calc((100% - 1384px)/2)); border-top:1px solid #ffffff15; background:#1c2021; }
#ug-studio .ug-steps { display:flex; gap:6px; flex-wrap:wrap; }
#ug-studio .ug-step { min-height:50px; padding:10px 19px; background:transparent; border:1px solid transparent; border-radius:30px; color:var(--ug-muted); font-size:1rem; white-space:nowrap; transition:background .25s,color .25s; }
#ug-studio .ug-step b { font-size:.8125rem; font-weight:400; margin-right:7px; opacity:.65; }
#ug-studio .ug-step:hover { background:#ffffff0a; }
#ug-studio .ug-step[aria-pressed=true] { background:var(--ug-bronze); color:#241e16; }
#ug-studio .ug-note { padding:20px max(var(--gutter),calc((100% - 1384px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; background:#3a3028; }
#ug-studio .ug-note p { font-size:.875rem; line-height:1.65; margin:0; color:#e1d6c6; }
#ug-studio .ug-note strong { font-size:1rem; font-weight:500; color:var(--ug-text); }
#ug-studio .ug-note small { color:#bcb1a4; font-size:.8125rem; white-space:nowrap; }
@container (max-width:900px) {
 #ug-studio .ug-hero { grid-template-columns:minmax(0,1fr); padding:34px 28px 28px; gap:24px; }
 #ug-studio .ug-copy { padding:0; }
 #ug-studio .ug-kicker { margin-bottom:17px; }
 #ug-studio h1 { font-size:3.5rem; }
 #ug-studio .ug-description { max-width:480px; margin:22px 0; }
 #ug-studio .ug-stage { height:470px; }
 #ug-studio .ug-bottom { flex-wrap:wrap; padding:18px 28px; gap:13px; }
 #ug-studio .ug-note { padding:18px 28px; }
}
@container (max-width:510px) {
 #ug-studio .ug-hero { padding:28px 20px 24px; }
 #ug-studio h1 { font-size:clamp(2.75rem,10cqw,3.5rem); }
 #ug-studio .ug-description { max-width:100%; margin:18px 0; }
 #ug-studio .ug-assemble { margin:0; }
 #ug-studio .ug-stage { height:385px; }
 #ug-studio .ug-stage-caption { font-size:.75rem; letter-spacing:0; }
 #ug-studio .ug-bottom { display:block; padding:16px 15px; }
 #ug-studio .ug-steps { gap:3px; justify-content:space-between; }
 #ug-studio .ug-step { padding:9px 11px; font-size:.875rem; min-height:46px; }
 #ug-studio .ug-step b { margin-right:4px; }
 #ug-studio .ug-note { padding:20px; display:block; }
 #ug-studio .ug-note small { display:block; margin-top:10px; }
}
@media(prefers-reduced-motion:reduce) { #ug-studio *,#ug-studio *:before { transition:none!important; } }

/* Production composition: normal content flow and full controls on touch. */
@font-face { font-family:Manrope; src:url("fonts/manrope-medium.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap; }
#ug-studio:before { display:none; }
#ug-studio .ug-links { display:flex; flex-wrap:wrap; gap:14px 22px; margin-top:20px; pointer-events:auto; font-size:.9375rem; }
#ug-studio .ug-links a { color:var(--ug-text); padding:8px 0; text-underline-offset:6px; text-decoration:underline; }
#ug-studio .ug-links a:hover { color:var(--ug-bronze); }
#ug-studio .ug-stage { container-type:normal; }
#ug-studio .ug-fallback { position:absolute; inset:0; display:grid; place-items:center; background:radial-gradient(ellipse at center,#d1ac770a,transparent 65%); }
#ug-studio .ug-loading-track { position:absolute; top:60%; width:96px; height:2px; background:#d1ac7726; overflow:hidden; border-radius:2px; }
#ug-studio .ug-loading-track:after { content:''; display:block; width:40px; height:100%; background:var(--ug-bronze); animation:ug-loading-scan 1.6s ease-in-out infinite; }
#ug-studio .ug-stage[data-scene-state="error"] .ug-loading-track { display:none; }
#ug-studio .ug-canvas:not([hidden]) { animation:ug-scene-appear .4s ease-out both; }
@keyframes ug-loading-scan { from { transform:translateX(-40px); } to { transform:translateX(100px); } }
@keyframes ug-scene-appear { from { opacity:0; } to { opacity:1; } }
#ug-studio .ug-load { top:auto; bottom:4px; background:var(--ug-bg); padding:8px; width:min(85%,350px); }
#ug-studio .ug-note small { white-space:normal; }
#ug-studio .ug-canvas { touch-action:pan-y; }
#ug-studio button[disabled] { cursor:default; }
#ug-studio .ug-loading-panel { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:min(92%,380px); text-align:center; border-radius:14px; background:var(--ug-bg); }
#ug-studio .ug-stage:not([data-scene-state="ready"]) .ug-loading-panel { bottom:44%; background:transparent; }
#ug-studio .ug-loading-panel .ug-load { position:static; transform:none; width:100%; margin:0; padding:10px 12px; font-size:.875rem; line-height:1.55; }
#ug-studio .ug-retry { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:8px 16px; margin-bottom:6px; border:1px solid var(--ug-bronze); border-radius:24px; color:var(--ug-bronze); font-size:.875rem; text-decoration:none; }
#ug-studio .ug-retry:hover { background:var(--ug-bronze); color:#211c16; }
@media (prefers-reduced-motion:reduce) {
 #ug-studio .ug-loading-track:after, #ug-studio .ug-canvas:not([hidden]) { animation:none; }
}