:root{font-family:ui-rounded,'Segoe UI',system-ui,sans-serif;color:#243548;background:#f7f5ef;--fan:#94c8b4;--fan-light:#c4e7d8;--fan-dark:#548f7b;--fan-wash:#e7eee7;--accent:#397e69;--surface:#fffdf7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button{-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation;color:inherit}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #246bbc;outline-offset:4px}button{border:0}button:disabled{opacity:.4;cursor:default}.app{max-width:460px;margin:auto;min-height:100svh;height:100svh;padding:max(18px,env(safe-area-inset-top)) 26px max(10px,env(safe-area-inset-bottom));display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}h1{font-size:2rem;letter-spacing:-1.3px;margin:0;font-weight:800}.title-dot{color:var(--accent)}.settings-button{width:48px;height:48px;background:transparent;display:grid;place-items:center;border-radius:50%}.settings-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}.mode-switch{display:flex;background:#eae9e3;padding:5px;border-radius:19px;flex-shrink:0}.mode-switch button{flex:1;background:transparent;min-height:46px;border-radius:14px;font-weight:650;font-size:1rem;color:#626d75}.mode-switch button[aria-pressed=true]{background:var(--surface);color:#263d36;box-shadow:0 2px 5px #24354810}.play{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:14px}.fan-wrap{position:relative;min-height:0;aspect-ratio:360/435;height:100%;max-width:100%;max-height:440px}#fan{display:block;height:100%;width:100%;overflow:visible}#spin-zone{position:absolute;left:8%;top:2%;width:84%;height:67%;border-radius:50%;touch-action:none;cursor:grab}#spin-zone:active{cursor:grabbing}.hint{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#697771;margin:6px 0 15px;flex-shrink:0}.hint svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.5;fill:none}.control-area{flex-shrink:0}.control-heading{display:flex;align-items:center;justify-content:space-between;margin:0 3px 11px;font-size:.75rem;letter-spacing:1.8px;font-weight:700;color:#68756e}#status{font-size:.8rem;letter-spacing:0;font-weight:500}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.keys[hidden]{display:none}.digital-keys{grid-template-columns:repeat(3,1fr)}.keys button{height:76px;border-radius:18px;background:linear-gradient(145deg,#fffefb,#eae6db);border:1px solid #dedbce;box-shadow:inset 2px 2px 2px #fff,0 5px 0 #d0cec4,0 7px 10px #293b3010;font-size:2rem;font-weight:650;transition:transform .1s,box-shadow .1s}.keys button[aria-pressed=true]:not([data-speed="0"]){background:linear-gradient(145deg,var(--fan),var(--fan-dark));color:#fff;box-shadow:inset 1px 2px 5px #183e3420,0 2px 0 var(--fan-dark);border-color:var(--fan-dark);transform:translateY(3px)}.keys button:active{transform:translateY(4px)!important;box-shadow:inset 0 2px 5px #24354820,0 1px 0 #cbc9bd!important}.stop{width:100%;min-height:62px;margin-top:22px;border-radius:18px;background:#b94e3d;color:#fff;font-size:1.2rem;font-weight:650;box-shadow:inset 0 2px 1px #ffffff30,0 3px 0 #963e30}.stop span{font-size:1rem;margin-right:9px}.stop:active{transform:translateY(2px);box-shadow:none}footer{text-align:center;color:#7c867e;font-size:.75rem;margin-top:18px;letter-spacing:.2px}dialog{width:min(420px,calc(100% - 28px));max-height:90svh;border:1px solid #deded4;border-radius:26px;padding:25px;color:#243548;background:#faf9f4;box-shadow:0 25px 90px #12282230}dialog::backdrop{background:#172c3a66}.dialog-header{display:flex;align-items:center;justify-content:space-between}.dialog-header h2{font-size:1.35rem;margin:0}.close{width:48px;height:48px;border-radius:50%;background:#eaece6;font-size:1.8rem}.settings-intro,.settings-note{font-size:.9rem;line-height:1.5;color:#65716c}.setting{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;border-bottom:1px solid #e3e5db;font-size:1rem}.setting input[type=checkbox]{width:25px;height:25px;accent-color:#397e69}.setting select{max-width:180px;padding:10px;border:1px solid #d9ded5;border-radius:9px;background:white;font-size:.9rem}.range{flex-wrap:wrap;padding:13px 0}.range input{width:100%;accent-color:#397e69}.done{width:100%;min-height:52px;border-radius:12px;background:#397e69;color:white;font-weight:650}.settings-note{margin:18px 0}body[data-mode=digital] #grille{opacity:.15}@media(min-width:700px){body{background-image:radial-gradient(ellipse at 50% 20%,#ffffff70,transparent 65%)}.app{padding-top:26px;padding-bottom:20px;max-height:1000px}}@media(max-height:700px){.app{padding-top:max(10px,env(safe-area-inset-top));padding-left:20px;padding-right:20px}header{margin-bottom:8px}h1{font-size:1.75rem}.mode-switch button{min-height:42px}.play{padding-top:8px}.keys button{height:60px}.stop{min-height:56px;margin-top:16px}.hint{margin:3px 0 8px;font-size:.8rem}.control-heading{margin-bottom:7px}footer{margin-top:11px;font-size:.7rem}}@media(max-height:500px){.app{height:auto;min-height:100svh}.play{height:280px;flex:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.brand{display:flex;align-items:center;min-width:0}.brand img{flex-shrink:0;margin-right:10px}.brand h1{font-size:1.75rem;white-space:nowrap}#speed-swipe{position:absolute;left:50%;top:87.4%;transform:translate(-50%,-50%);width:26%;height:15%;min-width:64px;min-height:48px;border-radius:12px;touch-action:none;cursor:ew-resize}#speed-swipe[hidden],#swipe-hint[hidden]{display:none}#speed-swipe:focus-visible{outline:3px solid #246bbc;outline-offset:3px}.hint{text-align:center;line-height:1.5}.about-app{border-top:1px solid #d9ded5;padding-top:18px;margin:18px 0;font-size:.9rem;line-height:1.5}.about-app h3{margin:8px 0}.about-app a{color:#306754}.about-app img{display:block}