:root{--paper:#edf1f2;--ink:#263139;--muted:#65747e;--line:#ccd5db;--purple:#6738b5;--white:#fcfcfc;--display:Impact,'Arial Narrow','PingFang SC',sans-serif;--body:'Avenir Next','Trebuchet MS','PingFang SC',sans-serif;--mono:'Courier New',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--body)}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--purple);outline-offset:5px}button{border:0;background:transparent}a:hover{color:var(--purple)}.wrap{width:min(1280px,calc(100% - 88px));margin-inline:auto}.masthead{display:flex;align-items:center;gap:36px;padding-block:27px;border-bottom:1px solid var(--line)}.brand{font-size:14px;font-weight:800;letter-spacing:.12em;text-decoration:none;white-space:nowrap}.brand span{font-weight:500;letter-spacing:.05em}.back{margin-left:auto;font-size:14px;text-decoration:none}.languages{display:flex;gap:3px;border:1px solid var(--line);padding:3px;border-radius:6px}.languages button{padding:3px 9px;font-size:12px;border-radius:3px}.languages button[aria-pressed=true]{background:var(--ink);color:white}.skip{position:absolute;top:-100px;left:24px;padding:8px;background:white;z-index:10}.skip:focus{top:16px}.intro{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:5vw;padding-top:58px;padding-bottom:44px}.eyebrow,.mono,.style-name,.rule-index,.status{font:11px/1.5 var(--mono);letter-spacing:.1em}.eyebrow{margin:0 0 22px;display:flex;align-items:center;gap:9px}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--purple)}h1{font:clamp(58px,6.8vw,104px)/.94 var(--display);letter-spacing:-.018em;margin:0}h1 em{font-style:normal;color:var(--paper);-webkit-text-stroke:1.7px var(--ink)}h2,h3,p{margin-top:0}.intro-copy{max-width:430px;padding-bottom:5px}.style-name{color:var(--purple);font-weight:bold;margin-bottom:14px}.intro-copy>p:not(.style-name){font-size:18px;line-height:1.7;margin-bottom:23px}.text-link{font-size:14px;font-weight:650}.study-top{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:15px 0;gap:15px}.study-top h2{font-size:15px;font-weight:600;margin:0}.study-top .mono{color:var(--muted);font-size:10px}.screen{border:1px solid #d1dadd;border-radius:9px;overflow:hidden;background:var(--paper)}#study{display:block;width:100%;height:auto}.svg-title{font:700 19px var(--body);fill:#242b31}.svg-sub{font:12px var(--body);fill:#7a858c}.chart-tabs text{font:9px var(--mono);fill:#404c53}.grid-lines path{fill:none;stroke:#dde2e5;stroke-width:1}.tick-labels{font:12px var(--mono);fill:#8a939a;text-anchor:end}.chart-legend text{font:11px var(--body);fill:#6d7980}.chart-legend path{stroke-width:2;stroke-linecap:round}.event-over{font:700 11px var(--body);fill:#30383e}.event-title{font:19px var(--body);fill:#30383e}#headline{font:38px var(--display);fill:white;stroke:#252b30;stroke-width:3.5px;stroke-linejoin:round;paint-order:stroke fill}#burst text{font:40px var(--display);fill:white;stroke:#252b30;stroke-width:2px;paint-order:stroke fill}.transport{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.play-button{background:var(--ink);color:white;border-radius:5px;padding:9px 17px;font-size:13px;min-width:116px}.play-button:hover{background:var(--purple)}.replay-button{font-size:13px;white-space:nowrap}#timeline{flex:1;min-width:50px;accent-color:var(--purple);cursor:pointer}#time{font-size:11px;white-space:nowrap}.phases{display:grid;grid-template-columns:repeat(4,1fr)}.phases button{display:flex;align-items:center;gap:14px;text-align:left;padding:21px 8px;border-bottom:2px solid transparent;transition:background .15s,border-color .15s}.phases button span{font:11px var(--mono);color:var(--muted)}.phases button b{font-size:13px;font-weight:500}.phases button[aria-current=true]{border-bottom-color:var(--purple);background:#e5e4ed}.study-caption{max-width:670px;color:var(--muted);font-size:13px;margin:18px 0 0}.section{padding-block:100px}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:0 6vw;align-items:end}.section-heading .eyebrow{grid-column:1/-1}.section-heading h2,.create h2,.rhythm h2{font:clamp(36px,4.1vw,60px)/1.08 Georgia,'Songti SC',serif;letter-spacing:-.04em;margin:0}.section-heading>p:last-child{max-width:390px;margin:0 0 6px;font-size:17px}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:55px}.rules article{border-top:1px solid #abb9c0;padding-top:17px;position:relative}.rule-index{color:var(--muted)}.rules h3{font-size:19px;line-height:1.35;margin:24px 0 12px}.rules p{font-size:15px;color:var(--muted);max-width:340px}.palette{display:flex;margin-top:26px;height:43px;gap:9px}.palette i{width:43px;border-radius:50%;background:var(--color);border:1px solid #b5bdc2}.eyes{display:flex;align-items:center;justify-content:center;gap:4px;background:var(--purple);border:2px solid var(--ink);width:63px;height:63px;border-radius:50%;margin-top:23px}.eyes i{position:relative;width:22px;height:24px;background:white;border:1.5px solid var(--ink);border-radius:50%}.eyes i:after{content:'';position:absolute;width:8px;height:10px;background:var(--ink);border-radius:50%;right:4px;top:6px}.type-specimen{font:58px/1 var(--display);color:#f2d762;-webkit-text-stroke:2px var(--ink);transform:rotate(-5deg);width:max-content;margin-top:25px}.rhythm{background:#263139;color:#f5f5f0;padding-block:72px}.rhythm-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:9vw;align-items:center}.rhythm .eyebrow{color:#bccacb}.rhythm p:not(.eyebrow){max-width:390px;color:#bccacb;margin:25px 0 0}.sound-score{border-top:1px solid #647078;border-bottom:1px solid #647078;padding:20px 0;font:10px var(--mono);letter-spacing:.13em;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#ffffff0b calc(25% - 1px),#ffffff0b 25%)}.sound-score>div{display:flex;align-items:center;gap:18px;min-height:55px}.sound-score span{width:58px;color:#bac3c8;flex-shrink:0}.voice-bar{width:40%;height:17px;background:repeating-linear-gradient(90deg,#d3dcd8 0,#d3dcd8 2px,transparent 2px,transparent 5px);border-radius:6px}.voice-bar.short{width:20%}.music-bar{width:75%;height:25px;background:#b7a2d2;clip-path:polygon(0 0,100% 0,100% 100%,83% 100%,73% 35%,38% 35%,27% 100%,0 100%)}.sound-score b{font-size:30px;flex:1;color:#f2d762;font-weight:400}.sound-score .score-axis{border-top:1px solid #647078;min-height:36px;justify-content:space-between;margin-top:15px;padding-top:10px}.score-axis span{width:auto}.create{display:grid;grid-template-columns:1fr 1.1fr;gap:8vw}.create>div>p:not(.eyebrow){max-width:400px;color:var(--muted);margin:25px 0}.create-tools{border:1px solid #c2ccd1;padding:32px;background:#f8f9f8}.status{color:var(--purple);display:inline-flex;align-items:center;gap:8px}.status:before{content:'';height:6px;width:6px;border-radius:50%;background:currentColor}.create-tools h3{font-size:24px;line-height:1.3;margin:18px 0 0}.create .create-tools>p{font-size:14px;margin:16px 0;max-width:none}.command{display:flex;align-items:center;gap:12px;padding:15px;background:#e9eef0}.command code{font:12px/1.7 var(--mono);overflow-wrap:anywhere;min-width:0}.command button{font-size:12px;font-weight:700;border-left:1px solid #c2ccd1;padding-left:14px;flex-shrink:0}.create .create-tools #copy-status{font-size:12px;min-height:19px;margin:6px 0}.guide-links{display:flex;flex-direction:column;gap:10px;font-size:13px}.guide-links a{width:fit-content}footer{display:flex;align-items:start;gap:25px;justify-content:space-between;border-top:1px solid var(--line);padding-block:28px 40px;font-size:11px;color:var(--muted)}footer p{line-height:1.9;margin:0}footer .brand{font-size:11px;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}html[lang=zh] h1{font-family:'PingFang SC',sans-serif;font-size:clamp(50px,5.8vw,84px);font-weight:900;line-height:1.12}html[lang=zh] h1 em{-webkit-text-stroke:1.2px var(--ink)}html[lang=zh] #headline{font-family:'PingFang SC',sans-serif;font-weight:900;font-size:33px}
@media(max-width:900px){.wrap{width:calc(100% - 44px)}.intro{gap:30px;grid-template-columns:1fr 1fr}.intro-copy>p:not(.style-name){font-size:15px}.intro-copy .style-name{font-size:10px}.rules{gap:24px}.rhythm-layout,.create{gap:40px}.create-tools{padding:24px}.section{padding-block:70px}.phases button{gap:8px}.phases button b{font-size:11px}footer{flex-wrap:wrap}}
@media(max-width:620px){.wrap{width:calc(100% - 32px)}.masthead{padding-block:18px;gap:12px;flex-wrap:wrap}.brand{font-size:11px}.back{font-size:11px}.languages{margin-left:auto}.intro{grid-template-columns:1fr;padding-top:35px;gap:22px;padding-bottom:28px}.eyebrow{font-size:10px;margin-bottom:16px}h1{font-size:clamp(54px,17.4vw,68px)}.intro-copy{max-width:none}.intro-copy>p:not(.style-name){font-size:16px;margin-bottom:14px}.study-top{align-items:flex-start;flex-direction:column;gap:3px}.study-top h2{font-size:14px}.study-top .mono{font-size:9px}.transport{flex-wrap:wrap;gap:12px;padding:14px 0}.play-button{font-size:12px;padding:8px 13px;min-width:108px}.replay-button{font-size:12px}#time{margin-left:auto;font-size:10px}#timeline{order:4;flex-basis:100%;width:100%;margin:0}.phases{grid-template-columns:1fr 1fr}.phases button{padding:13px 8px}.phases button b{font-size:12px}.study-caption{font-size:12px}.section{padding-block:58px}.section-heading{grid-template-columns:1fr;gap:20px}.section-heading .eyebrow{margin:0}.section-heading>p:last-child{font-size:15px;max-width:300px}.section-heading h2,.create h2,.rhythm h2{font-size:39px}.rules{grid-template-columns:1fr;gap:35px;margin-top:32px}.rules h3{margin-top:14px;font-size:20px}.rules p{max-width:100%}.rules article{padding-right:90px}.rules .palette{width:90px;flex-wrap:wrap;height:auto;position:absolute;right:0;top:57px;gap:6px;margin:0}.palette i{width:23px;height:23px}.eyes,.type-specimen{position:absolute;right:5px;top:47px;margin:0}.rhythm{padding-block:54px}.rhythm-layout,.create{grid-template-columns:1fr;gap:34px}.rhythm p:not(.eyebrow){font-size:15px}.create .create-tools>p{max-width:none}.create-tools{padding:23px 19px}.command{padding:12px;gap:8px}.command code{font-size:11px}footer{gap:20px;padding-bottom:25px}footer .brand{width:100%}footer p{max-width:245px}html[lang=zh] h1{font-size:57px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* The finished export leads; the interactive study remains below it. */
.final-screening{--screen-accent:#278269;--screen-on-accent:#fff}
.intro{padding-top:28px;padding-bottom:28px}.intro h1{font-size:clamp(42px,6vw,76px)}.intro-copy{font-size:16px}.study{padding-top:44px;border-top:1px solid var(--ink)}