:root{--ink:#121316;--ink-2:#1b1c20;--rule:#34363c;--graphite:#9a9ca3;--paper:#edebe4;--snap:#fffc00;--signal:#3a3dff;--signal-deep:#2a2ce0;--ease:cubic-bezier(.16,1,.3,1);--mono:"Azeret Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;}*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100dvh;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:400;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden;}::selection{background:var(--snap);color:var(--ink)}.sheet{flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "head" "sub" "stage" "key" "act";grid-template-rows:auto auto auto 1fr auto auto;gap:clamp(.7rem,.5rem + 1vw,1.2rem);padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));width:100%;max-width:1240px;margin:0 auto;}.top{grid-area:top;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:10px;}.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:clamp(.95rem,.85rem + .4vw,1.15rem);letter-spacing:-.01em}.brand img{width:clamp(40px,6vw + 18px,72px);height:auto;aspect-ratio:1;border-radius:22%}.sheet-id{font-size:clamp(.76rem,.64rem + .2vw,.8rem);color:var(--graphite);text-align:right;line-height:1.35}h1{grid-area:head;margin:0;font-weight:800;font-size:clamp(1.62rem,1.1rem + 2.6vw,3.5rem);line-height:1.04;letter-spacing:-.045em;text-wrap:balance;max-width:16ch;}h1 .hl{color:var(--snap)}.sub{grid-area:sub;margin:0;font-size:clamp(.82rem,.76rem + .3vw,1rem);line-height:1.5;color:var(--graphite);max-width:46ch;}.sub strong{color:var(--paper);font-weight:600}.stage{grid-area:stage;display:flex;align-items:center;justify-content:space-between;gap:10px;}.edge{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.76rem;color:var(--graphite);letter-spacing:.06em;white-space:nowrap;}.edge.r{transform:none}.mark{-webkit-tap-highlight-color:transparent;appearance:none;border:0;background:none;color:inherit;font:inherit;padding:6px;margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:10px;border-radius:12px;}.mark:focus-visible{outline:3px solid var(--snap);outline-offset:4px}.sq{position:relative;display:block;width:min(46vw,28dvh,300px);aspect-ratio:1;border-radius:14%;background:var(--snap);}.hole{position:absolute;inset:clamp(7px,1.6vw,13px);background:var(--ink);border-radius:10%;transform:scale(0);transition:transform .9s var(--ease);}.read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--snap);font-weight:600;font-size:clamp(.72rem,.6rem + .6vw,1.05rem);opacity:0;transform:scale(.92);transition:opacity .5s var(--ease) .15s,transform .9s var(--ease) .1s;text-align:center;padding:8px;}.read span{color:var(--graphite);font-weight:400;font-size:.82em}.cap{font-size:.8rem;color:var(--paper);display:flex;gap:8px;align-items:baseline}.cap em{font-style:normal;color:var(--graphite)}.is-open .hole{transform:none}.is-open .read{opacity:1;transform:none}.key{grid-area:key;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);}.key li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:clamp(.8rem,.7rem + .2vw,.9rem);line-height:1.25;border-bottom:1px solid var(--rule);}.key li:nth-child(odd){padding-right:10px}.key svg{flex:none;width:14px;height:14px;color:var(--paper)}.key .solid{transition:opacity .5s var(--ease)}.is-open .key .solid{opacity:0}.act{grid-area:act;display:flex;flex-direction:column;gap:8px}.cta{-webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 22px;background:var(--signal);color:#fff;text-decoration:none;font-weight:800;font-size:clamp(1rem,.94rem + .3vw,1.15rem);letter-spacing:-.01em;border-radius:12px;transition:background-color .2s ease,transform .2s var(--ease);}.cta svg{width:16px;height:16px}.cta:focus-visible{outline:3px solid var(--snap);outline-offset:3px}.cta:active{transform:scale(.98)}@media (hover: hover) and (pointer: fine){.cta:hover{background:var(--signal-deep)}.mark:hover .cap em{color:var(--paper)}}.under{margin:0;font-size:.8rem;color:var(--graphite);line-height:1.4;text-align:center}footer{padding:8px max(18px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));font-size:.76rem;color:var(--graphite);text-align:center;max-width:1240px;width:100%;margin:0 auto;}@media (min-width: 900px){.sheet{grid-template-columns:minmax(0,1.15fr) auto minmax(0,.85fr);grid-template-rows:auto auto 1fr auto;grid-template-areas: "top top top" "head head ." "sub stage key" "act stage key";column-gap:clamp(24px,3vw,56px);row-gap:22px;padding-top:22px;padding-left:40px;padding-right:40px;}h1{max-width:18ch}.sub{align-self:start}.stage{align-self:end;gap:18px}.sq{width:min(26vw,38dvh,300px)}.key{grid-template-columns:1fr;align-self:end}.key li:nth-child(odd){padding-right:0}.act{align-self:end;max-width:360px}.under{text-align:left}footer{padding-left:40px;padding-right:40px;text-align:left}}@media (max-height: 700px) and (max-width: 899px){.sq{width:min(36vw,22dvh)}.key li{padding:7px 0}}@media (prefers-reduced-motion: reduce){.hole,.read,.key .solid,.cta{transition:none}}html,body{max-width:100%;overflow-x:clip}