:root{color:#e8e3da;font-synthesis:none;--line:#48443c;--muted:#b2aaa0;--accent:#e2ad61;--reference:#b4a3d8;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;background:#242320;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang TC,sans-serif}*{box-sizing:border-box}body{min-width:350px;margin:0}button,input,select{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:#302e2a;border:1px solid #615b51;border-radius:4px;padding:7px 11px;font-size:13px;line-height:1.4}button:hover:not(:disabled){background:#3c3831;border-color:#9a8d79}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,pre:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}a:hover{text-underline-offset:4px;text-decoration:underline}h1,h2,p{margin:0}h2{font-size:14px;font-weight:600}.app-shell{max-width:1600px;margin:auto}.masthead{border-bottom:1px solid var(--line);background:#302e2a;align-items:center;gap:20px;height:58px;padding:0 28px;display:flex}.brand{letter-spacing:-.5px;font-size:18px;font-weight:650}.masthead h1{color:#b9b1a5;border-left:1px solid var(--line);padding-left:20px;font-size:13px;font-weight:400}.masthead nav{align-items:center;gap:21px;margin-left:auto;font-size:12px;display:flex}.locale-button{background:0 0;border-color:#0000;padding:6px 0;font-size:12px}main{padding:24px 28px 0}.workbench{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:26px;display:grid}.control-panel{border:1px solid var(--line);background:#302e2a;border-radius:5px;min-width:0;padding:17px}.mode-switch{background:#22211e;border:1px solid #615b51;border-radius:4px;gap:3px;width:100%;padding:3px;display:flex}.mode-switch button{color:#b9b1a5;background:0 0;border:0;border-radius:2px;flex:1;min-height:32px;padding:6px}.mode-switch button[aria-pressed=true]{color:#f1d4a6;background:#302e2a;font-weight:600;box-shadow:0 1px 3px #00000020}.control-heading{justify-content:space-between;align-items:center;margin:19px 0 17px;display:flex}.section-label{font-size:13px;font-weight:600}.text-button{color:#d2b886;background:0 0;border:0;padding:3px 0;font-size:12px}.text-button:hover:not(:disabled){background:0 0;text-decoration:underline}.parameters{min-width:0}.parameter{margin-bottom:15px}.parameter-top{justify-content:space-between;align-items:center;gap:9px;margin-bottom:12px;display:flex}.parameter label{color:#d2c9bc;font-size:13px}.number-box{background:#302e2a;border:1px solid #615b51;border-radius:3px;align-items:center;display:flex}.number-box input{width:64px;min-height:29px;font-family:var(--mono);text-align:right;color:#ede5d9;background:0 0;border:0;border-radius:3px;padding:4px 6px;font-size:12px}.number-box>span{font-family:var(--mono);color:#aaa396;padding-right:7px;font-size:11px}.number-box.invalid{border-color:#b64630}.parameter input[type=range]{accent-color:#d5a45e;cursor:pointer;width:100%;height:4px;margin:0;display:block}.range-labels{color:#aaa396;font-family:var(--mono);justify-content:space-between;margin-top:7px;font-size:10px;display:flex}.field-error{color:#edaa91;margin-top:5px;font-size:12px;display:block}.bezier-fields{grid-template-columns:1fr 1fr;gap:0 17px;display:grid}.bezier-fields .number-box input{width:52px}.control-help{color:#bdb4a6;margin-top:4px;font-size:12px;line-height:1.75}.presets{border-top:1px solid var(--line);margin-top:17px;padding-top:16px}.presets>.section-label{margin-bottom:12px}.preset{text-align:left;border-color:#0000;border-radius:3px;justify-content:space-between;align-items:center;gap:9px;width:100%;min-height:54px;padding:8px 10px;display:flex}.preset+.preset{margin-top:4px}.preset.selected{color:#efd2a4;background:#433a2d;border-color:#826946}.preset strong{font-size:12px;font-weight:500;display:block}.preset small{font-size:10px;font-family:var(--mono);color:#b7ac9c;white-space:nowrap;margin-top:4px;display:block}.preset svg{color:#cfa46b;flex:none;width:46px}.keyboard-note{color:#aba192;margin-top:17px;font-size:11px}kbd{border:1px solid #615b51;border-radius:3px;margin-right:4px;padding:1px 4px;font-size:11px}.visual-panel{min-width:0}.preview-toolbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.playback-controls{align-items:center;gap:19px;display:flex}.loop-toggle{color:#c7bdaf;cursor:pointer;align-items:center;gap:7px;font-size:12px;display:flex}.loop-toggle input{accent-color:#e2ad61;margin:0}.replay-button{justify-content:center;align-items:center;gap:7px;min-height:34px;font-size:12px;display:flex}.component-picker{border-bottom:1px solid var(--line);gap:18px;margin-top:15px;padding:0 0 0 1px;display:flex}.component-picker button{color:#bdb3a4;background:0 0;border:0;border-bottom:2px solid #0000;border-radius:0;padding:9px 2px 11px;font-size:12px}.component-picker button[aria-pressed=true]{border-color:var(--accent);color:#f1c688}.component-picker button:hover:not(:disabled){color:#f1c688;background:0 0}.comparison-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;display:grid}.component-preview{background:#302e2a;border:1px solid #625d53;border-radius:5px;min-width:0;margin:0;overflow:hidden}.component-preview figcaption{color:#aaa396;border-bottom:1px solid #524d43;justify-content:space-between;align-items:center;gap:9px;min-height:40px;padding:11px 13px;font-size:11px;display:flex}.component-preview figcaption>div{align-items:center;gap:7px;min-width:0;display:flex}.component-preview figcaption strong{color:#e8e0d3;text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.component-preview figcaption>span{font-family:var(--mono);flex:none;font-size:10px}.curve-key{background:var(--accent);border-radius:50%;flex:none;width:6px;height:6px;display:block}.reference-preview .curve-key{background:var(--reference)}.component-stage{isolation:isolate;background:#e9e6e0;height:240px;position:relative;overflow:hidden}.mock-app{padding:26px 19px}.mock-heading{background:#c2bdb3;border-radius:3px;width:80px;height:8px;margin-bottom:22px;display:block}.mock-row{align-items:center;gap:10px;margin-top:18px;display:flex}.mock-row>i{background:#d3cec5;border-radius:4px;width:21px;height:21px;display:block}.mock-row>span{background:#d3cec5;border-radius:3px;width:44%;height:6px;display:block}.mock-row:nth-child(3)>span{width:33%}.drawer-component{will-change:transform;background:#fff;border-left:1px solid #c9bcaa;width:67%;position:absolute;top:0;bottom:0;right:0;box-shadow:-4px 0 13px #3c2c1813}.drawer-title{color:#554b3e;border-bottom:1px solid #e6e0d7;justify-content:space-between;align-items:center;padding:16px;font-size:12px;font-weight:500;display:flex}.drawer-title>span{color:#8f877b;font-size:18px;font-weight:400;line-height:1}.drawer-content{padding:15px 16px}.drawer-content>span{color:#82786a;margin-bottom:7px;font-size:10px;display:block}.drawer-content>i{background:#f8f6f2;border:1px solid #e4ddd1;border-radius:3px;height:24px;margin-bottom:14px;display:block}.drawer-content>i.tall{height:47px}.reference-preview .drawer-component{border-left-color:#c2b7d1}.reference-preview .drawer-title{color:#675778}.tabs-component{background:#fff;border:1px solid #d3ccc1;border-radius:5px;position:absolute;top:47px;left:7%;right:7%}.mock-tabs{border-bottom:1px solid #d3ccc1;display:flex;position:relative}.mock-tabs>span{text-align:center;color:#6e6455;flex:none;width:33.3333%;padding:14px 2px;font-size:11px}.mock-tabs>i{background:var(--accent);will-change:transform;width:33.3333%;height:3px;position:absolute;bottom:-1px;left:0}.reference-preview .mock-tabs>i{background:var(--reference)}.tab-content{padding:23px 18px 28px}.tab-content>i{background:#ebe7df;border-radius:3px;width:90%;height:6px;margin-bottom:9px;display:block}.tab-content>i:nth-child(2){width:75%}.tab-content>i:nth-child(3){width:55%}.toast-component{color:#5b4a33;will-change:transform;background:#fff;border:1px solid #d5c4a7;border-radius:5px;align-items:center;gap:10px;min-height:67px;padding:14px;font-size:12px;display:flex;position:absolute;top:72px;left:15px;right:15px;box-shadow:0 4px 12px #3c2c1819}.toast-check{color:#947037;background:#f6e7ce;border-radius:50%;flex:none;place-items:center;width:20px;height:20px;display:grid}.toast-component small{color:#81776a;margin-top:5px;font-size:10px;display:block}.toast-close{color:#988e7f;align-self:start;margin-left:auto;font-size:17px;line-height:1}.reference-preview .toast-component{border-color:#cbbdda}.reference-preview .toast-check{color:#786295;background:#eee7f5}.component-progress{color:#b8ae9f;border-top:1px solid #524d43;justify-content:space-between;align-items:center;gap:10px;padding:9px 13px;font-size:10px;display:flex}.component-progress>span:last-child{font-family:var(--mono)}.reference-placeholder{border:1px dashed #6a6257;border-radius:5px;flex-direction:column;justify-content:center;align-items:flex-start;padding:30px;display:flex}.reference-placeholder p{color:#c2b8a8;max-width:285px;margin-bottom:17px;font-size:13px;line-height:1.8}.pin-button{color:#f1d2a2;background:#302e2a;border-color:#8b724e}.comparison-toolbar{justify-content:space-between;align-items:center;gap:15px;margin:13px 0 18px;display:flex}.comparison-toolbar p{color:#b5ac9d;font-size:11px}.comparison-toolbar button{flex:none}.notice{color:#efd09f;background:#423527;border-left:2px solid #a17d47;margin-bottom:14px;padding:10px 12px;font-size:12px;line-height:1.75}.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap;gap:20px;padding:14px 0;display:flex}.metrics>span{color:#b9af9f;align-items:baseline;gap:9px;font-size:11px;display:flex}.metrics strong{font-family:var(--mono);color:#e8dfd0;font-size:12px;font-weight:500}.metrics small{color:#b9af9f;font-size:10px}.curve-section{margin-top:20px}.chart-top{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.chart-top>span{color:#b2a898;font-size:11px}.curve-chart{width:100%;max-height:230px;margin-top:10px;display:block;overflow:visible}.grid-line{stroke:#47433c;stroke-width:1px}.rest-line{stroke:#948b7c;stroke-width:1px;stroke-dasharray:4 4}.axis-text{font-family:var(--mono);fill:#c0b6a5;font-size:11px}.axis-label{fill:#c0b6a5;font-size:11px}.target-label{fill:#c0b6a5;font-size:10px}.chart-legend{color:#bfb4a2;flex-wrap:wrap;gap:10px 20px;font-size:10px;display:flex}.chart-legend>span{align-items:center;gap:6px;display:inline-flex}.legend-line,.legend-reference,.legend-dash{border-top:2px solid var(--accent);width:17px;display:block}.legend-reference{border-top:2px dashed var(--reference)}.legend-dash{border-top:1px dashed #a29580}.comparison-note{color:#afa493;margin-top:10px;font-size:11px;line-height:1.7}.export-panel{border:1px solid var(--line);background:#302e2a;border-radius:5px;grid-template-columns:1fr auto;align-items:center;gap:16px 20px;margin-top:23px;padding:20px;display:grid}.export-description p{color:#bdb3a4;margin-top:7px;font-size:12px;line-height:1.7}.export-actions{align-items:center;gap:8px;display:flex}.format-switch{background:#242320;border:1px solid #615b51;border-radius:4px;margin-right:4px;padding:3px;display:flex}.format-switch button{color:#bdb3a4;background:0 0;border:0;padding:6px 9px;font-size:12px}.format-switch button[aria-pressed=true]{color:#eed0a4;background:#302e2a;box-shadow:0 1px 3px #00000018}.copy-button,.download-button{justify-content:center;align-items:center;gap:6px;min-height:35px;display:flex}.copy-button{color:#29251f;background:#dab079;border-color:#dab079}.copy-button:hover:not(:disabled){color:#29251f;background:#e9c18f}.code-disclosure{grid-column:1/-1;min-width:0}.code-disclosure summary{cursor:pointer;background:#282622;border:1px solid #524d43;border-radius:4px;justify-content:space-between;align-items:center;gap:20px;padding:12px;display:flex}.code-disclosure summary>span:first-child{font-family:var(--mono);color:#bdb3a4;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.expand-code{color:#e3bf8c;flex:none;font-size:11px}pre{color:#dbd2c3;max-height:330px;font-family:var(--mono);background:#1f1e1b;border-radius:0 0 4px 4px;margin:0;padding:18px;font-size:12px;line-height:1.8;overflow:auto}.export-note{color:#ada391;grid-column:1/-1;justify-content:space-between;gap:14px;font-size:10px;display:flex}.feedback{color:#add6b0;text-align:right}footer{color:#ada391;justify-content:space-between;gap:15px;padding:17px 28px 24px;font-size:10px;display:flex}@media (width<=1150px){.workbench{grid-template-columns:254px minmax(0,1fr);gap:20px}.control-panel{padding:15px}.component-stage{height:225px}.component-preview figcaption{flex-wrap:wrap;gap:5px;padding:10px}.component-preview figcaption>span{margin-left:13px}.reference-placeholder{padding:22px}.component-progress{gap:4px;padding:9px 10px;font-size:9px}.toast-component{gap:8px;padding:10px;font-size:11px}.toast-component small{font-size:9px}.drawer-title{padding:15px 12px}.drawer-content{padding:14px 12px}.metrics{gap:12px 20px}.chart-top>span{display:none}.export-panel{grid-template-columns:1fr}.export-actions{justify-content:flex-start}}@media (width<=850px){.masthead{gap:15px;padding:0 19px}.masthead h1{padding-left:15px;font-size:12px}.masthead nav{gap:16px}main{padding:18px 19px 0}.workbench{grid-template-columns:220px minmax(0,1fr);gap:17px}.control-panel{padding:13px}.comparison-stage{grid-template-columns:1fr;gap:12px}.component-stage{height:205px}.reference-placeholder{padding:15px}.reference-placeholder p{max-width:none;margin-bottom:10px;font-size:12px}.reference-placeholder button{font-size:12px}.component-preview figcaption{flex-wrap:nowrap;padding:10px 12px}.component-preview figcaption>span{margin-left:0}.component-progress{font-size:10px}.comparison-toolbar{align-items:start}.comparison-toolbar p{line-height:1.7}.number-box input{width:58px}.bezier-fields{gap:0 11px}.bezier-fields .number-box input{width:45px}.preset{padding:8px 7px}.preset svg{width:37px}.curve-chart{min-height:180px}.chart-legend{font-size:10px}footer{padding-left:19px;padding-right:19px}}@media (width<=650px){body{min-width:350px}.masthead{gap:11px;height:55px;padding:0 14px}.brand{font-size:16px}.masthead h1{padding-left:11px;font-size:11px}.masthead nav{gap:10px;font-size:11px}.masthead nav>a{display:none}.locale-button{font-size:11px}main{padding:15px 13px 0}.workbench{flex-direction:column;gap:0;display:flex}.visual-panel{display:contents}.preview-toolbar{order:0;width:100%}.preview-toolbar h2{font-size:13px}.playback-controls{gap:15px}.replay-button{min-height:38px}.component-picker{order:1;gap:20px;width:100%;margin-top:9px}.component-picker button{min-height:40px}.comparison-stage{order:2;gap:10px;width:100%;margin-top:13px}.component-stage{height:178px}.component-preview figcaption{min-height:36px;padding:9px 12px}.component-progress{padding:7px 12px}.mock-app{padding-top:19px}.mock-row{margin-top:13px}.mock-heading{margin-bottom:16px}.drawer-title{padding:12px 14px}.drawer-content{padding:10px 14px}.drawer-content>span{margin-bottom:5px}.drawer-content>i{height:21px;margin-bottom:9px}.drawer-content>i.tall{height:32px}.tabs-component{top:25px}.tab-content{padding:18px 15px}.toast-component{padding:13px;font-size:12px;top:55px}.toast-component small{font-size:10px}.reference-placeholder{flex-direction:row;align-items:center;gap:13px;padding:12px}.reference-placeholder p{flex:1;margin:0;font-size:11px}.reference-placeholder button{flex:none;min-height:38px;font-size:11px}.comparison-toolbar{order:3;width:100%;margin:11px 0 15px}.comparison-toolbar p{font-size:10px}.comparison-toolbar button{font-size:11px}.notice{order:4;width:100%;font-size:11px}.control-panel{order:5;width:100%;margin-bottom:17px;padding:14px}.mode-switch button{min-height:35px}.control-heading{margin:17px 0 13px}.parameter{margin-bottom:17px}.number-box input{width:77px;min-height:35px;font-size:13px}.parameter label{font-size:13px}.range-labels{font-size:10px}.parameters{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 19px;display:grid}.parameters>.parameter:nth-child(3),.parameters>.control-help,.parameters>.bezier-fields{grid-column:1/-1}.bezier-fields{gap:0 19px}.bezier-fields .number-box input{width:70px}.presets{grid-template-columns:1fr 1fr;gap:6px;display:grid}.presets>.section-label{grid-column:1/-1;margin-bottom:5px}.preset{min-height:50px;padding:7px}.preset+.preset{margin-top:0}.preset svg{display:none}.preset small{font-size:10px}.keyboard-note{margin-top:13px}.metrics{order:6;gap:12px 18px;width:100%}.metrics>span{font-size:10px}.metrics strong{font-size:11px}.curve-section{order:7;width:100%;margin-top:17px}.curve-chart{min-height:170px;margin-top:6px}.comparison-note{font-size:10px}.chart-legend{gap:8px 13px}.export-panel{gap:14px;margin-top:20px;padding:14px}.export-description p{font-size:11px}.export-actions{flex-wrap:wrap;gap:7px}.format-switch{margin-right:auto}.format-switch button{min-height:31px;font-size:11px}.copy-button,.download-button{min-height:39px;font-size:12px}.code-disclosure summary{flex-direction:column;align-items:start;gap:8px;padding:10px}.code-disclosure summary>span:first-child{width:100%;font-size:10px}.expand-code{font-size:11px}.export-note{line-height:1.8;display:block}.feedback{text-align:left;margin-top:5px;display:block}footer{flex-wrap:wrap;padding:15px 13px 20px;font-size:10px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}.drawer-component,.mock-tabs>i,.toast-component{will-change:auto}}