:root{
  --vara-orange:#f78312;
  --vara-red:#ef4524;
  --vara-cream:#fff8e8;
  --vara-paper:#f5efe1;
  --vara-black:#0b0b0a;
  --vara-muted:#665f55;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
}
body[data-page="hints"],body[data-page="puzzle"]{background:var(--vara-paper);color:var(--vara-black)}
body[data-page="hints"] .wrap,body[data-page="puzzle"] .wrap{width:min(100% - 44px,1240px)}
body[data-page="hints"] .reveal,body[data-page="puzzle"] .reveal{opacity:1;transform:none}

/* shared companion header */
body[data-page="hints"] .header,body[data-page="puzzle"] .header{position:sticky;top:0;z-index:100;background:var(--vara-orange);border:0;padding:12px 0 7px;backdrop-filter:none}
body[data-page="hints"] .header__inner,body[data-page="puzzle"] .header__inner{min-height:62px;background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:4px 4px 15px 15px;padding:8px 18px;box-shadow:0 4px 0 rgba(0,0,0,.08)}
body[data-page="hints"] .header .logo,body[data-page="puzzle"] .header .logo{font-family:var(--display);font-size:27px;line-height:.9;letter-spacing:.035em;color:var(--vara-black)}
body[data-page="hints"] .header .logo span,body[data-page="puzzle"] .header .logo span{color:var(--vara-red)}
body[data-page="hints"] .nav,body[data-page="puzzle"] .nav{gap:24px}
body[data-page="hints"] .nav a,body[data-page="puzzle"] .nav a{font-family:var(--display);font-size:16px;letter-spacing:.04em;color:var(--vara-black)}
body[data-page="hints"] .nav a:hover,body[data-page="puzzle"] .nav a:hover,body[data-page="hints"] .nav a[aria-current="page"]{color:var(--vara-red)}
body[data-page="hints"] .nav__cta,body[data-page="puzzle"] .nav__cta{background:var(--vara-red);color:#fff!important;border:2px solid var(--vara-black);border-radius:10px;padding:10px 18px!important;box-shadow:2px 2px 0 var(--vara-black)}

/* Hints index */
body[data-page="hints"] main.wrap{padding-top:40px;padding-bottom:72px}
body[data-page="hints"] .page-hero{background:var(--vara-orange);border:3px solid var(--vara-black);padding:44px 46px 40px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 42px;align-items:end;box-shadow:7px 7px 0 rgba(0,0,0,.1)}
body[data-page="hints"] .page-hero .kicker{grid-column:1/-1;font-family:var(--display);font-size:17px;letter-spacing:.12em;color:var(--vara-cream);-webkit-text-stroke:1px var(--vara-black);paint-order:stroke fill}
body[data-page="hints"] .page-hero h1{font-family:var(--display);font-size:clamp(78px,9vw,126px);line-height:.78;letter-spacing:-.025em;margin:2px 0 8px;max-width:7ch;text-transform:uppercase}
body[data-page="hints"] .page-hero>p:not(.kicker){font-size:18px;line-height:1.5;max-width:47ch;color:var(--vara-black);align-self:end;padding-bottom:6px}
body[data-page="hints"] .companion-status{grid-column:2;grid-row:2/4;align-self:stretch;min-width:250px;background:var(--vara-cream);border:3px solid var(--vara-black);display:flex;flex-direction:column;justify-content:space-between;padding:22px;box-shadow:4px 4px 0 var(--vara-black)}
body[data-page="hints"] .companion-status span{font-family:var(--display);font-size:18px;letter-spacing:.08em;color:var(--vara-red)}
body[data-page="hints"] .companion-status b{font-family:var(--display);font-size:34px;line-height:.9}

body[data-page="hints"] .tools{margin-top:34px;border:3px solid var(--vara-black);background:var(--vara-cream);padding:24px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end}
body[data-page="hints"] .jump label{font-family:var(--display);font-size:20px;letter-spacing:.04em;text-transform:uppercase}
body[data-page="hints"] .jump__row{margin-top:10px;display:grid;grid-template-columns:minmax(0,260px) auto;gap:10px}
body[data-page="hints"] .jump input{height:56px;background:#fff;border:2px solid var(--vara-black);font:600 20px 'IBM Plex Mono',monospace;padding:0 16px;color:var(--vara-black)}
body[data-page="hints"] .jump input:focus{outline:3px solid var(--vara-orange);outline-offset:2px}
body[data-page="hints"] .button{border:2px solid var(--vara-black);border-radius:8px;font-family:var(--display);font-size:18px;letter-spacing:.06em;box-shadow:2px 2px 0 var(--vara-black)}
body[data-page="hints"] .button--dark{background:var(--vara-black);color:#fff}
body[data-page="hints"] .jump__msg{min-height:1.4em;margin-top:9px;font:600 10px 'IBM Plex Mono',monospace;color:var(--vara-red)}
body[data-page="hints"] .resume{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;background:var(--vara-orange);border:2px solid var(--vara-black);padding:14px 16px;white-space:nowrap}
body[data-page="hints"] .resume a{font-family:var(--display);font-size:18px;margin-left:12px;text-decoration:none}

body[data-page="hints"] .puzzle-key{margin:30px 0 12px;display:flex;gap:24px;font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase}
body[data-page="hints"] .puzzle-key span:before{content:'';display:inline-block;width:11px;height:11px;margin-right:8px;vertical-align:-1px;background:var(--vara-red);border:1px solid var(--vara-black)}
body[data-page="hints"] .puzzle-key .draft-key:before{background:transparent}
body[data-page="hints"] .puzzle-grid{display:grid;grid-template-columns:repeat(10,1fr);border:3px solid var(--vara-black);background:var(--vara-black);gap:2px}
body[data-page="hints"] .puzzle-tile{aspect-ratio:1;display:grid;place-items:center;background:var(--vara-cream);color:var(--vara-black);text-decoration:none;font-family:var(--display);font-size:clamp(23px,2.1vw,34px);transition:background .15s,color .15s,transform .15s}
body[data-page="hints"] a.puzzle-tile{background:var(--vara-red);color:#fff}
body[data-page="hints"] a.puzzle-tile:hover{background:var(--vara-black);color:var(--vara-cream);transform:scale(.96)}
body[data-page="hints"] .puzzle-tile.is-draft{color:#a39b8d;background:#f1eadc}

/* Puzzle detail */
body[data-page="puzzle"] main.wrap{padding-top:30px;padding-bottom:68px}
body[data-page="puzzle"] .crumb{margin:0 0 16px}
body[data-page="puzzle"] .crumb a{display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:2px solid var(--vara-black);background:var(--vara-cream);font-family:var(--display);font-size:17px;letter-spacing:.04em;text-decoration:none;box-shadow:2px 2px 0 var(--vara-black)}
body[data-page="puzzle"] .puzzle-head{background:var(--vara-orange);border:3px solid var(--vara-black);padding:40px 44px 38px;box-shadow:7px 7px 0 rgba(0,0,0,.1);margin-bottom:32px}
body[data-page="puzzle"] .puzzle-head .kicker{font-family:var(--display);font-size:18px;letter-spacing:.12em;color:var(--vara-cream);-webkit-text-stroke:1px var(--vara-black);paint-order:stroke fill}
body[data-page="puzzle"] .puzzle-head h1{font-family:var(--display);font-size:clamp(68px,8vw,112px);line-height:.82;letter-spacing:-.02em;margin:12px 0 12px;max-width:12ch;text-transform:uppercase}
body[data-page="puzzle"] .puzzle-meta{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--vara-black)}
body[data-page="puzzle"] .draft{margin-top:22px;background:var(--vara-cream);border:2px solid var(--vara-black);padding:16px 18px;font:600 11px/1.6 'IBM Plex Mono',monospace}

body[data-page="puzzle"] .stages{display:grid;gap:18px}
body[data-page="puzzle"] .stage{border:3px solid var(--vara-black);background:var(--vara-cream);box-shadow:5px 5px 0 rgba(0,0,0,.08)}
body[data-page="puzzle"] .stage__top{min-height:82px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:16px 18px;border-bottom:0}
body[data-page="puzzle"] .stage__tag{font-family:var(--display);font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.03em}
body[data-page="puzzle"] .stage__tag b{display:inline-grid;place-items:center;width:48px;height:48px;margin-right:14px;background:var(--vara-red);color:#fff;border:2px solid var(--vara-black);border-radius:50%;font-size:24px}
body[data-page="puzzle"] .stage__done{font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--vara-red)}
body[data-page="puzzle"] .stage .button{border:2px solid var(--vara-black);border-radius:8px;font-family:var(--display);font-size:18px;letter-spacing:.05em;box-shadow:2px 2px 0 var(--vara-black);min-height:48px}
body[data-page="puzzle"] .stage .button--dark{background:var(--vara-black);color:#fff}
body[data-page="puzzle"] .stage .button--line{background:#fff;color:var(--vara-black)}
body[data-page="puzzle"] .stage .button--accent{background:var(--vara-red);color:#fff}
body[data-page="puzzle"] .panel{border-top:2px solid var(--vara-black);padding:28px 28px 30px;background:#fffaf0}
body[data-page="puzzle"] .panel-label{font-family:var(--display);font-size:18px;letter-spacing:.1em;color:var(--vara-red);text-transform:uppercase}
body[data-page="puzzle"] .panel-text{font-size:clamp(20px,2vw,27px);line-height:1.45;max-width:40ch;margin-top:10px;color:var(--vara-black)}
body[data-page="puzzle"] .anom-list{display:grid;gap:10px;margin-top:18px}
body[data-page="puzzle"] .anom-list li{display:flex;align-items:center;gap:12px;font:600 13px 'IBM Plex Mono',monospace}
body[data-page="puzzle"] .anom-list .badge{display:grid;place-items:center;width:32px;height:32px;border:2px solid var(--vara-black);background:var(--vara-red);color:#fff;font-family:var(--display);font-size:20px}
body[data-page="puzzle"] .solution-grid{width:min(560px,100%);display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:28px;padding:18px;border:3px solid var(--vara-black);background:var(--vara-cream)}
body[data-page="puzzle"] .solution-cell{aspect-ratio:1;border-radius:50%;background:#bdb4a4;position:relative}
body[data-page="puzzle"] .solution-cell.hit{background:var(--vara-red);outline:3px solid var(--vara-red);outline-offset:4px}
body[data-page="puzzle"] .reset-row{margin:24px 0 18px;text-align:right}
body[data-page="puzzle"] .text-button{font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.1em;color:var(--vara-muted)}
body[data-page="puzzle"] .puzzle-nav{display:flex;justify-content:space-between;gap:14px;padding-top:22px;border-top:3px solid var(--vara-black)}
body[data-page="puzzle"] .puzzle-nav a{display:inline-flex;align-items:center;min-height:46px;padding:0 16px;border:2px solid var(--vara-black);background:var(--vara-cream);font-family:var(--display);font-size:18px;text-decoration:none;box-shadow:2px 2px 0 var(--vara-black)}

/* Modal */
body[data-page="puzzle"] .modal__card{background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:12px;box-shadow:8px 8px 0 var(--vara-black);padding:28px}
body[data-page="puzzle"] .modal__card h2{font-family:var(--display);font-size:42px;line-height:.95;text-transform:uppercase}
body[data-page="puzzle"] .modal__card p{color:var(--vara-muted);margin-top:12px}
body[data-page="puzzle"] .modal__actions{margin-top:24px}
body[data-page="puzzle"] .modal__actions .button{border:2px solid var(--vara-black);border-radius:8px;font-family:var(--display);font-size:18px;box-shadow:2px 2px 0 var(--vara-black)}

/* Footer */
body[data-page="hints"] .footer,body[data-page="puzzle"] .footer{background:var(--vara-black);color:#fff;border:0;padding:28px 0}
body[data-page="hints"] .footer .logo,body[data-page="puzzle"] .footer .logo{font-family:var(--display);font-size:25px;color:#fff}
body[data-page="hints"] .footer .logo span,body[data-page="puzzle"] .footer .logo span{color:var(--vara-red)}
body[data-page="hints"] .footer nav a,body[data-page="puzzle"] .footer nav a,body[data-page="hints"] .footer p,body[data-page="puzzle"] .footer p{color:rgba(255,255,255,.66)}

@media(max-width:820px){
  body[data-page="hints"] .page-hero{grid-template-columns:1fr;padding:34px 30px}
  body[data-page="hints"] .companion-status{grid-column:1;grid-row:auto;min-width:0;min-height:120px}
  body[data-page="hints"] .tools{grid-template-columns:1fr}
  body[data-page="hints"] .puzzle-grid{grid-template-columns:repeat(5,1fr)}
  body[data-page="puzzle"] .puzzle-head{padding:32px 28px}
  body[data-page="puzzle"] .stage__top{grid-template-columns:1fr;align-items:start}
  body[data-page="puzzle"] .stage__done{justify-self:start}
}
@media(max-width:560px){
  body[data-page="hints"] .wrap,body[data-page="puzzle"] .wrap{width:min(100% - 24px,1240px)}
  body[data-page="hints"] .header,body[data-page="puzzle"] .header{padding-top:7px}
  body[data-page="hints"] .header__inner,body[data-page="puzzle"] .header__inner{min-height:56px;padding:7px 12px}
  body[data-page="hints"] .header .logo,body[data-page="puzzle"] .header .logo{font-size:23px}
  body[data-page="hints"] .nav,body[data-page="puzzle"] .nav{background:var(--vara-cream);border:3px solid var(--vara-black);border-radius:10px;top:64px}
  body[data-page="hints"] .nav a,body[data-page="puzzle"] .nav a{font-size:21px}
  body[data-page="hints"] main.wrap{padding-top:22px}
  body[data-page="hints"] .page-hero{padding:28px 22px;box-shadow:4px 4px 0 rgba(0,0,0,.1)}
  body[data-page="hints"] .page-hero h1{font-size:74px}
  body[data-page="hints"] .page-hero>p:not(.kicker){font-size:16px}
  body[data-page="hints"] .jump__row{grid-template-columns:1fr auto}
  body[data-page="hints"] .puzzle-grid{grid-template-columns:repeat(4,1fr)}
  body[data-page="hints"] .puzzle-tile{font-size:26px}
  body[data-page="puzzle"] main.wrap{padding-top:20px}
  body[data-page="puzzle"] .puzzle-head{padding:28px 22px;box-shadow:4px 4px 0 rgba(0,0,0,.1)}
  body[data-page="puzzle"] .puzzle-head h1{font-size:64px}
  body[data-page="puzzle"] .stage__top{padding:14px}
  body[data-page="puzzle"] .stage__tag{font-size:26px}
  body[data-page="puzzle"] .panel{padding:22px 18px 24px}
  body[data-page="puzzle"] .solution-grid{gap:4px;padding:12px}
}