:root{color-scheme:light;--ink:#292b30;--muted:#666b74;--line:#e1e3e8;--accent:#526887;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#f7f8fa}
*{box-sizing:border-box}body{margin:0;-webkit-font-smoothing:antialiased;font-size:14px;font-variant-numeric:tabular-nums}button,input,select{font:inherit}a{color:inherit;text-decoration:none}button,a,summary{touch-action:manipulation}button{cursor:pointer;min-height:44px;padding:0 14px;border:1px solid #dcdfe5;border-radius:8px;background:#fff;color:var(--ink);font-size:13px}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:active{transform:translateY(1px)}[hidden]{display:none!important}
header{min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);font-size:13px}.brand{font-weight:600}header a{display:inline-flex;align-items:center;min-height:44px}.notes{color:var(--muted)}main{max-width:960px;margin:auto;padding:30px 28px 40px}.instrument-heading{margin-bottom:12px}h1{font-size:24px;letter-spacing:-.6px;font-weight:500;margin:0}.example-intro{margin:0 0 22px;max-width:560px;color:var(--muted);font-size:14px;line-height:1.65}
.instrument{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}.instrument-bar{padding:18px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}.instrument-label{font-weight:500}.live-label{color:var(--muted)}.lab{padding:0 24px 20px}.experiment{min-width:0}.display{position:relative;height:220px;background:#f5f6f8;border:1px solid #e9ebef;border-radius:8px;overflow:hidden}.dimension{position:absolute;left:28px;right:28px;top:25px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.dimension span:nth-child(2){display:none}#track{position:absolute;top:90px;left:30px;right:30px;height:58px}.track-line{position:absolute;height:1px;background:#dce0e7;left:0;right:0;top:29px}.track-ticks,.endpoint{display:none}#marker{position:absolute;left:0;top:0;width:58px;height:58px;will-change:transform}.puck-face{display:grid;place-items:center;width:100%;height:100%;background:#fff;border:1px solid #d7dce4;border-radius:15px;box-shadow:0 5px 12px #1d283b10,0 1px 2px #1d283b08}.puck-face i{display:block;width:16px;height:16px;border-top:2px solid #65748c;border-right:2px solid #65748c;transform:rotate(45deg);margin-left:-6px}.display-bottom{position:absolute;bottom:19px;left:28px;right:28px;display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.display-coordinates strong{font-weight:400;margin-left:7px}
.transport{margin:16px 0 22px}.playback-controls{display:flex;align-items:center;gap:8px}#replay{background:#30343d;border-color:#30343d;color:#fff;min-width:100px}.replay-hint{font-size:12px;color:var(--muted);margin-left:auto}.comparison-heading{font-size:12px;font-weight:500;margin-bottom:9px}.comparison-slots{display:grid;grid-template-columns:1fr 1fr;gap:10px}.comparison-slots button{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;text-align:left;padding:13px 16px;min-height:60px}.comparison-slots button>span{color:var(--muted);font-size:12px}.comparison-slots strong{font-size:15px;font-weight:500}.comparison-slots small{font-size:12px;color:var(--muted)}.comparison-slots [aria-pressed=true]{border-color:#9ba6b7;background:#f3f5f8}.basic-reduce{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:12px;color:var(--muted);min-height:44px;max-width:170px}.switch input{width:18px;height:18px;accent-color:var(--accent)}
.advanced-panel,.notes-disclosure{border-top:1px solid var(--line)}.advanced-panel>summary,.notes-disclosure>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:16px;padding:17px 24px;min-height:54px;font-size:13px}.advanced-panel>summary:after,.notes-disclosure>summary:after{content:'+';margin-left:auto;color:var(--muted)}details[open]>summary:after{content:'−'}.advanced-panel>summary span{color:var(--muted);font-size:12px}.advanced-layout{display:grid;grid-template-columns:1fr 260px;gap:35px;padding:4px 24px 24px}.motion-analysis{min-width:0}.destination-buttons{display:flex;gap:8px}.destination-buttons small{color:var(--muted);margin-left:6px}.destination-buttons [aria-pressed=true]{background:#f0f2f5}.timeline{margin-top:28px}.timeline-header,.timeline-ruler{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.timeline-ruler{margin:16px 0 8px 84px;font-size:11px}.timeline-lane{position:relative;height:34px;border:1px solid var(--line);border-radius:5px;background:#f7f8fa}.lane-label{position:absolute;top:8px;left:9px;font-size:11px;color:var(--muted)}.playhead{position:absolute;left:83px;top:0;width:1px;height:32px;background:#677990}.keyframe,.timeline-fill{display:none}.scrubber-label{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:22px 0 0;color:var(--muted)}input[type=range]{width:100%;accent-color:var(--accent);min-height:44px;margin:0}.state-readout{display:flex;gap:24px;padding-top:18px;font-size:12px;color:var(--muted)}.state-readout strong{display:block;font-weight:400;color:var(--ink);margin-top:6px}.controls{min-width:0}.control-heading{font-size:13px;font-weight:500;margin:0 0 15px}.controls label{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin:14px 0 4px}.controls output{font-size:12px;color:var(--muted)}.scale-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:-6px}.controls select{width:100%;font-size:13px;border:1px solid #d7dbe2;border-radius:6px;background:#fff;color:var(--ink);min-height:44px;padding:8px 10px}.curve{position:relative;margin-top:18px;background:#f7f8fa;border:1px solid var(--line);border-radius:6px;padding:12px}.curve svg{width:100%;height:126px;display:block;overflow:visible}.curve path{fill:none}.graph-grid{stroke:#e0e4ea;stroke-width:1}.graph-diagonal{stroke:#d1d6df;stroke-dasharray:3 4}#curve-path{stroke:#526887;stroke-width:2}.curve circle{fill:#526887}.axis-label,.axis-end{display:none}.preset-row{display:flex;gap:8px;margin-top:12px}.preset-row button{flex:1;font-size:12px}.coordinates{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.coordinates label{display:block;margin:8px 0;font-size:12px}.coordinates input{width:100%;min-width:0;border:1px solid #d7dbe2;border-radius:5px;background:#fff;padding:8px 3px;font-size:13px;min-height:44px;display:block;margin-top:6px}.playback-options{margin-top:18px}.playback-options summary,.code-preview summary{cursor:pointer;min-height:44px;font-size:12px;padding:12px 0}.snippet{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}.snippet>div{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}pre{max-height:200px;overflow:auto;overflow-wrap:anywhere;white-space:pre-wrap;font:12px/1.6 ui-monospace,SFMono-Regular,monospace;background:#f6f7f9;padding:12px;border-radius:5px}.instrument-footer{border-top:1px solid var(--line);padding:10px 24px;text-align:right;color:var(--muted);font-size:12px}.notes-disclosure{margin-top:24px}.notes-disclosure>summary{padding:14px 0}.motion-notes{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:12px 0 20px;font-size:13px;color:var(--muted);line-height:1.7}.motion-notes h2{font-size:16px;line-height:1.4;font-weight:500;color:var(--ink);margin:0 0 9px}.motion-notes p{margin:0 0 12px}.note-list details{border-bottom:1px solid var(--line)}.note-list summary{cursor:pointer;min-height:44px;padding:11px 0;color:var(--ink)}.note-list p{padding:0 0 12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.notice{margin:24px}.embedded main{padding:22px!important;max-width:none}
@media(hover:hover){button:not(:disabled):hover{filter:brightness(.97)}a:hover{text-decoration:underline}}@media(max-width:600px){main{padding:24px 18px}.instrument-bar,.lab{padding-left:16px;padding-right:16px}.display{height:190px}#track{top:74px;left:18px;right:18px}.dimension,.display-bottom{left:18px;right:18px}.comparison-slots button{grid-template-columns:18px 1fr;gap:4px;padding:12px}.comparison-slots small{grid-column:2;font-size:12px}.replay-hint{display:none}.advanced-layout,.motion-notes{grid-template-columns:1fr;gap:24px}.advanced-layout{padding:4px 16px 20px}.advanced-panel>summary{padding:15px 16px}.advanced-panel>summary span{max-width:155px;font-size:12px}.controls select,.coordinates input{font-size:16px}.embedded main{padding:16px!important}.state-readout{gap:20px}.example-intro{font-size:13px}.instrument-bar{font-size:12px}.live-label{max-width:190px;text-align:right}}@media(prefers-reduced-motion:reduce){button:active{transform:none}}
.lab{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:26px}.controls{padding-left:22px;border-left:1px solid var(--line)}.controls .control-heading{margin:0 0 12px}.controls>label:first-of-type{margin-top:0}.more-controls{margin-top:14px;border-top:1px solid var(--line)}.more-controls>summary{display:flex;align-items:center;min-height:44px;font-size:13px;cursor:pointer;list-style:none}.more-controls>summary:after{content:'+';margin-left:auto;color:var(--muted)}.more-controls[open]>summary:after{content:'−'}.more-controls .curve{margin-top:8px}.more-controls .motion-analysis{margin-top:20px}.more-controls .state-readout{gap:15px;flex-wrap:wrap}.more-controls .destination-buttons button{padding:0 10px;flex:1}.comparison-slots button{grid-template-columns:18px 1fr;gap:4px}.comparison-slots small{grid-column:2}.controls .advanced-controls{margin-top:12px}.basic-reduce{margin-top:10px}.instrument-footer{padding-top:8px;padding-bottom:8px}
@media(max-width:700px){.lab{grid-template-columns:1fr;gap:22px}.controls{padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}.display{height:150px}#track{top:48px}.dimension{top:13px}.display-bottom{bottom:12px}.transport{margin:12px 0}.comparison-slots button{min-height:54px;padding:10px 12px}.basic-reduce{min-height:40px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.controls>.control-heading{grid-column:1/-1}.controls>label[for=duration],.controls>#duration,.controls>.scale-labels{grid-column:1}.controls>label[for=easing]{grid-column:2;grid-row:2}.controls>#easing{grid-column:2;grid-row:3}.controls>.advanced-controls,.controls>.more-controls,.controls>#preference{grid-column:1/-1}.more-controls{width:100%}.controls>label[for=duration]{margin-top:14px}.controls>.advanced-controls{display:block}}
/* Light catches the raised controls; the stage stays quiet. */
.instrument{background:linear-gradient(145deg,#fff,#f8f9fb);border-color:#d1d6df;box-shadow:inset 0 1px 0 #fff,0 1px 2px #26324409,0 18px 36px -28px #27344950}.display{background:radial-gradient(ellipse at 25% 0%,#fff 0%,#f3f5f8 65%,#eceff4 100%);border-color:#dfe4eb;box-shadow:inset 0 2px 5px #30446307,0 1px 0 #fff}.puck-face{border-color:#d4dae4;background:linear-gradient(145deg,#fff 5%,#fcfdff 48%,#e5eaf2);box-shadow:inset 1px 1px 0 #fff,inset -1px -2px 2px #bac4d13b,0 2px 3px #1d304018,0 13px 17px -9px #263b6245}.comparison-slots{gap:4px;padding:4px;background:linear-gradient(#eceff3,#f3f5f8);border:1px solid #e2e6ed;border-radius:12px;box-shadow:inset 0 1px 3px #27334709,0 1px 0 #fff}.comparison-slots button{border-color:transparent;background:transparent;box-shadow:none;border-radius:9px}.comparison-slots [aria-pressed=true]{background:linear-gradient(#fff,#f5f7fa);border-color:#ffffff;box-shadow:inset 0 1px 0 #fff,0 1px 3px #263b5a19,0 5px 9px -7px #263b5a44}.playback-controls button,.preset-row button,.destination-buttons button,.snippet button{background:linear-gradient(#fff,#edf0f5);border-color:#d0d6e0;box-shadow:inset 0 1px 0 #fff,0 1px 2px #23334b10,0 5px 9px -7px #23334b40}#replay{background:linear-gradient(#485160,#303844);border-color:#303947;box-shadow:inset 0 1px 0 #ffffff38,inset 0 -1px 0 #1d2634,0 2px 3px #26344818}.controls select,.coordinates input{background:linear-gradient(#f5f7fa,#fff);box-shadow:inset 0 1px 2px #26334b08,0 1px 0 #fff}.curve{background:linear-gradient(135deg,#f6f8fb,#fff);box-shadow:inset 0 1px 2px #26374e06}

.controls select{appearance:none;height:44px;padding-right:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m5 6 3 3 3-3' fill='none' stroke='%23616c7c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(#fff,#f3f5f9);background-repeat:no-repeat;background-position:right 11px center,0 0;background-size:16px,100%}.embedded main{max-width:1180px}

@media(max-width:700px){.controls{order:-1;border:0;padding:0}.lab{gap:14px}.controls .control-heading{margin-bottom:0}.controls>label[for=duration]{margin-top:8px}.controls>label[for=easing]{margin-top:8px}.more-controls{margin-top:8px}.instrument-bar{padding-top:14px;padding-bottom:14px}.controls>#spring-controls:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 12px}.controls>#spring-controls label{align-items:start;gap:4px;flex-direction:column;margin-top:0}.controls>#spring-controls input{grid-row:2}.controls>#spring-controls label:nth-of-type(1){grid-column:1}.controls>#spring-controls label:nth-of-type(2){grid-column:2}.controls>#spring-controls label:nth-of-type(3){grid-column:3}}