:root{
  --paper:#F3EEE1;
  --paper-2:#EAE2D0;
  --ink:#2A2724;
  --ink-soft:#5B554C;
  --aka:#B7410E;
  --aka-deep:#8C2F0A;
  --gold:#A98D5D;
  --line: rgba(42,39,36,0.18);
  --card-shadow: 0 18px 40px -20px rgba(42,39,36,0.35);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(183,65,14,0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(42,39,36,0.025) 0px, rgba(42,39,36,0.025) 1px, transparent 1px, transparent 26px),
    var(--paper);
  color:var(--ink);
  font-family:'Noto Sans JP', sans-serif;
  display:flex;
  justify-content:center;
  padding:28px 14px 60px;
}
.wrap{ width:100%; max-width:640px; }

header{ text-align:center; margin-bottom:18px; position:relative; }
.eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:0.18em; color:var(--ink-soft);
  text-transform:uppercase;
}
h1{
  font-family:'Shippori Mincho', serif;
  font-weight:800;
  font-size:26px;
  margin:6px 0 2px;
  letter-spacing:0.04em;
}
h1 span{ color:var(--aka); }
.sub{ font-size:12.5px; color:var(--ink-soft); }

.unit-select{
  display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  margin:18px 0 14px;
}
.unit-btn{
  font-family:'Shippori Mincho', serif;
  font-weight:700;
  border:1px solid var(--line);
  background:var(--paper-2);
  color:var(--ink-soft);
  padding:7px 14px;
  border-radius999px;
  font-size:13.5px;
  cursor:pointer;
  transition:all .15s ease;
}
.unit-btn.active{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.progress-rail{
  height:3px; background:var(--line); border-radius:3px; overflow:hidden; margin-bottom:20px;
}
.progress-fill{
  height:100%; background:var(--aka); width:0%; transition:width .3s ease;
}

.card{
  background:#FBF8F0;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--card-shadow);
  padding:26px 22px 22px;
  position:relative;
  min-height:300px;
  display:flex; flex-direction:column;
}
.meta-row{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; color:var(--ink-soft);
  margin-bottom:14px;
}
.qno{
  font-family:'Shippori Mincho', serif;
  color:var(--aka);
  font-weight:800;
  font-size:15px;
}
.state-tag{
  letter-spacing:0.08em;
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:999px;
}
.state-tag.speaking{ color:var(--aka); border-color:var(--aka); }

.q-text{
  font-size:18px;
  line-height:1.85;
  font-weight:500;
  flex:1;
  display:flex; align-items:center;
}

.answer-zone{
  margin-top:18px;
  border-top:1px dashed var(--line);
  padding-top:16px;
  position:relative;
  min-height:64px;
}
.answer-label{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.15em;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.a-text{
  font-family:'Shippori Mincho', serif;
  font-weight:700;
  font-size:21px;
  color:var(--ink);
  filter: blur(7px);
  opacity:0.35;
  transition:filter .35s ease, opacity .35s ease;
  user-select:none;
}
.a-text.revealed{
  filter:blur(0); opacity:1;
}
.hanko{
  position:absolute;
  right:6px;
  top:6px;
  width:46px; height:46px;
  border:2.5px solid var(--aka);
  border-radius:8px;
  color:var(--aka);
  font-family:'Shippori Mincho', serif;
  font-weight:800;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  transform:scale(0) rotate(-14deg);
  opacity:0;
  transition:transform .28s cubic-bezier(.2,1.4,.4,1), opacity .2s ease;
  pointer-events:none;
  background:rgba(183,65,14,0.05);
}
.hanko.show{ transform:scale(1) rotate(-14deg); opacity:1; }

.tap-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; color:var(--ink-soft); opacity:0; pointer-events:none;
}

.controls{
  margin-top:22px;
  display:flex; flex-direction:column; gap:14px;
}
.transport{
  display:flex; align-items:center; justify-content:center; gap:16px;
}
.tbtn{
  border:none; background:none; cursor:pointer;
  color:var(--ink); display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  transition:background .15s ease;
}
.tbtn:hover{ background:var(--paper-2); }
.tbtn svg{ width:20px; height:20px; }

.play-btn{
  width:66px; height:66px;
  border-radius:50%;
  background:var(--aka);
  color:#fff;
  box-shadow:0 10px 24px -8px rgba(183,65,14,0.6);
}
.play-btn:hover{ background:var(--aka-deep); }
.play-btn svg{ width:26px; height:26px; }

.row-controls{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink-soft);
  gap:10px;
}
.slider-group{ display:flex; align-items:center; gap:8px; flex:1; }
.slider-group label{ font-family:'JetBrains Mono', monospace; font-size:10.5px; white-space:nowrap; }
input[type=range]{
  -webkit-appearance:none; appearance:none;
  flex:1; height:3px; background:var(--line); border-radius:3px; outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--aka); cursor:pointer; border:2px solid #FBF8F0;
  box-shadow:0 0 0 1px var(--aka);
}

.toggle-row{
  display:flex; justify-content:center; gap:8px; margin-top:2px;
}
.toggle{
  font-family:'JetBrains Mono', monospace;
  font-size:10.5px;
  letter-spacing:0.04em;
  padding:5px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink-soft);
  cursor:pointer;
  background:transparent;
}
.toggle.on{ color:var(--aka); border-color:var(--aka); background:rgba(183,65,14,0.06); }

footer{
  text-align:center; margin-top:22px; font-size:10.5px; color:var(--ink-soft);
  font-family:'JetBrains Mono', monospace;
}

.voice-warn{
  text-align:center; font-size:11.5px; color:var(--aka-deep);
  margin-top:10px; display:none;
}

@media (max-width:400px){
  .a-text{ font-size:18px; }
  .q-text{ font-size:16.5px; }
}