:root{ --accent: var(--l9-accent); }   /* the site gold (l9.tokens.css), fixed; the ring no longer recolours it per frame */
  html,body{ margin:0; height:100%; background:#06060a; overflow:hidden; font-family:Inter,system-ui,sans-serif; color:var(--l9-text); user-select:none; -webkit-user-select:none; touch-action:none; }
  #c{ position:fixed; inset:0; display:block; width:100%; height:100%; }
  .ui{ position:fixed; left:0; right:0; pointer-events:none; }
  .top{ top:0; padding:calc(18px + env(safe-area-inset-top)) 22px 0; display:flex; justify-content:space-between; align-items:center; }
  .eyebrow{ font-family:Oswald,sans-serif; font-size:11px; letter-spacing:.32em; color:var(--l9-text-muted); }
  .counter{ font-size:11px; color:var(--l9-text-muted); letter-spacing:.08em; }
  .bottom{ bottom:0; padding:0 22px calc(20px + env(safe-area-inset-bottom)); }
  .hint{ font-size:11px; color:var(--l9-text-muted); text-align:center; }
  /* the way back to the home page videos (2026-10-14): always there, under the hint, tappable */
  #learn{ pointer-events:auto; display:block; margin:10px auto 0; text-align:center; font-size:12px; letter-spacing:.02em; color:var(--accent); text-decoration:none; padding:6px 10px; }
  #learn:hover{ text-decoration:underline; }
  #hint, #counter{ transition:opacity .35s; }
  button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
  /* the studio pill is the shared header's (ctrl_pubhead.ascx, /content/l9.pubhead.css) since 2026-10-14 */
  .l9-world .l9-pubhead { font-family:Inter,system-ui,sans-serif; }
  /* the orb's words, under the orb */
  #orbui{ position:fixed; left:0; right:0; padding:0 28px; text-align:center; }
  #orbui[hidden]{ display:none; }
  .o-name{ font-family:Oswald,sans-serif; font-weight:600; font-size:34px; letter-spacing:.04em; color:var(--l9-text); text-transform:uppercase; }
  .o-meta{ font-size:13px; color:var(--accent); margin-top:6px; min-height:18px; letter-spacing:.02em; }
  .o-tag{ font-size:14px; color:var(--l9-text-muted); margin:10px auto 0; max-width:320px; line-height:1.45; }
  .o-actions{ display:flex; flex-direction:column; gap:10px; margin:22px auto 0; max-width:300px; }
  .o-actions button{ padding:13px 16px; border-radius:12px; border:1px solid var(--l9-border); font-size:14px; font-weight:500; color:var(--l9-text); }
  .o-actions button.solid{ background:var(--l9-accent); border-color:transparent; color:#111111; font-weight:700; }
  .o-actions button.solid:hover{ background:var(--l9-accent-hover); }
  .o-actions button[hidden]{ display:none; }
  /* the finder sheet */
  #finder{ position:fixed; inset:0; background:rgba(4,4,8,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center; }
  #finder[hidden]{ display:none; }
  .sheet{ width:100%; max-width:520px; max-height:78vh; overflow:auto; background:var(--l9-surface); border:1px solid var(--l9-border); border-bottom:0; border-radius:20px 20px 0 0; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); touch-action:pan-y; }
  .f-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .f-head b{ font-family:Oswald,sans-serif; font-weight:600; font-size:18px; letter-spacing:.08em; text-transform:uppercase; }
  .f-head button{ font-size:13px; color:var(--l9-text-muted); padding:6px 4px; }
  #fsearch{ width:100%; box-sizing:border-box; margin-bottom:10px; padding:12px 14px; border-radius:10px; border:1px solid var(--l9-border); background:var(--l9-bg); color:var(--l9-text); font:inherit; font-size:15px; }
  #fsearch[hidden]{ display:none; }
  .f-state{ font-family:Oswald,sans-serif; font-size:11px; letter-spacing:.28em; color:var(--l9-text-muted); margin:14px 2px 6px; }
  .f-row{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:12px; text-align:left; padding:14px 12px; border-radius:12px; border:1px solid transparent; }
  .f-row + .f-row{ margin-top:2px; }
  .f-row.on{ border-color:color-mix(in srgb, var(--accent) 50%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); }
  .f-main b{ display:block; font-family:Oswald,sans-serif; font-weight:600; font-size:17px; letter-spacing:.05em; text-transform:uppercase; color:var(--l9-text); }
  .f-main i{ display:block; font-style:normal; font-size:12px; color:var(--l9-text-muted); margin-top:2px; }
  .f-main em{ display:block; font-style:normal; font-size:12px; color:var(--l9-text-muted); margin-top:4px; line-height:1.35; }
  .f-side{ flex:none; text-align:right; }
  .f-side b{ display:block; font-family:Oswald,sans-serif; font-size:15px; color:var(--accent); }
  .f-acts{ display:flex; gap:14px; }
  .f-side .open{ display:block; font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--l9-success); margin-top:3px; }
  #toast{ position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(10px); background:var(--accent); color:#111111; font-weight:600; font-size:13px; padding:10px 16px; border-radius:20px; opacity:0; transition:opacity .3s, transform .3s; pointer-events:none; white-space:nowrap; }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* The typing bar for Ask Luca (Terence 2026-10-14). The Luca and sign-in entries are printed on their labels now; this bar
   is the one piece of HTML left on the ring, shown at the foot of the screen when the question box on the label is
   tapped, because a canvas cannot take a keyboard. 16px input text keeps iOS from zooming the page on focus. */
#composer{ pointer-events:auto; position:fixed; left:0; right:0; bottom:0; z-index:5; display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:var(--l9-surface); border-top:1px solid var(--l9-border); }
#composer[hidden]{ display:none; }
#composer input{ flex:1 1 auto; min-width:0; padding:14px 16px; border-radius:14px; border:1px solid var(--l9-border); background:var(--l9-bg); color:var(--l9-text); font:400 16px Inter, sans-serif; }
#composer button{ padding:14px 18px; border-radius:14px; background:var(--accent); color:#111111; font:600 15px Inter, sans-serif; }
#composer button.quiet{ background:transparent; color:var(--l9-text-muted); border:1px solid var(--l9-border); padding:14px 16px; }