@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;550;600;700&display=swap";:root{color:#292e28;font-synthesis:none;background:#f8f7f3;font-family:DM Sans,system-ui,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline-offset:5px;outline:3px solid #3d7758}button:disabled{opacity:.35;cursor:default}main{max-width:880px;margin:auto;padding:32px 28px}header{justify-content:space-between;align-items:center;gap:14px;display:flex}.wordmark{letter-spacing:-.7px;color:inherit;align-items:center;gap:7px;font-size:27px;font-weight:700;text-decoration:none;display:flex}.dot{background:#39775a;border-radius:50%;flex-shrink:0;width:7px;height:7px;transform:translateY(3px)}.source-link{color:#7d8278;white-space:nowrap;align-items:center;gap:5px;font-size:12px;text-decoration:none;display:inline-flex}.source-link:hover{color:#39775a}.intro{margin:32px 0 24px}h1{letter-spacing:-1.2px;margin:0 0 12px;font-size:clamp(30px,4vw,36px);font-weight:550;line-height:1.12}.intro p{color:#787d73;margin:0;font-size:16px;line-height:1.65}.demo{background:#fff;border:1px solid #e3e5dc;border-radius:18px;overflow:hidden;box-shadow:0 7px 22px #293a2804}.stage-heading{color:#94998e;letter-spacing:1.5px;justify-content:space-between;padding:23px 26px 0;font-size:10px;font-weight:600;display:flex}#clock{font-variant-numeric:tabular-nums;letter-spacing:0;font-size:12px}#stage{touch-action:none;-webkit-user-select:none;user-select:none;background-image:radial-gradient(#b8c0ae55 .8px,#0000 .8px);background-position:9px 9px;background-size:18px 18px;height:180px;margin-top:12px;position:relative;overflow:hidden}.rail{background:#e5e8df;height:1px;position:absolute;top:50%;left:8%;right:8%}#ball,#ghost{border-radius:50%;width:44px;height:44px;position:absolute;top:50%;left:18%;transform:translate(-50%,-50%)}#ball{cursor:grab;z-index:2;touch-action:none;background:#39775a;border:0;box-shadow:inset 0 0 0 1px #0000000d,0 5px 10px #39775a20}#ball:hover{background:#2e694b}#ball:active{cursor:grabbing}#ball:disabled{opacity:1;cursor:default}#ghost{z-index:1;background:#c7ac8912;border:2px dashed #c7ac89;display:none}#end-marker{border-left:1px dashed #b9c5b0;height:72px;position:absolute;top:calc(50% - 36px)}#end-marker span{color:#a0a897;font-size:10px;position:absolute;bottom:-22px;transform:translate(-50%)}.toolbar{justify-content:space-between;align-items:center;gap:12px;padding:5px 26px 8px;display:flex}.legend{color:#848779;gap:20px;font-size:11px;display:flex}.legend span{white-space:nowrap;align-items:center;gap:7px;display:flex}.legend i{border-radius:50%;width:7px;height:7px;display:inline-block}.recorded{background:#c7ac89}.learned{background:#39775a}.actions{gap:8px;display:flex}.secondary{white-space:nowrap;color:#626b59;background:#fff;border:1px solid #e4e7dc;border-radius:7px;padding:7px 11px;font-size:11px}.secondary:hover:not(:disabled){background:#f5f7f1}.chart-wrap{height:155px;margin:0 26px 18px;position:relative}canvas{width:100%;height:100%;display:block}#notice{color:#787d73;border-top:1px solid #edf0e8;margin:0;padding:14px 26px;font-size:12px;line-height:1.5}#notice.failure{color:#b73737;background:#fff5f2;border-top-color:#f0c2bb}body.recording #ball{background:#bd9565}body.recording #stage-label{color:#bd9565}body.fitting #stage-label{color:#39775a}@media (width<=540px){main{padding:24px 18px}.intro{margin-top:36px}.intro p{font-size:14px}.source-link{font-size:10px}.stage-heading{padding:20px 18px 0}#stage{height:180px}.toolbar{padding:5px 18px 8px}.legend{gap:12px;font-size:10px}.secondary{padding:7px 9px}.chart-wrap{height:145px;margin:0 18px 15px}}.settings{margin-top:24px;padding:0 4px}.settings[hidden]{display:none}.settings-heading{color:#626b59;align-items:center;gap:8px;font-size:15px;font-weight:500;display:flex}.settings dl{grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 0;display:grid}.settings dt{color:#8a907f;margin-bottom:7px;font-size:11px}.settings dt span{color:#a1a598;font-size:10px}.settings dd{font-variant-numeric:tabular-nums;color:#46563e;margin:0;font-size:19px}.settings p{color:#a1a598;margin:16px 0 0;font-size:10px}@media (width<=420px){.settings dl{grid-template-columns:repeat(2,1fr);gap:18px}}.copy-icon{color:#919987;background:0 0;border:0;border-radius:5px;justify-content:center;align-items:center;width:28px;height:28px;padding:5px;display:inline-flex}.copy-icon:hover{color:#39775a;background:#eaf0e4}.copy-icon.copied{color:#39775a}.copy-icon svg{width:16px;height:16px}@media (width<=420px){header{gap:8px}.wordmark{white-space:nowrap;flex-shrink:0;font-size:22px}.source-link{gap:3px;font-size:9px}}@media (width<=540px){.toolbar{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:12px}.toolbar .actions{order:0;justify-content:flex-start}.toolbar .legend{order:1;justify-content:flex-start;gap:22px}}.stage-tools{order:0;align-items:center;gap:14px;display:flex}#experience{font:inherit;letter-spacing:0;color:#626b59;cursor:pointer;background:#fff;border:1px solid #e4e7dc;border-radius:6px;padding:5px 7px;font-size:11px;font-weight:500}#experience:focus-visible{outline-offset:3px;outline:3px solid #3d7758}.stage-heading{flex-direction:row;align-items:center}.actions{flex-wrap:wrap}.actions button[hidden]{display:none}@media (width<=540px){.stage-tools{gap:9px}#experience{font-size:10px}.actions{gap:6px}}#match{color:#626b59;font-variant-numeric:tabular-nums}#match[hidden]{display:none}@media (width<=480px){.stage-heading{flex-direction:column;align-items:stretch;gap:14px}.stage-heading .stage-tools{order:-1;justify-content:flex-start}}