@font-face{font-family:'Architects Daughter';src:url('../../whiteboard/studio/fonts/ArchitectsDaughter-Regular.ttf') format('truetype');font-display:swap}
:root{--ink:#191322;--paper:#fff7dc;--violet:#502397;--lilac:#d8bdf6;--yellow:#ffe249;--pink:#ff71ad;--cyan:#8bebe7;--line:2px solid var(--ink);--body:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;--display:'Impact','Arial Narrow','PingFang SC',sans-serif;--mono:'Courier New',monospace;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--body)}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ce155f;outline-offset:5px}button:hover{filter:brightness(.96)}button,a{touch-action:manipulation}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.05}h2{font-size:clamp(36px,4.8vw,62px);font-weight:800;letter-spacing:-.055em}h3{font-size:23px;font-weight:750;letter-spacing:-.03em}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.section{padding-block:110px}.eyebrow{font:700 12px/1.5 var(--mono);letter-spacing:.09em}.masthead{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:var(--line);gap:24px}.brand{position:relative;font-size:14px;line-height:1.05;letter-spacing:-.035em;font-weight:900;text-decoration:none}.brand-dot{position:absolute;width:15px;height:15px;right:-25px;top:0;background:var(--pink);border:var(--line);border-radius:50%}.masthead nav{display:flex;gap:30px;font-size:13px;font-weight:650}.masthead nav a{text-decoration:none}.masthead nav a:hover{text-decoration:underline}.languages{display:flex;border:var(--line);box-shadow:3px 3px 0 var(--ink)}.languages button{border:0;background:none;padding:7px 11px;font:700 12px var(--body)}.languages [aria-pressed=true]{background:var(--ink);color:var(--paper)}.skip{position:absolute;left:18px;top:-100px;z-index:5;padding:12px;background:var(--yellow)}.skip:focus{top:12px}.hero{padding:72px 0 60px;display:grid;grid-template-columns:1.85fr 1fr;gap:60px;align-items:end}.hero .eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:24px}.square{display:inline-block;width:10px;height:10px;background:var(--violet)}h1{font-family:var(--display);font-size:clamp(48px,6.7vw,100px);letter-spacing:-.025em;font-weight:900;line-height:.99}h1>span{display:block;white-space:nowrap}.outline{color:var(--paper);-webkit-text-stroke:2px var(--ink);margin-top:8px}.hero-copy{position:relative;padding-bottom:5px}.hero-copy p{max-width:330px;font-size:17px;line-height:1.65;margin-bottom:25px}.token{position:absolute;right:5px;top:-62px;font:900 50px/1 var(--display);color:var(--violet);transform:rotate(12deg)}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:25px;border:var(--line);padding:13px 21px;font-size:14px;font-weight:800;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}.yellow{background:var(--yellow)}.button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}.section-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:15px}.section-bar h2{font:800 16px/1.4 var(--body);letter-spacing:0}.section-bar>span{font:11px var(--mono)}.cabinet{position:relative;background:repeating-conic-gradient(from 0deg at 50% 45%,#502397 0deg 15deg,#5e2caa 15deg 30deg);border:3px solid var(--ink);padding:30px 8% 22px;box-shadow:8px 8px 0 var(--ink);border-radius:34px 34px 20px 20px}.marquee{display:flex;justify-content:space-between;align-items:center;gap:12px;width:83%;margin:0 auto 20px;background:var(--yellow);border:3px solid var(--ink);box-shadow:4px 5px 0 var(--ink);padding:12px 24px;transform:rotate(-1deg);font:900 clamp(13px,1.8vw,24px)/1.1 var(--body);letter-spacing:-.025em}.lamp{width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);flex-shrink:0}.cabinet-top{display:flex;justify-content:space-between;align-items:center;color:var(--paper);font:700 12px var(--mono);margin-bottom:12px;gap:12px}.life-label{display:flex;align-items:center;gap:13px}.lives{font-size:23px;letter-spacing:3px;color:var(--pink);text-shadow:2px 2px var(--ink);line-height:1}.screen{border:5px solid var(--ink);background:var(--ink);border-radius:9px;box-shadow:0 0 0 5px #d585d1,5px 6px 0 5px var(--ink);overflow:hidden}canvas{display:block;width:100%;height:auto;aspect-ratio:2/1}.screen noscript img{width:100%}.screen:has(noscript img) canvas{display:none}.screen noscript p{color:white;padding:16px}.cabinet-bottom{display:flex;align-items:center;gap:15px;margin-top:23px;color:var(--paper);font:700 11px var(--mono)}.fuse{height:12px;background:#241338;border:2px solid var(--ink);flex:1}.fuse i{display:block;width:75%;height:100%;background:var(--yellow);transform-origin:left}.round-label{color:var(--cyan)}.transport{display:flex;align-items:center;gap:20px;padding:25px 0 21px}.transport .button{min-width:148px;padding:11px 17px}.replay{background:none;border:0;font-size:13px;font-weight:700;padding:12px 0}.transport input{accent-color:var(--violet);flex:1;min-width:60px;cursor:pointer;height:22px}.transport output{font:12px var(--mono);white-space:nowrap}.materials{display:grid;grid-template-columns:repeat(4,1fr);border:var(--line)}.materials button{display:flex;align-items:center;gap:12px;padding:17px 14px;background:none;border:0;text-align:left;border-right:var(--line);min-width:0}.materials button:last-child{border-right:0}.materials [aria-pressed=true]{background:var(--lilac)}.materials small{display:block;font:11px var(--mono);margin-bottom:3px}.materials b{font-size:14px;line-height:1.25;display:block}.swatch{display:flex;align-items:center;justify-content:center;width:45px;height:45px;flex-shrink:0;border:var(--line);font:bold 24px/1 var(--mono)}.swiss{background:#ff512e;color:var(--paper)}.pixel{background:#17183d;color:#ffd754}.terminal{background:#20190f;color:#ffbd58;font-size:19px}.blueprint{background:#1a4e9b;color:#c6e5ff}.material-arrow{margin-left:auto;font-size:18px}.caption{font-size:12px;color:#59505f;line-height:1.7;margin-top:15px;max-width:800px}.section-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:20px 50px;align-items:end;margin-bottom:45px}.section-heading .eyebrow{grid-column:1/-1}.section-heading>p:last-child:not(.eyebrow){max-width:390px;margin-left:auto;color:#59505f}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.rules article{border-top:var(--line);padding-top:20px}.rule-art{height:165px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:25px;overflow:hidden}.command-art{background:var(--yellow)}.command-art>span{font:70px/1 var(--display);transform:rotate(-8deg)}.command-art i{position:absolute;top:8px;left:15px;font:700 12px var(--mono);font-style:normal}.contact-art{background:var(--cyan)}.contact-art i{width:90px;height:30px;background:var(--paper);border:3px solid var(--ink);position:absolute;top:45px;box-shadow:5px 5px 0 var(--ink)}.contact-art b{position:absolute;top:8px;font-size:25px}.contact-art span{width:75px;height:38px;background:var(--pink);border:3px solid var(--ink);position:absolute;top:89px}.contact-art:after{content:'';position:absolute;width:180px;height:3px;background:var(--ink);bottom:35px}.heart-art{background:var(--lilac);font:50px/1 var(--body);gap:8px}.heart-art span{color:var(--violet)}.heart-art i{font-style:normal}.number{font:700 12px var(--mono);display:block;margin-bottom:16px}.rules h3{margin-bottom:16px}.rules p,.notes p{font-size:14px;line-height:1.8;color:#59505f}.rhythm{background:var(--ink);color:var(--paper);padding:75px 0}.rhythm-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.rhythm h2{color:var(--yellow);margin:23px 0}.rhythm p:not(.eyebrow){font-size:15px;max-width:430px;color:#d8d0e0}.score-row{height:72px;border-top:1px solid #695c77;position:relative;margin-left:90px}.score-row>span{position:absolute;right:calc(100% + 16px);top:23px;font:10px var(--mono)}.score-row i{position:absolute;top:16px;left:var(--start);width:var(--width);height:37px;background:var(--pink);border:3px solid var(--ink)}.score-row:nth-child(2) i{background:var(--cyan);height:24px}.score-row:nth-child(3) i{background:var(--yellow);height:16px}.beats{display:flex;justify-content:space-between;margin:0 0 20px 90px;color:var(--yellow)}.rhythm-score p{font-size:12px!important;border-top:1px solid #695c77;padding-top:15px}.repo-banner{background:var(--yellow);border:var(--line);box-shadow:5px 5px 0 var(--ink);padding:26px 30px;display:flex;align-items:center;gap:30px;text-decoration:none}.repo-banner small{display:block;font:11px var(--mono);margin-bottom:9px}.repo-banner strong{display:block;font-size:27px;line-height:1.3;letter-spacing:-.04em}.repo-banner span span{font-size:13px;display:block;margin-top:4px}.repo-symbol{font:65px/1 var(--display)}.repo-banner>span:last-child{margin-left:auto;font-size:27px}.steps{padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin:50px 0}.steps li{min-width:0}.steps li>span{font:12px var(--mono)}.steps h3{margin:14px 0}.steps p{font-size:14px;color:#59505f;line-height:1.8}.steps pre{white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.75 var(--mono);border-top:var(--line);padding-top:18px;margin-top:20px}.steps a{font-size:13px;display:inline-block;margin-top:17px}.command{display:flex;align-items:center;gap:10px;border:var(--line);padding:12px;margin-top:20px;background:#fffdf5}.command code{font:11px/1.6 var(--mono);overflow-wrap:anywhere;min-width:0}.command button{border:1px solid var(--ink);background:var(--lilac);padding:5px 8px;font-size:11px;flex-shrink:0}#copy-status{min-height:22px;font-size:12px;margin-top:6px}.starter-prompt{background:var(--lilac);padding:35px;display:grid;grid-template-columns:1fr 2.6fr;gap:18px 30px;border:var(--line)}.starter-prompt blockquote{margin:0;font-size:20px;line-height:1.6;font-weight:550;letter-spacing:-.02em}.starter-prompt>a{grid-column:2;font-size:13px}.prompt-symbol{font:70px/1 var(--display);display:block;margin-top:25px}.notes{padding-top:0}.notes-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:35px}.notes-grid article{border-top:var(--line);padding-top:24px}.notes-grid h3{margin-bottom:16px}.status{display:inline-block;background:var(--cyan);border:1px solid var(--ink);padding:4px 7px;font:10px var(--mono);margin-bottom:15px}.resource-links{display:flex;flex-wrap:wrap;gap:15px 30px;margin-top:35px;font-size:13px}.sources{display:grid;grid-template-columns:1fr 2fr;gap:50px;border-top:var(--line);padding-top:34px;padding-bottom:60px}.sources h3{font-size:24px;margin-bottom:17px}.sources p{font-size:14px;line-height:1.8;margin-bottom:12px;color:#59505f}.sources a{font-size:13px}footer{padding:30px 0 45px;border-top:var(--line);display:flex;align-items:center;gap:40px;justify-content:space-between}footer p{font-size:12px}footer>a:last-child{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}html[lang=zh] h1{font:900 clamp(40px,5.7vw,80px)/1.15 var(--body);letter-spacing:-.06em}html[lang=zh] .outline{-webkit-text-stroke:1.5px var(--ink)}html[lang=zh] h2{line-height:1.18;letter-spacing:-.045em}
@media(min-width:1500px){.hero h1{font-size:103px}}
@media(max-width:1000px){.wrap{width:calc(100% - 56px)}.hero{gap:30px;grid-template-columns:1.6fr 1fr}.hero-copy p{font-size:15px}.materials button{gap:8px;padding:14px 10px}.materials b{font-size:12px}.material-arrow{display:none}.rhythm-layout{gap:45px}.steps{gap:22px}.rules{gap:22px}.notes-grid{gap:22px}.masthead nav{gap:20px}.marquee{width:90%}.cabinet{padding-inline:6%}.section{padding-block:80px}.notes{padding-top:0}}
@media(max-width:700px){.wrap{width:calc(100% - 36px)}.masthead{height:82px;gap:12px}.masthead nav{margin-left:auto}.masthead nav a:not(:first-child){display:none}.masthead nav a{font-size:12px}.brand{font-size:11px}.brand-dot{width:10px;height:10px;right:-17px}.languages button{padding:7px 8px;font-size:10px}.hero{display:block;padding:44px 0 32px}h1{font-size:clamp(45px,11.5vw,77px)}.hero .eyebrow{font-size:10px;margin-bottom:22px}.outline{-webkit-text-stroke:1.5px var(--ink)}.hero-copy{margin-top:26px}.hero-copy p{max-width:90%;font-size:14px;margin-bottom:20px}.token{right:0;top:-10px;font-size:38px}.button{font-size:12px;padding:12px 17px}.section-bar{align-items:flex-start;flex-direction:column;gap:4px}.section-bar h2{font-size:13px}.section-bar>span{font-size:9px}.cabinet{padding:17px 5% 15px;box-shadow:5px 5px 0 var(--ink);border-radius:20px 20px 12px 12px}.marquee{width:95%;padding:10px 8px;font-size:clamp(10px,2.8vw,17px);margin-bottom:17px;gap:7px}.lamp{width:7px;height:7px;border-width:1px}.cabinet-top{font-size:9px;margin-bottom:9px}.life-label{gap:5px}.lives{font-size:14px;letter-spacing:0}.screen{border-width:3px;box-shadow:0 0 0 3px #d585d1,3px 4px 0 3px var(--ink)}.cabinet-bottom{font-size:8px;margin-top:16px;gap:8px}.fuse{height:9px}.transport{gap:12px;flex-wrap:wrap;padding-block:20px 17px}.transport .button{min-width:132px}.replay{font-size:12px;margin-left:auto}.transport input{flex-basis:calc(100% - 125px)}.transport output{font-size:11px}.materials{grid-template-columns:1fr 1fr}.materials button{padding:13px;border-bottom:var(--line)}.materials button:nth-child(2){border-right:0}.materials button:nth-child(n+3){border-bottom:0}.materials b{font-size:12px}.materials small{font-size:9px}.swatch{width:34px;height:34px;font-size:21px}.terminal{font-size:15px}.caption{font-size:11px}.section{padding-block:65px}.section-heading{display:block;margin-bottom:30px}.section-heading .eyebrow{margin-bottom:18px}.section-heading>p:last-child:not(.eyebrow){margin:20px 0 0;font-size:14px;max-width:none}h2{font-size:39px}.rules{display:block}.rules article{margin-bottom:30px}.rule-art{height:155px;margin-bottom:20px}.rules article:last-child{margin-bottom:0}.rules h3{font-size:23px}.rhythm{padding-block:50px}.rhythm-layout{grid-template-columns:1fr;gap:35px}.rhythm h2{font-size:46px}.rhythm p:not(.eyebrow){font-size:14px}.score-row{height:58px;margin-left:75px}.score-row>span{font-size:9px;right:calc(100% + 12px)}.beats{margin-left:75px}.repo-banner{padding:20px 16px;gap:15px}.repo-symbol{font-size:42px}.repo-banner strong{font-size:22px}.repo-banner small{font-size:8px}.repo-banner span span{font-size:11px}.repo-banner>span:last-child{display:none}.steps{display:block;margin-block:36px}.steps li+li{margin-top:30px}.steps h3{font-size:22px}.starter-prompt{display:block;padding:24px}.starter-prompt blockquote{font-size:18px;margin:20px 0}.starter-prompt .prompt-symbol{display:none}.notes{padding-top:0}.notes-grid{display:block}.notes-grid article+article{margin-top:30px}.sources{display:block;padding-top:28px;padding-bottom:35px}.sources>.eyebrow{margin-bottom:25px}.sources h3{font-size:23px}.resource-links{font-size:12px;gap:13px 20px}footer{gap:20px;flex-wrap:wrap;padding-bottom:30px}footer .brand{font-size:13px}footer p{font-size:11px}html[lang=zh] h1{font-size:clamp(38px,10vw,68px)}html[lang=zh] h2{font-size:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

html[lang=zh] .section-bar h2{font-size:16px;letter-spacing:0;line-height:1.4}@media(max-width:700px){html[lang=zh] .section-bar h2{font-size:14px}}

/* The finished export leads; the interactive study remains below it. */
.final-screening{--screen-accent:#502397;--screen-on-accent:#fff7dc}
.hero{padding-top:30px;padding-bottom:28px}.hero h1{font-size:clamp(38px,6vw,76px)}.hero-copy .token{display:none}.hero-copy p{font-size:16px}.study{padding-top:44px;border-top:2px solid var(--ink)}