/* web-kit fw.css: the one stylesheet every fakewaffle site links. Do not edit a vendored copy; change web-kit and re-sync. */

@font-face{font-family:"Bebas Neue";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/BebasNeue-Regular.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/LibreFranklin.woff2) format("woff2")}
@font-face{font-family:"Libre Franklin";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/LibreFranklin-Italic.woff2) format("woff2")}

/* Tokens: light is the default, dark follows the OS. data-scheme on <html> forces one (the style guide's switch). */
:root{
  --i-cream:#f1e6cc;--i-navy:#1d2a36;--i-teal:#2f6b6a;--i-rust:#c2512b;--i-mustard:#e2a73c;--i-sky:#a9ccd0;
  --i-plum:#3a2640;--i-pine:#1f3b33;--i-slate:#2b4a6f;--i-void:#0e1430;--i-neon:#6fe3ff;
  --f-display:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif;
  --f-body:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --bg:var(--i-cream);--ink:var(--i-navy);--ink-soft:#44505a;--accent:#a3401c;--rule:#cdbf9c;--panel:#e8dbbb;
  --sky-1:#f1e6cc;--sky-2:#e9d9b2;--sky-3:#dcc79a;--sun:var(--i-mustard);--star:transparent;
  --far:var(--i-sky);--mid:var(--i-teal);--near:var(--i-navy);--fore:var(--i-rust);--trail:var(--i-cream);
  --btn-bg:var(--i-navy);--btn-ink:var(--i-cream);
  --ok:#2e6a1c;--bad:#9b2a1a;--stg-bg:#8a2f12;--stg-ink:#fff7e6;--you:#f6dfa6;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-scheme="light"]){
    --bg:#162029;--ink:#f1e6cc;--ink-soft:#cbc0a5;--accent:#f0b35a;--rule:#33434f;--panel:#1d2a35;
    --sky-1:#162029;--sky-2:#1c2a35;--sky-3:#233543;--sun:#f1e6cc;--star:#f1e6cc;
    --far:#3d5c68;--mid:#2a4a50;--near:#0d141a;--fore:#6e2f1d;--trail:#e2a73c;
    --btn-bg:var(--i-mustard);--btn-ink:var(--i-navy);
    --ok:#6fd36a;--bad:#ff9b82;--stg-bg:#f0b35a;--stg-ink:#1d2a36;--you:#3a3a2a;
    color-scheme:dark;
  }
}
:root[data-scheme="dark"]{
  --bg:#162029;--ink:#f1e6cc;--ink-soft:#cbc0a5;--accent:#f0b35a;--rule:#33434f;--panel:#1d2a35;
  --sky-1:#162029;--sky-2:#1c2a35;--sky-3:#233543;--sun:#f1e6cc;--star:#f1e6cc;
  --far:#3d5c68;--mid:#2a4a50;--near:#0d141a;--fore:#6e2f1d;--trail:#e2a73c;
  --btn-bg:var(--i-mustard);--btn-ink:var(--i-navy);
  --ok:#6fd36a;--bad:#ff9b82;--stg-bg:#f0b35a;--stg-ink:#1d2a36;--you:#3a3a2a;
  color-scheme:dark;
}
.g-otter{--c-bg:var(--i-teal);--c-ink:var(--i-cream)}
.g-bullet{--c-bg:var(--i-plum);--c-ink:var(--i-mustard)}
.g-ward{--c-bg:var(--i-pine);--c-ink:var(--i-cream)}
.g-held{--c-bg:var(--i-mustard);--c-ink:var(--i-navy)}
.g-pocket{--c-bg:var(--i-slate);--c-ink:var(--i-cream)}
.g-keystar{--c-bg:var(--i-void);--c-ink:var(--i-neon)}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap{font:800 .74rem/1.2 var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.nm{text-transform:none}
.kicker{color:var(--accent)}
.fw-sprite{position:absolute;width:0;height:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Lockup */
.studio{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);text-decoration:none;font:800 1.55rem/1 var(--f-body);letter-spacing:-.05em;text-transform:none}
.studio .mark{width:40px;height:40px;flex:none;display:block}
.tagline{font:800 .66rem/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.brandline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}

/* Top bar */
.topbar{position:relative;z-index:3;padding:12px 0}
.topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;min-height:48px}
.topnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 2px}
.topnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--ink);text-decoration:none}
.topnav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.topnav a[aria-current="page"]{box-shadow:inset 0 -4px 0 var(--accent)}
.topend{display:flex;align-items:center;gap:12px;color:var(--ink-soft)}
.topbar.admin .wrap{min-height:44px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:0;font:800 .8rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{box-shadow:4px 4px 0 var(--i-rust)}
.btn.primary{font-size:.78rem;background:var(--btn-bg);color:var(--btn-ink);box-shadow:4px 4px 0 var(--i-rust)}
.btn.primary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--i-rust)}
.btn.wide{display:flex;width:100%;min-height:56px;margin-top:18px}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.danger.primary{background:var(--bad);color:var(--bg);border-color:var(--bad);box-shadow:4px 4px 0 var(--ink)}
.btn.small{min-height:44px;padding:0 14px;font-size:.7rem}
.btn:disabled{background:transparent;color:var(--ink-soft);border-color:var(--ink-soft);box-shadow:none;cursor:not-allowed;transform:none}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin:0;background:var(--bg);color:var(--ink);border:2px solid var(--ink);border-radius:0;font:800 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.chip:hover{box-shadow:3px 3px 0 var(--i-rust)}
.chip[aria-pressed="true"]{background:var(--c-bg,var(--ink));color:var(--c-ink,var(--bg));box-shadow:3px 3px 0 var(--ink)}

/* Fields */
.field{display:block;margin-bottom:6px;font:800 .7rem/1.2 var(--f-body);letter-spacing:.16em;text-transform:uppercase}
.input{width:100%;min-height:48px;padding:0 12px;background:var(--bg);color:var(--ink);border:2px solid var(--ink);border-radius:0;font:400 1rem/1 var(--f-body)}
.input::placeholder{color:var(--ink-soft);opacity:1}
.input[aria-invalid="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.input.code{min-height:56px;font:700 1.3rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.row{display:flex;flex-wrap:wrap;gap:10px}
.row .input{flex:1 1 12em;min-width:0;width:auto}
.check{display:flex;gap:12px;align-items:center;min-height:44px;margin-top:12px;cursor:pointer}
.check input{width:24px;height:24px;flex:none;accent-color:var(--accent);margin:0}

/* Doc layout */
.doc{width:min(720px,100% - 32px);margin-inline:auto;padding:clamp(28px,5vw,64px) 0 clamp(56px,8vw,100px)}
.doc-head{border-bottom:3px solid var(--ink);padding-bottom:16px;margin-bottom:clamp(22px,3vw,34px)}
.doc-head p{margin:12px 0 0;color:var(--ink-soft)}
.doc h1,.display{font:400 clamp(3rem,9vw,5.6rem)/.86 var(--f-display);margin:8px 0 0}
.doc h3{font:800 1.25rem/1.25 var(--f-body);letter-spacing:-.01em;margin:clamp(24px,3.5vw,34px) 0 8px}
.doc p{margin:0 0 12px}
.jump{margin:0 0 clamp(8px,2vw,16px)}
.tabs{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 12px}
.tabs a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ink);color:var(--ink);text-decoration:none}
.tabs a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.tabs a:hover{background:var(--panel)}
.tabs a[aria-current="page"]:hover{background:var(--ink)}

/* Card and status card */
.card{margin-top:24px;padding:22px;background:var(--panel);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.card[data-state="ok"]{border-color:var(--ok)}
.card[data-state="error"]{border-color:var(--accent)}
.result{font-size:1.15rem;font-weight:700;line-height:1.45;margin:0}

/* Banner */
.staging{position:sticky;top:0;z-index:10;padding:10px 16px;text-align:center;background:var(--stg-bg);color:var(--stg-ink)}

/* Poster */
.poster{display:flex;flex-direction:column;margin:0;background:var(--c-bg);color:var(--c-ink);border:clamp(10px,1.4vw,16px) solid var(--i-cream);outline:2px solid var(--ink);box-shadow:10px 12px 0 var(--ink);padding:clamp(14px,2vw,24px)}
.p-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;font:800 .7rem/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;padding-bottom:12px;border-bottom:2px solid currentColor;margin-bottom:clamp(12px,1.8vw,18px)}
.p-art{display:block;color:var(--c-ink);outline:2px solid currentColor}
.p-art img{width:100%;aspect-ratio:16/9;object-fit:cover}
.poster h1,.poster h3{margin:clamp(14px,2vw,22px) 0 0;font:800 clamp(2.6rem,6vw,4.8rem)/.9 var(--f-body);letter-spacing:-.04em}
.hook{margin:10px 0 0;font:400 clamp(1.5rem,2.6vw,2.1rem)/1 var(--f-display);letter-spacing:.01em}
.acts{display:flex;flex-wrap:wrap;gap:14px 16px;margin-top:auto;padding-top:22px;border-top:2px solid currentColor;margin-block-start:22px}
.poster .btn{color:var(--c-ink);border-color:currentColor}
.poster .btn.play{flex:1 1 220px;min-height:68px;background:var(--c-ink);color:var(--c-bg);border-color:var(--c-ink);font-size:1.15rem;letter-spacing:.16em;box-shadow:6px 6px 0 var(--i-rust)}
.poster .btn.play:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--i-rust)}
.poster .btn.page{flex:0 1 auto;min-height:68px}
.poster .btn.page:hover{background:var(--c-ink);color:var(--c-bg)}

/* Ridge */
.ridge{display:block;width:100%;height:clamp(110px,13vw,190px);overflow:hidden}
.ridge svg{display:block;width:100%;height:100%}

/* Footer */
footer{background:var(--near);color:var(--i-cream);padding:34px 0 30px}
footer a{color:var(--i-mustard)}
footer .studio{color:var(--i-cream)}
footer .tagline{color:var(--i-mustard)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 40px;align-items:start}
.foot p{margin:6px 0 10px;max-width:46ch}
.mail{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--i-mustard);color:var(--i-navy);font:800 .95rem/1 var(--f-body);text-decoration:none}
.mail:hover{background:var(--i-cream)}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 14px}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--i-cream);color:var(--i-cream);text-decoration:none}
.links a:hover{background:var(--i-cream);color:var(--i-navy)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(241,230,204,.25);color:#d6ccb4}
.legal.cap{text-transform:none;letter-spacing:.04em}
.foot-links{display:flex;flex-wrap:wrap;gap:0 18px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
footer.line{padding:22px 0 36px}
footer.line .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
footer.line .wrap.cap{text-transform:none;letter-spacing:.04em}

/* Table: .table is the admin density, .board the roomier board rows, .cards turns rows into cards under 760px */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th,.table td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle}
.table thead th{position:sticky;top:0;z-index:1;background:var(--ink);color:var(--bg);font:800 .7rem/1.2 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.table tbody th{font-weight:inherit}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .name{font-weight:700;overflow-wrap:anywhere}
.table .tag{color:var(--ink-soft);font-weight:500}
.table .meta{display:block;color:var(--ink-soft);font-size:.8rem;font-weight:400}
.table .act{text-align:right}
.table .act .row{justify-content:flex-end}
.table tr.you>*{background:var(--you)}
.table tr.you>:first-child{box-shadow:inset 6px 0 0 var(--accent)}
.table.board th,.table.board td{padding:10px 12px;height:56px}
.table.board tbody .num{font:800 1.05rem/1.1 var(--f-body);font-variant-numeric:tabular-nums}
.table.board tbody .rank{width:3.2rem;padding-inline:4px;text-align:center;font:400 1.7rem/1 var(--f-display)}
.table.board thead .rank{text-align:center}
@media (max-width:560px){.table th,.table td{padding:8px 6px}.table.board th,.table.board td{padding:8px 6px}.table .tag{display:block}}
@media (max-width:760px){.table.cards,.table.cards tbody,.table.cards tr,.table.cards td{display:block;width:100%}.table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.table.cards tr{margin-bottom:12px;border:2px solid var(--ink);background:var(--bg)}.table.cards td{display:flex;justify-content:space-between;gap:12px;text-align:right}.table.cards td::before{content:attr(data-l);flex:none;color:var(--ink-soft);font:800 .64rem/1.6 var(--f-body);letter-spacing:.12em;text-transform:uppercase;text-align:left}.table.cards td.act{display:block;text-align:left}.table.cards td.act::before{display:block;margin-bottom:6px}.table.cards .act .row{justify-content:flex-start}}

/* Status */
.status{display:inline-block;padding:2px 8px;border:1.5px solid currentColor;font:800 .66rem/1.5 var(--f-body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.status.ok{color:var(--ok)}
.status.bad{color:var(--bad)}
.status.warn{color:var(--accent)}
.status.soft{color:var(--ink-soft)}

/* Stepper */
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper button{width:44px;height:44px;padding:0;background:var(--bg);color:var(--ink);border:2px solid var(--ink);border-radius:0;font:800 1.8rem/1 var(--f-body);cursor:pointer}
.stepper button:hover{box-shadow:3px 3px 0 var(--i-rust)}
.stepper button:disabled{color:var(--ink-soft);border-color:var(--ink-soft);box-shadow:none;cursor:not-allowed}
.step-label{min-width:5.5rem;text-align:center;font:800 .7rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}

/* Key-value list and key figures */
.kv{margin:0;border-top:1px solid var(--rule)}
.kv>div{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.kv dt{color:var(--ink-soft);font:800 .68rem/1.8 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.kv dd{margin:0;overflow-wrap:anywhere}
.mono{font-family:var(--f-mono);font-size:.9em}
@media (max-width:560px){.kv>div{grid-template-columns:minmax(0,1fr)}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;margin:0}
.kpi{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;padding:12px;background:var(--panel);border:1px solid var(--rule)}
.kpi-v{margin:0;font:400 2.4rem/1 var(--f-display)}
.kpi-l{color:var(--ink-soft);font:500 .8rem/1.3 var(--f-body)}

/* Loading, empty and error states */
.skel{display:block;width:100%;height:1rem;background:var(--rule);animation:fw-pulse 1.4s ease-in-out infinite}
.skel.short{width:40%}
@keyframes fw-pulse{50%{opacity:.45}}
.loading{display:grid;gap:10px;padding:14px 0}
tr.loading{display:table-row}
.table .loading td{height:56px;padding-block:0}
.state{padding:28px 16px;text-align:center;color:var(--ink-soft)}
.state p{margin:0}
.state .btn{margin-top:12px}
.state[data-state="error"]{color:var(--ink);box-shadow:inset 6px 0 0 var(--accent)}
.state[data-state="error"] p{font-weight:700}

/* Notice */
.notice{margin:16px 0;padding:12px 14px;background:var(--panel);color:var(--ink);border-left:6px solid var(--accent)}
.notice p{margin:0}
.notice:empty{display:none}
.notice[data-state="ok"]{border-left-color:var(--ok)}
.notice[data-state="error"]{border-left-color:var(--bad)}

/* Dialog: a native modal <dialog>; fw.js opens it from [data-dialog] */
.dialog{width:min(480px,100% - 32px);padding:0;background:var(--panel);color:var(--ink);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.dialog::backdrop{background:rgba(13,20,26,.6)}
.dialog-body{padding:22px}
.dialog h2{margin:0 0 8px;font:800 1.25rem/1.25 var(--f-body);letter-spacing:-.01em}
.dialog p{margin:0}
.dialog .row{justify-content:flex-end;margin-top:20px}