:root { color-scheme: dark; --ink:#e9e8ed; --muted:#838792; --line:rgba(255,255,255,.1); --accent:#c6b5f5; font-family:'DM Sans',sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:#090b12; color:var(--ink); }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; color:inherit; }
button:focus-visible,a:focus-visible,canvas:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.studio { min-height:640px; height:100svh; position:relative; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 69% 44%,#131526 0%,#0d101a 31%,#090b12 67%); }
.studio::after { content:''; position:absolute; inset:0; opacity:.025; pointer-events:none; z-index:5; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
header { position:absolute; top:33px; left:4.2%; right:4.2%; display:flex; align-items:center; justify-content:space-between; z-index:3; }
.brand { display:flex; align-items:center; gap:13px; font-size:12px; font-weight:700; letter-spacing:2.1px; text-decoration:none; color:var(--ink); }
.brand-mark { color:#c9b7ff; font-size:31px; font-weight:400; line-height:1; }
.edition { margin-left:21px; border-left:1px solid var(--line); padding-left:24px; color:#727682; font-size:9px; letter-spacing:1.8px; font-weight:400; }
.intro { position:absolute; left:8%; top:29%; z-index:2; pointer-events:none; }
.eyebrow { font-size:9px; letter-spacing:2.5px; color:#a3a1b0; display:flex; gap:9px; align-items:center; margin:0 0 27px; }
.eyebrow span { height:5px; width:5px; border-radius:50%; background:#b2a0db; box-shadow:0 0 10px #b2a0db55; }
h1 { font-family:'Manrope',sans-serif; font-weight:300; font-size:clamp(42px,4.5vw,72px); letter-spacing:-3px; line-height:1.13; margin:0; }
h1 em { font-style:normal; color:#a9a0be; }
.description { color:var(--muted); font-size:13px; line-height:1.9; margin:25px 0 0; }
#orbit { position:absolute; inset:0; height:100%; width:100%; touch-action:none; outline-offset:-6px; }
.canvas-caption { position:absolute; bottom:181px; left:66%; transform:translateX(-50%); font-size:8px; white-space:nowrap; letter-spacing:2px; color:#727584; display:flex; gap:12px; align-items:center; pointer-events:none; }
.caption-line { width:24px; height:1px; background:#6e617e; }
.controls { position:absolute; z-index:3; bottom:67px; left:50%; transform:translateX(-50%); width:min(770px,90%); min-height:90px; padding:20px 24px; border:1px solid #ffffff13; border-radius:18px; background:linear-gradient(135deg,#1a1d2bc9,#11141fd9); box-shadow:0 16px 60px #0004,inset 0 1px #ffffff06; backdrop-filter:blur(22px); display:flex; align-items:center; gap:30px; }
.control-group { display:flex; flex-direction:column; gap:10px; }
.control-label { display:flex; justify-content:space-between; gap:20px; font-size:8px; font-weight:500; letter-spacing:1.8px; color:#9b9cab; }
output { color:#c3b7dc; font-size:9px; letter-spacing:.4px; font-variant-numeric:tabular-nums; }
.segmented { display:flex; gap:5px; }
.segmented button { height:29px; width:39px; border:1px solid transparent; border-radius:7px; background:transparent; color:#777e90; font-size:26px; line-height:20px; }
.segmented button.selected { border-color:#ba99ee36; background:#b99eea13; color:#d9c5ff; }
.slider-group { flex:1; min-width:90px; }
input[type=range] { appearance:none; height:3px; width:100%; margin:11px 0 10px; background:linear-gradient(to right,#b5a1dd var(--fill,34.2%),#ffffff15 var(--fill,34.2%)); border-radius:5px; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { appearance:none; height:10px; width:10px; border-radius:50%; background:#dfd4f4; box-shadow:0 0 12px #bd9af333; }
input[type=range]::-moz-range-thumb { height:10px; width:10px; border:0; border-radius:50%; background:#dfd4f4; }
input[type=range]:focus-visible { outline:2px solid var(--accent); outline-offset:8px; }
.actions { display:flex; align-items:center; gap:10px; border-left:1px solid var(--line); padding-left:20px; }
.icon-button { display:grid; place-items:center; width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:#9999ab; font-size:24px; line-height:1; }
.icon-button svg { height:18px; width:18px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.icon-button:hover,.icon-button[aria-pressed=true] { color:#e1cffc; background:#baa1e910; }
.play-button { width:43px; height:43px; border-radius:50%; border:1px solid #d8c8f43d; background:#d8c8f414; color:#e6d8ff; font-size:19px; }
.play-button:hover { background:#d8c8f425; }
footer { position:absolute; bottom:25px; left:4.2%; right:4.2%; display:flex; justify-content:space-between; align-items:center; font-size:8px; color:#5f6371; letter-spacing:1.8px; z-index:3; }
footer button { border:0; background:none; font-size:8px; letter-spacing:1.7px; color:#9695a4; padding:8px 0; }
footer button span { padding-left:10px; font-size:14px; }
footer button:hover { color:#dfd1f4; }
.status { position:absolute; left:50%; bottom:168px; transform:translateX(-50%); background:#1b1c2de8; color:#d6c6ee; font-size:12px; border-radius:8px; padding:9px 15px; opacity:0; transition:opacity .3s; z-index:4; pointer-events:none; }
.status.visible { opacity:1; }
#leave-focus { display:none; position:absolute; top:30px; right:4.2%; z-index:4; background:#181b287a; }
.focused header,.focused .intro,.focused .controls,.focused footer,.focused .canvas-caption { display:none; }
.focused #leave-focus { display:grid; }
@media(min-width:1600px) { .intro { left:11%; } }
@media(max-width:900px) { .studio { min-height:640px; } .intro { left:6%; top:25%; } h1 { font-size:44px; } .description { font-size:12px; } .edition { display:none; } .controls { gap:19px; padding:18px; } .actions { gap:5px; padding-left:12px; } }
@media(max-width:600px) {
  .studio { min-height:720px; }
  header { top:22px; left:6%; right:6%; }
  .brand { font-size:10px; letter-spacing:1.8px; gap:10px; }
  .brand-mark { font-size:27px; }
  .intro { top:98px; left:7%; }
  .eyebrow { font-size:7px; margin-bottom:12px; letter-spacing:2px; }
  h1 { font-size:34px; letter-spacing:-1.5px; }
  h1 br { display:none; } h1 em { display:block; }
  .description { margin-top:12px; font-size:11px; line-height:1.7; }
  .description br { display:none; }
  .controls { bottom:61px; width:90%; padding:16px 18px; gap:20px; flex-wrap:wrap; border-radius:16px; }
  .shapes { width:120px; }
  .slider-group { flex:1; }
  .density-group { flex:none; width:120px; }
  .actions { flex:1; padding-left:0; border:0; justify-content:flex-end; gap:10px; }
  .control-label { font-size:8px; }
  .canvas-caption { left:50%; bottom:248px; font-size:7px; letter-spacing:1.5px; }
  footer { left:6%; right:6%; bottom:18px; font-size:6px; letter-spacing:1px; }
  footer button { font-size:7px; letter-spacing:1px; }
  .status { bottom:239px; white-space:nowrap; }
}

/* Hosted tool: generous touch targets and no third-party font requests. */
.icon-button { width:44px; height:44px; }
.segmented button { min-height:44px; min-width:44px; }
input[type=range] { min-height:24px; background-size:100% 3px; background-repeat:no-repeat; background-position:center; margin:0; }
.actions { gap:5px; }
@media(max-width:600px) { .controls { gap:12px 20px; } .shapes,.density-group { width:144px; } .actions { gap:4px; } }