:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Helvetica Neue,sans-serif;background:#f5f5f7;color:#1d1d1f;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior:none}body{min-height:100dvh;background:radial-gradient(circle at 50% 24%,#fff 0,#f5f5f7 52%,#e5e6e9)}button,input{font:inherit}.app-shell{width:min(100%,480px);min-height:100dvh;margin:auto;padding:max(22px,env(safe-area-inset-top)) 20px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.eyebrow{margin:0 0 5px;color:#86868b;font-size:9px;font-weight:700;letter-spacing:.23em}h1{margin:0;font-size:22px;font-weight:620;letter-spacing:-.03em}.status{display:flex;align-items:center;gap:7px;color:#86868b;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding-top:8px}.status span{width:7px;height:7px;border-radius:50%;background:#a8a8ad;box-shadow:0 0 0 3px #78787d1a}.status.active span{background:#4f78a8;box-shadow:0 0 12px #4f78a880}.instrument{position:relative;flex:1;min-height:245px;margin:12px -20px 2px;overflow:hidden}#visualizer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.rhythm-readout{position:absolute;top:12px;right:20px;display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(60,60,67,.12);border-radius:999px;background:#ffffff94;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.rhythm-readout span{color:#9a9a9f;font-size:7px;font-weight:700;letter-spacing:.16em}.rhythm-readout strong{color:#48484c;font-size:9px;letter-spacing:.08em}.note-readout{position:absolute;inset:50% 0 auto;transform:translateY(-50%);text-align:center;pointer-events:none}.note-readout span{display:block;color:#1d1d1f;font-size:clamp(58px,20vw,88px);font-weight:250;letter-spacing:-.08em;text-shadow:0 10px 36px rgba(80,100,125,.14)}.note-readout small{display:block;margin-top:8px;color:#86868b;font-size:10px;letter-spacing:.08em}.music-info{display:grid;grid-template-columns:.75fr 1.55fr 1fr;border-top:1px solid rgba(60,60,67,.16);border-bottom:1px solid rgba(60,60,67,.16);padding:15px 0}.music-info div{padding:0 12px;border-right:1px solid rgba(60,60,67,.16)}.music-info div:first-child{padding-left:2px}.music-info div:last-child{border:0}.music-info span{display:block;color:#86868b;font-size:8px;font-weight:700;letter-spacing:.18em;margin-bottom:5px}.music-info strong{font-size:14px;font-weight:550;letter-spacing:.03em;white-space:nowrap}.music-info strong small{color:#86868b;font-size:8px}.controls{padding-top:14px}.controls label{display:flex;justify-content:space-between;color:#6e6e73;font-size:9px;font-weight:650;letter-spacing:.15em}.setting-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}.setting-field{display:block!important}.setting-field>span{display:block;margin:0 0 5px 4px}.setting-field select{width:100%;height:36px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(60,60,67,.14);border-radius:10px;padding:0 24px 0 9px;background:linear-gradient(180deg,#ffffffe6,#e7e8ebe6);color:#1d1d1f;font-size:10px;font-weight:600;letter-spacing:-.01em;background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%),linear-gradient(180deg,#fff,#e7e8eb);background-position:calc(100% - 12px) 15px,calc(100% - 8px) 15px,0 0;background-size:4px 4px,4px 4px,100% 100%;background-repeat:no-repeat}.range-control{width:100%;height:22px;margin:2px 0 8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}.range-control::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--range-track, linear-gradient(to right, #55575c 0 50%, #d2d3d7 50%))}.range-control::-moz-range-track{height:3px;border:0;border-radius:2px;background:var(--range-track, linear-gradient(to right, #55575c 0 50%, #d2d3d7 50%))}.range-control::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:17px;height:17px;margin-top:-7px;border-radius:50%;border:4px solid #f5f5f7;background:#303136;box-shadow:0 1px 3px #00000040}#start{width:100%;min-height:60px;border:0;border-radius:16px;background:linear-gradient(180deg,#333438,#1d1d1f);color:#fff;font-size:14px;font-weight:700;letter-spacing:.18em;box-shadow:0 12px 30px #00000029;touch-action:manipulation}#start:active{transform:scale(.985)}#start.active{background:linear-gradient(180deg,#fefefe,#e5e5e8);color:#1d1d1f;box-shadow:inset 0 0 0 1px #3c3c4333,0 8px 24px #00000014}.button-icon{margin-right:10px;font-size:10px}#hint{min-height:15px;margin:12px 0 0;color:#86868b;text-align:center;font-size:10px}footer{padding-top:13px;color:#aeaeb2;font-size:8px;text-align:center;letter-spacing:.22em}@media(max-height:760px){.instrument{min-height:190px}.app-shell{padding-top:14px}.setting-field select{height:32px}}@media(prefers-reduced-motion:reduce){#start:active{transform:none}}