@font-face{font-family:"Hanken Grotesk";src:url("assets/hanken-grotesk-latin.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
:root{color-scheme:dark;--bg:#0b0a0e;--text:#f4f2f8;--muted:#a5a1b0;--faint:#8e8a9a;--accent:#b8a0ff;--line:#ffffff14;--pack:clamp(176px,56.4vw,220px)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--text);font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1rem;-webkit-font-smoothing:antialiased}
.page{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden}
.header{height:64px;flex-shrink:0;display:flex;align-items:center;gap:12px;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));position:relative;z-index:2}
/* The supplied wordmark PNG carries transparent padding; the box crops to the lettering. */
.wordmark{display:block;position:relative;width:124px;height:44px;overflow:hidden;flex-shrink:0}
.wordmark img{position:absolute;left:-8px;top:-6px;width:140px;height:56px}
/* Y Combinator sits beside the wordmark as "Backed by" and the mark alone (the mark alone under 360px). */
.yc{display:flex;align-items:center;gap:7px;min-height:44px;font-size:.8125rem;line-height:1.25rem;white-space:nowrap;text-decoration:none}
.yc::before{content:"";width:1px;height:20px;margin-right:5px;background:#ffffff2e}
.yc svg{display:block;flex-shrink:0}
.yc-by{color:var(--muted);font-weight:500}
.enter{margin-left:auto;position:relative;display:flex;align-items:center;min-height:36px;padding:0 16px;border:1px solid #ffffff2e;border-radius:999px;color:var(--text);font-size:.875rem;font-weight:500;text-decoration:none;touch-action:manipulation}
.enter::after{content:"";position:absolute;inset:-4px}
.hero{display:flex;flex-direction:column}
/* Orbit: orbit.js drives the four packs and their lights every frame. The
   static transforms below are the resting pose shown before the script runs
   and when it is unavailable. Radius, lift and light size all follow --pack. */
.orbit{position:relative;height:calc(var(--pack)*1.4 + 40px);margin-top:8px;touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none}
.light{position:absolute;left:50%;top:50%;width:calc(var(--pack)*2.36);height:calc(var(--pack)*2.36);margin:calc(var(--pack)*-1.18) 0 0 calc(var(--pack)*-1.18);border-radius:50%;opacity:0;pointer-events:none;will-change:opacity}
.light:nth-child(1){background:radial-gradient(closest-side,#7a2cf0,transparent);opacity:.3}
.light:nth-child(2){background:radial-gradient(closest-side,#3f52ff,transparent);opacity:.065}
.light:nth-child(3){background:radial-gradient(closest-side,#b48cff,transparent)}
.light:nth-child(4){background:radial-gradient(closest-side,#c8c8d8,transparent);opacity:.065}
.pack{position:absolute;left:50%;top:50%;width:var(--pack);height:calc(var(--pack)*1.4);margin:calc(var(--pack)*-.7) 0 0 calc(var(--pack)*-.5);z-index:1;will-change:transform;-webkit-user-drag:none}
.pack:nth-of-type(1){z-index:201}
.pack:nth-of-type(2){z-index:100;transform:translate3d(calc(var(--pack)*.618),calc(var(--pack)*-.064),0) scale(.74) perspective(700px) rotateY(34deg);filter:brightness(.48)}
.pack:nth-of-type(3){transform:translate3d(0,calc(var(--pack)*-.127),0) scale(.48);filter:brightness(.3)}
.pack:nth-of-type(4){z-index:100;transform:translate3d(calc(var(--pack)*-.618),calc(var(--pack)*-.064),0) scale(.74) perspective(700px) rotateY(-34deg);filter:brightness(.48)}
/* Tap pulse: two rings spread from the middle of the resting front pack once
   per turn, in place of a written hint. orbit.js drives them from the ring's clock. */
.tap{position:absolute;left:50%;top:56%;width:0;height:0;z-index:300;pointer-events:none}
.tap span{position:absolute;left:calc(var(--pack)*-.16);top:calc(var(--pack)*-.16);width:calc(var(--pack)*.32);height:calc(var(--pack)*.32);border-radius:50%;border:2px solid #fff;background:#ffffff1f;opacity:0;will-change:transform,opacity}
/* The demo button is off screen for keyboards and screen readers; it shows when focused. */
.demo-hint{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;align-self:center;border:0;background:none;color:var(--faint);font-family:inherit;font-size:.8125rem;cursor:pointer;touch-action:manipulation}
.demo-hint:focus-visible{position:relative;width:auto;height:auto;min-height:44px;padding:0 16px;clip-path:none}
/* Full-screen layer for the demo open (demo.js). Its box is the ceremony's "screen". */
.demo-root{position:fixed;inset:0;z-index:1000;font-family:inherit}
.demo-root[hidden]{display:none}
.pitch{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px 28px}
h1{margin:6px 0 0;font-size:clamp(2.5rem,12.8vw,3.125rem);line-height:1;font-weight:600;letter-spacing:-.045em}
.points{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;color:#e4e1ec;font-size:clamp(.9375rem,4.36vw,1.0625rem);line-height:1.625rem;font-weight:500;white-space:nowrap}
.points-row{display:flex;align-items:center;justify-content:center;gap:10px}
.ev{color:var(--accent);font-weight:700}
/* A narrow highlight crosses the lettering left to right, then rests. The
   250% background starts to the left at 100% and ends to the right at 0%.
   Keep the solid accent when text clipping or motion is unavailable. */
@supports (background-clip:text) or (-webkit-background-clip:text){
 @media(prefers-reduced-motion:no-preference){
  .ev{background-image:linear-gradient(110deg,var(--accent) 44%,#fff 50%,var(--accent) 56%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ev-shine 4s linear infinite}
 }
}
@keyframes ev-shine{0%,10%{background-position:100% 0}50%,100%{background-position:0% 0}}
.dot{width:3px;height:3px;border-radius:50%;background:#6f6b7b}
.cta{margin-top:24px;display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 32px;border-radius:999px;background:var(--text);color:var(--bg);font-size:1rem;font-weight:600;text-decoration:none;touch-action:manipulation}
.cta:active{background:#dcd8e6}
/* Slab ribbon: thirteen high-value Pokémon and One Piece slabs, repeated once so the
   strip loops. 90px slabs at 38px a second: one loop is 13 x (90 + 10)px. */
.ribbon{align-self:stretch;min-width:0;margin:26px -24px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overflow-anchor:none;overscroll-behavior-x:contain;-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent);mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent)}
.ribbon::-webkit-scrollbar{display:none}
.ribbon:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Native scrolling takes over at the current animation position on interaction.
   Keep the responsive edge fade while the cards scroll beneath it. */
.ribbon.is-browsing .ribbon-track{animation:none;will-change:auto}
.ribbon.is-browsing.is-auto .ribbon-track{animation:ribbon-resume var(--ribbon-duration) linear infinite;will-change:transform}
@keyframes ribbon-resume{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--ribbon-cycle)),0,0)}}
.ribbon.is-browsing .ribbon-track > a{display:block}
.ribbon.is-dragging,.ribbon.is-dragging a{cursor:grabbing}
.ribbon-track{display:flex;gap:10px;width:max-content;padding:4px 5px 6px;animation:ribbon 34.24s linear infinite;will-change:transform}
.ribbon-track > a{display:block;flex:none;border-radius:5px;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.ribbon-track > a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ribbon:focus-within .ribbon-track{animation-play-state:paused}
@media(hover:hover){.ribbon:hover .ribbon-track{animation-play-state:paused}}
.ribbon-track img{display:block;width:90px;max-width:none;height:151px;border-radius:5px;-webkit-user-drag:none}
/* A third copy of the thirteen is in the markup for wide screens only (see the
   1200px block): the phone and tablet strip is still two copies moving -50%. */
.ribbon-track > a:nth-child(n+27){display:none}
@keyframes ribbon{to{transform:translate3d(-50%,0,0)}}
/* Wide strip: three copies, so one loop is a third of the track (its side padding is half a gap). */
@keyframes ribbon-wide{to{transform:translate3d(calc(-100%/3),0,0)}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation-play-state:paused}}
.demo-hint:focus-visible,.enter:focus-visible,.cta:focus-visible,.yc:focus-visible,.wordmark:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.cta:focus-visible,.enter:focus-visible{border-radius:999px}
@media(max-width:359px){.header{gap:8px}.yc-by{display:none}}
@media(min-width:768px){
 :root{--pack:300px}
 .header{height:84px;gap:16px;padding-left:max(5%,env(safe-area-inset-left));padding-right:max(5%,env(safe-area-inset-right))}
 .orbit{margin-top:0}
 .pitch{padding:22px 24px 56px}
 .yc{font-size:.9375rem}
 h1{font-size:4.75rem;margin-top:0}
 h1 br{display:none}
 .points{flex-direction:row;justify-content:center;gap:12px;margin-top:28px;font-size:1.1875rem}
 .points-row{gap:12px}
 .points-row+.points-row::before{content:"";width:3px;height:3px;border-radius:50%;background:#6f6b7b}
 .cta{margin-top:30px;min-height:56px;padding:0 38px;font-size:1.0625rem}
 .ribbon{align-self:center;width:min(1100px,100%);margin:40px 0 0}
}
/* Desktop (October 9, 2026, owner request): from 1200px the hero is two
   columns, the copy on the left and the ring on the right, with the slab
   ribbon running the full width beneath them. Phones and tablets are untouched:
   every rule here is inside this query. --gutter is the side margin shared by
   the header, hero and footer, and caps the layout at 1560px on very wide
   screens. --pack follows the window's width and height so the header, ring and
   ribbon share the first screen; orbit.js reads the rendered width. .pitch
   dissolves (display:contents) so its children sit on the hero grid; rows 1 and
   5 are equal spacers that center the copy on the ring. */
@media(min-width:1200px){
 :root{--pack:clamp(300px,min(26vw,38vh),460px);--gutter:max(5vw,calc(50vw - 780px));--slab:132px;--slab-gap:16px}
 .header{gap:18px;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
 .wordmark{width:149px;height:53px}
 .wordmark img{left:-10px;top:-7px;width:168px;height:67px}
 .yc{font-size:1rem}
 .enter{min-height:40px;padding:0 20px;font-size:.9375rem}
 .hero{flex:1 0 auto;display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) minmax(0,1.12fr) var(--gutter);grid-template-rows:1fr auto auto auto 1fr auto}
 .pitch{display:contents}
 .orbit{grid-column:3;grid-row:1/6;align-self:center;z-index:0}
 /* The side packs keep the proportions they have at 300px: the camera distance grows with the pack. */
 .pack:nth-of-type(2){transform:translate3d(calc(var(--pack)*.618),calc(var(--pack)*-.064),0) scale(.74) perspective(calc(var(--pack)*2.3333)) rotateY(34deg)}
 .pack:nth-of-type(4){transform:translate3d(calc(var(--pack)*-.618),calc(var(--pack)*-.064),0) scale(.74) perspective(calc(var(--pack)*2.3333)) rotateY(-34deg)}
 .demo-hint:focus-visible{grid-column:3;grid-row:5;align-self:end;justify-self:center;margin-bottom:-44px;z-index:1}
 h1,.cta,.points,.ribbon{position:relative;z-index:1}
 h1{grid-column:2;grid-row:2;margin:0;text-align:left;font-size:clamp(4.5rem,6vw,6.75rem)}
 h1 br{display:inline}
 .cta{grid-column:2;grid-row:3;justify-self:start;margin-top:36px;min-height:60px;padding:0 44px;font-size:1.125rem}
 .points{grid-column:2;grid-row:4;flex-direction:column;align-items:flex-start;gap:6px;margin-top:32px;font-size:1.25rem;line-height:1.75rem}
 .points-row{justify-content:flex-start}
 .points-row+.points-row::before{content:none}
 /* Ribbon: 132, 144 or 152px slabs by window width (the files are 200px wide) with 16px gaps, three
    copies of the thirteen so the strip covers its 2880px cap plus one loop, and
    one loop in 47.66 seconds (about 40px a second). Longhands only, so the
    reduced-motion pause above still applies. */
 .ribbon{grid-column:1/-1;grid-row:6;justify-self:center;width:100%;max-width:2880px;margin:44px 0 48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
 .ribbon-track{gap:var(--slab-gap);padding:4px calc(var(--slab-gap)/2) 8px;animation-name:ribbon-wide;animation-duration:47.66s}
 .ribbon-track img{width:var(--slab);height:calc(var(--slab)*1.678);border-radius:7px}
 .ribbon-track > a:nth-child(n+27){display:block}
}
/* Slab width steps in whole pixels so the strip's loop point lands on the pixel grid. */
@media(min-width:1536px){:root{--slab:144px}}
@media(min-width:1728px){:root{--slab:152px}}
@media(hover:hover) and (pointer:fine){.demo-hint:hover{color:var(--text)}.cta:hover{background:#fff}.enter:hover{border-color:#ffffff66}.yc:hover .yc-by{color:var(--text)}}

/* Homepage FAQ: one short list of dropdowns under the hero (SEO; owner asked
   on October 17, 2026 for this alone in place of the earlier content sections).
   Its questions and answers must match the FAQPage JSON-LD word for word. */

/* From 1200px the hero is a grid whose 1fr spacer rows centered the copy on the
   ring because the hero filled the first screen. With the FAQ below it, keep
   that: the hero is still at least one screen tall minus the 84px header. */
@media(min-width:1200px){.hero{min-height:calc(100vh - 84px);min-height:calc(100svh - 84px)}}

.faq{width:100%;max-width:680px;margin:0 auto;padding:40px max(24px,env(safe-area-inset-right)) 48px max(24px,env(safe-area-inset-left))}
.faq h2{margin:0 0 8px;color:var(--text);font-size:1.25rem;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;color:var(--text);font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;color:var(--muted);font-size:1.25rem;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 16px;color:#e4e1ec;line-height:1.6}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media(hover:hover) and (pointer:fine){.faq summary:hover::after{color:var(--text)}}
/* Footer (October 18, 2026, owner request): Resend-style. From 1200px the
   giant "godpack" wordmark, cut by a hairline, sits above six columns; footer.js
   draws it on the canvas (letters rise on first view, a foil light follows the
   cursor, the columns blur in as they settle). Below 1200px the canvas is not
   shown and footer.js never starts, so phones and tablets get only the links:
   two columns on phones, three from 768px, 44px rows. */
.gf{margin:auto max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));padding:28px 0 max(32px,env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--muted);font-size:.875rem;line-height:1.45}
.gf-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.gf-art{display:none}
.gf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
.gf-lead{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.gf-address{margin:0;font-size:.8125rem;line-height:1.25rem}
.gf-social{display:flex;gap:10px}
.gf-social a{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff1f;border-radius:50%;background:#14121a;color:#d6d2e0;transition:color .16s,border-color .16s,background-color .16s,transform .16s}
.gf-social svg{display:block}
.gf-col h3{margin:0 0 2px;color:var(--text);font-size:.875rem;font-weight:600;line-height:1.25rem}
.gf-col ul{margin:0;padding:0;list-style:none}
.gf-col a{display:inline-block;padding:12px 0;color:var(--muted);line-height:1.25rem;text-decoration:none;text-wrap:pretty;transition:color .16s,transform .2s cubic-bezier(.16,1,.3,1)}
.gf-price{margin-left:6px;color:var(--faint)}
.gf-bar{display:flex;flex-direction:column;gap:8px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);font-size:.8125rem;line-height:1.25rem}
.gf-bar p{margin:0}
.gf a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
@keyframes gf-in{from{opacity:0;filter:blur(6px);transform:translateY(10px)}}
@media(min-width:768px){
 .gf{margin-left:max(5%,env(safe-area-inset-left));margin-right:max(5%,env(safe-area-inset-right));padding-top:32px}
 .gf-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px}
 .gf-bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:12px 32px}
}
@media(min-width:1200px){
 .gf{margin-left:max(var(--gutter),env(safe-area-inset-left));margin-right:max(var(--gutter),env(safe-area-inset-right));padding-top:72px;border-top:0}
 /* Keep the aspect ratio equal to HEADROOM + CUT + 110 glyph units in footer.js (1202 / 304). */
 .gf-art{display:block;position:relative;width:100%;aspect-ratio:1202/304}
 .gf-art canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
 .gf-grid{grid-template-columns:minmax(200px,1.1fr) repeat(5,minmax(0,1fr));gap:40px 28px;margin-top:8px}
 .gf-lead{grid-column:auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:24px}
 .gf-col h3{margin-bottom:4px}
 .gf-col a{padding:10px 0}
 .gf-bar{margin-top:56px;padding-top:24px;font-size:.75rem;line-height:1.125rem}
 .gf[data-entrance=waiting] .gf-grid>*,.gf[data-entrance=waiting] .gf-bar{opacity:0}
 .gf[data-entrance=played] .gf-grid>*,.gf[data-entrance=played] .gf-bar{animation:gf-in .8s cubic-bezier(.16,1,.3,1) both}
 .gf[data-entrance=played] .gf-grid>:nth-child(1){animation-delay:.55s}
 .gf[data-entrance=played] .gf-grid>:nth-child(2){animation-delay:.62s}
 .gf[data-entrance=played] .gf-grid>:nth-child(3){animation-delay:.69s}
 .gf[data-entrance=played] .gf-grid>:nth-child(4){animation-delay:.76s}
 .gf[data-entrance=played] .gf-grid>:nth-child(5){animation-delay:.83s}
 .gf[data-entrance=played] .gf-grid>:nth-child(6){animation-delay:.9s}
 .gf[data-entrance=played] .gf-bar{animation-delay:1s}
}
@media(hover:hover) and (pointer:fine){.gf-col a:hover{color:var(--text);transform:translateX(2px)}.gf-social a:hover{border-color:#ffffff33;background:#1c1925;color:#fff;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.gf-col a,.gf-social a{transition:none}}