:root{color-scheme:light;--ink:#244b40;--muted:#809080;--paper:#f3f0e5;--line:#d5ddcc;--gold:#e6bd4c;--green:#315e48;font-family:Inter,"Segoe UI",Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{background-image:radial-gradient(#d7ddcf .6px,transparent .6px);background-size:8px 8px}.lab{width:min(1240px,calc(100% - 64px));margin:auto;padding:32px 0 24px}.masthead,.identity,nav,.intro,.viewer-heading,.transport,.transport-buttons,.view-controls,.collection-title,.timeline-heading,footer{display:flex;align-items:center}.masthead{justify-content:space-between;gap:20px;margin-bottom:35px}.identity{gap:13px;color:inherit;text-decoration:none}.emblem{width:48px;height:48px;display:grid;place-items:center;background:#e9c14f;color:#6d5524;border-radius:13px;font:700 italic 34px Georgia,serif;transform:rotate(-7deg);box-shadow:0 3px #d0a63f}.eyebrow{display:block;margin:0 0 6px;font-size:9px;letter-spacing:1.8px;font-weight:750;color:#819078}h1{margin:0;font-size:25px;letter-spacing:-.8px}nav{gap:21px}nav a{font-size:11px;color:#6c846c;text-decoration:none}nav a span{margin-left:9px;color:#a18e43}nav a:hover{text-decoration:underline}.intro{justify-content:space-between;gap:24px;margin-bottom:25px}.intro h2{font:italic 34px Georgia,serif;letter-spacing:-.8px;margin:0 0 8px}.intro p:not(.eyebrow){font-size:12px;line-height:1.65;color:#7b8d78;max-width:660px;margin:0}.availability{font-size:10px;white-space:nowrap;border:1px solid #ccd9c2;background:#e9efdf;padding:10px 13px;border-radius:100px;color:#658160}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:22px;align-items:start}.viewer{min-width:0;padding:21px;border:1px solid #d2dcc8;border-radius:15px;background:#f8f6ec;box-shadow:0 12px 30px #3a54370a}.viewer-heading{justify-content:space-between;gap:15px;padding:0 3px 16px}.viewer h3{margin:0;font-size:16px;font-weight:650;letter-spacing:-.2px}.sequence-badge{font-size:8px;letter-spacing:1px;color:#8c824b;border:1px solid #ded7b2;background:#f5efcd;border-radius:5px;padding:6px 8px}.stage{position:relative;overflow:hidden;border:1px solid #d9dfd0;border-radius:10px;height:360px}.checker{background:repeating-conic-gradient(#e8eadd 0% 25%,#eff0e5 0% 50%) 50%/24px 24px}.stage.dark{background:repeating-conic-gradient(#30443e 0% 25%,#354b43 0% 50%) 50%/24px 24px;border-color:#40584b}.stage canvas{display:block;width:100%;height:100%;outline:none}.stage-message{position:absolute;top:45%;left:20px;right:20px;margin:0;text-align:center;color:#748974;font-size:12px;line-height:1.7;pointer-events:none}.stage-message[hidden]{display:none}.stage-labels{display:flex;justify-content:center;gap:25%;position:absolute;left:15px;right:15px;bottom:15px;font-size:8px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#8a9a81;pointer-events:none}.stage.dark .stage-labels,.stage.dark .stage-message{color:#bccdb5}.transport{gap:18px;margin:18px 0 14px;flex-wrap:wrap}.transport-buttons{gap:7px}button,select,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:disabled{cursor:default;opacity:.4}button:focus-visible,select:focus-visible,a:focus-visible,canvas:focus-visible,input:focus-visible{outline:3px solid #cba63d;outline-offset:3px}button{border:1px solid #d0d9c4;background:#eef1e2;border-radius:7px}.square{width:33px;height:33px;font-size:24px;line-height:1}.primary{background:var(--green);border-color:var(--green);color:#fff2ce;min-width:102px;font-size:11px;font-weight:650;padding:9px 13px;display:flex;justify-content:space-between;gap:17px}.primary:hover{background:#416f54}.square:hover,.view-controls button:hover{background:#e0e8d3}#frame-status{font-size:10px;color:#82917a;font-variant-numeric:tabular-nums;margin-right:auto}.compact{display:flex;align-items:center;gap:8px;font-size:9px;color:#82917a}.compact select{border:1px solid #d3dbc7;background:#f8f8ef;border-radius:6px;color:#52704d;padding:6px 7px;font-size:10px}.view-controls{flex-wrap:wrap;gap:14px;padding-bottom:14px;border-bottom:1px solid #dce2d2}.view-controls fieldset{display:flex;gap:4px;padding:0;margin:0;border:0}.view-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.view-controls fieldset button{font-size:9px;padding:6px 8px}.view-controls button[aria-pressed=true]{background:#dce6cb;color:#3e633f;border-color:#bccfa9}.check{display:flex;align-items:center;gap:5px;font-size:9px;color:#819377;cursor:pointer}.check input{margin:0;accent-color:#57804c}.text-button{border:0;background:none;font-size:9px;padding:5px 0;color:#7a8b71;margin-left:auto}.preview-note{min-height:30px;line-height:1.6;color:#92a087;font-size:10px;margin:12px 2px}.timeline-heading{justify-content:space-between;margin:15px 2px 10px;gap:10px}.timeline-heading p{margin:0}.timeline-heading>span{font-size:8px;color:#9aa58d}.frame-strip{display:flex;gap:7px;overflow-x:auto;padding:3px 2px 9px;scrollbar-width:thin;scrollbar-color:#bbcaa9 #eef0e1}.frame-tile{flex:0 0 78px;overflow:hidden;padding:0;background:#edf0e0;border:1px solid #d7dfcc}.frame-tile canvas{display:block;width:76px;height:85px;background:repeating-conic-gradient(#e2e7d6 0% 25%,#eceddf 0% 50%) 50%/12px 12px}.frame-tile>span{display:flex;justify-content:space-between;gap:5px;font-size:8px;padding:5px;color:#7d8c70;font-variant-numeric:tabular-nums}.frame-tile[aria-current=true]{border-color:#b59b43;box-shadow:0 0 0 2px #d4bd69}.collection{min-width:0;padding:20px 18px;border:1px solid #d8decd;border-radius:14px;background:#eeefdf}.collection-title{justify-content:space-between}.collection-title h3{font:italic 22px Georgia,serif;margin:0}.collection-title>span{font-size:9px;color:#7d8c6e;background:#e0e6cf;padding:5px 8px;border-radius:5px}.collection-note{font-size:10px;line-height:1.6;color:#8b987f;margin:11px 0 17px}.animation-list{display:flex;flex-direction:column;gap:7px}.animation-choice{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:12px 10px;text-align:left;border:1px solid #d5ddc7;background:#f6f5e9;border-radius:8px}.animation-choice:hover{background:#e7edd8}.animation-choice.active{background:#335c46;color:#fff4d6;border-color:#335c46}.animation-choice>span:first-child{font-size:9px;opacity:.5;width:15px}.animation-choice>span:nth-child(2){min-width:0;display:grid;gap:4px}.animation-choice strong{font-size:11px;font-weight:650}.animation-choice small{font-size:8px;opacity:.6}.animation-choice>b{margin-left:auto;font-size:12px;font-weight:400;opacity:.7}.animation-choice.unavailable{opacity:.55}.reference-card{margin-top:24px;padding-top:18px;border-top:1px solid #d5ddc5}.reference-card>a{display:block;text-decoration:none;color:#69835c}.reference-card img{display:block;width:100%;height:140px;object-fit:contain;border-radius:7px;background:#e5e9d7;margin:8px 0}.reference-card>a>span{display:flex;justify-content:space-between;font-size:9px;padding-top:4px}.reference-card>a b{font-weight:400;color:#aa944b}.reference-card p:not(.eyebrow){font-size:9px;color:#919c83;line-height:1.7;margin-bottom:0}.study-notes{margin-top:23px;padding:18px 3px 16px;border-bottom:1px solid #d9dfcd}.study-notes h3{font-size:11px;font-weight:650;margin:0 0 8px}.study-notes p,.study-notes li{font-size:10px;line-height:1.7;color:#8d9982;margin:0}.study-notes ul{margin:8px 0 0;padding-left:17px}footer{justify-content:space-between;gap:18px;margin-top:17px;color:#96a18b;font-size:9px}footer>span:first-child{display:flex;align-items:center;gap:7px}footer i{width:5px;height:5px;border-radius:50%;background:#7e9d69}kbd{font:8px inherit;background:#f8f8ed;border:1px solid #d6dfc9;border-radius:3px;padding:2px 4px;color:#829175}footer b{font-weight:400;margin:0 8px}[hidden]{display:none!important}@media(min-width:1450px){.lab{padding-top:42px}.stage{height:400px}}@media(max-width:950px){.lab{width:calc(100% - 34px);padding-top:22px}.workspace{grid-template-columns:minmax(0,1fr) 225px;gap:15px}.viewer{padding:15px}.collection{padding:17px 14px}.view-controls{gap:10px}.stage{height:340px}.intro h2{font-size:30px}}@media(max-width:720px){.masthead{margin-bottom:25px}nav{gap:12px}nav a{font-size:9px}.intro{align-items:flex-start;flex-direction:column;gap:12px}.availability{font-size:9px;padding:7px 11px}.workspace{display:flex;flex-direction:column}.viewer,.collection{width:100%}.collection{order:2}.animation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.reference-card{display:none}.collection-note{margin:8px 0 12px}.stage{height:330px}.view-controls{gap:12px}.transport{gap:11px}.transport>.compact{margin-left:auto}#frame-status{font-size:9px;margin-right:0}.frame-tile{flex-basis:73px}.frame-tile canvas{width:71px;height:80px}.study-notes{margin-top:18px}footer{align-items:flex-start;flex-direction:column;gap:10px}}@media(max-width:440px){.lab{width:calc(100% - 22px);padding-top:17px}.emblem{width:38px;height:38px;border-radius:10px;font-size:28px}.identity{gap:10px}h1{font-size:21px}.eyebrow{font-size:7px;letter-spacing:1.3px}nav a:first-child{display:none}.intro h2{font-size:29px}.intro p:not(.eyebrow){font-size:11px}.viewer{padding:12px}.viewer-heading{padding-bottom:12px}.viewer h3{font-size:14px}.sequence-badge{font-size:7px;padding:5px 6px}.stage{height:310px}.transport{gap:8px}.primary{min-width:86px;padding:9px 10px}.square{width:29px}.transport>.compact{gap:5px}.compact select{font-size:9px;padding:5px}#frame-status{font-size:8px}.text-button{margin-left:0}.preview-note{font-size:9px}.stage-labels{font-size:6px;gap:17%}.animation-choice{padding:10px 8px}.animation-choice strong{font-size:10px}.animation-choice small{font-size:7px}}
