@font-face{font-family:"IT";src:url(fonts/inter-tight-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:block}
@font-face{font-family:"IT";src:url(fonts/inter-tight-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:block}
@font-face{font-family:"GM";src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:block}
@font-face{font-family:"GM";src:url(fonts/geist-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:block}
:root{--or:#EE4104;--ink:#0A0A0A;--paper:#F7F7F6;--line:#E3E1DE;--mute:#8E8C89}
html,body{margin:0;height:100%;background:#fff;overflow:hidden}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:#fff;
  font-family:"IT",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;font-kerning:normal}
#plate{position:absolute;left:0;top:0;width:1920px;height:1080px;display:block}
.noplate #plate{display:none}
#gfx{position:absolute;left:0;top:0;width:1110px;height:1080px}
#gfx *{box-sizing:border-box}
#gfx > *,.scene > *{position:absolute;left:0;top:0}

/* the card: mirrors her frame (y 45-1035), ends 45 px before her border at x 1143 */
#panel{left:45px!important;top:45px!important;width:1053px;height:990px;background:#000;overflow:hidden}
#panel canvas{position:absolute;left:0;top:0}
.bclip{width:1053px;height:990px;overflow:hidden;pointer-events:none}
.band{position:absolute;left:0;top:0;width:1053px;height:990px;visibility:hidden}
.lcard{background:#fff;border:1.5px solid var(--line);border-radius:18px;visibility:hidden}
.lslot{border:2px dashed #D6D3CF;border-radius:999px;visibility:hidden}
.grid{color:rgba(255,255,255,.14)}
.grid svg{display:block;overflow:visible}
.grid line{stroke:currentColor;stroke-width:1.5}
.grid .sp{fill:currentColor}
.scene{position:absolute;left:0;top:0;width:1110px;height:1080px;opacity:0}

/* type primitives */
.disp{font-weight:500;letter-spacing:-.045em;line-height:.95;white-space:nowrap}
.mono{font-family:"GM";font-weight:400;text-transform:uppercase;letter-spacing:.12em;white-space:pre;line-height:1}
.c{display:inline-block;white-space:pre}
.w{display:inline-block}
.hid{visibility:hidden}

/* intro (black) */
.intro-l{font-size:168px;color:#fff}
.intro-l .q{color:var(--or)}
.cap{font-size:22px;color:rgba(255,255,255,.62)}
.cap.dk{color:#5b5956}
.cap.or{color:var(--or)}

/* paper header */
.hdr{font-size:20px;color:var(--ink)}
.hdr i{display:inline-block;width:12px;height:12px;background:var(--or);margin-right:14px;vertical-align:1px}
.cnt{font-size:20px;color:var(--mute)}

/* role label */
.role{display:flex;align-items:center;gap:22px;transform:translateY(-50%);visibility:hidden}
.badge{width:78px;height:78px;border-radius:50%;background:var(--or);flex:none;display:flex;align-items:center;justify-content:center}
.badge svg{width:46px;height:46px;overflow:visible}
.badge svg *{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.role .rw{font-size:84px}
.role .rc{font-size:22px;color:var(--mute);margin-left:6px;align-self:center;padding-top:10px}
.role .also{font-family:"GM";font-size:24px;font-weight:500;letter-spacing:.12em;color:#fff;background:var(--or);padding:10px 14px 9px;margin-left:4px;visibility:hidden}

/* the word group (a search pill with the word typed inside) */
.grp{transform-origin:0 0}
.grp > *{position:absolute;left:0;top:0}
.pill{background:#fff;border:2px solid var(--line);border-radius:999px}
.seg{font-weight:500;letter-spacing:-.045em;line-height:1;white-space:pre;color:var(--ink)}
.seg.suf{color:var(--or)}
.sblk{background:var(--or);visibility:hidden}
.caret{width:6px;background:var(--or);visibility:hidden}
.sdiv{width:2px;background:var(--line);visibility:hidden}
.syl{font-family:"GM";font-size:30px;color:var(--mute);letter-spacing:.04em;white-space:nowrap;transform:translateX(-50%);visibility:hidden}
.syl.st{color:var(--or);font-weight:500}
.note{font-size:28px;color:var(--ink);letter-spacing:.06em}
.note .o{color:var(--or)}
.slot{border:3px dashed var(--or);border-radius:14px;visibility:hidden}
.ulin{height:8px;background:var(--or);transform-origin:0 50%;visibility:hidden}

/* ledger + summary labels */
.llab{font-size:16px;color:var(--mute);letter-spacing:.1em}
.llab b{color:var(--or);font-weight:500}
.rlab{visibility:hidden}
.rlab .n{font-family:"GM";font-size:18px;color:var(--or);letter-spacing:.1em}
.rlab .t{font-size:40px;font-weight:500;letter-spacing:-.03em;margin-top:6px}
.rlab .k{font-family:"GM";font-size:16px;color:var(--mute);letter-spacing:.12em;margin-top:6px;text-transform:uppercase}
.stag{font-size:20px;color:var(--or);font-weight:500}
.fnote{font-size:22px;color:var(--or);font-weight:500}
.fnote.m{color:var(--mute);font-weight:400}
.msg{font-size:66px;color:var(--ink)}
.msg .stamp{display:inline-block;background:var(--or);color:#fff;padding:0 .14em .06em;margin:0 .02em}
.mblk{background:var(--or)}

/* orange card */
.big{font-size:168px;color:#fff}
.frm{font-size:26px;color:#fff}
.frm .d{opacity:.6}

/* classes (black) */
.dpill{background:#161616;border:2px solid #262626;border-radius:999px}
.dword{font-size:118px;color:#fff}
.dword .o{color:var(--or)}
.cls{display:flex;align-items:center;gap:26px;transform:translateY(-50%)}
.cls .badge{width:96px;height:96px}
.cls .badge b{font-family:"GM";font-weight:500;font-size:30px;color:#fff;letter-spacing:.02em}
.cls .cw{font-size:132px;color:#fff}
.cell{width:222px;height:84px;border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;
  font-family:"GM";font-size:21px;letter-spacing:.12em;color:rgba(255,255,255,.5);text-transform:uppercase}
.cell.on{background:var(--or);border-color:var(--or);color:#fff}

/* HUD */
#hud{position:fixed;z-index:10;left:12px;top:10px;display:flex;gap:14px;align-items:center;font:500 13px/1 "GM",monospace;
  background:rgba(10,10,10,.86);color:#fff;padding:8px 12px;border-radius:8px;opacity:0;transition:opacity .3s}
#hud.on{opacity:1}
#hud a{color:#fff}
#hud .hint{opacity:.75}
.trv{border:5px solid var(--or)}