:root{font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#292d26;background:#f5f5ef;font-synthesis:none;-webkit-font-smoothing:antialiased;color-scheme:light}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:3px solid #6e8840;outline-offset:5px}button:active{transform:translateY(1px)}.app-shell{max-width:1200px;margin:0 auto;padding:32px 40px 28px}.skip-link{position:absolute;top:-100px;z-index:20;padding:12px;background:#d5ee94;color:#252b20}.skip-link:focus{top:12px}.site-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:27px;border-bottom:1px solid #d9ddd2}.wordmark{display:flex;align-items:center;font-size:24px;letter-spacing:-1.2px;font-weight:600}.wordmark-light{color:#7a806f;font-weight:400}.brand-mark{display:grid;place-items:center;width:32px;height:32px;margin-right:11px;border:1px solid #adb69b;border-radius:8px;background:#e7eddb;font-size:23px;font-weight:400}.header-note{font-size:13px;color:#676e5e}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding:48px 0 36px}.eyebrow{margin:0 0 15px;color:#636c58;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:1.5px;text-transform:uppercase}.eyebrow span{padding:0 10px;color:#a0a791}h1{margin:0;font-size:clamp(42px,5vw,64px);font-weight:500;line-height:1.05;letter-spacing:-3.2px;text-wrap:balance}h1 span{color:#7d886b}.description{max-width:300px;margin:0 0 3px;font-size:15px;line-height:1.65;color:#636a5a;text-wrap:pretty}.canvas-panel{display:flex;flex-direction:column;height:480px;overflow:hidden;position:relative;border:1px solid #32372e;border-radius:14px;background:#20251e;color:#edf0e7;color-scheme:dark;box-shadow:0 12px 24px -16px #323b3b40}.canvas-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 25px;border-bottom:1px solid #353a30}.canvas-label{font-size:12px;font-weight:500}.canvas-label-detail{color:#9ea793;margin-left:10px;font-weight:400}.motion-status{display:flex;align-items:center;gap:7px;font-size:11px;color:#d5ee94}.motion-status>span,.footer-dot{width:5px;height:5px;background:currentColor;border-radius:50%}.motion-status.is-paused{color:#b2bba6}.canvas-viewport{position:relative;flex:1;min-height:0;background-image:radial-gradient(circle,#77816a38 1px,transparent 1px);background-size:24px 24px;background-position:center}canvas{display:block;width:100%;height:100%}.canvas-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#737d614d;font:24px ui-monospace,monospace;pointer-events:none}.canvas-coordinate{position:absolute;bottom:20px;left:25px;color:#9ca58f;font:9px ui-monospace,monospace;letter-spacing:1.6px;pointer-events:none}.canvas-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:15px 20px;border-top:1px solid #353a30;background:#262c23}.canvas-controls button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border-radius:7px;font-size:13px;font-weight:500;transition:background-color .15s,color .15s}.canvas-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.pause-button{padding:0 13px;border:1px solid #4d5546;background:transparent;color:#d3d9c9}.pause-button:hover{background:#394232;color:#fff}.pause-button[aria-pressed=true] svg{fill:currentColor;stroke:none}.fullscreen-controls{display:flex;align-items:center;gap:22px}.keyboard-hint{font-size:11px;color:#adb6a0}kbd{padding:3px 5px;border:1px solid #616a57;border-radius:4px;font-size:10px}.fullscreen-button{padding:0 17px;border:1px solid #d5ee94;background:#d5ee94;color:#29321e}.fullscreen-button:hover{background:#e5f9b5}.canvas-controls button:focus-visible{outline-color:#e5f9b5;outline-offset:3px}.canvas-error{margin:0;padding:0 20px;color:#ffd0b5;font-size:12px;line-height:1.5}.canvas-error:not(:empty){padding:12px 20px}.page-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:21px;color:#6a725e;font-size:11px}.page-footer p{margin:0;display:flex;align-items:center;gap:8px}.footer-dot{color:#7b9260}.canvas-panel:fullscreen,.canvas-panel:-webkit-full-screen,.canvas-panel.is-expanded{width:100%;height:100%;border:0;border-radius:0}.canvas-panel.is-expanded{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;height:100dvh}.canvas-panel:fullscreen .canvas-controls,.canvas-panel:-webkit-full-screen .canvas-controls,.is-expanded .canvas-controls{padding-bottom:max(15px,env(safe-area-inset-bottom));padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}@media(max-width:700px){.app-shell{padding:24px 20px}.site-header{padding-bottom:22px}.wordmark{font-size:22px}.header-note{max-width:85px;text-align:right;font-size:11px;line-height:1.5}.intro{flex-direction:column;align-items:flex-start;gap:20px;padding:34px 0 26px}.eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:14px}h1{font-size:clamp(38px,11vw,62px);letter-spacing:-2px}.description{max-width:330px;font-size:14px;line-height:1.6}.canvas-panel{height:400px;border-radius:12px}.canvas-heading{min-height:52px;padding:0 16px}.canvas-label-detail{display:none}.canvas-coordinate{left:17px;bottom:18px;font-size:8px}.canvas-controls{padding:13px;min-height:72px;gap:10px}.fullscreen-controls{gap:0}.keyboard-hint{display:none}.fullscreen-button{padding:0 13px}.page-footer{align-items:flex-start;flex-direction:column;gap:10px;padding-top:21px}}@media(prefers-reduced-motion:reduce){.canvas-controls button{transition:none}}