@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --paper:#f5f0e4;
  --paper-2:#efe7d3;
  --ink:#1c1a16;
  --ink-soft:#5c564a;
  --stone:#d9cfb8;
  --verm:#c73e2e;
  --verm-deep:#9e2c20;
  --moss:#5f7161;
  --gold:#b98a2f;
  --glass:rgba(255,255,255,.55);
  --radius:14px;
  --shadow:0 10px 30px rgba(28,26,22,.10);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--paper);
  font-family:'Inter',system-ui,-apple-system,'Hiragino Sans',sans-serif;
  min-height:100vh; overflow-x:hidden;
}
#wash{position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:.9; pointer-events:none}

.page{position:relative; z-index:1; max-width:860px; margin:0 auto; padding:28px 18px 60px}

/* masthead */
.masthead{display:flex; gap:18px; align-items:stretch; margin-bottom:18px}
.v-text{
  writing-mode:vertical-rl; font-family:'Shippori Mincho',serif; font-weight:700;
  letter-spacing:.5em; color:var(--verm); font-size:15px; padding-top:6px; user-select:none;
}
.v-right{color:var(--ink-soft); margin-left:auto}
.mast-main{flex:1; min-width:0}
.kicker{margin:0 0 8px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft)}
.seal{
  display:inline-block; background:var(--verm); color:#fff; border-radius:6px;
  padding:2px 8px; margin-right:8px; font-family:'Shippori Mincho',serif; letter-spacing:.3em;
}
h1{
  font-family:'Shippori Mincho','Hiragino Mincho ProN',serif; font-weight:800;
  font-size:clamp(34px,6vw,54px); line-height:1.02; margin:0 0 10px;
}
h1 em{font-style:normal; color:var(--verm)}
.sub{margin:0 0 16px; color:var(--ink-soft); font-size:15px; max-width:56ch}

.scale-line{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--glass); border:1px solid rgba(28,26,22,.12); border-radius:var(--radius);
  padding:10px 12px; box-shadow:var(--shadow); backdrop-filter:blur(8px);
}
.scale-now{display:flex; gap:12px; align-items:center; margin-right:auto}
.scale-kanji{
  width:46px; height:46px; display:grid; place-items:center; flex:none;
  font-family:'Shippori Mincho',serif; font-size:26px; color:#fff; background:var(--ink);
  border-radius:12px; box-shadow:inset 0 0 0 2px var(--verm);
}
.scale-meta strong{display:block; font-size:15px}
.scale-meta small{color:var(--ink-soft); letter-spacing:.06em}

/* buttons */
.btn{
  font:600 13px/1 'Inter',system-ui,sans-serif; letter-spacing:.04em;
  border:1px solid var(--ink); border-radius:999px; padding:11px 18px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
  background:#fff; color:var(--ink);
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn small{opacity:.65; font-weight:400; margin-left:6px}
.btn-ink{background:var(--ink); color:#f7f2e6}
.btn-vermilion{background:var(--verm); border-color:var(--verm-deep); color:#fff}
.btn-ghost{background:transparent}
.btn-play{min-width:150px; font-size:14px}
.btn-play.playing{background:var(--verm); border-color:var(--verm-deep); color:#fff}
.glyph{margin-right:8px}

/* panels */
.panel{
  background:rgba(255,255,255,.5); border:1px solid rgba(28,26,22,.12);
  border-radius:18px; padding:16px; margin-bottom:14px; box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
}
.transport{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.steps-readout{margin-left:auto; font-size:12.5px; color:var(--ink-soft); letter-spacing:.03em}

/* board */
.board-wrap{position:relative; overflow:hidden}
.enso{position:absolute; right:-30px; top:-30px; width:170px; height:170px; color:rgba(199,62,46,.16); pointer-events:none}
#board{
  position:relative; display:grid; gap:10px;
  grid-template-columns:repeat(4,1fr);
}
.tile{
  position:relative; aspect-ratio:1/1; border-radius:16px; cursor:pointer; border:1px solid rgba(28,26,22,.16);
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.18) 60%,rgba(185,138,47,.14));
  box-shadow:0 4px 14px rgba(28,26,22,.10), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:'Shippori Mincho',serif; color:var(--ink);
  transition:transform .1s ease, box-shadow .15s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent; user-select:none; overflow:hidden;
}
.tile::after{ /* glass sheen */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.55) 0%,transparent 40%);
}
.tile:hover{transform:translateY(-2px)}
.tile:active{transform:scale(.94)}
.tile .deg{font-size:clamp(20px,5vw,30px); font-weight:700; line-height:1}
.tile .note{font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:.12em; color:var(--ink-soft)}
.tile .key{position:absolute; top:6px; right:8px; font-size:9px; color:var(--ink-soft); opacity:.6; font-family:'Inter',sans-serif}
.tile.on{
  background:linear-gradient(135deg,#d84a38,#9e2c20);
  border-color:var(--verm-deep); color:#fff;
  box-shadow:0 6px 22px rgba(199,62,46,.45), inset 0 1px 0 rgba(255,255,255,.4);
}
.tile.on .note,.tile.on .key{color:rgba(255,255,255,.85)}
.tile.now{outline:3px solid var(--gold); outline-offset:-3px}
.tile.now.on{box-shadow:0 0 0 3px var(--gold), 0 6px 26px rgba(199,62,46,.6)}
.tile .ripple{
  position:absolute; width:12px; height:12px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(199,62,46,.55),transparent 70%);
  transform:translate(-50%,-50%); animation:rip .55s ease-out forwards;
}
@keyframes rip{to{width:150px; height:150px; opacity:0}}
.hint{margin:12px 2px 0; font-size:12px; color:var(--ink-soft)}
kbd{border:1px solid var(--stone); border-bottom-width:2px; border-radius:5px; padding:0 5px; font-size:11px; background:#fff}

/* sliders */
.sliders{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width:560px){.sliders{grid-template-columns:1fr}}
.slider-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.slider-head label{font-weight:600; font-size:13px; letter-spacing:.05em; text-transform:uppercase}
.slider-head .jp{font-family:'Shippori Mincho',serif; color:var(--verm); text-transform:none}
.slider-head output{font-variant-numeric:tabular-nums; font-size:13px; background:var(--ink); color:#f7f2e6; border-radius:8px; padding:3px 10px}
input[type=range]{
  width:100%; appearance:none; -webkit-appearance:none; height:34px; background:transparent; cursor:pointer; margin:0;
}
input[type=range]::-webkit-slider-runnable-track{
  height:8px; border-radius:99px;
  background:linear-gradient(90deg,var(--verm) var(--fill,50%),var(--stone) var(--fill,50%));
  border:1px solid rgba(28,26,22,.2);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:30px; height:30px; margin-top:-12px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#efe7d3 55%,#d9cfb8);
  border:2px solid var(--verm); box-shadow:0 3px 10px rgba(28,26,22,.25);
}
input[type=range]::-moz-range-track{height:8px; border-radius:99px; background:var(--stone)}
input[type=range]::-moz-range-progress{height:8px; border-radius:99px; background:var(--verm)}
input[type=range]::-moz-range-thumb{width:26px; height:26px; border-radius:50%; background:#fbf7ec; border:2px solid var(--verm)}
.ticks{display:flex; justify-content:space-between; font-size:11px; color:var(--ink-soft)}

/* record */
.rec-head h2{font-family:'Shippori Mincho',serif; margin:0 0 4px; font-size:21px}
.rec-head h2 .jp{color:var(--verm); font-size:15px}
.rec-head p{margin:0 0 12px; font-size:13px; color:var(--ink-soft)}
.rec-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.rec-progress{flex:1; min-width:140px; height:10px; border-radius:99px; background:var(--paper-2); border:1px solid rgba(28,26,22,.15); overflow:hidden}
#recBar{height:100%; width:0%; background:linear-gradient(90deg,var(--verm),var(--gold)); transition:width .1s linear}
.rec-status{font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.rec-status.hot{color:var(--verm); font-weight:700}
.take{display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap}
.take audio{flex:1; min-width:200px}
.take a{text-decoration:none}

.foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); padding:6px 4px}
.foot-jp{font-family:'Shippori Mincho',serif}

@media (max-width:420px){
  .v-text{display:none}
  #board{gap:8px}
  .btn-play{min-width:0; flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}