:root { --ink:#edf3fc; --muted:#b0bfd1; --bg:#0b1019; --panel:#141e2c; --line:#2c3b51; --lime:#63e6fa; --orange:#c3a2ff; }
body { background:radial-gradient(ellipse at 80% 0,#192139 0,transparent 48%),#0b1019; color:var(--ink); font-size:15px; }
.shell { width:min(1280px,calc(100% - 64px)); padding-top:24px; }
.shell>header { padding-bottom:18px; border-color:var(--line); }
.brand { font-size:19px; color:#f2f6ff; }
.brand-mark { width:38px; height:38px; border-radius:10px; background:#63e6fa; border:0; color:#071620; font-size:15px; }
.main-nav { gap:12px; }
.main-nav a { padding:12px 14px; color:#b9c7d9; font-size:14px; border-radius:8px; }
.main-nav a[aria-current=page] { background:#192e3b; border-color:#63e6fa; color:#8af0ff; }
.help-button { padding:8px 12px; border:1px solid #34475c; border-radius:8px; color:#d9e7f7; }
.help-button span { font-size:13px; }
.global-state { padding:12px 0; font-size:12px; border-color:#243144; color:#adbed0; }
.global-state span+span { border-left:1px solid #344052; padding-left:18px; }
.page { padding-top:30px; }
.page h1 { font-size:34px; font-weight:700; letter-spacing:-.035em; }
.page h2 { font-size:21px; font-weight:700; }
.page p { font-size:15px; color:#c0ccdc; line-height:1.8; }
.page .eyebrow { display:block; font:600 11px monospace; letter-spacing:.16em; color:#71deed; margin-bottom:12px; }
a { color:#92eaff; font-size:14px; }
button { font-size:14px; border-radius:8px; font-weight:600; }
button:hover:not(:disabled) { background-color:#253952; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid #9ff3ff; outline-offset:4px; }
.primary-link,#startButton,.practice-controls #practiceStart,#practiceResume { min-height:48px; border:1px solid #63e6fa; border-radius:8px; padding:12px 20px; background:#63e6fa; color:#061820; font-size:14px; font-weight:700; }
.primary-link:hover,#startButton:hover:not(:disabled),.practice-controls #practiceStart:hover:not(:disabled) { background:#a1f3ff; color:#061820; }
.secondary-button,.text-button { color:#c6d5e8; }
.text-button { padding:8px; font-size:13px; }
.secondary-button { border-color:#3b506a; border-radius:8px; }
.subtle { font-size:12px!important; color:#a5b6ca!important; }
.panel { padding:24px; margin-bottom:20px; border:1px solid #2c3b51; border-radius:12px; background:#121c2a; }
.home-heading { padding:6px 0 24px; margin-bottom:10px; }
.home-heading h1 { font-size:clamp(32px,3.7vw,48px); }
.home-heading p { margin-bottom:0; }
.home-mark { width:240px; text-align:center; font:bold 94px/1 monospace; letter-spacing:-.09em; color:#273c57; user-select:none; }
.home-mark span { display:block; margin-top:14px; color:#8294ae; font:10px monospace; letter-spacing:.12em; }
.home-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:30px; }
.start-card { --card-accent:#63e6fa; display:flex; flex-direction:column; align-items:flex-start; position:relative; padding:26px; border:1px solid #31455b; border-top:3px solid var(--card-accent); border-radius:12px; background:linear-gradient(145deg,#192637,#111a29); }
.start-card.practice-entry { --card-accent:#bd9cff; background:linear-gradient(145deg,#27223d,#161c2c); }
.start-card.records-entry { --card-accent:#7bf0ca; }
.start-card .eyebrow { color:var(--card-accent); }
.start-icon { align-self:flex-end; margin-bottom:5px; font:32px/1 monospace; color:var(--card-accent); }
.start-card h2 { margin:0; font-size:24px; }
.start-card p { flex:1; margin:12px 0 24px; }
.start-card .primary-link { width:100%; background:#172d3b; color:var(--card-accent); border-color:#38566b; }
.start-card.practice-entry .primary-link { background:#bd9cff; border-color:#bd9cff; color:#170e2e; }
.start-card .primary-link:hover { background:#2c425b; color:#fff; }
.start-card button { margin-top:12px; width:100%; padding:10px; }
.home-history { grid-template-columns:1fr 1fr; gap:20px; }
.home-history .panel,.home-history .panel+.panel { border:1px solid #29394d; padding:24px; background:#101925; border-radius:12px; }
.home-history h2 { font-size:17px; }
.home-history .badges { gap:10px; }
.home-history .badges span { color:#d1deec; font-size:14px; }
.visual-step { display:flex; align-items:center; gap:10px; color:#e6effb; font-size:17px!important; }
.visual-step>span { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#263650; color:#8af0ff; font:600 12px monospace; }
.practice-cards { gap:16px; border:0; margin-bottom:22px; }
.practice-card,.practice-card+.practice-card,.practice-card.selected:first-child { position:relative; padding:20px 24px; border:1px solid #354258; border-radius:10px; background:#131e2d; }
.practice-card.selected,.practice-card.selected:first-child { border:2px solid #bc9cff; padding:19px 23px!important; background:#24243b; box-shadow:none; }
.practice-card::after { content:'選ぶ'; position:absolute; right:18px; top:17px; font-size:12px; color:#a5b9d1; }
.practice-card.selected::after { content:'✓ 選択中'; color:#dfceff; background:#423358; padding:4px 10px; border-radius:5px; top:13px; }
.practice-card span,.practice-card small { color:#b9c7dd; font-size:12px; }
.practice-card h2 { font-size:21px; margin:8px 0; }
.practice-card p { font-size:14px; margin:6px 0; }
.practice-workspace { padding:24px; background:#111b29; border:1px solid #304158; border-radius:12px; }
.practice-header { padding-bottom:16px; border-bottom:1px solid #2c3b51; }
.practice-header h2 { color:#ddccff; }
.practice-header h2::before { content:'選択した練習'; display:block; margin-bottom:7px; color:#a8b9d0; font-size:11px; font-weight:500; }
.practice-header p { font-size:14px; }
.practice-header>span { padding:8px 12px; border:1px solid #3b506a; border-radius:6px; color:#c2d3e9; font-size:12px; }
#practiceConnectHint { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin:16px 0; padding:12px 16px; background:#1a293b; border-radius:8px; border-left:3px solid #63e6fa; }
#practiceConnectHint a { font-size:14px; font-weight:700; }
.practice-settings { border:0; padding:16px 0; margin:18px 0 12px; gap:26px; }
.practice-settings legend { padding:0; }
.practice-settings label { font-size:14px; gap:12px; }
.practice-settings input[type=number] { width:98px; font:26px monospace; padding:10px 12px; background:#09121f; border:1px solid #4c6583; border-radius:8px; }
.practice-settings select { font-size:14px; background:#21324a; border:1px solid #4c6583; padding:12px; border-radius:8px; color:#f1f7ff; }
.practice-settings input[type=checkbox] { width:18px; height:18px; accent-color:#63e6fa; }
.practice-controls { gap:14px; padding:0 0 20px; margin-bottom:0; }
.practice-controls .secondary-button { font-size:13px; padding:10px 14px; border:1px solid #3a4c64; min-height:44px; }
.practice-controls #practiceStart:disabled { background:#233d4a; color:#a7c2ce; border-color:#3b5869; opacity:1; }
#practicePage { padding-top:20px; }
#practicePage>.page-heading { margin-bottom:16px; }
#practicePage>.page-heading .eyebrow { display:none; }
#practicePage>.page-heading p { margin:4px 0; }
#practicePage .practice-card { padding-top:12px; padding-bottom:12px; }
#practicePage .practice-card.selected { padding-top:11px!important; padding-bottom:11px!important; }
#practicePage .practice-cards { margin-bottom:16px; }
#practicePage .practice-header { padding-bottom:10px; }
#practicePage .practice-settings { margin:12px 0 6px; padding:12px 0; }
#practicePage #practiceConnectHint { margin:10px 0; padding:8px 14px; }
.practice-live { border:1px solid #344861; border-radius:10px; background:#0b1522; grid-template-columns:minmax(0,1fr) 200px; }
.phase-line strong { color:#85eefe; font-size:15px; }
.pitch-panel { border-color:#344861; background:#121f30; }
.pitch-panel>span,.pitch-panel p { color:#bfd0e5; font-size:12px; }
.pitch-panel #targetNote { color:#ccb1ff; }
.pitch-panel #currentNote { color:#76ebff; }
.position-label { font-size:14px; gap:16px; }
.position-label span { color:#c4d3e6; }
#fretboard .current-fret circle { fill:#63e6fa; }
.practice-workspace progress::-webkit-progress-value { background:#63e6fa; }
.practice-workspace progress { accent-color:#63e6fa; }
#practicePage.is-active>.selection-step,#practicePage.is-active .start-step { display:none; }
.mixer,.mixer-title,.compact-mixer,#practicePage.is-active .compact-mixer { background:#101b2a; border-color:#344e67; }
.mixer-title strong { color:#e3effe; }.mixer-title span { color:#acbfd5; }
.mixer-channel { --channel-accent:#63e6fa!important; border-color:#304158; }
.mixer-channel[data-channel=tab] { --channel-accent:#a5b9ff!important; }
.mixer-channel[data-channel=metro] { --channel-accent:#c3a2ff!important; }
.mixer-channel.master-channel { --channel-accent:#7bf0ca!important; background:#183036; }
.mixer-channel .channel-led { background:var(--channel-accent); }
.mixer-channel .fader-readout { color:var(--channel-accent); text-shadow:none; }
.strip-name { color:#e3eefa; font-size:13px; }
.compact-channel label { color:#cbd9ed; font-size:11px; }
.compact-channel output { color:#7feaff; }
.compact-channel:nth-child(3) output { color:#c3a2ff; }
.compact-channel:nth-child(4) output { color:#7bf0ca; }
.compact-channel button,.mixer-channel .mute-button { background:#21324a; color:#c9d8eb; border-color:#455d79; }
.meter i { background:#63e6fa; }.control-panel { background:#162435; border-color:#36516c; }
footer,footer a { font-size:12px; color:#9eafc5; border-color:#2b3b50; }
@media(max-width:1000px) { .home-actions { gap:12px; }.start-card { padding:20px; }.start-card h2 { font-size:20px; }.home-mark { display:none; } }
@media(max-width:700px) { .shell { width:calc(100% - 32px); }.home-actions,.home-history { grid-template-columns:1fr; }.practice-cards { grid-template-columns:1fr; }.practice-card p { display:block; }.practice-workspace { padding:16px; }.practice-live { grid-template-columns:1fr; }.pitch-panel { border-left:0; }.main-nav a { font-size:13px; padding:10px; }.page h1 { font-size:29px; } }