/* joyboy.club — the app.
     Ground: deep space. Ink: starlight. ONE action accent: solar amber.
     Type floor: 15px body, nothing under 10px, pixel face for display only. */
  :root{
    --space:#070b1a; --nebula:#141a3a; --panel:#0f1530; --panel-2:#171e44; --rule:#1f2a55; --rule-lit:#2e3d78;
    --star:#f3ead6; --dust:#b3abcf; --dim:#948eb4;
    --solar:#ffb347; --amber:#e8842a; --plasma:#6be3ff; --mint:#3ddc97; --rose:#ff6b8a; --gold:#ffe08a;
    --px:'Jersey 20','Space Mono',monospace; --sans:'Archivo',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,Menlo,monospace;
    --pad-bg:#171e44; --pad-edge:#8a94b8;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;height:100%;background:#030512;color:var(--dust);font-family:var(--sans);font-size:15.5px;line-height:1.45;-webkit-font-smoothing:antialiased;overscroll-behavior:none;}
  /* This is a console, not a document: a long press on a phone must never
     raise a text selection or the copy callout over a game in play. Fields
     and the one thing worth copying — your own address — opt back in. */
  body{display:grid;place-items:center;min-height:100dvh;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
  input,textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}
  .idcard .who2 .mail{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}
  .screenbox,.screenbox iframe,.mount,.mount iframe{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
  canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block;}
  button,input,textarea,select{font:inherit;color:inherit;}
  button{background:none;border:0;padding:0;cursor:pointer;}
  button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--plasma);outline-offset:2px;}
  [hidden]{display:none!important;}

  .device{position:relative;width:100vw;height:100dvh;background:var(--space);overflow:hidden;display:flex;flex-direction:column;}
  @media (min-width:700px) and (min-height:760px){
    body{background:radial-gradient(ellipse at 50% 30%,#0f1535 0%,#030512 70%);}
    .device{width:390px;height:844px;border-radius:48px;border:1px solid var(--rule-lit);box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 10px #000;}
    .device::before{content:"";position:absolute;left:50%;top:14px;width:110px;height:30px;transform:translateX(-50%);border-radius:999px;background:#000;z-index:40;}
    .desk-note{position:fixed;left:24px;bottom:22px;max-width:330px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);line-height:1.6;}
    .desk-note b{color:var(--dust);font-weight:400;}
    .desk-note .legal{display:inline-block;margin-top:9px;}
    .desk-note .legal a{color:var(--dim);text-decoration:underline;text-underline-offset:3px;}
    .desk-note .legal a:hover{color:var(--dust);}
  }
  @media not all and (min-width:700px) and (min-height:760px){.desk-note{display:none;}}

  #bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;}

  /* ---------- chrome: the wordmark, the pad lamp ---------- */
  .top{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;
       padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0;height:calc(env(safe-area-inset-top,0px) + 48px);flex:none;}
  @media (min-width:700px) and (min-height:760px){.top{padding-top:52px;height:88px;}}
  .wordmark{display:flex;align-items:center;gap:7px;}
  .wordmark canvas{width:26px;height:26px;flex:none;}
  /* one face, one size, one baseline: the name and its suffix sit on the same line, the suffix in the action colour */
  .wordmark .name{font-family:var(--px);font-weight:700;font-size:20px;line-height:1;color:var(--star);letter-spacing:.01em;}
  .wordmark .name b{font-weight:700;color:var(--star);}
  .wordmark .name i{font-style:normal;color:var(--solar);}
  .top .right{display:flex;gap:10px;align-items:center;flex:none;}
  .who{font-family:var(--mono);font-size:12px;color:var(--dust);letter-spacing:.02em;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  main{position:relative;z-index:5;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
  main.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* A tab that scrolls still ends where its content ends: nothing chains to
     the document, and the rubber band at either end is refused in app.js */
  .create,.me,main.scroll,.sheet .body{overscroll-behavior:contain;}
  .tabs{position:relative;z-index:10;flex:none;display:flex;border-top:1px solid var(--rule);background:rgba(7,11,26,.9);backdrop-filter:blur(10px);padding:8px 6px max(calc(env(safe-area-inset-bottom,0px) + 10px), 20px);}
  @media (min-width:700px) and (min-height:760px){.tabs{padding-bottom:22px;}}
  /* three keys, not three words: the tab bar is the console's own row of buttons */
  .tabs{gap:8px;padding-left:10px;padding-right:10px;}
  .tabs button{flex:1;text-align:center;font-family:var(--px);font-size:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--dust);padding:8px 0 7px;
    border:2px solid var(--pad-edge);border-radius:12px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .tabs button i{display:block;font-style:normal;font-size:18px;margin-bottom:2px;font-family:var(--px);line-height:1;}
  .tabs button[aria-current="true"]{background:var(--solar);border-color:var(--solar);color:#2a1604;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);}
  .tabs.hidden{display:none;}

  .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
  h1,h2,h3{margin:0;font-family:var(--px);color:var(--star);font-weight:700;}
  h1{font-size:28px;line-height:1.05;} h2{font-size:20px;} h3{font-size:16px;}
  p{margin:0;}
  .seg{display:inline-flex;border:1px solid var(--rule-lit);border-radius:999px;padding:2px;gap:2px;background:rgba(15,21,48,.7);}
  .seg button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:6px 11px;border-radius:999px;}
  .seg button[aria-pressed="true"]{background:var(--star);color:var(--space);}
  /* the filter row scrolls sideways — fade the edge so the cut reads as
     "there is more", not as a layout that ran out of room */
  /* five keys in one row, no scrolling: All and Hot as wide as their word, the three "by" keys sharing the rest equally */
  .chips{display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:6px;overflow:visible;padding:8px 14px 4px;}
  .chips button[data-l="flagged"]{grid-column:1 / -1;}
  /* five keys of one size: a row that scrolls, every key the same width, the label centred */
  .chips button{min-width:0;white-space:nowrap;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dust);border:2px solid var(--pad-edge);border-radius:10px;padding:9px 7px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .chips button[aria-pressed="true"]{background:var(--solar);border-color:var(--solar);color:#2a1604;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18);}
  .btn{display:grid;place-items:center;min-height:48px;border:2px solid var(--pad-edge);border-radius:12px;padding:0 14px;font-family:var(--px);font-weight:700;font-size:16px;letter-spacing:.03em;color:var(--star);flex:1;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .btn.pri{background:var(--solar);border-color:var(--solar);color:#2a1604;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);}
  .btn.sm{flex:0 0 auto;min-height:40px;padding:0 14px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.12em;}
  .btn.ghost{background:transparent;box-shadow:none;border-width:1px;border-color:var(--rule-lit);}
  .btn.flagged{border-color:var(--solar);color:var(--solar);}
  .btn[disabled]{opacity:.4;}
  .note{font-family:var(--mono);border-left:2px solid var(--rose);padding:4px 0 4px 12px;font-size:13.5px;color:var(--dust);}
  .note b{color:var(--star);font-weight:600;}
  .note.ok{border-color:var(--mint);}

  /* ---------- Tab 2 · Universe ---------- */
  .galaxy{flex:1;display:flex;flex-direction:column;min-height:0;}
  .galaxy .hd{padding:4px 14px 0;display:flex;justify-content:space-between;align-items:center;gap:8px;}
  .orbit{position:relative;flex:1;min-height:0;}
  .orbit canvas{position:absolute;inset:0;width:100%;height:100%;}
  .orbit .hit{position:absolute;inset:0;touch-action:none;}
  .orbit .arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:66px;display:grid;place-items:center;color:var(--dust);font-family:var(--px);font-size:24px;opacity:.75;}
  .orbit .arrow.l{left:0;} .orbit .arrow.r{right:0;}
  .orbit .zoom{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px;}
  .orbit .zoom button{width:32px;height:32px;border:1px solid var(--rule-lit);border-radius:8px;background:rgba(15,21,48,.8);color:var(--star);font-family:var(--px);font-size:17px;display:grid;place-items:center;}
  /* the world's name is type, not pixels: crisp on every screen, and it says who made it */
  .orbit .otitle{position:absolute;left:0;right:0;bottom:4px;text-align:center;pointer-events:none;text-shadow:0 1px 4px rgba(7,11,26,.95);}
  .orbit .otitle b{display:block;font-family:var(--px);font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--star);}
  .orbit .otitle small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);margin-top:1px;}
  .dots{display:flex;justify-content:center;align-items:center;gap:6px;padding:2px 0 6px;min-height:14px;}
  .dots i{width:5px;height:5px;border-radius:50%;background:var(--rule-lit);transition:background .2s;} .dots i.on{background:var(--solar);}
  .dots span{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dim);}
  .card{margin:0 12px;background:rgba(15,21,48,.94);border:1px solid var(--rule-lit);border-radius:14px;overflow:hidden;}
  .scope{position:relative;aspect-ratio:16/9;background:#000;border-bottom:1px solid var(--rule);overflow:hidden;}
  .scope .mount{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;pointer-events:none;}   /* the preview is a picture: taps and swipes belong to the card */
  .scope .mount.in{opacity:1;}
  .scope .tag{position:absolute;right:8px;bottom:7px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--plasma);background:rgba(7,11,26,.7);border:1px solid var(--rule-lit);border-radius:4px;padding:3px 7px;}
  .scope .tag i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--plasma);margin-right:5px;vertical-align:1px;}
  .card .body{padding:10px 12px 12px;}
  .card .name{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
  .card .name b{font-family:var(--px);font-weight:700;font-size:21px;color:var(--star);}
  .card .name span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--plasma);white-space:nowrap;}
  .card q{display:block;font-family:var(--mono);font-size:12px;color:var(--dust);line-height:1.5;margin-top:3px;quotes:"“" "”";}
  .card .meta{display:flex;gap:12px;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);}
  .card .meta b{color:var(--dust);font-weight:400;}
  /* the row under the card: one key to go, in the console's cyan so the tabs keep the yellow; two quiet keys beside it */
  .card .acts{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:8px;margin-top:12px;}
  .gokey,.key2{min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-family:var(--px);font-size:18px;letter-spacing:.03em;line-height:1;}
  .gokey{background:var(--plasma);border:2px solid var(--plasma);color:#062a33;box-shadow:inset 0 -3px 0 rgba(0,0,0,.22);}
  .gokey i{font-style:normal;font-size:13px;}
  .key2{border:2px solid var(--rule-lit);background:rgba(15,21,48,.55);color:var(--dust);font-size:16px;}
  .key2 i{font-style:normal;font-size:15px;color:var(--dim);}
  .key2.on{border-color:var(--plasma);color:var(--plasma);} .key2.on i{color:var(--plasma);}
  .gokey:active,.key2:active{transform:translateY(2px);box-shadow:none;}
  .scope{cursor:pointer;} .card{touch-action:pan-y;}
  /* A short phone cannot give the lane and the card everything they want, so
     the heading and the world's sentence give a little back. The lane itself
     draws to whatever height it is left with. */
  @media (max-height:760px){
    .galaxy .hd h1{font-size:25px;}
    .card q{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .card .body{padding:8px 12px 10px;}
  }

  /* ---------- Play ---------- */
  .play{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;}
  /* the close cross: landscape only, where there is no bar to go back from */
  .play .close{display:none;position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);top:calc(env(safe-area-inset-top,0px) + 10px);z-index:26;width:36px;height:36px;border-radius:50%;
    background:rgba(7,11,26,.78);border:1px solid var(--rule-lit);color:var(--star);font-family:var(--px);font-size:16px;place-items:center;}
  .land .play .close{display:grid;}
  /* thumbs down: the chrome steps back so nothing sits on the world */
  .play .padbottom,.play .close{transition:opacity .25s;}
  .play.busy .padbottom,.play.busy .close{opacity:0;pointer-events:none;}
  .play.busy .padbottom button{pointer-events:none;}
  .play .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 12px 8px;flex:none;}
  /* the score lives in the bar, like a counter on a handheld's rim */
  .play .bar .score{display:flex;align-items:center;gap:8px;font-family:var(--mono);}
  .play .bar .score small{font-size:10px;letter-spacing:.16em;color:var(--dim);}
  .play .bar .score em{font-style:normal;font-weight:700;font-size:20px;color:var(--star);min-width:2ch;text-align:right;}
  .play .bar .score i{font-style:normal;font-size:10px;letter-spacing:.14em;border:1px solid;border-radius:999px;padding:3px 8px;}
  .play .bar .score i.live{color:var(--mint);border-color:rgba(61,220,151,.5);} .play .bar .score i.dead{color:var(--rose);border-color:rgba(255,107,138,.55);}
  .play .bar button{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--star);padding:8px 14px;
    border:1px solid var(--rule-lit);border-radius:999px;background:rgba(15,21,48,.9);}
  .play .bar .tools{display:flex;gap:8px;align-items:center;}
  .play .bar .tools button{border:1px solid var(--rule-lit);border-radius:8px;padding:6px 9px;color:var(--dust);}
  /* the screen sits in a bezel, a window in the cartridge shell */
  .screenbox{position:relative;background:#000;margin:0 10px;border:2px solid var(--pad-edge);border-radius:10px;box-shadow:0 0 0 3px var(--space),0 0 0 4px var(--rule-lit);aspect-ratio:16/9;flex:none;overflow:hidden;}
  .screenbox .mount{position:absolute;inset:0;}
  .over{position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,5,18,.6);text-align:center;pointer-events:none;}
  .over[hidden]{display:none;}
  .over b{display:block;font-family:var(--px);font-size:26px;color:var(--star);text-shadow:2px 2px 0 #000;}
  .over span{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--dust);margin-top:6px;}
  /* the brief takes the slack between the screen and the control zone, so the
     space a tall phone leaves over is shared rather than dumped in one gap */
  /* the label under the window: name, sentence, who, how to play */
  /* the words are a caption, not a headline: they sit tight under the screen
     and give the rest of the height to the hands */
  .brief{flex:none;display:flex;flex-direction:column;justify-content:flex-start;padding:8px 14px 0;}
  .brief .row1{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
  .brief .gen{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
  .brief b{font-family:var(--px);font-size:17px;color:var(--star);}
  .brief .score{font-family:var(--mono);font-size:12px;color:var(--dust);letter-spacing:.06em;white-space:nowrap;}
  .brief .score em{font-style:normal;color:var(--star);font-weight:700;}
  .brief .score .live{color:var(--mint);} .brief .score .dead{color:var(--rose);}
  .brief q{font-family:var(--mono);font-size:11px;color:var(--dim);quotes:"“" "”";margin-top:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
  .brief .meta{display:flex;align-items:center;gap:14px;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
  .brief .meta b{color:var(--dust);font-weight:400;}
  .land .brief .meta{display:none;}
  .brief .rep{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dust);border:1px solid var(--rule-lit);border-radius:999px;padding:4px 9px;}
  /* the how-to card: the one thing to read before the thumbs go down */
  .howto{margin-top:7px;display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:center;border:1px solid var(--rule-lit);border-left:3px solid var(--solar);border-radius:9px;background:rgba(15,21,48,.92);padding:6px 11px;}
  .howto .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--solar);white-space:nowrap;}
  .howto p{font-family:var(--mono);font-size:11.5px;line-height:1.35;color:var(--dust);}
  .land .howto{display:none;}

  /* everything left over belongs to the hands */
  .padzone{margin-top:auto;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;border-top:1px solid var(--rule);padding:10px 14px max(calc(env(safe-area-inset-bottom,0px) + 10px), 20px);}
  .padhint{font-family:var(--mono);font-size:12.5px;line-height:1.45;color:var(--dust);text-align:center;margin:0 auto 12px;max-width:34em;}
  .padwrap{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  /* one cluster only (no direction control, or no buttons): centre it */
  .padwrap.solo{justify-content:center;}
  /* d-pad: cross 116, keys 34 at 41 — the web console's geometry, unchanged */
  .cross{position:relative;width:116px;height:116px;flex:none;}
  .padwrap,.padwrap *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;touch-action:none;}
  .cross button{font-family:var(--px);position:absolute;width:34px;height:34px;border:2px solid var(--pad-edge);border-radius:7px;display:grid;place-items:center;color:var(--dust);font-size:12px;touch-action:none;user-select:none;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .cross button.down{background:var(--rule-lit);box-shadow:none;transform:translateY(2px);}
  .cross button[data-b="up"]{left:41px;top:0;} .cross button[data-b="down"]{left:41px;bottom:0;}
  .cross button[data-b="left"]{left:0;top:41px;} .cross button[data-b="right"]{right:0;top:41px;}
  /* stick: same 116 footprint so the thumb lands in the same place */
  /* The stick's zone: in portrait the stick appears wherever the thumb lands
     inside it. The rest ring shows where it sleeps; buttons on the right never
     move. */
  .stickzone{position:relative;flex:1;min-width:150px;height:132px;touch-action:none;}
  .stickzone .rest{position:absolute;left:50%;top:50%;width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;border:1px dashed rgba(138,148,184,.28);pointer-events:none;transition:opacity .15s;}
  .stickzone.held .rest{opacity:.35;}
  .stickzone .stick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:left .18s ease-out, top .18s ease-out;}
  .stickzone.held .stick{transition:none;}
  .stick{position:relative;width:116px;height:116px;flex:none;border-radius:50%;border:2px solid var(--pad-edge);background:radial-gradient(circle at 50% 45%, rgba(46,61,120,.5), var(--pad-bg));touch-action:none;}
  .stick .knob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:var(--rule-lit);border:2px solid var(--pad-edge);box-shadow:inset 0 -4px 0 rgba(0,0,0,.35);transition:transform .08s ease-out;}
  .stick.live .knob{transition:none;}
  .stick .ring{position:absolute;inset:14px;border-radius:50%;border:1px dashed rgba(138,148,184,.28);}
  /* action buttons: A ⌀56 raised 12, B left of it, X/Y above — physical layout */
  .acts2{position:relative;width:126px;height:116px;flex:none;}
  .acts2 button{position:absolute;width:56px;height:56px;border-radius:50%;border:2px solid var(--pad-edge);display:grid;place-items:center;font-family:var(--px);font-weight:700;font-size:18px;color:var(--dust);background:var(--pad-bg);box-shadow:inset 0 -4px 0 rgba(0,0,0,.4);touch-action:none;user-select:none;}
  .acts2 button.down{background:var(--rule-lit);box-shadow:none;}
  .acts2 button[data-b="a"]{border-color:var(--mint);color:var(--mint);right:0;bottom:34px;}
  .acts2 button[data-b="b"]{border-color:var(--plasma);color:var(--plasma);left:0;bottom:6px;}
  .acts2.one{width:64px;} .acts2.one button[data-b="a"]{right:0;bottom:24px;width:64px;height:64px;font-size:20px;}
  /* four buttons sit in the diamond every controller uses, and in the order the
     standard mapping names them: A at the bottom, B right, X left, Y on top */
  .acts2.four{width:132px;height:132px;}
  .acts2.four button{width:50px;height:50px;font-size:17px;}
  .acts2.four button[data-b="a"]{left:41px;bottom:0;top:auto;right:auto;}
  .acts2.four button[data-b="b"]{border-color:var(--plasma);color:var(--plasma);right:0;top:41px;bottom:auto;left:auto;}
  .acts2.four button[data-b="x"]{border-color:var(--solar);color:var(--solar);left:0;top:41px;bottom:auto;right:auto;}
  .acts2.four button[data-b="y"]{border-color:var(--rose);color:var(--rose);left:41px;top:0;bottom:auto;right:auto;}
  .acts2 .lbl{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);pointer-events:none;white-space:nowrap;}
  /* everything you touch to play is down here: the pad, the two run buttons,
     then the way the pad itself is shaped. Nothing up in the title bar. */
  .padbottom{margin-top:auto;padding-top:12px;}
  /* Safari keeps its own toolbars over the page, so a tab gets ~110px less
     glass than the pad rows were drawn for — and .device is overflow:hidden,
     so the rows under the stick were not squashed, they were cut off and
     nobody could see they existed. When the glass is short the reading matter
     gives up its room first; the thumbs keep theirs. */
  @media (max-height: 820px) {
    .device:not(.land) .padwrap{min-height:150px;}
    .device:not(.land) .brief{padding-top:5px;}
    .device:not(.land) .howto{margin-top:5px;padding:5px 10px;}
    .device:not(.land) .howto p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
    .device:not(.land) .padhint{margin-bottom:7px;}
    .device:not(.land) .padzone{padding-top:7px;}
    .device:not(.land) .padbottom{padding-top:8px;}
    .device:not(.land) .padtools{margin-top:7px;}
  }
  @media (max-height: 720px) {
    .device:not(.land) .padwrap{min-height:124px;}
    .device:not(.land) .howto{display:none;}
    .device:not(.land) .brief .meta{display:none;}
  }
  /* A very short tab (an SE with Safari's bars) cannot hold the whole console
     however hard it is squeezed. Below this the screen is allowed to scroll:
     a row you can reach by scrolling is a row that exists, and a row cut off
     by overflow:hidden is not. */
  @media (max-height: 690px) {
    .device:not(.land) .padwrap{min-height:104px;}
    .device:not(.land) .padhint{display:none;}
    .device:not(.land) .play{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
    .device:not(.land) .play .padzone{margin-top:0;}
  }
  /* iOS zooms the whole page in when you focus a field smaller than 16px, and
     it has ignored user-scalable=no since iOS 10 — the third step of the tour
     put the caret in the sentence box and the console lurched. Touch gets 16px;
     a desk, where nothing zooms, keeps the 14px the box was drawn at. */
  @media (pointer: coarse) {
    .say textarea, .revise textarea{font-size:16px;}
  }
  /* the home-screen nudge: a line, not a banner, and it leaves by itself */
  .a2hs{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);z-index:60;
        display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
        background:rgba(15,21,48,.96);border:1px solid var(--rule-lit);box-shadow:0 10px 30px -12px #000;
        font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--dust);
        animation:a2hsIn .35s ease both;}
  .a2hs b{color:var(--star);font-weight:400;}
  .a2hs button{flex:none;color:var(--dim);font-size:14px;padding:2px 4px;}
  @keyframes a2hsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .sysrow{display:flex;justify-content:center;gap:10px;}
  .sysrow button{border:2px solid var(--pad-edge);border-radius:10px;padding:9px 16px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--star);}
  .sysrow button.start{background:var(--solar);border-color:var(--solar);color:#2a1604;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);}
  .sysrow button.rot{border-color:var(--plasma);color:var(--plasma);}
  .padtools{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:9px;}
  .padtools button{border:1px solid var(--rule-lit);border-radius:999px;padding:6px 12px;background:rgba(15,21,48,.8);
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust);}
  /* Portrait: the pad is the whole space between the label and the run keys,
     and the two clusters sit where thumbs rest — low, one to each side — not
     in a row centred in whatever was left over. A thumb pressed anywhere in
     that space is the stick; the keys can be dragged to wherever the right
     thumb actually is (MOVE PAD, below), and the ring says where the stick
     sleeps. Positions are percentages of the pad, so they survive a taller
     phone. */
  .device:not(.land) .padzone{justify-content:flex-start;}
  .device:not(.land) .padwrap{position:relative;flex:1;min-height:200px;display:block;--rest-x:27%;--rest-y:58%;--acts-x:79%;--acts-y:58%;}
  .device:not(.land) .padwrap.solo-dir{--rest-x:50%;} .device:not(.land) .padwrap.solo-acts{--acts-x:50%;}
  .device:not(.land) .stickzone{position:absolute;inset:0;height:auto;min-width:0;}
  .device:not(.land) .stickzone .rest,.device:not(.land) .stickzone .stick{left:var(--rest-x);top:var(--rest-y);}
  .device:not(.land) .cross{position:absolute;left:var(--rest-x);top:var(--rest-y);transform:translate(-50%,-50%);}
  .device:not(.land) .acts2{position:absolute;left:var(--acts-x);top:var(--acts-y);transform:translate(-50%,-50%);}
  /* MOVE PAD: the ring and the key cluster become handles; the stick and the
     keys stop answering until DONE */
  .padwrap.editing .rest,.padwrap.editing .cross,.padwrap.editing .acts2{outline:2px dashed var(--solar);outline-offset:8px;pointer-events:auto;touch-action:none;}
  .padwrap.editing .rest{opacity:1;border:2px solid var(--solar);}
  .padwrap.editing .stick{opacity:.25;} .padwrap.editing .stickzone{pointer-events:none;} .padwrap.editing .rest{pointer-events:auto;}
  .padwrap.editing .acts2 button,.padwrap.editing .cross button{pointer-events:none;}
  .padwrap .edithint{display:none;position:absolute;left:12px;right:12px;top:6px;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--solar);pointer-events:none;}
  .padwrap.editing .edithint{display:block;}
  .padtools button.on{border-color:var(--solar);color:var(--solar);}
  /* a tall phone has room to spare between the screen and the thumbs — spend it
     on bigger keys rather than on more empty bezel */
  @media (min-height:820px){
    .cross,.stick{width:132px;height:132px;}
    .stickzone{height:150px;} .stickzone .rest{width:132px;height:132px;margin:-66px 0 0 -66px;}
    .cross button{width:38px;height:38px;font-family:var(--px);font-size:13px;}
    .cross button[data-b="up"],.cross button[data-b="down"]{left:47px;}
    .cross button[data-b="left"],.cross button[data-b="right"]{top:47px;}
    .stick .knob{width:60px;height:60px;margin:-30px 0 0 -30px;}
    .acts2{width:144px;height:132px;}
    .acts2 button{width:64px;height:64px;font-size:20px;}
    .acts2 button[data-b="a"]{bottom:39px;} .acts2 button[data-b="b"]{bottom:7px;}
    .acts2.one{width:72px;} .acts2.one button[data-b="a"]{bottom:27px;width:72px;height:72px;font-size:22px;}
    .acts2.four{width:150px;height:150px;}
    .acts2.four button{width:58px;height:58px;font-size:19px;}
    .acts2.four button[data-b="a"]{left:46px;bottom:0;}
    .acts2.four button[data-b="b"]{right:0;top:46px;}
    .acts2.four button[data-b="x"]{left:0;top:46px;}
    .acts2.four button[data-b="y"]{left:46px;top:0;}
  }

  /* landscape play: the screen fills the phone, the pad floats over the letterbox */
  .device.land{width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none;}
  .device.land::before{display:none;}
  .land .top,.land .tabs{display:none;}
  .land .play{padding:0;}
  /* In landscape the world fills the glass and draws its own HUD in the top
     corners, so the shell's top bar goes away: ⟲ PORTRAIT in the control row
     does exactly what BACK did here, and it is already under the thumbs. */
  .land .play .bar{display:none;}
  .land .screenbox{position:absolute;inset:0;aspect-ratio:auto;border:0;margin:0;border-radius:0;box-shadow:none;display:grid;place-items:center;}
  .land .screenbox .mount{position:relative;inset:auto;width:min(100vw, calc(100dvh * 16 / 9));height:min(100dvh, calc(100vw * 9 / 16));}
  /* landscape: the brief becomes a single line in the top bar, clear of the pad */
  .land .brief{display:block;position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 4px);z-index:20;text-align:center;padding:0 120px;pointer-events:none;}
  .land .brief .row1{justify-content:center;gap:14px;} .land .brief q,.land .brief .rep,.land .brief .score{display:none;}
  .land .padhint{display:none;}
  .land .brief b{font-size:15px;}
  .land .brief .row1{text-shadow:0 1px 5px rgba(7,11,26,.95),0 0 12px rgba(7,11,26,.9);}
  .land .padzone{position:absolute;inset:0;border:0;padding:0;margin:0;pointer-events:none;z-index:15;}
  .land .padwrap{position:absolute;inset:0;border:0;padding:0;pointer-events:none;display:block;}
  /* the left half of the glass is the stick's: press anywhere there and the stick is under the thumb */
  .land .stickzone{position:absolute;left:0;top:calc(env(safe-area-inset-top,0px) + 48px);bottom:0;width:52%;height:auto;min-width:0;flex:none;pointer-events:auto;}
  .land .stickzone .rest{display:none;}
  /* the stick keeps its centre-anchored transform: placeAt() puts its centre under the thumb */
  .land .stickzone .stick{left:calc(env(safe-area-inset-left,0px) + 88px);top:calc(100% - 96px);opacity:.45;transition:opacity .2s;}
  .land .stickzone.held .stick{opacity:.92;transition:none;}
  .land .cross{position:absolute;left:calc(env(safe-area-inset-left,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 46px);}
  .land .acts2{position:absolute;right:calc(env(safe-area-inset-right,0px) + 16px);bottom:calc(env(safe-area-inset-bottom,0px) + 46px);}
  .land .cross,.land .acts2{pointer-events:auto;opacity:.92;}
  .land .padbottom{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);margin:0;
                   display:flex;justify-content:center;align-items:center;gap:10px;pointer-events:none;}
  .land .sysrow,.land .padtools{margin:0;gap:8px;pointer-events:none;}
  .land .sysrow button,.land .padtools button{pointer-events:auto;background:rgba(7,11,26,.86);padding:6px 13px;font-size:12px;}
  /* the dark-on-yellow lettering was still in force over that dark plate */
  .land .sysrow button.start{background:var(--solar);border-color:var(--solar);color:#2a1604;}
  @media (orientation:landscape) and (max-height:430px){
    .land .cross,.land .stick{width:96px;height:96px;}
    .land .cross button[data-b="up"],.land .cross button[data-b="down"]{left:33px;}
    .land .cross button[data-b="left"],.land .cross button[data-b="right"]{top:33px;}
    .land .cross button{width:30px;height:30px;}
    .land .stick .knob{width:44px;height:44px;margin:-22px 0 0 -22px;}
    .land .acts2{width:112px;height:96px;} .land .acts2 button{width:50px;height:50px;font-size:16px;}
    .land .acts2.four{width:116px;height:116px;}
    .land .acts2.four button{width:44px;height:44px;font-size:15px;}
    .land .acts2.four button[data-b="a"]{left:36px;bottom:0;}
    .land .acts2.four button[data-b="b"]{right:0;top:36px;}
    .land .acts2.four button[data-b="x"]{left:0;top:36px;}
    .land .acts2.four button[data-b="y"]{left:36px;top:0;}
  }

  /* ---------- Tab 1 · Create (home) ---------- */
  .create{flex:1;display:flex;flex-direction:column;padding:6px 16px 10px;gap:12px;overflow-y:auto;}
  .create > *{flex:none;}
  .slogan h1{font-size:29px;line-height:1.04;}
  .slogan h1 i{font-style:normal;color:var(--solar);}
  .slogan p{font-family:var(--sans);margin-top:8px;font-size:14px;color:var(--dust);}
  /* The box is built like the pad's keys — a plate with a pixel bevel — and
     the field inside it is the only black rectangle on the screen, with a
     caret blinking in it until a thumb arrives. That is what says "type here";
     no glow, no second accent. */
  .say{border:2px solid var(--pad-edge);border-radius:8px;background:var(--pad-bg);padding:10px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35);}
  /* the microphone sits in the corner of the field, out of the caret's way */
  .say .field2:has(.mic) textarea{padding-bottom:34px;}
  .mic{position:absolute;right:9px;bottom:8px;z-index:2;width:38px;height:38px;border-radius:10px;
       border:2px solid var(--pad-edge);background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);
       font-size:17px;line-height:1;display:grid;place-items:center;}
  .mic:active{transform:translateY(2px);box-shadow:none;}
  .mic svg{width:19px;height:19px;fill:var(--dust);stroke:var(--dust);}
  .mic.on svg{fill:var(--rose);stroke:var(--rose);}
  .mic.on{border-color:var(--rose);background:rgba(255,107,138,.18);animation:miclive 1.1s ease-in-out infinite;}
  @keyframes miclive{0%,100%{box-shadow:0 0 0 0 rgba(255,107,138,.5);}50%{box-shadow:0 0 0 7px rgba(255,107,138,0);}}
  .say .field2{position:relative;background:var(--space);border:2px solid var(--rule-lit);border-radius:5px;padding:10px 12px;}
  .say .field2.focus{border-color:var(--star);}
  .say textarea{display:block;width:100%;min-height:66px;resize:none;background:transparent;border:0;color:var(--star);font-family:var(--mono);font-size:14px;line-height:1.55;outline:none;caret-color:var(--solar);}
  .say textarea::placeholder{color:var(--dim);}
  /* our caret stands in for the system one until the field is focused or filled; the placeholder steps aside for it */
  .say .caret{display:none;position:absolute;left:12px;top:12px;width:7px;height:17px;background:var(--solar);animation:caret 1s steps(1,end) infinite;pointer-events:none;}
  .say .field2.empty:not(.focus) .caret{display:block;}
  .say .field2.empty:not(.focus) textarea{text-indent:11px;}
  @keyframes caret{50%{opacity:0;}}
  .say .row{margin-top:8px;}
  .say .cta{margin-top:8px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.28);}
  .say .quota{margin-top:9px;text-align:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.55;color:var(--dust);}
  .say .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:10px;}
  .say .cnt{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);}
  /* the one thing this screen is for: a full-width key, not a chip in a row */
  .say .cta{width:100%;margin-top:10px;font-size:17px;padding:14px 0;}
  .say .cta[disabled]{opacity:.55;}
  /* section heads: a name on the left, a whisper on the right */
  .sh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .sh h3{font-size:16px;flex:1;}
  .sh span,.sh button{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
  .sh button{color:var(--solar);}
  /* the shelf: worlds side by side, scrolling sideways, bleeding to the edges */
  .shelf{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 6px;}
  .shelf::-webkit-scrollbar{display:none;}
  .tile{flex:none;width:152px;text-align:left;}
  .tile .thumb{width:152px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000;border:1px solid var(--rule-lit);pointer-events:none;}
  .tile b{display:block;font-family:var(--px);font-size:15px;color:var(--star);margin-top:6px;line-height:1.15;}
  .tile small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:2px;}
  .tile.sm{width:118px;} .tile.sm .thumb{width:118px;} .tile.sm b{font-size:13px;}
  /* The "go and play" panel — the same in the home screen and the ceremony.
     Cold light (plasma) on a lifted plate: it is a suggestion, not the task
     the screen is about, and it should read as one thing wherever it appears. */
  .playbox{border:1px solid rgba(107,227,255,.35);border-radius:14px;padding:12px 14px 10px;
    background:linear-gradient(180deg,rgba(23,30,68,.85),rgba(15,21,48,.7));box-shadow:inset 0 1px 0 rgba(107,227,255,.12);}
  .playbox .ph{margin-bottom:10px;}
  .playbox .tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--plasma);border:1px solid rgba(107,227,255,.45);border-radius:999px;padding:3px 8px;margin-bottom:8px;}
  .playbox h3{font-size:17px;}
  .playbox p{font-family:var(--sans);font-size:13px;color:var(--dust);margin-top:3px;}
  .playbox .shelf{margin:0 -14px;padding:2px 14px 4px;}
  /* On the common phone the home screen fits without a scroll; the taller ones
     keep the roomier spacing. What gives is air, not type. */
  @media (max-height:880px){
    .create{gap:9px;padding-top:2px;padding-bottom:8px;}
    .slogan h1{font-size:27px;} .slogan p{margin-top:5px;}
    .say textarea{min-height:52px;} .say .quota{margin-top:6px;}
    .playbox{padding:10px 14px 8px;} .playbox .ph{margin-bottom:7px;}
    .tile{width:136px;} .tile .thumb{width:136px;}
  }
  /* how it works: three numbered steps, the tour's words at reading size */
  .steps{display:flex;flex-direction:column;gap:12px;}
  .step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;}
  .step .n{width:30px;height:30px;border-radius:50%;border:1px solid var(--solar);color:var(--solar);font-family:var(--px);font-size:15px;display:grid;place-items:center;}
  .step b{display:block;font-family:var(--px);font-size:16px;color:var(--star);line-height:1.2;margin-top:4px;}
  .step p{font-family:var(--sans);font-size:13.5px;color:var(--dust);margin-top:3px;}
  /* a world in the air, shown on the home screen where the next one would start */
  .building{display:flex;align-items:center;gap:11px;border:1px solid var(--solar);border-radius:14px;padding:10px 12px;
            background:linear-gradient(180deg,rgba(40,28,10,.6),rgba(15,21,48,.6));}
  .building canvas{width:28px;height:28px;flex:none;}
  .building .t{flex:1;min-width:0;}
  .building .t b{display:block;font-family:var(--px);font-size:14px;color:var(--gold);}
  .building .t small{display:block;font-family:var(--mono);font-size:12px;color:var(--dust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
  .building .go{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--solar);border:1px solid var(--solar);border-radius:999px;padding:6px 10px;flex:none;}
  /* the tour: three slides on first launch, the sky on top, the words below */
  .tour{position:absolute;inset:0;z-index:35;background:var(--space);display:flex;flex-direction:column;}
  .tour .skip{position:absolute;right:16px;top:calc(env(safe-area-inset-top,0px) + 14px);z-index:2;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid var(--rule-lit);border-radius:999px;padding:6px 11px;background:rgba(7,11,26,.7);}
  @media (min-width:700px) and (min-height:760px){.tour .skip{top:52px;}}
  .tour canvas.sky{flex:1;width:100%;min-height:0;}
  .tour .words{flex:none;padding:12px 24px calc(env(safe-area-inset-bottom,0px) + 22px);}
  @media (min-width:700px) and (min-height:760px){.tour .words{padding-bottom:30px;}}
  .tour h2{font-size:26px;line-height:1.1;margin-top:6px;}
  .tour p{font-family:var(--sans);font-size:15px;color:var(--dust);margin-top:8px;min-height:66px;}
  .tour q{display:block;font-family:var(--mono);font-size:12.5px;color:var(--star);margin-top:6px;quotes:"“" "”";}
  .tour .acts{display:flex;gap:10px;margin-top:16px;align-items:center;}
  .tour .acts .dots{flex:1;justify-content:flex-start;padding:0;}
  .tour .acts .btn{flex:0 0 auto;min-width:130px;padding:12px 18px;}
  @media (max-height:700px){.tour h2{font-size:22px;} .tour p{font-size:14px;min-height:0;}}
  /* Examples: its own board, not a wall of text */
  .board{border:1px solid var(--rule);border-radius:14px;background:linear-gradient(180deg,rgba(23,30,68,.55),rgba(15,21,48,.35));padding:14px;}
  .board .bh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .board .bh h3{font-size:15px;}
  .board .bh span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
  .exlist{display:flex;flex-direction:column;gap:8px;}
  .ex{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:center;text-align:left;
      border:1px solid var(--rule);border-radius:10px;padding:10px 11px;background:rgba(7,11,26,.5);}
  .ex .dot{width:26px;height:26px;border-radius:50%;flex:none;}
  .ex .tx{font-family:var(--mono);font-size:12px;line-height:1.4;color:var(--star);}
  .ex .tx u{display:block;text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:3px;}
  /* The credits card. Everything else on Me is a neutral fold; this is the one
     number that decides whether Create works, so it gets the solar edge, a
     number big enough to read across the room, and no fold to hide behind. */
  .credits{position:relative;border:2px solid rgba(255,179,71,.5);border-radius:16px;padding:16px 16px 14px;
           background:linear-gradient(180deg,rgba(255,179,71,.13),rgba(255,179,71,0) 62%),rgba(12,17,42,.97);
           box-shadow:0 0 0 1px rgba(255,179,71,.12), 0 10px 28px -18px rgba(255,179,71,.6);}
  .credits .eyebrow{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--solar);}
  .credits .big{display:flex;align-items:baseline;gap:10px;margin-top:6px;}
  .credits .big b{font-family:var(--px);font-size:52px;line-height:.9;color:var(--star);}
  .credits .big i{font-style:normal;font-family:var(--px);font-size:17px;color:var(--dust);}
  .credits .say2{margin-top:8px;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--dim);}
  .credits .btn.pri{margin-top:13px;width:100%;min-height:46px;font-size:17px;}
  /* the three packs, read as a price list under the key rather than a menu */
  .credits .packs{display:flex;gap:8px;margin-top:9px;}
  .credits .packs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--mono);font-size:11px;color:var(--dim);
                         border:2px solid var(--pad-edge);border-radius:9px;padding:7px 2px 6px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .credits .packs button b{font-family:var(--px);font-size:18px;color:var(--star);line-height:1;}
  .credits .packs button:active{transform:translateY(2px);box-shadow:none;}
  .credits .textlink{display:block;width:100%;text-align:center;margin-top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}
  /* out of credits: the number goes quiet and the key carries the urgency */
  .credits.empty{border-color:rgba(255,107,138,.5);background:linear-gradient(180deg,rgba(255,107,138,.13),rgba(255,107,138,0) 62%),rgba(12,17,42,.97);box-shadow:0 0 0 1px rgba(255,107,138,.12), 0 10px 28px -18px rgba(255,107,138,.55);}
  .credits.empty .eyebrow{color:var(--rose);} .credits.empty .big b{color:var(--rose);}
  /* an old subscription: the same card, saying a different true thing */
  .credits.legacy{border-color:rgba(107,227,255,.45);background:linear-gradient(180deg,rgba(107,227,255,.12),rgba(107,227,255,0) 62%),rgba(12,17,42,.97);box-shadow:0 0 0 1px rgba(107,227,255,.12), 0 10px 28px -18px rgba(107,227,255,.5);}
  .credits.legacy .eyebrow{color:var(--plasma);} .credits.legacy .big b{color:var(--plasma);font-size:44px;}
  /* the fold-away sections on the Create page: the head is the frame, the body hangs from it */
  .fsect{display:flex;flex-direction:column;}
  .fsect .fold[aria-expanded="true"]{border-radius:12px 12px 0 0;}
  .fbody{border:1px solid var(--rule-lit);border-top:0;border-radius:0 0 12px 12px;padding:14px 14px 12px;background:rgba(15,21,48,.6);}
  .tourlink{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--solar);text-align:left;}
  /* a button that looks like one: a lit frame and a big refresh glyph, without a solid fill */
  .shuffle{margin-top:12px;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--star);padding:10px 0;border:2px solid var(--pad-edge);border-radius:10px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .shuffle i{font-style:normal;font-size:22px;line-height:1;color:var(--solar);}
  .shuffle:active{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);}
  .how{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;border-top:1px solid var(--rule);padding-top:14px;}
  .how canvas{width:44px;height:62px;}
  .how p{font-family:var(--sans);font-size:13.5px;color:var(--dust);} .how b{color:var(--star);font-weight:600;}

  /* creation ceremony */
  .ceremony{position:absolute;inset:0;z-index:30;background:var(--space);display:flex;flex-direction:column;}
  .ceremony canvas.sky{flex:1;width:100%;min-height:0;}
  .ceremony .words{flex:none;padding:14px 22px calc(env(safe-area-inset-bottom,0px) + 20px);text-align:center;}
  .ceremony .stage{font-family:var(--px);font-size:23px;color:var(--star);min-height:29px;}
  .ceremony .sub{font-family:var(--sans);font-size:13.5px;color:var(--dust);margin-top:6px;min-height:38px;}
  .ceremony .sentence{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:10px;quotes:"“" "”";}
  .ceremony .acts{display:flex;gap:8px;margin-top:14px;}
  .ceremony .playbox{margin-top:16px;text-align:left;}
  @media (max-height:700px){.ceremony .sub{min-height:0;} .ceremony .playbox{margin-top:10px;}}
  /* the way out is a button, not a whisper */
  .ceremony .leave{display:block;width:100%;margin-top:12px;padding:12px 0;border:1px solid var(--rule-lit);border-radius:10px;background:rgba(15,21,48,.9);
    font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--star);}
  .ceremony .born{font-family:var(--px);font-size:28px;color:var(--solar);}
  /* The badge that rides along while a world builds somewhere else. It docks in
     a corner you choose by dragging it, and folds down to a puck so it never
     stands between you and a button. --dx/--dy carry the drag. */
  .brewing{position:absolute;z-index:22;display:flex;align-items:center;gap:10px;
           border:1px solid var(--rule-lit);border-radius:14px;background:rgba(15,21,48,.96);padding:7px 10px;
           width:min(340px, calc(100% - 24px));touch-action:none;
           transform:translate(var(--dx,0px), var(--dy,0px));
           transition:width .22s ease, padding .22s ease, border-radius .22s ease;}
  .brewing.dragging{transition:none;opacity:.92;}
  .brewing.tl{top:calc(env(safe-area-inset-top,0px) + 3px);left:12px;}
  .brewing.tr{top:calc(env(safe-area-inset-top,0px) + 3px);right:12px;}
  /* Unfolded in a top corner it takes the strip for the few seconds it is
     there, and the chrome underneath — all of it inert — stands down. */
  .device:has(.brewing.tl:not(.min)) .top>*,
  .device:has(.brewing.tr:not(.min)) .top>*{opacity:0;transition:opacity .2s;}
  .device:has(.brewing.min.tr) .top .right{display:none;}
  .device:has(.brewing.min.tl) .top .wordmark span{display:none;}
  .brewing.bl{bottom:calc(env(safe-area-inset-bottom,0px) + 74px);left:12px;}
  .brewing.br{bottom:calc(env(safe-area-inset-bottom,0px) + 74px);right:12px;}
  /* A top corner means riding in the wordmark strip, which holds no buttons —
     the one place on every tab where nothing is waiting to be tapped. */
  .brewing canvas{width:24px;height:24px;flex:none;position:relative;z-index:1;pointer-events:none;}
  .brewing .t{flex:1;min-width:0;position:relative;z-index:1;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
  .brewing .t b{font-family:var(--px);font-size:13px;color:var(--star);white-space:nowrap;flex:none;}
  .brewing .t small{max-width:100%;font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .brewing .go,.brewing .tuck{position:relative;z-index:1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--solar);border:1px solid var(--solar);border-radius:999px;padding:5px 9px;flex:none;}
  .brewing .tuck{color:var(--dim);border-color:var(--rule-lit);padding:5px 8px;letter-spacing:0;font-family:var(--mono);font-size:13px;line-height:1;}
  /* folded: a puck with a ring that fills as the world takes shape */
  .brewing.min{width:auto;padding:6px;border-radius:999px;gap:0;}
  .brewing.min .t,.brewing.min .go,.brewing.min .tuck{display:none;}
  .brewing.min canvas{width:32px;height:32px;}
  .brewing .ring{position:absolute;inset:-3px;border-radius:999px;display:none;}
  .brewing.min .ring{display:block;}
  .brewing .ring circle{fill:none;stroke-width:2.5;transform:rotate(-90deg);transform-origin:50% 50%;}
  .brewing .ring .bg{stroke:var(--rule-lit);}
  .brewing .ring .fg{stroke:var(--solar);transition:stroke-dashoffset .5s linear;}
  /* the top banner when a world lands */
  .landed{position:absolute;left:10px;right:10px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:60;
          display:flex;align-items:center;gap:11px;border:1px solid var(--solar);border-radius:14px;
          background:linear-gradient(180deg,rgba(40,28,10,.97),rgba(15,21,48,.97));padding:11px 13px;
          transform:translateY(-140%);transition:transform .45s cubic-bezier(.2,1.1,.3,1);}
  .landed.in{transform:translateY(0);}
  .landed canvas{width:34px;height:34px;flex:none;}
  .landed .t{flex:1;min-width:0;}
  .landed .t b{display:block;font-family:var(--px);font-size:15px;color:var(--gold);}
  .landed .t small{display:block;font-family:var(--mono);font-size:12px;color:var(--dust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .landed .go{font-family:var(--px);font-size:13px;color:#2a1604;background:var(--solar);border-radius:999px;padding:6px 12px;flex:none;}
  .landed .x{color:var(--dim);font-size:16px;padding:0 2px;flex:none;}

  /* ---------- Tab 3 · Me ---------- */
  .me{padding:4px 14px 18px;display:flex;flex-direction:column;gap:16px;}
  /* a flex column inside a scrolling parent squashes its children unless they refuse */
  .me > *, .sect > *{flex:none;}
  .idcard{position:relative;border:1px solid var(--rule-lit);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,rgba(35,28,72,.9),rgba(15,21,48,.9));}
  .idcard .strip{height:3px;background:linear-gradient(90deg,var(--solar),var(--plasma),var(--mint));}
  .idcard .in{display:flex;gap:14px;align-items:center;padding:14px;}
  .idcard canvas{width:56px;height:78px;flex:none;}
  .idcard .who2{flex:1;min-width:0;}
  .idcard .who2 b{display:block;font-family:var(--px);font-size:21px;color:var(--star);word-break:break-word;}
  .idcard .who2 .mail{font-family:var(--mono);font-size:12px;color:var(--dust);margin-top:2px;overflow-wrap:anywhere;}
  .badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
  .badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--rule-lit);color:var(--dust);}
  .badge.mem{border-color:var(--solar);color:var(--solar);}
  .badge.ok{border-color:var(--mint);color:var(--mint);}
  .badge.warn{border-color:var(--rose);color:var(--rose);}
  .stat{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
  .stat button{background:var(--panel);padding:12px;text-align:left;width:100%;}
  .stat button[aria-pressed="true"]{background:var(--panel-2);}
  .stat button[aria-pressed="true"] small{color:var(--solar);}
  .stat b{display:block;font-family:var(--mono);font-weight:700;font-size:24px;color:var(--star);line-height:1.1;}
  .stat small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sect{display:flex;flex-direction:column;gap:9px;}
  /* a section that folds: the rarely used rows live behind one line */
  .fold{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:8px 8px 8px 12px;border:1px solid var(--rule-lit);border-radius:12px;background:rgba(15,21,48,.92);}
  .fold .eyebrow{font-family:var(--px);font-size:17px;letter-spacing:.02em;text-transform:none;color:var(--star);}
  .fold .who3{flex:1;min-width:0;font-family:var(--mono);font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right;}
  .fold i{font-style:normal;font-family:var(--px);font-size:22px;line-height:1;color:var(--star);width:38px;height:38px;border:2px solid var(--pad-edge);border-radius:10px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);display:grid;place-items:center;flex:none;}
  .fold[aria-expanded="true"] i{background:var(--rule-lit);box-shadow:none;}
  .sect > .eyebrow{margin-bottom:1px;}
  .plate{border:1px solid var(--rule);border-radius:12px;background:rgba(15,21,48,.94);overflow:hidden;}
  .line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--rule);width:100%;text-align:left;}
  .line:last-child{border-bottom:0;}
  .line .k{font-family:var(--mono);font-size:13.5px;letter-spacing:.01em;color:var(--star);}
  .line .k small{display:block;font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:2px;}
  .line .v{font-family:var(--mono);font-size:12px;color:var(--dust);text-align:right;white-space:nowrap;}
  .line .v.act{color:var(--solar);}
  .line.danger .k{color:var(--rose);}
  /* a world on the shelf: the row is one door (Manage), the key on the right is the other (Play) */
  .wrow{display:grid;grid-template-columns:1fr 64px;gap:8px;align-items:stretch;}
  .wrow .wopen{display:grid;grid-template-columns:76px 1fr;gap:10px;align-items:center;text-align:left;min-height:64px;
    border:1px solid var(--rule-lit);border-radius:12px;padding:8px 10px;background:rgba(15,21,48,.94);}
  .wrow .thumb{width:76px;aspect-ratio:16/9;border-radius:5px;overflow:hidden;background:#000;border:1px solid var(--rule);pointer-events:none;}
  .wrow .wt{min-width:0;}
  .wrow b{display:block;font-family:var(--px);font-size:16px;color:var(--star);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wrow q{display:block;font-family:var(--mono);font-size:11.5px;color:var(--dim);quotes:"“" "”";margin-top:1px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wrow .wb{display:flex;align-items:center;gap:8px;margin-top:5px;} .wrow .wb .badge{font-size:10px;padding:2px 6px;}
  .wrow .more{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--solar);}
  .wrow .wplay{display:grid;place-items:center;align-content:center;gap:1px;border:2px solid var(--solar);border-radius:12px;background:var(--solar);color:#2a1604;
    font-family:var(--px);font-size:20px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);}
  .wrow .wplay small{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;}
  .showall{width:100%;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--solar);padding:10px 0;border:1px dashed var(--rule-lit);border-radius:8px;margin-top:4px;}
  /* the card's own name and badges are doors to the rows they describe */
  .who-btn{font-family:var(--px);font-weight:700;font-size:21px;color:var(--star);text-align:left;word-break:break-word;}
  .who-btn i{font-style:normal;font-family:var(--mono);font-size:14px;color:var(--dim);}
  button.badge{cursor:pointer;}
  /* ---- the world sheet: a name, a state, a sentence, four keys, one text link ---- */
  .sheet .wh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  .sheet .wh h2{font-size:24px;}
  .sheet .wq{display:block;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--dust);quotes:"“" "”";margin-top:8px;}
  .sheet .wnote{font-family:var(--sans);font-size:13px;color:var(--rose);margin-top:6px;}
  .verdict{margin-top:14px;border:1px solid var(--rule-lit);border-radius:12px;padding:10px 12px;background:rgba(7,11,26,.6);}
  .verdict.rough{border-color:rgba(255,107,138,.45);}
  .verdict .vh{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;}
  .verdict .vh b{font-family:var(--px);font-size:15px;color:var(--star);white-space:nowrap;} .verdict.rough .vh b{color:var(--rose);}
  .verdict .vh small{font-family:var(--mono);font-size:11px;color:var(--dim);}
  .verdict .sc{display:grid;grid-template-columns:64px 1fr 22px;gap:10px;align-items:center;margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dust);}
  .verdict .sc i{display:block;height:8px;border-radius:4px;background:var(--rule);overflow:hidden;}
  .verdict .sc i b{display:block;height:100%;background:var(--mint);border-radius:4px;} .verdict .sc i b.low{background:var(--rose);}
  .verdict .sc em{font-style:normal;text-align:right;color:var(--star);font-weight:700;}
  .keys{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
  .key{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;text-align:left;min-height:58px;padding:10px 12px;
    border:2px solid var(--pad-edge);border-radius:12px;background:var(--pad-bg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.4);}
  .key i{grid-row:1/3;font-style:normal;font-family:var(--px);font-size:18px;color:var(--dust);width:22px;text-align:center;}
  .key b{font-family:var(--px);font-size:15px;color:var(--star);line-height:1.1;}
  .key small{font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.3;}
  .key.pri{background:var(--solar);border-color:var(--solar);box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);} .key.pri b,.key.pri i{color:#2a1604;} .key.pri small{color:#5a3810;}
  .key.on{border-color:var(--plasma);} .key.on b{color:var(--plasma);}
  .key[disabled]{opacity:.45;}
  .revise{margin-top:12px;border:1px solid var(--plasma);border-radius:12px;padding:12px;background:rgba(107,227,255,.05);}
  .revise label{display:block;font-family:var(--px);font-size:15px;color:var(--star);margin-bottom:8px;}
  .revise textarea{width:100%;resize:none;background:var(--space);border:2px solid var(--rule-lit);border-radius:8px;padding:10px 12px;color:var(--star);font-family:var(--mono);font-size:14px;line-height:1.5;outline:none;caret-color:var(--solar);}
  .revise textarea:focus{border-color:var(--star);}
  .revise .hint{font-family:var(--sans);font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.45;}
  .revise .acts{margin-top:10px;}
  .textlink{display:block;width:100%;text-align:center;margin-top:16px;padding:10px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
  .textlink.danger{color:var(--rose);}

  /* ---------- sheets ---------- */
  .sheetwrap{position:absolute;inset:0;z-index:50;background:rgba(3,5,18,.65);display:flex;flex-direction:column;justify-content:flex-end;}
  .sheet{background:var(--panel);border-top:1px solid var(--rule-lit);border-radius:22px 22px 0 0;padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 22px);max-height:92%;overflow-y:auto;}
  @media (min-width:700px) and (min-height:760px){.sheet{padding-bottom:30px;border-radius:22px 22px 44px 44px;}}
  .sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--rule-lit);margin:0 auto 14px;}
  .sheet h2{font-size:22px;}
  .sheet p{font-family:var(--sans);font-size:13.5px;color:var(--dust);margin-top:6px;}
  .field{margin-top:14px;}
  .field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;}
  .field input{width:100%;background:var(--space);border:1px solid var(--rule-lit);border-radius:10px;padding:12px;color:var(--star);font-family:var(--mono);font-size:16px;}
  .field input.code{letter-spacing:.4em;text-align:center;font-size:24px;}
  .captcha{display:flex;gap:10px;align-items:center;margin-top:8px;}
  .captcha .img{flex:none;width:150px;height:40px;border-radius:8px;overflow:hidden;border:1px solid var(--rule-lit);background:#14122a;padding:0;display:block;}
  .field label small{text-transform:none;letter-spacing:0;font-size:11px;color:var(--dim);}
  .captcha .img svg{width:100%;height:100%;display:block;}
  .captcha input{flex:1;}
  .captcha button:not(.img){font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--solar);white-space:nowrap;}
  .sheet .acts{display:flex;gap:8px;margin-top:16px;}
  .sheet .err{font-family:var(--mono);color:var(--rose);font-size:13px;margin-top:10px;min-height:18px;}
  .sheet .ok{color:var(--mint);}
  .applebtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--star);color:#000;border-radius:10px;padding:13px 0;font-weight:600;font-size:16px;margin-top:14px;}
  .applebtn svg{width:17px;height:17px;}
  .orline{display:flex;align-items:center;gap:10px;margin:16px 0 2px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
  .orline::before,.orline::after{content:"";flex:1;height:1px;background:var(--rule);}
  .plate a.line,.plate a.line:visited{color:inherit;text-decoration:none;}
  .btn.danger{background:var(--rose);color:#2a0a14;border-color:var(--rose);}
  .plans{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
  .plan{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;border:1px solid var(--rule);border-radius:10px;padding:12px 14px;text-align:left;}
  .plan.best{border-color:var(--solar);}
  .plan b{font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--star);}
  .plan small{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim);grid-column:1;}
  /* A price is a number a person has to read exactly, and the pixel face
     turns 5 into S and 0 into O. Money is always set in the mono face. */
  .plan .pr{font-family:var(--mono);font-weight:700;font-size:21px;letter-spacing:.01em;color:var(--star);grid-row:1/3;white-space:nowrap;}
  .btn.money{font-family:var(--mono);font-weight:700;font-size:13.5px;letter-spacing:.06em;}
  .plan.best .pr{color:var(--solar);}
  .plan.best:not(.on){border-color:rgba(255,179,71,.42);}
  .plan.on{border-color:var(--plasma);background:rgba(107,227,255,.07);}
  .plan.on b{color:var(--plasma);}
  /* A credit pack sells a number of worlds; the price is the smaller half of
     that sentence. The subscription rows put the price first, which read as
     though the money were the product. */
  .pack{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;border:2px solid var(--rule-lit);border-radius:12px;padding:12px 14px;text-align:left;background:rgba(15,21,48,.5);}
  .pack .n{grid-column:1;font-family:var(--px);font-size:26px;line-height:1;color:var(--star);}
  .pack .n i{font-style:normal;font-size:15px;color:var(--dust);margin-left:6px;}
  .pack .why{grid-column:1;font-family:var(--sans);font-size:12.5px;color:var(--dim);line-height:1.35;}
  .pack .pr{grid-column:2;grid-row:1/3;font-family:var(--mono);font-weight:700;font-size:19px;color:var(--dust);white-space:nowrap;}
  .pack.best{border-color:rgba(255,179,71,.45);}
  .pack.best .pr{color:var(--solar);}
  .pack.on{border-color:var(--plasma);background:rgba(107,227,255,.09);}
  .pack.on .n{color:var(--plasma);} .pack.on .pr{color:var(--plasma);}
  .pack:active{transform:translateY(1px);}
  .plans + .err:not(:empty){margin-top:8px;}
  .plans ~ .acts{margin-top:12px;}
  .fine{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);line-height:1.6;}
  .fine a{color:var(--dust);}

  /* the document reader: a bar with BACK, the page below it */
  .docview{position:absolute;inset:0;z-index:80;background:var(--space);display:flex;flex-direction:column;}
  .docview .dbar{flex:none;display:flex;align-items:center;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 8px;border-bottom:1px solid var(--rule);background:rgba(7,11,26,.96);}
  @media (min-width:700px) and (min-height:760px){.docview .dbar{padding-top:50px;}}
  .docview .dbar button{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--star);padding:8px 14px;border:1px solid var(--rule-lit);border-radius:999px;background:rgba(15,21,48,.9);}
  .docview .dbar b{font-family:var(--px);font-size:16px;color:var(--star);}
  .docview iframe{flex:1;width:100%;border:0;background:var(--space);}
  .toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);transform:translateX(-50%);z-index:70;background:var(--star);color:var(--space);font-family:var(--px);font-size:14px;padding:9px 15px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;}
  .toast.on{opacity:1;}
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
  /* the report sheet: a reason is picked, then sent — nothing fires on the first tap */
  .reasons{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
  .reason{text-align:left;border:2px solid var(--rule-lit);border-radius:12px;background:rgba(15,21,48,.6);padding:11px 14px;}
  .reason b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--star);}
  .reason small{display:block;margin-top:3px;font-family:var(--sans);font-size:13px;color:var(--dim);}
  .reason[aria-pressed="true"]{border-color:var(--solar);background:rgba(255,179,71,.1);}
  .reason[aria-pressed="true"] b{color:var(--solar);}
  /* blocking is a key of its own, above the send button, where it cannot be missed */
  .blockrow{display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;margin-top:14px;border:2px solid var(--rule-lit);border-radius:12px;background:rgba(15,21,48,.6);padding:12px 14px;}
  .blockrow i{flex:none;width:26px;height:26px;border:2px solid var(--pad-edge);border-radius:7px;background:var(--pad-bg);display:grid;place-items:center;font-style:normal;font-family:var(--px);font-size:17px;color:var(--space);}
  .blockrow b{display:block;font-family:var(--px);font-size:16px;color:var(--star);}
  .blockrow small{display:block;margin-top:2px;font-family:var(--sans);font-size:12.5px;color:var(--dim);line-height:1.4;}
  .blockrow[aria-pressed="true"]{border-color:var(--rose);}
  .blockrow[aria-pressed="true"] i{background:var(--rose);border-color:var(--rose);color:var(--space);}
  .blockrow[aria-pressed="true"] b{color:var(--rose);}
  .btn.pri[disabled]{opacity:.4;}
/* The native app hosts one world in a web view of its own. Everything the app
   already draws — its own chrome, its own name, its own way back — stays out of
   the way, and the page is only the world and the pad. */
body.bare .tabs,body.bare #banner,body.bare .top{display:none!important}
body.bare #view{padding-bottom:0;padding-top:max(14px,env(safe-area-inset-top))}
body.bare .device{padding-top:0}