@font-face{font-family:"Oswald";src:url("assets/oswald.ttf") format("truetype");font-display:swap}
@font-face{font-family:"DM Sans";src:url("assets/dm-sans.ttf") format("truetype");font-display:swap}
@font-face{font-family:"DM Serif";src:url("assets/dm-serif.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("assets/space-grotesk.ttf") format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/ibm-plex-mono.ttf") format("truetype");font-display:swap}

:root{
  --bg:#FFF8E7; --ink:#141414; --paper:#FFFDF4; --accent:#FF4911; --blue:#2436FF;
  --pink:#FF48B0; --acid:#D6FF3F; --muted:#5c5546;
  --border:3px solid #141414;
  --shadow:8px 8px 0 #141414;
  --shadow-sm:5px 5px 0 #141414;
  --r:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;
  background-image:radial-gradient(#14141422 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
::selection{background:var(--accent);color:#fff}
a{color:var(--blue)}
:focus{outline:3px solid var(--blue);outline-offset:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:#141414;color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 12px 0}
.skip:focus{left:0}

/* ticker */
.ticker{background:#141414;color:var(--acid);overflow:clip;border-bottom:3px solid #141414;white-space:nowrap}
.ticker-inner{display:inline-flex;animation:tick 22s linear infinite;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;padding:9px 0}
.ticker-inner span{padding-right:8px}
@keyframes tick{to{transform:translateX(-50%)}}

/* topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 28px;background:var(--bg);position:sticky;top:0;z-index:50;border-bottom:var(--border)}
.brand{margin:0;font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:.04em;font-size:19px}
.brand-mark{color:var(--accent)} .brand-slash{color:var(--blue)}
.brand-sub{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);margin-left:8px}
.topbar nav{display:flex;gap:4px;align-items:center;overflow-x:auto;padding-inline-end:8px}
.topbar nav a{padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;border:2px solid transparent;border-radius:999px;font-weight:700;color:var(--ink);text-decoration:none;font-size:15px}
.topbar nav a:hover{background:#141414;color:var(--acid)}
.topbar nav a:active{transform:scale(.97)}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;padding:64px 40px 40px;max-width:1240px;margin:0 auto;align-items:start}
.kicker{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;background:#141414;color:var(--acid);padding:8px 14px;border-radius:999px;transform:rotate(-1.5deg)}
h1{font-family:"Oswald",sans-serif;font-size:clamp(56px,8.5vw,124px);line-height:.95;letter-spacing:-.01em;margin:22px 0 16px;text-transform:uppercase}
.h1-paper{display:inline-block;background:var(--paper);border:var(--border);box-shadow:var(--shadow-sm);padding:2px 18px;transform:rotate(1deg);color:var(--blue)}
.lede{font-size:18.5px;max-width:56ch}
.lede strong{background:var(--acid);padding:0 6px;border:2px solid #141414}

/* console */
.console{background:var(--paper);border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:24px;margin-top:26px;position:relative}
.console::before{content:"◈ ORACLE CONSOLE ◈";position:absolute;top:-16px;left:22px;background:var(--accent);color:#fff;border:3px solid #141414;border-radius:999px;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;padding:4px 14px}
.console-field{margin:14px 0}
.console label{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.console input[type="search"],.console select{width:100%;font-size:16px;font-family:"Space Grotesk",sans-serif;padding:14px 16px;border:var(--border);border-radius:12px;background:#fff;color:var(--ink);min-height:52px}
.console input[type="search"]:focus,.console select:focus{outline:3px solid var(--blue);outline-offset:2px}
.console-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.toggle{display:inline-flex;align-items:center;gap:10px;border:var(--border);border-radius:999px;background:#fff;padding:8px 18px 8px 10px;min-height:48px;font-weight:800;font-size:15px;cursor:pointer;box-shadow:4px 4px 0 #141414}
.toggle .toggle-knob{width:46px;height:26px;border:3px solid #141414;border-radius:999px;background:#e9e2d0;position:relative;flex:none}
.toggle .toggle-knob::after{content:"";position:absolute;top:1px;left:2px;width:16px;height:16px;border-radius:50%;background:#141414;transition:transform 200ms cubic-bezier(.22,1,.36,1)}
.toggle[aria-pressed="true"]{background:var(--acid)}
.toggle[aria-pressed="true"] .toggle-knob{background:var(--blue)}
.toggle[aria-pressed="true"] .toggle-knob::after{transform:translateX(18px);background:#fff}
.toggle:hover{transform:translateY(-2px)} .toggle:active{transform:scale(.97)}
.shake{border:var(--border);border-radius:999px;background:var(--blue);color:#fff;font-weight:800;font-size:15px;padding:10px 22px;min-height:48px;cursor:pointer;box-shadow:4px 4px 0 #141414}
.shake:hover{background:var(--accent)} .shake:active{transform:scale(.97)}
.shake.jolt{animation:jolt .45s cubic-bezier(.22,1,.36,1)}
@keyframes jolt{20%{transform:rotate(-3deg) translateX(-4px)}50%{transform:rotate(3deg) translateX(4px)}80%{transform:rotate(-1deg)}}
.console-hint{font-family:"IBM Plex Mono",monospace;font-size:13px;margin:14px 0 0;color:var(--muted)}

/* machine visual */
.machine{position:relative;border:var(--border);border-radius:26px;background:var(--accent);box-shadow:var(--shadow);overflow:clip;transform:rotate(1.2deg)}
.machine-glass{background:linear-gradient(180deg,#2b1a5e,#101a4e 60%,#0d1330);padding:30px 22px 18px;position:relative;overflow:clip}
.machine-glass::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 5px,#ffffff10 5px 6px);pointer-events:none}
.ball{width:min(300px,70%);aspect-ratio:1;margin:6px auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8 0 8%,transparent 9%),radial-gradient(circle at 50% 55%,#3b2a8f,#141433 70%);border:4px solid #0a0a0a;position:relative;display:flex;align-items:center;justify-content:center;animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px)}}
.ball-eye{width:44%;aspect-ratio:1;background:#FFF8E7;border:4px solid #0a0a0a;border-radius:50%;display:flex;align-items:center;justify-content:center;animation:look 7s ease-in-out infinite}
@keyframes look{0%,100%{transform:translate(0,0)}25%{transform:translate(-8px,4px)}55%{transform:translate(8px,-4px)}80%{transform:translate(0,6px)}}
.ball-pupil{width:34%;aspect-ratio:1;background:#141414;border-radius:50%;position:relative}
.ball-pupil::after{content:"";position:absolute;top:15%;left:15%;width:35%;height:35%;background:#fff;border-radius:50%}
.ball-star{position:absolute;color:var(--acid);font-size:26px;animation:twinkle 2.6s ease-in-out infinite}
.ball-star.s1{top:12%;left:16%} .ball-star.s2{top:20%;right:12%;animation-delay:.8s} .ball-star.s3{bottom:16%;left:12%;animation-delay:1.6s}
@keyframes twinkle{50%{opacity:.25;transform:scale(.8) rotate(20deg)}}
.ball-caption{position:absolute;bottom:8%;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--paper);border:3px solid #141414;border-radius:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;text-align:center;padding:4px 12px;line-height:1.4;white-space:nowrap}
.capsules{display:flex;justify-content:center;gap:10px;margin-top:20px;flex-wrap:wrap}
.cap{width:52px;height:52px;border-radius:50%;border:3px solid #141414;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;box-shadow:3px 3px 0 #141414}
.c1{background:var(--acid)} .c2{background:var(--pink);color:#fff} .c3{background:#fff}
.c4{background:var(--blue);color:#fff} .c5{background:#FFD166} .c6{background:#2EC4B6}
.cap:nth-child(odd){animation:hop 3s ease-in-out infinite}
.cap:nth-child(even){animation:hop 3s ease-in-out infinite reverse}
@keyframes hop{50%{transform:translateY(-8px)}}
.machine-base{background:var(--paper);border-top:var(--border);padding:16px;text-align:center}
.dispense{display:inline-block;margin:0;background:#141414;color:var(--acid);font-family:"IBM Plex Mono",monospace;letter-spacing:.2em;font-size:13px;padding:10px 26px;border-radius:999px}
.machine-serial{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;color:var(--muted);margin:10px 0 0}
.hero-stamp{position:absolute;top:14px;right:12px;background:var(--acid);border:3px solid #141414;border-radius:50%;width:108px;height:108px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:"Oswald",sans-serif;font-size:14px;line-height:1.15;transform:rotate(12deg);box-shadow:4px 4px 0 #141414;margin:0;animation:spinpulse 6s ease-in-out infinite}
@keyframes spinpulse{50%{transform:rotate(-4deg) scale(1.05)}}

.day-legend{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.04em;margin:6px 16px 0}
.day-legend strong{background:#141414;color:#fff;padding:1px 8px}

/* tray */
.tray-wrap{max-width:1240px;margin:0 auto;padding:24px 40px 40px}
.tray-head h2{font-family:"Oswald",sans-serif;font-size:clamp(34px,4.5vw,58px);text-transform:uppercase;margin:0;line-height:1}
.tray-head p{margin:8px 0 22px;max-width:62ch}
.tray{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.slip-card{position:relative;background:var(--paper);border:var(--border);border-radius:16px;box-shadow:var(--shadow-sm);padding:22px 22px 18px;display:flex;gap:16px;transition:transform 200ms cubic-bezier(.22,1,.36,1)}
.slip-card:nth-child(odd){transform:rotate(-.5deg)} .slip-card:nth-child(even){transform:rotate(.5deg)}
.slip-card:hover{transform:rotate(0) translateY(-4px);box-shadow:var(--shadow)}
.slip-card:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.slip-card .thumb{flex:none;width:118px;align-self:stretch;border:3px solid #141414;border-radius:10px;overflow:clip;background:#ddd;min-height:132px}
.slip-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.15) contrast(1.05)}
.slip-card .card-body{min-width:0;flex:1}
.daytab{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;letter-spacing:.1em;padding:3px 10px;border:2px solid #141414;border-radius:999px;margin-bottom:8px}
.daytab.sat{background:var(--pink);color:#fff} .daytab.sun{background:var(--blue);color:#fff}
.catline{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;color:var(--muted);margin:0 0 4px}
.slip-card h3{font-family:"Space Grotesk",sans-serif;font-size:24px;line-height:1.1;margin:0 0 6px;letter-spacing:-.01em}
.slip-card .meta{font-family:"IBM Plex Mono",monospace;font-size:12.5px;margin:0 0 8px}
.slip-card .sum{margin:0 0 12px;font-size:15.5px}
.card-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.open-btn{border:var(--border);background:var(--acid);border-radius:999px;font-weight:800;font-size:15px;padding:10px 20px;min-height:44px;cursor:pointer;box-shadow:3px 3px 0 #141414}
.open-btn:hover{background:#141414;color:var(--acid)} .open-btn:active{transform:scale(.97)}
.saved-dot{font-family:"IBM Plex Mono",monospace;font-size:12px;background:#141414;color:var(--acid);border-radius:999px;padding:6px 12px}
.price-tag{font-family:"Oswald",sans-serif;background:#fff;border:2px solid #141414;border-radius:8px;padding:2px 10px;transform:rotate(-2deg);font-size:15px}
.shuffling .slip-card{animation:shuffle .4s cubic-bezier(.22,1,.36,1)}
@keyframes shuffle{30%{transform:translateY(-10px) rotate(1.5deg)}}

/* empty */
.empty{border:3px dashed #141414;border-radius:16px;background:#fff;padding:36px;text-align:center;margin-top:8px}
.empty-big{font-family:"Oswald",sans-serif;font-size:32px;text-transform:uppercase;margin:0}
.btn-paper{border:var(--border);background:var(--accent);color:#fff;font-weight:800;font-size:16px;padding:12px 24px;min-height:48px;border-radius:999px;cursor:pointer;box-shadow:4px 4px 0 #141414}
.btn-paper:hover{background:#141414;color:var(--acid)} .btn-paper:active{transform:scale(.97)}

/* pocket */
.pocket{background:#141414;color:#FFF8E7;border-top:4px solid #141414;margin-top:40px;padding:64px 40px;position:relative;overflow:clip}
.pocket::before{content:"POCKET";position:absolute;top:10px;right:-10px;font-family:"Oswald",sans-serif;font-size:clamp(80px,14vw,190px);color:transparent;-webkit-text-stroke:2px #ffffff22;line-height:1;pointer-events:none}
.pocket h2{font-family:"Oswald",sans-serif;font-size:clamp(32px,4.5vw,54px);text-transform:uppercase;margin:0}
.pocket-count{background:var(--pink);border:3px solid #FFF8E7;border-radius:999px;font-size:16px;padding:2px 16px;vertical-align:middle;white-space:nowrap}
.pocket-list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:1100px}
.pocket-list li{background:#1f1f1f;border:2px solid #FFF8E7;border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.pocket-list button{background:var(--acid);border:2px solid #FFF8E7;color:#141414;border-radius:999px;font-weight:800;padding:8px 16px;min-height:44px;cursor:pointer}
.pocket-list button:hover{background:var(--pink);color:#fff} .pocket-list button:active{transform:scale(.97)}
.pocket-list .pk-title{font-weight:700}
.pocket-list .pk-meta{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#cfc9b8}

/* footer */
footer{padding:32px 40px 60px;font-size:14.5px;color:var(--muted);max-width:1240px;margin:0 auto}
.foot-mono{font-family:"IBM Plex Mono",monospace;font-size:12px}

/* detail veil + slip */
.slip-veil{position:fixed;inset:0;background:#141414cc;backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto}
.slip-veil[hidden]{display:none}
.slip{background:#FFFDF4;color:#141414;border:4px solid #141414;border-radius:8px;box-shadow:10px 10px 0 var(--pink),18px 18px 0 var(--blue);max-width:640px;width:100%;padding:0 0 26px;position:relative;animation:slipdrop 260ms cubic-bezier(.22,1,.36,1)}
@keyframes slipdrop{from{transform:translateY(-26px) rotate(-1deg);opacity:0}}
.slip-perf{height:26px;margin:14px 10px 0;background-image:radial-gradient(#141414 3.2px, transparent 3.4px);background-size:18px 12px;background-repeat:repeat-x;background-position:center}
.slip-eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-align:center;margin:6px 24px 0;padding-bottom:12px;border-bottom:2px dashed #141414}
.slip h2{font-family:"DM Serif",serif;font-size:clamp(30px,5vw,44px);line-height:1.05;margin:18px 28px 8px;font-weight:400}
.slip-meta{font-family:"IBM Plex Mono",monospace;font-size:13px;margin:0 28px 14px;background:var(--acid);border:2px solid #141414;display:inline-block;padding:6px 12px;margin-left:28px}
.slip-body{margin:14px 28px;font-size:17px;white-space:pre-line}
.slip-access{margin:0 28px;font-size:15px;border-left:6px solid var(--blue);padding-left:14px;color:#333}
.slip-actions{display:flex;gap:12px;flex-wrap:wrap;margin:22px 28px 0}
.slip-actions button{min-height:52px;font-size:16px;font-weight:800;border:var(--border);border-radius:999px;padding:12px 24px;cursor:pointer}
#saveBtn{background:var(--blue);color:#fff;box-shadow:4px 4px 0 #141414}
#saveBtn[aria-pressed="true"]{background:var(--accent)}
#saveBtn:hover{filter:brightness(1.08)} #saveBtn:active{transform:scale(.97)}
#closeBtn{background:#fff;box-shadow:4px 4px 0 #141414}
#closeBtn:hover{background:#141414;color:var(--acid)} #closeBtn:active{transform:scale(.97)}
.slip-foot{text-align:center;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;color:var(--muted);margin:18px 28px 0}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:40px 20px 24px}
  h1{font-size:clamp(48px,15vw,72px)}
  .machine{transform:rotate(0);max-width:420px}
  .hero-stamp{width:88px;height:88px;font-size:12px}
  .tray{grid-template-columns:1fr}
  .tray-wrap,.pocket{padding-left:20px;padding-right:20px}
  .pocket-list{grid-template-columns:1fr}
  .topbar{padding:10px 14px} .brand-sub{display:none}
  .slip-card .thumb{width:96px;min-height:112px}
}
@media (hover:hover) and (pointer:fine){
  .cap:hover{transform:translateY(-6px) rotate(8deg)}
  .pocket-list li:hover{border-color:var(--acid)}
  .topbar nav a{transition:background 180ms cubic-bezier(.22,1,.36,1)}
  .slip-card,.open-btn,.toggle,.shake,.btn-paper{transition:transform 180ms cubic-bezier(.22,1,.36,1),background 180ms,box-shadow 180ms}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .ticker-inner{animation:none}
}