/* One Dark palette and the presentation's lighting, material and motion. */
:root{color-scheme:dark;--paper:#282c34;--ink:#e6eaf2;--muted:#abb2bf;--line:#3e4451;--copper:#61afef;--serif:StudioSans,'DejaVu Sans',sans-serif;--blue:#61afef;--violet:#c678dd;--green:#98c379;--gold:#e5c07b}
body{background:radial-gradient(ellipse at 78% 35%,#34394a66,transparent 56%),#282c34;color:var(--ink)}
.header{border-bottom-color:#41485680}.brand{color:#eef1f8;letter-spacing:-1.3px}.brand-mark i{background:#667284}.brand-mark i:after{background:var(--blue);box-shadow:0 0 9px #61afef44}.brand-mark i:nth-child(2):after{background:var(--violet)}.brand-caption{border-color:#49505e;color:#909aac}.edition{color:#929cae}
.button{color:#abb2bf;border-color:#4b5363;background:#2e3440}.button:hover{background:#3b4453;color:white}.button.dark{background:linear-gradient(135deg,#61afef,#809ee9);border-color:#92c4f7;color:#16202d;box-shadow:0 4px 15px #10182655,inset 0 1px #dceeff66}.button.dark:hover{background:linear-gradient(135deg,#8ac7f7,#b2b7fc);box-shadow:0 4px 24px #61afef33}.button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.bead:focus-visible{outline-color:#c678dd}
.eyebrow,.small{color:#9ea9bc}.chapter-number{border-color:#61afef55;background:#61afef12;box-shadow:0 0 25px #61afef13;color:#61afef}
h1{font-family:var(--sans);font-weight:600;font-size:clamp(38px,3.15vw,61px);line-height:1.13;letter-spacing:-2.4px}h1 em{font-style:normal;font-weight:500;color:#61afef;background:linear-gradient(115deg,#61afef 10%,#b69df1 100%);background-clip:text;-webkit-text-fill-color:transparent}.equation{font-weight:400;letter-spacing:-1.2px;color:#eef2fc}.equation em{color:#98c379}#explanation{color:#abb2bf}.working-note{background:linear-gradient(90deg,#61afef0c,transparent);border-left-color:#61afef;position:relative}.working-note:before{content:'';position:absolute;left:-2px;top:0;width:2px;height:30%;background:#addcff;box-shadow:0 0 12px #61afef}.working-note strong{color:#e5e9f2}.working-note p{color:#abb2bf}.note-label{color:#8c98ad}.ledger{border-color:#454d5d}.ledger span{color:#9ca6b7}.ledger strong{color:#e5c07b}.text-button{color:#abb2bf}
.workspace{perspective:1600px}.instrument{transform-style:preserve-3d;position:relative;isolation:isolate}.instrument:before{content:'';position:absolute;inset:50px -40px -10px;background:radial-gradient(ellipse,#61afef12,transparent 65%);filter:blur(20px);pointer-events:none;z-index:-1}output{color:#eef2fc;font-weight:500;text-shadow:0 0 30px #61afef1c}.instrument-tools>span{color:#a1adc1}.reset-button{color:#abb2bf;border-color:#4a5363;background:#252a34}
.frame{background:linear-gradient(125deg,#4b5568 0%,#2d3543 2%,#222832 40%,#303948 99%);border:1px solid #58667d;border-radius:18px;box-shadow:0 2px 0 #8393ae55,0 8px 0 #141a24,0 9px 0 #40516a,0 26px 0 -13px #151a2488,0 36px 50px -13px #060912aa,inset 0 1px 2px #b9d2fd55,inset 0 -2px 2px #10141c;transform:translateZ(12px)}
.frame:before,.frame:after{height:6px;width:6px;background:radial-gradient(circle at 30% 30%,#a4bedb,#465875 50%,#202b3e 65%);box-shadow:0 1px 2px #000b,inset 0 0 1px #d4e7ff}.frame-engraving,.frame-footer{color:#92a3bc;letter-spacing:2.4px}.brass-dots{color:#c678dd;text-shadow:0 0 7px #c678dd}
#abacus{background:radial-gradient(ellipse at 60% 10%,#2c3443,#1d222c 70%);border-color:#151b25;box-shadow:inset 0 4px 15px #070b13bb,inset 0 -1px #61738b33;border-radius:8px}
.abacus-row{transition:background .28s,box-shadow .28s}.abacus-row.active{background:linear-gradient(90deg,#61afef08,#61afef19,#c678dd10);box-shadow:inset 0 1px #61afef18,inset 0 -1px #61afef18}.abacus-row.active .row-label,.abacus-row.active .digit{color:#a3d7ff;text-shadow:0 0 12px #61afef55}.row-label{color:#8e9aad}.digit{color:#a6b2c8}.rod:before{height:4px;background:linear-gradient(#3b475e,#9fbcde 36%,#516985 64%,#1a2332);box-shadow:0 3px 4px #0009,0 0 6px #61afef10}.abacus-row.active .rod:before{box-shadow:0 3px 4px #0009,0 0 11px #61afef33}
.bead{border-radius:43%;background:radial-gradient(ellipse at 34% 22%,#d1edff 0%,#9bd7fc 12%,#61afef 34%,#377caf 66%,#1a3c64 87%,#122844 100%);box-shadow:inset 1px 2px 2px #e8f6ff99,inset -3px -3px 3px #061321aa,1px 6px 0 -3px #102340,3px 7px 5px #0008;isolation:isolate}.bead:after{content:'';position:absolute;left:15%;right:16%;height:24%;top:10%;border-radius:50%;background:linear-gradient(180deg,#fff5,transparent);transform:rotate(-14deg);pointer-events:none}.bead.center{background:radial-gradient(ellipse at 34% 22%,#f6e0ff,#dfa5f2 17%,#c678dd 39%,#824794 70%,#45234f 100%);box-shadow:inset 1px 2px 2px #fff0ff77,inset -3px -3px 3px #231029aa,1px 6px 0 -3px #312039,3px 7px 5px #0008}.bead:hover{filter:brightness(1.14);z-index:2}.abacus-row.active .bead{filter:brightness(1.08)}.dragging .bead{filter:brightness(1.12)}
.instrument-caption,.instrument-caption #gesture-hint{color:#949fb0}.key-dot{background:#61afef;box-shadow:0 0 8px #61afef66}.calculator{border-color:#414958}.calculator-label strong{color:#dce2ed}input,select{color:#dfe7f5;border-color:#4b5566;background:#21252b;box-shadow:inset 0 1px 3px #0003}#level{background:#21252b}#error{color:#e06c75}.footer{color:#8390a3}.footer a{color:#abb2bf}.chapters{border-color:#414957}.chapters>div{color:#7f8ba0}.chapters>div.current{color:#a6d6ff}.chapters>div.current:before{background:linear-gradient(90deg,#61afef,#c678dd);box-shadow:0 0 12px #61afef77}.film-progress{background:#21252b}#film-progress-bar{background:linear-gradient(90deg,#61afef,#c678dd);box-shadow:0 0 12px #61afef88}.film h1{font-size:58px}.film .equation{font-size:38px}.film .abacus-row[data-row="9"],.film .abacus-row[data-row="8"],.film .abacus-row[data-row="7"],.film .abacus-row[data-row="6"]{opacity:.42}
.title-card{background:radial-gradient(ellipse at 28% 30%,#38466099,transparent 58%),radial-gradient(ellipse at 80% 65%,#45375188,transparent 52%),#21252b;overflow:hidden;perspective:1300px;transition:opacity .7s,visibility .7s}.title-card:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#7286a409 1px,transparent 1px),linear-gradient(90deg,#7286a409 1px,transparent 1px);background-size:80px 80px;transform:perspective(650px) rotateX(60deg) scale(2);transform-origin:50% 90%;mask-image:linear-gradient(transparent,#000);opacity:.6}.title-card-inner{position:relative;z-index:2;transform-style:preserve-3d}.title-card.visible .title-card-inner{animation:hero-rise 1.5s cubic-bezier(.2,.7,.2,1) both}.title-card .eyebrow{color:#9cb8dc;letter-spacing:5px}.title-card h2{font-family:var(--sans);font-weight:600;font-size:154px;letter-spacing:-7px;color:#edf3ff;text-shadow:0 2px 0 #b3c7e355,0 5px 0 #0d172fcc,0 12px 25px #0008,0 0 100px #61afef22;transform:translateZ(80px)}.title-card h2 em{color:#c678dd;text-shadow:0 0 50px #c678dd55}.title-card p{color:#abb2bf;font-size:25px}.card-rule{height:2px;width:100px;background:linear-gradient(90deg,#61afef,#c678dd);box-shadow:0 0 20px #61afef66}.card-signature{color:#8495ad}.orbital{position:absolute;width:1200px;height:1200px;top:calc(50% - 600px);left:calc(50% - 600px);border:1px solid #61afef2b;border-radius:50%;box-shadow:0 0 60px #61afef0b,inset 0 0 60px #61afef09;transform:rotateX(65deg) rotateZ(-24deg);pointer-events:none}.orbital-b{width:1450px;height:1450px;top:calc(50% - 725px);left:calc(50% - 725px);border-color:#c678dd22;transform:rotateX(64deg) rotateY(23deg) rotateZ(36deg)}.visible .orbital-a{animation:orbit-drift 10s ease-in-out infinite alternate}.visible .orbital-b{animation:orbit-drift 13s ease-in-out infinite alternate-reverse}.final .title-card h2{color:#98c379;text-shadow:0 2px 0 #d2f5b655,0 8px 0 #1a2c22,0 16px 35px #0008,0 0 100px #98c37933}.final .title-card{background:radial-gradient(ellipse at 50% 45%,#98c37914,transparent 65%),#21252b}
#phase-transition{position:fixed;inset:0;z-index:98;pointer-events:none;overflow:hidden;visibility:hidden;perspective:1000px}.phase-plane{position:absolute;inset:-20%;background:linear-gradient(125deg,#21252b 32%,#2d3443 60%,#252a35);transform:translateX(-110%) skewX(-14deg);border-right:2px solid #61afef;box-shadow:25px 0 100px #61afef18}.phase-copy{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;opacity:0;white-space:nowrap}.phase-copy>span{font-size:16px;letter-spacing:6px;color:#abb2bf}.phase-copy>strong{font-size:116px;font-weight:500;letter-spacing:-5px;display:block;margin-top:30px;color:#e6edf9;text-shadow:0 8px 0 #101623,0 20px 40px #0006}.phase-line{height:2px;width:0;background:linear-gradient(90deg,#61afef,#c678dd);margin:35px auto 0;box-shadow:0 0 24px #61afef}#phase-index{position:absolute;left:8%;top:8%;font-size:310px;font-weight:700;letter-spacing:-20px;color:transparent;-webkit-text-stroke:1px #61afef22;opacity:0}.phase-on #phase-transition{visibility:visible}.phase-on .phase-plane{animation:phase-wipe 1.9s cubic-bezier(.76,0,.24,1) both}.phase-on .phase-copy{animation:phase-type 1.9s ease both}.phase-on #phase-index{animation:phase-index 1.9s ease both}.phase-on .phase-line{animation:phase-rule 1.9s ease both}.instrument.fly-in{animation:instrument-in 1.25s cubic-bezier(.16,.7,.2,1) both}.instrument.victory{animation:result-light 1.4s ease both}.stage-change{animation:copy-in .65s cubic-bezier(.16,.7,.2,1) both}.number-hit{animation:number-hit .6s ease both}
@keyframes hero-rise{from{opacity:0;transform:translateY(55px) rotateX(14deg) scale(.92);filter:blur(9px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes orbit-drift{from{transform:rotateX(62deg) rotateY(-12deg) rotateZ(-24deg)}to{transform:rotateX(74deg) rotateY(14deg) rotateZ(18deg)}}
@keyframes phase-wipe{0%{transform:translateX(-110%) skewX(-14deg)}24%,66%{transform:translateX(0) skewX(-14deg)}100%{transform:translateX(110%) skewX(-14deg)}}
@keyframes phase-type{0%,15%{opacity:0;transform:translate(-50%,-35%) rotateX(25deg);filter:blur(8px)}30%,65%{opacity:1;transform:translate(-50%,-50%) rotateX(0);filter:blur(0)}85%,100%{opacity:0;transform:translate(-35%,-50%);filter:blur(6px)}}
@keyframes phase-index{0%,15%{opacity:0;transform:translateX(-50px)}30%,65%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateX(100px)}}
@keyframes phase-rule{0%,25%{width:0}55%,65%{width:240px}100%{width:0}}
@keyframes instrument-in{from{opacity:.2;transform:translateY(35px) rotateX(7deg) rotateY(-9deg) scale(.94);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes copy-in{from{opacity:0;transform:translateX(-16px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes result-light{0%{filter:brightness(1)}35%{filter:brightness(1.28) drop-shadow(0 0 18px #98c37933)}100%{filter:brightness(1)}}
@keyframes number-hit{0%{color:#61afef;transform:translateY(5px)}40%{color:#cceaff;text-shadow:0 0 24px #61afef88}100%{color:#eef2fc;transform:none}}
@media(max-width:760px){h1{font-size:35px;letter-spacing:-1.5px}.equation{letter-spacing:-.5px}.frame{border-radius:12px}.phase-copy>strong{font-size:43px;letter-spacing:-2px}.phase-copy>span{font-size:10px;letter-spacing:2px}#phase-index{font-size:180px}.title-card h2{font-size:67px;letter-spacing:-3px}.title-card p{font-size:17px}.title-card .eyebrow{font-size:10px;letter-spacing:2px}}
@media(max-width:760px){.instrument:before{inset:50px 0 -10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.orbital{display:none}}