*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%;overflow:hidden;background:#0a0a0a;color:#f5f1ea;font-family:Newsreader,Georgia,Times New Roman,serif;-webkit-font-smoothing:antialiased}.patter-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23f5f1ea' stroke-width='1.5' opacity='0.45'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23f5f1ea' opacity='0.3'/%3E%3C/svg%3E") 12 12,crosshair}.overlay{position:fixed;z-index:10;pointer-events:none;transition:opacity .8s ease}.overlay>button,.overlay>div>button,.overlay>label{pointer-events:auto}.overlay.dimmed{opacity:.1}.title-overlay{top:2rem;left:2rem}.title-text{font-size:2.5rem;font-style:italic;font-weight:300;letter-spacing:-.02em;color:#f5f1ea;opacity:.7;line-height:1}.title-cursor{display:inline-block;width:2px;height:2.1rem;background:#f5f1ea;margin-left:3px;vertical-align:text-bottom;animation:blink 1s step-end infinite}.subtitle{font-size:.85rem;font-style:italic;color:#f5f1ea40;margin-top:.35rem;letter-spacing:.01em}.bottom-bar{bottom:1.5rem;left:2rem;display:flex;align-items:center;gap:1rem}.rec-btn{background:none;border:none;font-family:inherit;font-size:.8rem;font-style:italic;color:#f5f1ea4d;cursor:pointer;padding:.25rem .5rem;display:flex;align-items:center;gap:.35rem;letter-spacing:.04em}.rec-btn:hover{color:#f5f1ea80}.rec-btn .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f5f1ea40;flex-shrink:0}.rec-btn.active .dot{background:#f44;animation:rec-pulse .8s ease-in-out infinite}.rec-btn.active{color:#ff4444b3}.time-display{font-size:.75rem;font-style:italic;color:#f5f1ea40;font-variant-numeric:tabular-nums;letter-spacing:.02em}.help-trigger{background:none;border:none;font-family:inherit;font-size:.8rem;font-style:italic;color:#f5f1ea40;cursor:pointer;padding:.25rem .5rem}.help-trigger:hover{color:#f5f1ea80}.right-info{bottom:1.5rem;right:2rem;text-align:right}.mode-label{font-size:.7rem;font-style:italic;letter-spacing:.15em;text-transform:lowercase;color:#f5f1ea33}.stat-counter{font-size:.65rem;font-style:italic;color:#f5f1ea1f;margin-top:.2rem}.last-key{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8rem;font-style:italic;font-weight:300;color:#f5f1ea1a;pointer-events:none;z-index:5;animation:key-fade .8s ease-out forwards;line-height:1}.recording-progress{position:fixed;bottom:0;left:0;height:2px;background:#ff444480;animation:progress-fill 16s linear forwards;z-index:50;pointer-events:none}.playback-controls{bottom:4rem;left:50%;transform:translate(-50%);display:flex;gap:.5rem;background:#0a0a0ab3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.4rem .8rem;border-radius:2rem;border:1px solid rgba(245,241,234,.06)}.playback-controls button{background:none;border:none;font-size:.9rem;color:#f5f1ea73;cursor:pointer;padding:.25rem .5rem;font-family:inherit;transition:color .15s}.playback-controls button:hover{color:#f5f1ea}.help-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;z-index:100;display:grid;place-items:center;pointer-events:auto;animation:fade-in .2s ease}.help-modal{background:#111;border:1px solid rgba(245,241,234,.08);border-radius:1rem;padding:2rem;max-width:620px;width:92vw;max-height:85vh;overflow-y:auto}.help-modal::-webkit-scrollbar{width:4px}.help-modal::-webkit-scrollbar-thumb{background:#f5f1ea1a;border-radius:2px}.help-modal h2{font-size:1.2rem;font-style:italic;font-weight:300;margin-bottom:1.5rem;color:#f5f1ea80;letter-spacing:.02em}.key-map{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1.5rem}.key-row{display:flex;gap:.3rem;justify-content:center}.key-cell{width:46px;height:46px;border:1px solid rgba(245,241,234,.1);border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:border-color .2s,background .2s;gap:1px}.key-cell:hover{border-color:#f5f1ea66;background:#f5f1ea08}.key-label{font-size:.8rem;font-style:italic;color:#f5f1ea80;line-height:1}.key-icon{font-size:.55rem;color:#f5f1ea40;line-height:1}.key-swatch{position:absolute;bottom:3px;left:50%;transform:translate(-50%);width:18px;height:3px;border-radius:2px}.help-controls{display:flex;gap:1.5rem;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap}.help-controls label{font-size:.8rem;font-style:italic;color:#f5f1ea66;display:flex;align-items:center;gap:.5rem;cursor:pointer}.help-controls input[type=range]{width:100px;height:2px;accent-color:#f5f1ea;cursor:pointer}.help-controls input[type=checkbox]{accent-color:#f5f1ea;cursor:pointer}.help-note{font-size:.8rem;font-style:italic;color:#f5f1ea33;text-align:center;line-height:1.5}.help-close{position:absolute;top:1rem;right:1.25rem;background:none;border:none;font-family:inherit;font-size:1rem;font-style:italic;color:#f5f1ea4d;cursor:pointer}.help-close:hover{color:#f5f1ea99}.toast{position:fixed;bottom:5rem;left:50%;transform:translate(-50%);background:#0a0a0abf;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f5f1ea99;font-size:.8rem;font-style:italic;padding:.4rem 1.2rem;border-radius:1.5rem;border:1px solid rgba(245,241,234,.06);z-index:200;pointer-events:none;animation:toast-fade 2s ease-out forwards}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}@keyframes rec-pulse{0%,to{opacity:1}50%{opacity:.25}}@keyframes key-fade{0%{opacity:.25;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}@keyframes progress-fill{0%{width:0}to{width:100%}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes toast-fade{0%{opacity:0}10%{opacity:1}75%{opacity:1}to{opacity:0}}@media(prefers-reduced-motion:reduce){.title-cursor{animation:none;opacity:.6}.rec-btn.active .dot{animation:none;background:#f44}.last-key{animation:none;opacity:0}.recording-progress{animation:none;width:100%}.overlay{transition:none}}