@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap";:root{font-family:DM Sans,sans-serif;color:#253d3b;background:#f5f2ea;font-synthesis:none;font-weight:400;--ink:#253d3b;--green:#dce8a7;--line:#d7d9cc}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #dc6a43;outline-offset:4px}a{color:inherit}button{transition:background .15s,transform .15s}button:hover{background:#e7eadb}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}.app{max-width:1460px;margin:auto;padding:0 5%}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.back{font-weight:800;font-size:22px;letter-spacing:-1px;text-decoration:none}.edition{font-size:10px;letter-spacing:1.5px;display:flex;align-items:center;gap:13px}.edition i{width:5px;height:5px;border-radius:50%;background:#788371}.about-link{font-size:12px;text-decoration:none}.intro{display:flex;justify-content:space-between;align-items:center;margin:55px 0 36px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;display:flex;gap:9px;align-items:center}.eyebrow span{height:7px;width:7px;background:#e87d55;border-radius:50%}h1{font-family:Manrope,sans-serif;font-weight:800;letter-spacing:-4px;font-size:clamp(44px,5.6vw,76px);margin:9px 0 12px;line-height:1.18}h1 span{font-weight:400;margin-left:12px}h1 svg{width:85px;height:50px;vertical-align:middle;margin-left:22px;fill:#ee784e;stroke:#ee784e;stroke-width:4;overflow:visible}h1 path{fill:none}.intro p{color:#6c7a70;margin:0;font-size:16px}.intro-note{font-size:13px;color:#657566;line-height:1.6;transform:rotate(-5deg);margin:10px 20px 0}.note-arrow{font-size:38px;float:left;margin:-1px 15px 0 0}.lab{border:1px solid #cfd4c3;border-radius:14px;overflow:hidden;background:#fcfaf5;box-shadow:0 7px #e7e8dc}.toolbar{display:flex;justify-content:space-between;align-items:center;background:#fffdf8;border-bottom:1px solid #daddcf;padding:12px 16px;gap:10px}.tools,.transport{display:flex;gap:6px}.tool,.transport button{border:0;border-radius:6px;background:transparent;padding:10px 14px;font-size:12px;font-weight:600;display:flex;gap:9px;align-items:center}.tool.active{background:#e3eabf}.tool span{font-size:17px;line-height:1}.tool kbd{font-family:inherit;font-size:9px;border:1px solid #b7c1aa;border-radius:3px;padding:1px 4px;opacity:.65}.transport .play{background:var(--ink);color:#fff;padding:10px 18px}.transport .play:hover{background:#46645a}.canvas-wrap{position:relative;line-height:0}canvas{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}.canvas-hint{position:absolute;left:50%;top:8%;transform:translate(-50%);font-size:12px;line-height:1.4;color:#829082;pointer-events:none;background:#fcfaf5df;padding:7px 12px;border-radius:50px;white-space:nowrap}.canvas-hint span{margin-right:8px}.canvas-label{position:absolute;bottom:6%;left:3%;font-size:9px;line-height:1;letter-spacing:2px;color:#839080;pointer-events:none}.live-pill{position:absolute;top:20px;right:20px;border:1px solid #dfe1d4;padding:8px 10px;border-radius:20px;line-height:1;font-size:8px;letter-spacing:1.2px;background:#fcfaf5;display:flex;align-items:center;gap:7px;pointer-events:none}.dot{width:5px;height:5px;background:#b5ad94;border-radius:50%}.dot.live{background:#5e9468}.statusbar{display:flex;justify-content:space-between;gap:15px;min-height:42px;background:#edf0e1;align-items:center;padding:11px 20px;font-size:10px;color:#62745d}.statusbar>span:last-child{white-space:nowrap;letter-spacing:.4px}.statusbar b{padding:0 7px}.controls{display:grid;grid-template-columns:1.3fr 1fr 1fr;margin-top:35px;border:1px solid var(--line);border-radius:12px;overflow:hidden}.control-panel{padding:25px 26px 23px}.control-panel+.control-panel{border-left:1px solid var(--line)}.panel-title{display:flex;align-items:center;gap:10px;margin-bottom:11px}.panel-title>span{border:1px solid #c6cdba;color:#7b886f;border-radius:50%;width:22px;height:22px;font-size:9px;display:grid;place-items:center}.panel-title h2{font-size:15px;margin:0;letter-spacing:-.4px}.control-panel p{font-size:11px;color:#78816e;margin:0 0 19px}.preset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:10px}.preset{border:1px solid #d4d9c8;border-radius:7px;background:#f9f7ef;display:flex;flex-direction:column;align-items:center;font-size:10px;padding:12px 4px;gap:7px;white-space:nowrap}.preset.selected{background:#e4ebcc;border-color:#aebd88}.preset>span{font-size:38px;line-height:40px;color:#6e8e78;font-family:serif}.preset small{font-size:8px;color:#8b947f}.control-panel>small{font-size:9px;color:#88927c}.tweaks label,.ramp-control label{display:flex;justify-content:space-between;font-size:11px;margin:18px 0 7px}.tweaks strong,.ramp-control strong{font-weight:400;font-size:10px;color:#718269}input[type=range]{accent-color:#547b62;width:100%;height:4px;display:block;cursor:pointer;margin:11px 0}.range-label{display:flex;justify-content:space-between;font-size:8px;color:#7b8974}.actions>button,.ramp-control>button{width:100%;border:1px solid #d0d7c4;border-radius:5px;padding:9px 5px;background:#f7f6ee;font-size:11px;color:#455d48}.actions>button{margin-top:7px}.ramp-control label{margin-top:15px}.ramp-control input{margin-bottom:13px}.small-actions{display:flex;gap:15px;margin-top:16px}.small-actions button{border:0;background:none;padding:0;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:#738368}.small-actions button:last-child{color:#a26750}.how{display:grid;grid-template-columns:1fr 1.6fr;gap:90px;padding:54px 7px 48px;border-bottom:1px solid var(--line)}.how h2{font-family:Manrope,sans-serif;font-weight:500;letter-spacing:-1px;line-height:1.5;font-size:25px;margin:0}.how h2 em{font-style:normal;color:#87946a}.how p{font-size:11px;color:#788270;line-height:1.8;margin:0 0 10px}.how b{font-weight:600;color:#3a5242}.how .motion-note{color:#84583f}footer{display:flex;justify-content:space-between;padding:25px 0 30px;color:#7d8975;font-size:10px;line-height:1.7}footer a{text-decoration:none;color:#3e5c46}footer>span:last-child{text-align:right}footer small{display:block;font-size:8px;color:#9a9e8b}@media(min-width:1400px){.canvas-wrap{max-height:650px;overflow:hidden}canvas{max-height:650px}}@media(max-width:850px){.app{padding:0 4%}header{height:70px}.edition{display:none}.intro{margin:35px 0 25px}h1{letter-spacing:-2px}h1 svg{width:50px;margin-left:10px}.intro-note{display:none}.controls{grid-template-columns:1fr 1fr}.presets{grid-column:1/-1;border-bottom:1px solid var(--line)}.control-panel+.control-panel{border-left:0}.actions{border-left:1px solid var(--line)!important}.preset-grid{max-width:100%}.preset{flex-direction:row;justify-content:center;padding:12px}.preset>span{font-size:25px;line-height:30px}.preset small{display:none}.how{gap:35px;grid-template-columns:1fr 1.5fr}.toolbar{padding:9px;gap:4px}.tool,.transport button{padding:9px;font-size:11px}.tool kbd{display:none}.transport button:last-child{font-size:0}.transport button:last-child:first-letter{font-size:16px}.transport .play{padding:10px 12px}.canvas-hint{font-size:10px}.statusbar{padding:9px 12px;font-size:9px}}@media(max-width:520px){.eyebrow{font-size:8px;letter-spacing:1.4px}h1{font-size:40px;letter-spacing:-2.5px;margin:12px 0}h1 span{margin-left:8px}h1 svg{display:none}.intro p{font-size:12px}.controls{grid-template-columns:1fr;margin-top:25px}.control-panel{padding:20px}.control-panel+.control-panel{border-top:1px solid var(--line);border-left:0!important}.presets{border-bottom:0}.how{grid-template-columns:1fr;gap:20px;padding:35px 0 25px}.how h2{font-size:22px}.how p{font-size:11px}.statusbar{flex-wrap:wrap;gap:6px}.statusbar>span:first-child{flex-basis:100%}.canvas-label{font-size:6px;letter-spacing:1px}.live-pill{top:10px;right:10px;font-size:6px;padding:6px}.canvas-hint{top:19%;font-size:9px;padding:5px 8px}footer{gap:20px;font-size:9px}footer>span:last-child{max-width:50%}.tool{gap:5px;padding:10px 7px}.transport{gap:0}.transport .play{padding:10px}.preset{font-size:10px;gap:7px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}