:root{font-family:IBM Plex Sans,PingFang SC,Noto Sans SC,sans-serif;color:#f3efe6;background:radial-gradient(circle at top left,rgba(255,214,102,.12),transparent 28%),radial-gradient(circle at 82% 18%,rgba(79,172,254,.16),transparent 26%),linear-gradient(145deg,#0a1018,#111e2d 42%,#1a1610);line-height:1.5;font-weight:400}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh}a{color:inherit;text-decoration:none}#root{min-height:100vh}.page-shell{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:32px 0 72px}.locale-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.locale-label{color:#f3efe6b8;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase}.locale-switcher{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.locale-button{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:10px 14px;background:#ffffff0d;color:#f3efe6db;font:inherit;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}.locale-button:hover{transform:translateY(-1px)}.locale-button.active{background:linear-gradient(135deg,#ffd35f,#ff9259);border-color:#ffd35fcc;color:#1d1710;font-weight:700}.hero-grid,.panel-grid,.detail-grid,.sample-layout{display:grid;gap:20px}.hero-grid{grid-template-columns:1.35fr .9fr;align-items:stretch}.panel-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:20px}.compact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.detail-grid,.sample-layout{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}.hero-card,.panel-card{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#ffffff0d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 28px 80px #00000047}.hero-card:before,.panel-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 46%);pointer-events:none}.hero-copy,.signal-panel{border-radius:34px;padding:34px}.hero-copy{min-height:480px;display:flex;flex-direction:column;justify-content:space-between}.eyebrow,.panel-label,.section-label,.card-kicker{margin:0;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:#ffd97f}.hero-copy h1{max-width:12ch;margin:14px 0 18px;font-size:clamp(3rem,8vw,6.5rem);line-height:.92;letter-spacing:-.05em}.hero-text{max-width:44rem;margin:0;color:#f3efe6d1;font-size:1.08rem}.hero-actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}.primary-action,.secondary-action{border-radius:999px;padding:12px 20px;transition:transform .18s ease,background .18s ease,border-color .18s ease}.primary-action{background:linear-gradient(135deg,#ffd35f,#ff9259);color:#1d1710;font-weight:700}.secondary-action{border:1px solid rgba(255,255,255,.16);background:#ffffff0d}.primary-action:hover,.secondary-action:hover{transform:translateY(-2px)}.metric-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.metric-pill,.signal-card,.measure-card,.event-row{border:1px solid rgba(255,255,255,.08);background:#ffffff0d}.metric-pill{min-width:120px;padding:14px 16px;border-radius:18px}.metric-pill span,.signal-card span,.sample-meta span,.event-row span,.event-row p{color:#f3efe6ad}.metric-pill strong{display:block;margin-top:6px;font-size:1.4rem}.metric-copy{max-width:240px}.metric-copy strong{margin-top:0;font-size:.98rem;line-height:1.5}.signal-panel{display:flex;flex-direction:column;justify-content:center;gap:14px}.signal-card{padding:18px 20px;border-radius:22px}.signal-card strong{display:block;margin-top:6px;font-size:1.08rem}.panel-card{border-radius:28px;padding:28px}.phase-card h2,.sample-card h2{margin:12px 0 10px;font-size:1.5rem}.phase-card p:last-child,.bullet-list li{color:#f3efe6d1}.phase-card p:last-child{margin-bottom:0}.bullet-list{margin:14px 0 0;padding-left:20px}.bullet-list li+li{margin-top:12px}.accent-card{background:radial-gradient(circle at top right,rgba(79,172,254,.18),transparent 30%),#ffffff0f}.sample-card,.inspector-card{min-height:100%}.sample-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.sample-meta{display:grid;gap:8px;text-align:right}.measure-strip,.event-list{display:grid;gap:14px;margin-top:22px}.measure-card{border-radius:20px;padding:18px}.measure-number{margin:0 0 12px;color:#ffd97f;font-size:.95rem}.token-row{display:flex;flex-wrap:wrap;gap:10px}.event-token{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:10px 12px;border-radius:999px;font-weight:600;font-size:.92rem}.event-note{background:#ffd35f29;color:#ffe39b}.event-rest{background:#7dd3fc24;color:#9ad9ff}.event-list{max-height:520px;overflow:auto;padding-right:4px}.event-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;border-radius:18px}.event-row strong{display:block;margin-bottom:6px;font-size:1rem}.event-row p{margin:0;font-size:.92rem}.metronome-panel{margin-top:20px;background:radial-gradient(circle at top right,rgba(255,211,95,.14),transparent 22%),radial-gradient(circle at left bottom,rgba(79,172,254,.12),transparent 24%),#ffffff0d}.metronome-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.metronome-header h2{margin:12px 0;font-size:clamp(2rem,4vw,3.2rem);line-height:.98;letter-spacing:-.04em}.metronome-copy{max-width:44rem;margin:0;color:#f3efe6cc;font-size:1.02rem}.transport-button{min-width:136px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:14px 22px;background:#ffffff0f;color:#f3efe6;font:inherit;font-weight:700;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.transport-group{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.tap-button{min-width:136px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:14px 22px;background:#4facfe1f;color:#f3efe6;font:inherit;font-weight:700;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.tap-button:hover{transform:translateY(-2px);border-color:#4facfe80}.transport-button:hover{transform:translateY(-2px)}.transport-button.is-live{background:linear-gradient(135deg,#ffd35f,#ff9259);border-color:#ffd35fcc;color:#1d1710}.metronome-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.accent-panel{margin-top:22px;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px;background:#ffffff0a}.accent-header{margin-bottom:12px}.accent-row{display:flex;gap:12px;flex-wrap:wrap}.accent-chip{min-width:92px;display:grid;gap:6px;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:12px 14px;color:#f3efe6;background:#ffffff0d;font:inherit;cursor:pointer;text-align:left}.accent-chip span{color:#f3efe6a3;font-size:.84rem}.accent-chip strong{font-size:1rem}.accent-strong{border-color:#ffd35f73;background:#ffd35f24}.accent-medium{border-color:#4facfe52;background:#4facfe1a}.accent-mute{border-color:#ffffff14;background:#ffffff05;color:#f3efe6b8}.control-card{display:grid;gap:12px;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:18px;background:#ffffff0a}.control-card span{color:#ffd97f;font-size:.84rem;text-transform:uppercase;letter-spacing:.14em}.control-card strong{font-size:1.24rem}.control-card input[type=range],.control-card select{width:100%}.control-card select{border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 12px;background:#0b121cc7;color:#f3efe6;font:inherit}.pulse-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:12px;margin-top:26px}.pulse-node{position:relative;min-height:84px;display:flex;align-items:center;justify-content:center;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;color:#f3efe6a3;transition:transform .1s ease,background .1s ease,box-shadow .1s ease,border-color .1s ease}.pulse-node span{position:relative;z-index:1;font-weight:700}.pulse-node.downbeat{border-color:#ffd35f4d}.pulse-node.beat{background:#ffffff0f}.pulse-node.subbeat{min-height:68px;border-style:dashed}.pulse-node.muted{opacity:.42}.pulse-node.active{transform:translateY(-2px) scale(1.02);background:linear-gradient(135deg,#ffd35f33,#4facfe2e);border-color:#ffd35fbf;box-shadow:0 16px 36px #0000003d;color:#fff6d5}@media (max-width: 980px){.hero-grid,.detail-grid,.sample-layout,.panel-grid,.metronome-header,.metronome-controls{grid-template-columns:1fr}.metronome-header{display:grid}.transport-group{justify-content:flex-start}.hero-copy h1{max-width:100%}}@media (max-width: 640px){.page-shell{width:min(100vw - 20px,1180px);padding:18px 0 52px}.locale-bar{display:grid}.hero-copy,.signal-panel,.panel-card{border-radius:22px;padding:22px}.metronome-controls{grid-template-columns:1fr}.sample-header,.event-row{display:block}.sample-meta{margin-top:12px;text-align:left}.event-row span{display:block;margin-top:10px}}.score-player-panel{margin-top:20px;margin-bottom:20px;background:radial-gradient(circle at top right,rgba(255,211,95,.14),transparent 22%),radial-gradient(circle at left bottom,rgba(79,172,254,.12),transparent 24%),#ffffff0d}.score-player-header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.score-player-header h2{margin:12px 0 6px;font-size:clamp(2rem,4vw,3.2rem);line-height:.98;letter-spacing:-.04em}.score-composer{margin:0;color:#f3efe69e;font-size:.95rem}.score-file-button{min-width:136px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:14px 22px;background:#ffffff0f;color:#f3efe6;font:inherit;font-weight:700;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.score-file-button:hover{transform:translateY(-2px);border-color:#ffffff3d}.score-player-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.score-upload-zone{margin-top:24px;border:2px dashed rgba(255,255,255,.12);border-radius:28px;padding:52px 32px;text-align:center;cursor:pointer;transition:border-color .18s ease,background .18s ease}.score-upload-zone:hover,.score-upload-zone:focus,.score-upload-zone.drag-over{border-color:#ffd35f80;background:#ffd35f0f}.upload-icon{font-size:3.5rem;color:#ffd35f80;margin-bottom:12px;line-height:1}.upload-text{margin:0 0 8px;font-size:1.12rem;font-weight:600}.upload-hint{margin:0;color:#f3efe67a;font-size:.88rem}.score-error{margin-top:18px;border:1px solid rgba(255,128,128,.3);border-radius:18px;padding:14px 18px;background:#ff50501a;color:#ffa88c;font-size:.92rem}.score-loading{margin-top:18px;text-align:center;color:#f3efe699;font-size:1rem}.score-note-display{display:grid;gap:12px;margin-top:28px}.measure-strip{border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:16px 18px;background:#ffffff08;position:relative}.measure-strip.active{border-color:#ffd35f33;background:#ffffff0d}.measure-strip.preview{opacity:.5;padding:10px 14px;border-radius:16px}.measure-strip-empty{opacity:.35}.measure-strip-label{color:#ffd97f;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:6px;display:block}.measure-beats-row{display:flex;gap:0;margin-bottom:4px;position:relative;width:100%}.beat-mark{flex:1;text-align:center;font-size:.72rem;color:#f3efe64d;padding:2px 0;border-left:1px solid rgba(255,255,255,.05);transition:color .1s ease}.beat-mark.downbeat{color:#ffd35f80}.beat-mark.active{color:#ffd35f;font-weight:700}.measure-track{position:relative;height:48px;border-radius:10px;background:#ffffff08;overflow:hidden}.preview .measure-track{height:32px;border-radius:8px}.measure-track-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#ffd35f26,#ffd35f14);z-index:1;pointer-events:none;transition:width 80ms linear}.rhythm-note-block{position:absolute;top:0;height:100%;display:flex;align-items:center;justify-content:center;border-radius:6px;overflow:hidden;z-index:2}.rhythm-note-block.note{background:#ffffff0f;border:1px solid rgba(255,255,255,.06)}.rhythm-note-block.rest{background:#7dd3fc0f;border:1px solid rgba(125,211,252,.08)}.rhythm-note-fill{position:absolute;top:0;left:0;height:100%;border-radius:5px 0 0 5px;pointer-events:none}.measure-track-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#ffd35f26,#ffd35f14);z-index:1;pointer-events:none}.measure-playhead{position:absolute;top:0;bottom:0;width:2px;background:#ffd35f;box-shadow:0 0 8px #ffd35f80;z-index:3;pointer-events:none;left:0}.score-progress-fill{height:100%;background:linear-gradient(90deg,#ffd35f,#ff9259);border-radius:999px}.rhythm-note-block.note .rhythm-note-fill{background:linear-gradient(90deg,#ffd35f66,#ff92594d)}.rhythm-note-block.rest .rhythm-note-fill{background:linear-gradient(90deg,#7dd3fc4d,#7dd3fc26)}.rhythm-note-label{position:relative;z-index:3;font-size:.95rem;font-weight:700;color:#f3efe6d9;white-space:nowrap;overflow:visible;text-overflow:ellipsis;padding:0 4px;line-height:1;display:flex;align-items:center;justify-content:center;min-height:100%}.jp-wrap{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;gap:1px}.jp-num{line-height:1.1}.jp-dot-high,.jp-dot-low{font-size:1em;font-weight:900;line-height:.6;color:#ffd35fd9}.jp-dot-none{visibility:hidden}.preview .measure-track .rhythm-note-label{font-size:.75rem}.note-card,.note-card-note,.note-card-rest,.note-card-empty,.note-card-label,.note-card-value,.note-pitch,.note-card-meta{display:none}.score-progress-section{margin-top:28px}.score-progress-bar{height:8px;border-radius:999px;background:#ffffff14;overflow:hidden;position:relative}.score-progress-fill{height:100%;background:linear-gradient(90deg,#ffd35f,#ff9259);border-radius:999px;transition:width .12s linear}.score-time-info{display:flex;justify-content:space-between;margin-top:8px}.score-time-current,.score-time-total,.score-measure-label{color:#f3efe67a;font-size:.82rem;font-variant-numeric:tabular-nums}.score-measure-label{color:#ffd35f99;font-weight:600}.notation-toggle{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 14px;background:#0b121cc7;color:#f3efe6;font:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .18s ease}.notation-toggle:hover{border-color:#ffd35f80}.measure-progress-bar{height:10px;border-radius:999px;background:#ffffff0f;margin-top:12px;position:relative;overflow:hidden}.measure-progress-note{position:absolute;top:0;height:100%;background:#ffffff1a;border-radius:2px;transition:background .1s ease}.measure-progress-note.active{background:linear-gradient(90deg,#ffd35f,#ff9259);box-shadow:0 0 8px #ffd35f4d}.score-select-section{margin-top:24px}.score-select{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 36px 12px 16px;background:#0b121cc7;color:#f3efe6;font:inherit;font-size:1rem;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f3efe6' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}.score-select:focus{border-color:#ffd35f80;outline:none}.score-select-header{max-width:220px;font-size:.88rem;padding:10px 32px 10px 12px}@media (max-width: 980px){.score-player-header{display:grid}.score-note-display{grid-template-columns:1fr}}@media (max-width: 640px){.score-upload-zone{padding:32px 16px}}