@import url('tokens.css');
html{height:100%;background:var(--ink-16)}
body:not(.legal-page){height:100%;margin:0;padding:0!important;overflow:hidden;background:var(--ink-16)}
body:not(.legal-page)::after{display:none}
body:not(.legal-page)>:not(.small-screen),.legal-page>.dock,.legal-page>.dock-skip{display:none!important}
body.legal-page{padding-bottom:0!important}
body.legal-page::after{display:none}
body:not(.legal-page)>.small-screen{display:grid!important}
.small-screen{position:fixed;z-index:2147483647;inset:0;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:clamp(14px,3svh,28px);padding:max(20px,env(safe-area-inset-top)) 22px max(20px,env(safe-area-inset-bottom));overflow:hidden auto;color:var(--pale-93);font:15px/1.5 var(--sans);text-align:center;background:var(--grain,none),radial-gradient(ellipse 90% 60% at 50% 34%,color-mix(in srgb,var(--ink-34) 62%,transparent),transparent 75%),var(--ink-16)}
.small-screen-logo{display:flex;align-items:center;gap:12px;margin:0}
.small-screen-logo img{flex:none;display:block;width:clamp(58px,17vw,84px);height:auto}
.small-screen-logo i{flex:none;align-self:stretch;width:1px;margin:8px 0;background:color-mix(in srgb,var(--gold) 45%,transparent)}
.small-screen-word{display:grid;gap:3px;text-align:left}
.small-screen-word b{color:var(--pale-93);font:400 clamp(28px,8vw,38px)/1 var(--serif);letter-spacing:-.035em;white-space:nowrap}
.small-screen-word em{color:var(--accent-83);font:italic 400 13px/1.2 var(--serif);letter-spacing:.01em}
.small-screen-stage{position:relative;display:grid;place-items:center;width:min(70vw,38svh,300px);aspect-ratio:1}
.small-screen-ring{position:absolute;inset:0;border:1px solid color-mix(in srgb,var(--rule) 14%,transparent);border-radius:50%;box-shadow:inset 0 0 60px color-mix(in srgb,var(--gold) 6%,transparent);animation:small-screen-spin 110s linear infinite}
.small-screen-ring::before{content:'';position:absolute;inset:11%;border:1px dashed color-mix(in srgb,var(--rule) 12%,transparent);border-radius:50%}
.small-screen-ring img{position:absolute;width:clamp(18px,7%,26px);height:auto;translate:-50% -50%;opacity:.7;animation:small-screen-spin 110s linear infinite reverse}
.small-screen-ring img:nth-child(1){left:50%;top:0}
.small-screen-ring img:nth-child(2){left:97.55%;top:34.55%}
.small-screen-ring img:nth-child(3){left:79.39%;top:90.45%}
.small-screen-ring img:nth-child(4){left:20.61%;top:90.45%}
.small-screen-ring img:nth-child(5){left:2.45%;top:34.55%}
.small-screen-fan{position:relative;width:34%;aspect-ratio:488/680}
.small-screen-fan img{position:absolute;inset:0;width:100%;height:100%;border-radius:4.8%/3.5%;box-shadow:0 18px 30px -14px var(--ink-12),0 0 0 1px color-mix(in srgb,var(--pale-93) 14%,transparent);transform-origin:50% 150%}
.small-screen-fan img:nth-child(1){rotate:-20deg;filter:brightness(.6)}
.small-screen-fan img:nth-child(2){rotate:-10deg;filter:brightness(.8)}
.small-screen-fan img:nth-child(3){rotate:20deg;filter:brightness(.6)}
.small-screen-fan img:nth-child(4){rotate:10deg;filter:brightness(.8)}
.small-screen-note{max-width:34ch;margin:0;color:var(--pale-93);font:400 clamp(17px,4.6vw,20px)/1.4 var(--serif)}
.small-screen-legal{color:var(--mist-85);font-size:13px;text-underline-offset:3px}
@media(orientation:landscape){
  .small-screen{grid-template-columns:auto minmax(0,38ch);grid-template-rows:auto auto auto;justify-content:center;column-gap:clamp(24px,6vw,64px);row-gap:10px;text-align:left}
  .small-screen-stage{grid-row:1/4;width:min(40vw,76svh,300px)}
  .small-screen-note,.small-screen-legal{justify-self:start}
  .small-screen-logo{justify-self:start;align-self:end}
  .small-screen-note{align-self:start}
  .small-screen-legal{align-self:start}
}
@keyframes small-screen-spin{to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){.small-screen-ring,.small-screen-ring img{animation:none}}
