#about .artist-grid { grid-template-columns:1.08fr 1fr; gap:clamp(30px,5vw,72px); }
#about .artist-quote { font-size:clamp(30px,3.5vw,50px); line-height:1.2; }
.music-process { min-width:0; border:1px solid #ffffff24; border-radius:22px; padding:26px; background:radial-gradient(ellipse at 0 0,#e9a26d12,transparent 60%),#0b0d11; --mp-accent:#e9dcc2; }
.mp-header { display:flex; gap:12px; justify-content:space-between; align-items:center; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.09em; color:var(--warm); }
.mp-header button { flex-shrink:0; border:1px solid #ffffff30; border-radius:30px; padding:8px 12px; min-height:38px; background:#ffffff06; color:var(--ink); font-size:12px; cursor:pointer; }
.mp-signal { height:140px; margin:24px -8px 24px; position:relative; overflow:hidden; border-block:1px solid #ffffff0d; }
.mp-grid { position:absolute; inset:0; background:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px); background-size:24px 24px; }
.mp-signal svg { position:absolute; inset:0; height:100%; width:100%; overflow:visible; }
.mp-wave { fill:none; stroke:var(--mp-accent); stroke-width:1.8; vector-effect:non-scaling-stroke; transform-origin:center; transition:stroke .6s,transform .8s; }
.mp-wave-back { opacity:.25; transform:translateY(7px) scaleY(.6); }
.mp-wave-front { stroke-dasharray:1000; animation:mpWave 4.8s ease-in-out infinite; filter:drop-shadow(0 0 5px #7de3d455); }
.mp-scan { position:absolute; top:0; bottom:0; width:1px; background:linear-gradient(transparent,var(--mp-accent),transparent); animation:mpScan 4.8s linear infinite; }
.mp-signal-label { position:absolute; bottom:9px; right:6px; font:10px 'JetBrains Mono',monospace; letter-spacing:.12em; color:#bbc4c8; }
.mp-route { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0; padding:0; list-style:none; position:relative; gap:4px; }
.mp-route::before { content:''; position:absolute; left:12%; right:12%; top:22px; height:1px; background:linear-gradient(90deg,#e9dcc255,#7de3d466); }
.mp-route button { display:flex; align-items:center; flex-direction:column; gap:7px; padding:0 0 8px; width:100%; border:0; background:none; color:#a8adb2; cursor:pointer; position:relative; }
.mp-node { display:grid; place-items:center; width:44px; height:44px; border:1px solid #41464c; border-radius:50%; background:#10141b; font:12px 'JetBrains Mono',monospace; transition:background .4s,box-shadow .4s,color .4s; }
.mp-route strong { font-size:14px; font-weight:500; white-space:nowrap; }
.mp-route small { font:9px 'JetBrains Mono',monospace; letter-spacing:.1em; }
.mp-route button[aria-current="step"] { color:var(--ink); }
.mp-route button[aria-current="step"] .mp-node { background:var(--mp-accent); color:#080a0c; border-color:var(--mp-accent); box-shadow:0 0 25px #7de3d42e; }
.mp-repair { display:flex; flex-direction:column; align-items:flex-start; gap:6px; width:100%; margin:18px 0 22px; padding:12px 15px; border:1px dashed #ffffff30; border-radius:10px; color:#abb1b6; background:transparent; cursor:pointer; text-align:left; transition:border-color .4s,background .4s; }
.mp-branch-tag { font-size:11px; color:var(--warm-hot); }
.mp-repair strong { font-size:14px; font-weight:500; line-height:1.6; }
.mp-branch-link { font-size:11px; color:#a0aaa9; }
.mp-repair[aria-pressed="true"] { border-color:var(--warm-hot); background:#f0a96b0a; }
.music-process[data-step="repair"] .mp-repair { box-shadow:0 0 20px #f0a96b10; color:var(--ink); }
.mp-detail { min-height:152px; }
.mp-detail-code { font:11px 'JetBrains Mono',monospace; color:var(--mp-accent); letter-spacing:.12em; }
.mp-detail h3 { margin:12px 0 9px; color:var(--ink); font-size:21px; line-height:1.45; font-weight:500; letter-spacing:-.03em; }
.mp-detail p { margin:0; font-size:14px; line-height:1.8; color:#b5bdc1; }
.mp-progress { height:2px; margin:18px 0 15px; background:#ffffff10; overflow:hidden; }
.mp-progress i { display:block; width:100%; height:100%; background:var(--mp-accent); transform-origin:left; transform:scaleX(var(--mp-progress,0)); }
.mp-note { font-size:12px; color:#929b9f; margin:0; line-height:1.8; }
.music-process[data-step="check"],.music-process[data-step="master"] { --mp-accent:#7de3d4; }
.music-process[data-step="repair"] { --mp-accent:#f0a96b; }
.music-process[data-step="master"] .mp-wave-back { transform:translateY(-5px) scaleY(.85); }
.music-process[data-step="listen"] .mp-wave-back { transform:translateY(0) scaleY(1); }
.music-process[data-paused="true"] *, .music-process[data-visible="false"] * { animation-play-state:paused !important; }
.music-process button:focus-visible { outline:2px solid var(--cool); outline-offset:4px; }
@keyframes mpWave { 0% { stroke-dashoffset:1000; opacity:.35; } 45%,85% { stroke-dashoffset:0; opacity:1; } 100% { stroke-dashoffset:-1000; opacity:.35; } }
@keyframes mpScan { from { left:0; } to { left:100%; } }
@media(max-width:1000px) { #about .artist-grid { grid-template-columns:1fr; } #about .artist-grid>.reveal:last-child { order:-1; } .music-process { width:100%; max-width:680px; } }
@media(max-width:520px) { .music-process { padding:20px 16px; border-radius:16px; } .mp-header { font-size:9px; letter-spacing:.04em; } .mp-route strong { font-size:12px; } .mp-route small { font-size:8px; } .mp-detail { min-height:175px; } .mp-detail h3 { font-size:19px; } .mp-repair strong { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .mp-wave-front,.mp-scan { animation:none; } .mp-scan { display:none; } }