@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Thin.otf') format('opentype');font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-ThinItalic.otf') format('opentype');font-weight:100;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Ultralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-UltralightItalic.otf') format('opentype');font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Book.otf') format('opentype');font-weight:350;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-BookItalic.otf') format('opentype');font-weight:350;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-SemiBoldItalic.otf') format('opentype');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-Black.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Suisse;src:url('assets/fonts/SuisseIntl-BlackItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:Livret;src:url('assets/fonts/TT Livret Text Trial Regular.ttf')}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:white;color:#666;font:18px/1.2 Suisse,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:0;border-radius:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #666;outline-offset:5px}p,h1,h2,h3{margin:0;font-weight:400}h1,h2{font-family:Livret,Georgia,serif}#story{height:470svh;position:relative}.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#fff}.screen{position:absolute;inset:0;display:grid;place-items:center}.artboard{width:1440px;height:740px;position:absolute;transform:scale(var(--scale,1));transform-origin:center}.intro{z-index:2;background:#fff}header{position:absolute;left:30px;right:30px;top:20px;height:52px;display:flex;align-items:center;justify-content:space-between;color:#444;z-index:2}nav{display:flex;gap:30px}.logo{position:absolute;left:50%;transform:translateX(-50%);width:55.517px;height:50px}.share,.button{display:inline-flex;align-items:center;justify-content:center;background:#444;color:white;padding:16px 24px;font-size:18px;min-height:52px}.share:hover,.button:hover{background:#222}h1{position:absolute;top:101px;left:0;width:100%;font-size:68px;line-height:.95;text-align:center}.scene{position:absolute;left:63px;top:268px;width:1313.422px;height:577.925px}.scene img{width:1313.422px;height:577.925px;display:block}.yellow-edge{position:absolute;left:0;right:0;bottom:0;height:18px;background:#f6ff00}.scroll-hint{position:absolute;bottom:28px;left:0;width:100%;text-align:center;font-size:16px;z-index:4}.scroll-hint span{display:block;margin-top:10px}.labels{position:absolute;inset:0;pointer-events:none}.label{position:absolute;background:#f6ff00;height:58px;display:grid;place-items:center;font-size:22px;color:#666;transform-origin:center;box-shadow:none;clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);will-change:transform,opacity}.label:after{content:"";position:absolute;right:0;bottom:0;width:24px;height:24px;background:#444}.paper{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}.skip{position:absolute;right:30px;bottom:25px;background:transparent;color:#666;font-size:14px;z-index:7;padding:8px}.progress{height:2px;position:absolute;bottom:0;left:0;right:0;z-index:8;background:#44444410}.progress i{display:block;height:100%;background:#666;transform-origin:left;transform:scaleX(0)}.about-copy{position:absolute;left:30px;top:149px;width:504px}.about h2{font-size:60px;line-height:.9;white-space:nowrap}.descriptor{font-size:22px;color:#9e9e9e;margin-top:20px}ol{list-style:none;padding:0;margin:70px 0 65px;width:447px}li{display:flex;gap:16px;margin-bottom:26px}li+li{border-top:2px solid #ddd;padding-top:26px}li>span{font:42px/1 Livret,Georgia,serif}li h3{font-size:18px;color:#9e9e9e;margin-bottom:10px}li p{font-size:18px}.instruction{position:absolute;left:613px;top:149px;width:797px;height:487.056px}.instruction>div{position:absolute}.instruction img{display:block;width:100%;height:100%}.instruction .itext{position:absolute;font-size:15.694px}.instruction .itext.a{left:40.4%;top:29.77%;transform:rotate(-17deg)}.instruction .itext.b{left:53.95%;top:50.1%;transform:rotate(10.96deg)}.instruction .itext.c{left:35.26%;top:68.99%;transform:rotate(-9.92deg)}footer{min-height:40svh;padding:80px 30px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}footer>p{font:32px/1.1 Livret,Georgia,serif}footer .restart{background:transparent;color:#666;font-size:16px}.toast{position:fixed;bottom:35px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#444;color:white;padding:15px 24px;z-index:20;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:700px){.artboard{transform:scale(var(--scale));}.skip{right:12px;bottom:16px;font-size:12px}.scroll-hint{font-size:13px;bottom:40px}.about .artboard{width:390px;height:780px;transform:scale(var(--mobile-scale));}header{left:20px;right:20px}.about header nav{font-size:13px;gap:16px}.about header .logo{width:32px;height:30px}.about header .share{font-size:11px;padding:10px;min-height:35px}.about-copy{left:20px;top:110px;width:350px}.about h2{font-size:42px}.descriptor{font-size:18px}ol{margin:30px 0;width:350px}li p{font-size:16px}.instruction{width:350px;height:214px;left:20px;top:550px}.instruction .itext{font-size:7px}footer{padding:50px 20px;gap:20px}footer>p{font-size:26px;text-align:center}}@media(prefers-reduced-motion:reduce){#story{height:100svh}.intro,.paper,.skip,.progress{display:none!important}.about{visibility:visible!important}}

/* Viewport navigation stays above the scene regardless of canvas scaling. */
.screen>header{position:absolute;top:20px;left:30px;right:30px;height:52px;z-index:3}.yellow-edge{height:22%;min-height:110px;background:linear-gradient(to bottom,rgba(246,255,0,0) 0%,#f6ff00 70%,#f6ff00 100%);pointer-events:none}.scroll-hint{bottom:30px}.scroll-hint span{display:none}@media(max-width:700px){.screen>header{top:16px;left:16px;right:16px;height:36px}.screen>header nav{font-size:13px;gap:16px}.screen>header .logo{width:32px;height:30px}.screen>header .share{font-size:11px;padding:10px;min-height:35px}.yellow-edge{height:19%;min-height:100px}.scroll-hint{bottom:30px;font-size:13px}.skip{bottom:7px;font-size:10px}}

/* The initial scene has a clean paper edge, without a gradient. */
.yellow-edge{height:18px;min-height:0;background:#f6ff00}

/* Fade the illustration into the white paper at the bottom. */
.yellow-edge{height:22%;min-height:110px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 75%,#fff 100%)}

/* Captions share the geometric centers and angles of the illustrated yellow labels. */
.instruction .itext{white-space:nowrap;line-height:1}.instruction .itext.a{left:43.53%;top:32.95%;transform:translate(-50%,-50%) rotate(-17deg)}.instruction .itext.b{left:60.585%;top:53.575%;transform:translate(-50%,-50%) rotate(10.96deg)}.instruction .itext.c{left:46%;top:73.49%;transform:translate(-50%,-50%) rotate(-9.92deg)}

/* Scene and its fade stay in one stacking context under every label. */
.intro .artboard>.yellow-edge{z-index:1;right:auto;min-height:0}.labels{z-index:2}