:root { --ink:#151512; --paper:#f3f0e9; --muted:#6d6a62; --line:#cbc6ba; --red:#e34a2d; --white:#fbfaf6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,"Noto Sans JP",sans-serif; }
button,input { font:inherit; }
main { max-width:1180px; margin:0 auto; padding:0 34px; }
.hero { padding:74px 0 58px; border-bottom:1px solid var(--ink); }
.eyebrow { margin:0 0 28px; display:flex; align-items:center; gap:10px; font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow span { width:26px; height:2px; background:var(--red); }
h1 { margin:0; max-width:980px; font-size:clamp(48px,8vw,104px); line-height:.93; letter-spacing:-.065em; font-weight:600; }
h1 em { color:var(--red); font-style:normal; }
.intro { max-width:700px; margin:36px 0 46px auto; font-size:18px; line-height:1.65; color:#46443e; }
.test-line { position:relative; padding:27px 30px 24px; background:var(--ink); color:var(--white); display:grid; grid-template-columns:120px 1fr; gap:12px 30px; }
.test-line > span { padding-top:7px; font:500 10px/1.2 "DM Mono",monospace; color:#aaa79f; letter-spacing:.12em; }
.test-line > p { margin:0; font:500 clamp(20px,2.6vw,30px)/1.65 "Noto Sans JP",sans-serif; }
.test-line button { grid-column:2; width:max-content; padding:0; border:0; background:none; color:#bbb7ad; font:500 11px "DM Mono",monospace; text-decoration:underline; cursor:pointer; }
.test-line .translation { grid-column:2; font:400 14px/1.6 Manrope,sans-serif; color:#bbb7ad; }
.controls { padding:42px 0 24px; display:flex; justify-content:space-between; align-items:end; gap:30px; }
.controls h2,.notes h2,.scope h2 { margin:0 0 8px; font-size:28px; letter-spacing:-.035em; }
.controls p { margin:0; color:var(--muted); font-size:14px; }
.blind-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; font:500 12px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; }
.blind-toggle input { position:absolute; opacity:0; }
.switch { width:38px; height:21px; padding:3px; border:1px solid var(--ink); border-radius:20px; transition:.2s; }
.switch::after { content:""; display:block; width:13px; height:13px; border-radius:50%; background:var(--ink); transition:.2s; }
.blind-toggle input:checked + .switch { background:var(--red); border-color:var(--red); }
.blind-toggle input:checked + .switch::after { transform:translateX(17px); background:white; }
.samples { border-top:1px solid var(--line); }
.sample { display:grid; grid-template-columns:58px minmax(230px,1fr) minmax(300px,1.35fr); gap:25px; align-items:center; padding:29px 0; border-bottom:1px solid var(--line); }
.index { align-self:start; padding-top:5px; color:var(--red); font:500 12px "DM Mono",monospace; }
.identity h3 { margin:0 0 6px; font-size:19px; letter-spacing:-.025em; }
.identity p { margin:0; font:400 11px "DM Mono",monospace; color:var(--muted); overflow-wrap:anywhere; }
.blind .identity h3,.blind .identity p { color:transparent; user-select:none; }
.blind .identity h3::after { content:"Hidden model"; color:var(--ink); margin-left:-100%; }
.player-row { display:flex; align-items:center; gap:16px; }
.play { flex:0 0 auto; width:46px; height:46px; border:1px solid var(--ink); border-radius:50%; background:transparent; cursor:pointer; display:grid; place-items:center; transition:.2s; }
.play:hover,.play.playing { color:white; background:var(--red); border-color:var(--red); }
.play svg { width:16px; fill:currentColor; }
.track { flex:1; }
.progress { width:100%; height:3px; background:#d2cdc2; cursor:pointer; position:relative; }
.progress i { display:block; height:100%; width:0; background:var(--red); pointer-events:none; }
.time { display:flex; justify-content:space-between; margin-top:8px; font:400 10px "DM Mono",monospace; color:var(--muted); }
.rating { margin-top:15px; display:flex; align-items:center; gap:10px; }
.rating span { font:500 10px "DM Mono",monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.rating button { width:25px; height:25px; border:1px solid var(--line); background:transparent; cursor:pointer; font:500 10px "DM Mono",monospace; }
.rating button:hover,.rating button.active { color:white; border-color:var(--red); background:var(--red); }
.notes { padding:88px 0; display:grid; grid-template-columns:.8fr 1.5fr; gap:70px; border-bottom:1px solid var(--ink); }
.notes h2 { max-width:330px; font-size:38px; line-height:1.12; }
.rubric { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.rubric article { border-top:2px solid var(--ink); padding-top:14px; }
.rubric b { color:var(--red); font:500 11px "DM Mono",monospace; }
.rubric h3 { margin:25px 0 9px; font-size:16px; }
.rubric p,.scope p { color:var(--muted); font-size:13px; line-height:1.7; }
.scope { max-width:760px; padding:72px 0 90px; }
.scope .fine-print { margin-top:22px; font:400 10px/1.7 "DM Mono",monospace; }
footer { padding:23px max(34px,calc((100vw - 1180px)/2 + 34px)); color:#aaa69c; background:var(--ink); display:flex; justify-content:space-between; gap:20px; font:400 10px "DM Mono",monospace; letter-spacing:.08em; }
@media (max-width:760px) { main{padding:0 20px}.hero{padding-top:45px}.intro{margin:28px 0 35px}.test-line{grid-template-columns:1fr;padding:22px}.test-line button,.test-line .translation{grid-column:1}.controls{align-items:start}.sample{grid-template-columns:34px 1fr;gap:12px}.sample .player{grid-column:2}.notes{grid-template-columns:1fr;gap:35px}.rubric{grid-template-columns:1fr}.rubric article{display:grid;grid-template-columns:35px 1fr;gap:0 10px}.rubric h3{margin:0}.rubric p{grid-column:2;margin-top:6px}footer{padding:20px;flex-direction:column} }