@font-face{font-family:Plex;src:url('assets/plex-sans-light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:Plex;src:url('assets/plex-sans.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:PlexMono;src:url('assets/plex-mono.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--lab:#edf0ee;--ink:#1e2326;--line:#8a969c;--space:#07080b;--gutter:clamp(24px,3.2vw,56px);color-scheme:light}
*{box-sizing:border-box}
html{background:var(--lab);scroll-behavior:auto}
body{margin:0;color:var(--ink);background:var(--lab);font-family:Plex,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}
figure,p,h1{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%;image-rendering:pixelated}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}
::selection{background:#bcc7cc;color:#1e2326}
.stage-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:26px var(--gutter);position:relative;z-index:20}
#study-title{font-family:PlexMono,monospace;font-size:11px;font-weight:400;letter-spacing:.025em;line-height:1.8;padding-top:13px}
.x-link{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0}
.x-link svg{width:17px;height:17px;fill:currentColor}
.x-link:hover svg{opacity:.6}
#approach{background:var(--space);color:#dce3e8}
#stage{position:relative}
#frames{position:relative}
.scale-frame{padding:64px var(--gutter) 100px}
.scale-frame img{width:min(100%,760px);height:auto;margin:auto}
.scale-frame figcaption{max-width:760px;margin:32px auto 0;display:flex;gap:42px;align-items:center;justify-content:space-between}
.scale-frame figcaption p{font-size:20px;line-height:1.45;max-width:330px}
.static-scale{font-size:76px;font-weight:300;white-space:nowrap;font-variant-numeric:tabular-nums}
.static-scale sup{font-size:.4em;vertical-align:super;line-height:0}
.static-scale small{font-size:18px}
#frame-3{background:#6c7479;color:#fff}
#frame-4{background:#bdc5c6;color:var(--ink)}
#frame-5,#frame-6,#frame-7{background:var(--lab);color:var(--ink)}
#approach-hint,.stage-readout{display:none}
#finding{background:var(--lab);color:var(--ink);text-align:center;padding:0 20px 100px}
#hi{font-size:28px;line-height:1.2;font-weight:300}
.scale-bar{width:48px;margin:17px auto 0;font-family:PlexMono,monospace;font-size:9px;color:#637079;letter-spacing:.02em}
.scale-bar i{height:5px;border:1px solid var(--line);border-top:0;display:block;position:relative}
.scale-bar i:before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--line)}
.scale-bar span{display:block;margin-top:7px}
#revealed-name{font-size:13px;line-height:1.7;margin-top:26px}
#revealed-name span{display:block;font-family:PlexMono,monospace;font-size:10px;letter-spacing:.12em;margin-top:6px}
.cinema #approach{height:900vh;height:900svh;position:relative;background:var(--space)}
.cinema #stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--stage-bg,#07080b);color:var(--stage-ink,#dce3e8);--frame-size:min(78svh,72vw)}
.cinema .stage-header{position:absolute;top:0;left:0;width:100%}
.cinema #frames{position:absolute;inset:0;pointer-events:none}
.cinema .scale-frame{width:var(--frame-size);height:var(--frame-size);padding:0;position:absolute;left:50%;top:44%;margin:0;transform:translate(-50%,-50%);transform-origin:center;opacity:0;visibility:hidden;background:transparent;will-change:transform,opacity;mask-image:radial-gradient(ellipse at center,#000 var(--nest-core,58%),transparent 74%)}
.cinema .scale-frame:first-child{opacity:1;visibility:visible}
.cinema .scale-frame img{width:100%;height:100%;max-width:none;object-fit:cover}
.cinema #frame-7{mask-image:radial-gradient(ellipse at center,#000 var(--nest-core,58%),transparent 74%),linear-gradient(0deg,transparent 18%,#000 32%,#000 92%,transparent);mask-composite:intersect}
.cinema #frame-7 img{transform:scale(1.18);transform-origin:50% 30%}
.cinema .scale-frame figcaption{display:none}
.cinema #approach-hint{display:block;position:absolute;left:0;top:59%;width:100%;text-align:center;font-size:12px;letter-spacing:.02em;pointer-events:none;color:#dce3e8;text-shadow:0 1px 12px #07080b}
.cinema .stage-readout{display:flex;position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;align-items:flex-end;justify-content:space-between;gap:30px;pointer-events:none}
#scale-number{font-size:clamp(80px,8.4vw,132px);font-weight:300;line-height:.92;letter-spacing:-.055em;font-variant-numeric:tabular-nums;white-space:nowrap;transition:opacity 120ms ease}
#scale-number sup{display:inline-block;font-size:.38em;position:relative;vertical-align:top;top:.05em;letter-spacing:-.04em;margin-left:.06em;line-height:1}
.metres{font-size:17px;letter-spacing:0;margin-left:15px}
#scale-caption{font-size:20px;line-height:1.45;max-width:360px;width:29%;padding-bottom:3px;transition:opacity 120ms ease}
.cinema #finding{padding:0;position:absolute;top:70%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;background:transparent;opacity:0;visibility:hidden;pointer-events:none}
.cinema #revealed-name{opacity:0;visibility:hidden}
#plate{padding:160px var(--gutter) 80px;background:var(--lab)}
.plate-layout{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(50px,8vw,140px);align-items:center}
.plate-image{position:relative}
.plate-label{display:block;font:10px PlexMono,monospace;letter-spacing:.1em;color:#5e6a70;margin-bottom:22px}
.registration{position:relative;border:1px solid #8a969c;padding:7px}
.registration img{width:100%;height:auto}
.tick{position:absolute;width:15px;height:15px;border-color:var(--line);border-style:solid}
.tl{top:-8px;left:-8px;border-width:1px 0 0 1px}
.tr{top:-8px;right:-8px;border-width:1px 1px 0 0}
.bl{bottom:-8px;left:-8px;border-width:0 0 1px 1px}
.br{bottom:-8px;right:-8px;border-width:0 1px 1px 0}
.plate-ruler{display:flex;align-items:center;gap:13px;margin-top:24px}
.plate-ruler span{height:5px;width:80px;border:1px solid var(--line);background:linear-gradient(90deg,#8a969c 50%,transparent 50%)}
.plate-ruler small{font:9px PlexMono,monospace;color:#5e6a70}
.plate-legend{font-size:18px;line-height:1.7;padding-top:20px}
.plate-legend p+p{margin-top:16px}
.plate-legend em{font-style:normal}
#reply{max-width:1340px;margin:auto;padding:130px var(--gutter) 150px}
.reply-line{font-size:clamp(36px,4.7vw,68px);font-weight:300;line-height:1.15;letter-spacing:-.025em}
#reply-x{display:inline-flex;align-items:center;gap:30px;min-height:48px;margin-top:34px;font-size:17px;border-bottom:1px solid var(--line)}
#reply-x span{display:inline-block;transition:transform 160ms ease}
#reply-x:hover span{transform:translateX(5px)}
#specimen{padding:0 var(--gutter);max-width:1340px;margin:auto}
.catalogue-line{border-top:1px solid var(--line);padding:24px 0 0;font:11px/1.9 PlexMono,monospace;letter-spacing:.01em}
#launch-note{max-width:1000px}
.contract-tools{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:13px}
#contract-address{user-select:all;overflow-wrap:anywhere;max-width:100%;font-size:11px;color:#5e6a70}
#contract-copy{display:inline-flex;align-items:center;gap:10px;padding:0 10px;min-width:70px;min-height:44px;background:none;border:0;color:var(--ink);font-size:10px;cursor:pointer}
#contract-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1}
#contract-copy:disabled{color:#8b9498;cursor:not-allowed}
#token-buy{min-height:44px;align-items:center;text-decoration:underline;text-underline-offset:4px}
#token-buy:not([hidden]){display:inline-flex}
#contract-status{font-size:11px;max-width:720px}
#contract-status:empty{display:none}
footer{padding:70px var(--gutter) 32px;max-width:1340px;margin:0 auto;color:#677178;font-size:11px;line-height:1.6}
@media(min-width:1600px){.cinema #stage{--frame-size:min(78svh,72vw,1000px)}}
@media(max-width:700px){
 :root{--gutter:24px}
 .stage-header{padding-top:18px;gap:12px}
 #study-title{font-size:9px;line-height:1.8;padding-top:10px}
 #study-title span{display:block}
 .cinema #stage{--frame-size:min(65svh,140vw)}
 .cinema .scale-frame{top:43%}
 .cinema .stage-readout{bottom:29px;display:flex;flex-direction:column;align-items:flex-start;gap:27px}
 #scale-caption{order:-1;width:100%;font-size:18px;max-width:300px;min-height:52px}
 #scale-number{font-size:84px}
 .metres{font-size:15px}
 .cinema #approach-hint{top:54%;font-size:11px}
 .cinema #finding{top:65%}
 #revealed-name{font-size:12px}
 #plate{padding:105px var(--gutter) 45px}
 .plate-layout{display:block}
 .plate-legend{padding-top:50px;font-size:17px}
 .plate-legend p+p{margin-top:10px}
 #reply{padding:80px var(--gutter) 90px}
 .reply-line{font-size:clamp(34px,8.3vw,48px)}
 #reply-x{font-size:16px;margin-top:26px}
 .catalogue-line{font-size:10px;line-height:1.9;padding-top:20px}
 .contract-tools{gap:8px 15px}
 #contract-address{font-size:10px}
 footer{font-size:10px;padding-top:50px}
 .scale-frame{padding:45px 0 60px}
 .scale-frame figcaption{padding:0 var(--gutter);display:flex;flex-direction:column;align-items:flex-start;gap:20px}
 .scale-frame figcaption p{font-size:18px;order:-1}
 .static-scale{font-size:70px}
}
@media(max-width:700px) and (max-height:740px){
 .cinema #stage{--frame-size:min(58svh,140vw)}
 .cinema .scale-frame{top:37%}
 .cinema #finding{top:59%}
 .cinema #scale-number{font-size:60px}
 .cinema #finding .scale-bar{margin-top:13px}
 .cinema #revealed-name{margin-top:18px}
 .cinema #approach-hint{top:48%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}