:root{font-family:Inter,ui-rounded,SF Pro Rounded,Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff7ea;background:#130f21;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{min-height:100vh;min-height:100dvh;overflow-x:hidden;background:radial-gradient(circle at 12% 4%,rgba(156,88,255,.24),transparent 31rem),radial-gradient(circle at 94% 24%,rgba(77,201,255,.17),transparent 27rem),linear-gradient(160deg,#181127,#0c1325 58%,#0c1822)}button,a{font:inherit}button{-webkit-tap-highlight-color:transparent}.app-shell{width:min(760px,100%);min-height:100vh;min-height:100dvh;margin:0 auto;padding:max(22px,env(safe-area-inset-top)) 14px max(34px,env(safe-area-inset-bottom))}.title-block{position:relative;padding:4px 4px 18px}.title-block:after{position:absolute;top:-58px;left:-70px;width:190px;height:190px;border:1px solid rgba(255,224,163,.13);border-radius:50%;content:"";box-shadow:0 0 0 28px #ffe0a306,0 0 0 56px #ffe0a305;pointer-events:none}.eyebrow,.section-kicker,.mini-label{margin:0;color:#cfc2e9;font-size:11px;font-weight:750;line-height:17px;letter-spacing:.15em;text-transform:uppercase}h1{margin:2px 0 3px;font-size:clamp(34px,10vw,54px);font-weight:780;line-height:1.1;letter-spacing:-.045em}.lede{max-width:540px;margin:0;color:#cfc9dc;font-size:15px;line-height:22px}.score-card,.control-card{border:1px solid rgba(255,255,255,.12);border-radius:25px;background:#161327c2;box-shadow:0 24px 70px #00000042,inset 0 1px #ffffff0d;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.score-card{padding:17px 12px 13px}.score-heading-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 5px 11px}h2{margin:1px 0 0;font-size:21px;line-height:28px;letter-spacing:-.02em}.sound-state{display:inline-flex;min-height:38px;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(141,227,255,.2);border-radius:999px;color:#c9f3ff;background:#48b8dc1a;font-size:12px;font-weight:700;line-height:18px;white-space:nowrap}.sound-state span{color:#ffd76a;font-size:16px}.score-stack{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:19px;background:radial-gradient(circle at 15% 0%,rgba(255,157,100,.13),transparent 40%),radial-gradient(circle at 90% 100%,rgba(102,211,255,.13),transparent 40%),linear-gradient(160deg,#302148f5,#0e1d30fa);box-shadow:inset 0 1px 18px #ffffff08}.score-row{position:relative;width:100%;height:160px;overflow:hidden}.score-row+.score-row{border-top:1px solid rgba(255,255,255,.11)}.contour-drawing,.note-grid{position:absolute;inset:0;width:100%;height:100%}.contour-drawing{pointer-events:none}.staff-line{stroke:#ffffff0e;stroke-width:1;vector-effect:non-scaling-stroke}.lead-line,.voice-line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.lead-line{stroke-width:5;filter:drop-shadow(0 0 7px rgba(255,205,118,.28))}.voice-line{stroke-width:3;stroke-dasharray:5 8}.shadow-line{stroke:#c791ff94}.canon-line{stroke:#73dcff94}.note-halo{fill:#ffdd8726;stroke:#ffefbe54;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:choir-breathe 2.9s ease-in-out infinite;vector-effect:non-scaling-stroke}[data-drawn-note="1"] .note-halo,[data-drawn-note="5"] .note-halo{animation-delay:-1.4s}[data-drawn-note="2"] .note-halo,[data-drawn-note="6"] .note-halo{animation-delay:-2.1s}.note-core{fill:#fff2bf;stroke:#1a152adb;stroke-width:3;vector-effect:non-scaling-stroke}.note-grid{z-index:2;display:grid;grid-template-columns:repeat(var(--column-count),minmax(48px,1fr))}.note-column{position:relative;min-width:48px;min-height:48px;padding:0;border:0;border-right:1px solid rgba(255,255,255,.055);color:#fff7ea;background:transparent;cursor:crosshair;touch-action:manipulation}.note-column:last-child{border-right:0}.note-column:active,.note-column[data-active=true]{background:linear-gradient(180deg,#ffda741a,#6fd4ff14)}.note-column:hover{background-color:#ffffff09}.note-column:focus-visible{z-index:4;outline:3px solid #8de3ff;outline-offset:-4px;border-radius:10px}.hit-note{position:absolute;top:var(--note-position);left:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%)}.beat-label{position:absolute;right:0;bottom:4px;left:0;color:#ffffff80;font-size:10px;font-weight:750;line-height:16px;text-align:center}.measure-turn{position:absolute;top:calc(50% - 12px);right:8px;left:8px;z-index:5;display:flex;height:24px;align-items:center;justify-content:space-between;color:#ffffff87;font-size:9px;font-weight:750;line-height:14px;letter-spacing:.08em;pointer-events:none;text-transform:uppercase}.measure-turn i{padding:2px 8px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#211c35;font-style:normal}.score-help{margin:10px 4px 0;color:#aaa4b8;font-size:12px;line-height:18px;text-align:center}.control-card{display:grid;gap:16px;margin-top:12px;padding:16px}.control-row{display:grid;gap:9px}.control-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.control-label>span,.mini-label{color:#fff3dc;font-size:13px;font-weight:750;line-height:19px}.control-label small{color:#aaa4b8;font-size:12px;line-height:18px;text-align:right}.compact-controls{grid-template-columns:1fr}.compact-controls>div{display:grid;gap:7px}.segment-grid{display:grid;gap:6px}.segment-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.segment-button,.utility-action,.share-action,.primary-action{min-height:48px;border:1px solid rgba(255,255,255,.13);border-radius:13px;color:#e9e4f0;background:#ffffff0e;font-size:13px;font-weight:750;line-height:18px;cursor:pointer}.segment-button{padding:9px 5px;text-transform:capitalize}.segment-button[aria-pressed=true]{border-color:#ffda748c;color:#1c1725;background:linear-gradient(135deg,#ffd76a,#ffc486);box-shadow:0 6px 18px #ffc2692e}.segment-button:active,.utility-action:active,.share-action:active,.primary-action:active{transform:translateY(1px)}.segment-button:focus-visible,.utility-action:focus-visible,.share-action:focus-visible,.primary-action:focus-visible{outline:3px solid #8de3ff;outline-offset:2px}.transport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.primary-action{grid-column:1 / -1;min-height:57px;border-color:#ffdd7d94;color:#231728;background:linear-gradient(135deg,#ffd76a,#ff9e64);box-shadow:0 12px 30px #ff9d6433;font-size:15px}.primary-action span{margin-right:8px}.share-action{grid-column:1 / -1;border-color:#8de3ff59;color:#d5f7ff;background:#5ec6e81c}button:disabled{opacity:.42;cursor:not-allowed;transform:none}.status-line,.local-share-note,.audio-note{margin:10px 5px 0;color:#cec7db;font-size:12px;line-height:18px;text-align:center}.status-line{min-height:18px;color:#fff1c8}.local-share-note,.audio-note{margin-top:4px;color:#908a9d}.visible-share-link{display:block;margin:8px 4px 0;padding:12px;overflow-wrap:anywhere;border:1px solid rgba(141,227,255,.28);border-radius:12px;color:#bfefff;background:#8de3ff12;font-size:12px;line-height:18px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes choir-breathe{0%,to{opacity:.56;transform:scale(.84)}50%{opacity:1;transform:scale(1.16)}}@media(min-width:520px){.app-shell{padding-right:22px;padding-left:22px}.compact-controls{grid-template-columns:1fr 1fr;gap:14px}}@media(min-width:560px)and (max-height:520px)and (min-aspect-ratio:4 / 3)and (max-aspect-ratio:3 / 1){.app-shell.is-landscape{display:grid;width:min(100%,980px);grid-template-columns:minmax(0,1fr) 350px;gap:10px 12px;padding:max(12px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}.app-shell.is-landscape .title-block{grid-column:1 / -1;padding:0 4px 4px}.app-shell.is-landscape h1{display:inline;margin-right:10px;font-size:29px;line-height:35px}.app-shell.is-landscape .eyebrow{display:none}.app-shell.is-landscape .lede{display:inline;font-size:13px;line-height:19px}.app-shell.is-landscape .score-card{grid-row:span 3;padding:12px}.app-shell.is-landscape .score-heading-row{padding-bottom:7px}.app-shell.is-landscape .score-row{height:226px}.app-shell.is-landscape .control-card{margin-top:0;padding:11px;gap:9px}.app-shell.is-landscape .control-label small,.app-shell.is-landscape .score-help,.app-shell.is-landscape .audio-note,.app-shell.is-landscape .local-share-note{display:none}.app-shell.is-landscape .segment-button,.app-shell.is-landscape .utility-action,.app-shell.is-landscape .share-action,.app-shell.is-landscape .primary-action{min-height:48px}.app-shell.is-landscape .compact-controls{grid-template-columns:1fr 1fr;gap:8px}.app-shell.is-landscape .transport{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:0}.app-shell.is-landscape .primary-action,.app-shell.is-landscape .share-action{grid-column:auto}.app-shell.is-landscape .primary-action{min-height:48px;font-size:13px}.app-shell.is-landscape .status-line{grid-column:2;margin:0;align-self:center}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}.app-shell.is-reduced-motion .note-halo{animation:none;opacity:.72;transform:none}