:root {
  --ink: #15283a;
  --ink-2: #385066;
  --paper: #f4f1e9;
  --paper-2: #ebe6da;
  --white: #fffefa;
  --red: #c84b3f;
  --blue: #2e6675;
  --line: rgba(21, 40, 58, .16);
  --shadow: 0 24px 70px rgba(29, 40, 46, .12);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { margin: 0; color: var(--ink); font-family: "Noto Sans JP", sans-serif; background: var(--paper); }
button, textarea { font: inherit; }
button { color: inherit; }

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .32;
  background-image: linear-gradient(rgba(21,40,58,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(21,40,58,.035) 1px, transparent 1px);
  background-size: 28px 28px;
}

.topbar { height: 76px; padding: 0 4vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--ink); font: 500 23px "DM Mono"; }
.brand b { display: block; font: 700 17px "DM Mono"; letter-spacing: .06em; }
.brand small { display: block; margin-top: 2px; font: 500 8px "DM Mono"; letter-spacing: .15em; color: var(--ink-2); }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.status { font: 500 10px "DM Mono"; letter-spacing: .08em; color: var(--ink-2); }
.status i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #cc8e32; box-shadow: 0 0 0 4px rgba(204,142,50,.12); }
.status.vertex i { background: #3a9272; box-shadow: 0 0 0 4px rgba(58,146,114,.12); }
.ghost-button, .back-button { border: 0; background: transparent; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }

main { position: relative; z-index: 1; }
.home-view { min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); }
.hero-copy { min-height: calc(100vh - 76px); height: calc(100vh - 76px); padding: clamp(62px, 9vw, 130px) 7vw; display: flex; flex-direction: column; justify-content: center; position: sticky; top: 76px; align-self: start; }
.eyebrow { margin: 0 0 20px; color: var(--red); font: 500 10px "DM Mono"; letter-spacing: .18em; }
h1 { margin: 0; font: 700 clamp(42px, 6vw, 78px)/1.25 "Noto Serif JP", serif; letter-spacing: -.045em; }
h1 em { color: var(--red); font-style: normal; position: relative; }
h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; background: var(--red); transform: rotate(-1deg); }
.lead { max-width: 620px; margin: 34px 0 0; color: var(--ink-2); font-size: 15px; line-height: 2; }
.principles { display: flex; flex-wrap: wrap; gap: 10px 25px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font: 500 10px "DM Mono"; letter-spacing: .08em; }

.problem-picker-wrap { background: var(--ink); color: var(--white); padding: clamp(52px, 7vw, 96px) 6vw; display: flex; flex-direction: column; justify-content: center; }
.picker-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 22px; }
.picker-heading span { font: 600 22px "Noto Serif JP"; }
.picker-heading small { color: #9ba9b5; font-size: 11px; }
.problem-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 18px; }
.problem-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.problem-filters button, .random-problem { padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #9ba9b5; cursor: pointer; font-size: 9px; }
.problem-filters button:hover, .problem-filters button.active, .random-problem:hover { border-color: rgba(255,255,255,.58); color: white; background: rgba(255,255,255,.09); }
.random-problem { flex: 0 0 auto; color: #e9a79f; }
.topic-browser { margin: 0 0 18px; padding: 16px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
.topic-browser-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; color: #d8e0e5; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.topic-browser-head button { border: 0; background: transparent; color: #e9a79f; cursor: pointer; font-size: 9px; text-decoration: underline; }
.topic-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.topic-filters button { min-height: 56px; padding: 10px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border: 1px solid rgba(255,255,255,.12); background: transparent; color: white; cursor: pointer; text-align: left; }
.topic-filters button:hover, .topic-filters button.active { border-color: #e9a79f; background: rgba(233,167,159,.09); }
.topic-filters b { font-size: 10px; }
.topic-filters span { color: #8798a5; font: 9px "DM Mono"; }
.empty-problems { padding: 24px; border: 1px dashed rgba(255,255,255,.2); color: #9ba9b5; font-size: 11px; line-height: 1.8; }
.problem-list { display: grid; gap: 12px; }
.problem-card { width: 100%; padding: 22px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: white; text-align: left; cursor: pointer; transition: .2s ease; }
.problem-card:hover, .problem-card:focus-visible { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.09); transform: translateX(4px); outline: none; }
.card-top, .card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.card-top span { color: #e9a79f; font: 500 10px "DM Mono"; letter-spacing: .08em; }
.card-top small, .card-bottom { color: #9ba9b5; font-size: 10px; }
.problem-card h2 { margin: 13px 0 17px; font: 600 18px "Noto Serif JP"; }
.tags { display: flex; gap: 7px; flex-wrap: wrap; }
.tags b { padding: 4px 7px; border: 1px solid rgba(255,255,255,.12); font-size: 9px; font-weight: 500; }
.arrow { color: white; font: 18px "DM Mono"; }
.rights-note { margin: 22px 0 0; color: #7f909e; font-size: 9px; line-height: 1.7; }

.session-view { min-height: calc(100vh - 76px); display: grid; grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr); }
.problem-panel { padding: 42px 5vw 40px; border-right: 1px solid var(--line); position: sticky; top: 0; align-self: start; }
.back-button { padding: 0; margin-bottom: 50px; }
.problem-meta { display: flex; justify-content: space-between; align-items: center; font: 500 10px "DM Mono"; color: var(--red); letter-spacing: .08em; }
.problem-meta span:last-child { color: var(--ink-2); }
.year-label { margin: 12px 0 5px; color: var(--ink-2); font-size: 11px; }
.problem-panel h2 { margin: 0; font: 700 clamp(25px, 3vw, 38px) "Noto Serif JP"; }
.problem-statement { margin-top: 38px; padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 600 18px/2 "Noto Serif JP"; }
.expert-lens { margin-top: 30px; padding: 20px; background: rgba(46,102,117,.08); border-left: 3px solid var(--blue); }
.lens-label { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.expert-lens p { margin: 9px 0 0; font-size: 12px; line-height: 1.8; }
.strategy-support button { margin-top: 12px; padding: 8px 11px; border: 1px solid var(--blue); background: transparent; color: var(--blue); cursor: pointer; font-size: 10px; font-weight: 700; }
.strategy-support button:disabled { border-color: var(--line); color: #87939a; cursor: not-allowed; }
.strategy-content { padding-top: 12px; border-top: 1px solid rgba(46,102,117,.2); }
.copyright-line { margin-top: 26px; color: #84909a; font: 9px "DM Mono"; }

.coach-panel { min-height: calc(100vh - 76px); padding: 42px 6vw; background: var(--white); display: flex; flex-direction: column; }
.progress-head { display: flex; align-items: end; justify-content: space-between; }
.progress-head .eyebrow { margin-bottom: 8px; }
.progress-head h3 { margin: 0; font: 600 23px "Noto Serif JP"; }
#progress-number { font: 500 11px "DM Mono"; color: var(--ink-2); }
.progress-steps { list-style: none; padding: 0; margin: 25px 0 34px; display: grid; grid-template-columns: repeat(4, 1fr); }
.progress-steps li { position: relative; display: flex; align-items: center; gap: 8px; color: #a2aab0; font-size: 10px; }
.progress-steps li::after { content: ""; height: 1px; background: #d6d8d7; position: absolute; left: 28px; right: 5px; top: 11px; }
.progress-steps li:last-child::after { display: none; }
.progress-steps i { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #c4c9ca; border-radius: 50%; background: var(--white); z-index: 1; font: normal 9px "DM Mono"; }
.progress-steps li.active { color: var(--ink); font-weight: 700; }
.progress-steps li.active i { color: white; background: var(--red); border-color: var(--red); }
.progress-steps li.done::after { background: var(--red); }

.messages { flex: 1; min-height: 250px; max-height: 45vh; overflow: auto; padding-right: 6px; }
.message { display: flex; gap: 12px; margin: 0 0 20px; }
.message.student { flex-direction: row-reverse; }
.avatar { flex: 0 0 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: white; font: 500 11px "DM Mono"; }
.message.student .avatar { background: var(--paper-2); color: var(--ink); }
.bubble { max-width: min(570px, 86%); }
.speaker { display: block; margin-bottom: 5px; color: #85919b; font-size: 9px; letter-spacing: .08em; }
.message.student .speaker { text-align: right; }
.bubble p { margin: 0; padding: 14px 16px; border: 1px solid #e0e1dd; background: #f8f7f2; font-size: 13px; line-height: 1.8; white-space: pre-wrap; }
.message.student .bubble p { background: var(--ink); border-color: var(--ink); color: white; }
.voice-console { margin-top: 18px; padding: 16px 18px; display: grid; grid-template-columns: 58px 1fr 38px; align-items: center; gap: 15px; background: var(--ink); color: white; border-radius: 2px; box-shadow: var(--shadow); }
.mic-button { width: 56px; height: 56px; display: grid; place-items: center; position: relative; border: 0; border-radius: 50%; background: var(--red); color: white; cursor: pointer; }
.mic-button svg { width: 25px; height: 25px; fill: currentColor; position: relative; z-index: 2; }
.mic-button:hover { transform: scale(1.04); }
.mic-button.listening { background: #f0675a; }
.mic-button.listening .mic-rings, .mic-button.listening::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(240,103,90,.75); border-radius: 50%; animation: voice-pulse 1.25s infinite; }
.mic-button.listening::after { animation-delay: .4s; }
@keyframes voice-pulse { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.voice-copy { min-width: 0; }
.voice-copy b { display: block; font: 600 14px "Noto Sans JP"; }
.voice-copy span { display: block; margin-top: 4px; color: #acbac4; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.speaker-button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: transparent; opacity: .4; cursor: pointer; }
.speaker-button.active { opacity: 1; }
.coach-form { margin-top: 20px; padding: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); }
.coach-form label { display: block; margin-bottom: 8px; color: var(--ink-2); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.coach-form textarea { width: 100%; border: 0; resize: vertical; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.7; outline: 0; }
.coach-form textarea::placeholder { color: #a4aaa8; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.form-foot span { color: #8d9698; font-size: 9px; }
.form-foot button { border: 0; background: var(--red); color: white; padding: 11px 16px; cursor: pointer; font-size: 11px; font-weight: 700; }
.form-foot button:disabled { opacity: .55; cursor: wait; }
.form-foot b { margin-left: 9px; font-family: "DM Mono"; }
.local-note { margin: 12px 0 0; color: #84909a; font-size: 10px; line-height: 1.6; }

[hidden] { display: none !important; }
@media (max-width: 900px) {
  .home-view, .session-view { grid-template-columns: 1fr; }
  .hero-copy { position: static; min-height: 570px; height: auto; }
  .problem-panel { position: static; border-right: 0; border-bottom: 1px solid var(--line); }
  .coach-panel { min-height: 720px; }
}
@media (max-width: 560px) {
  .topbar { height: 66px; padding: 0 18px; }
  .brand small, .status { display: none; }
  .home-view { min-height: calc(100vh - 66px); }
  .hero-copy { min-height: 500px; padding: 55px 24px; }
  h1 { font-size: 40px; }
  .problem-picker-wrap { padding: 50px 24px; }
  .problem-tools { align-items: stretch; flex-direction: column; }
  .random-problem { align-self: flex-start; }
  .topic-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-panel, .coach-panel { padding: 32px 22px; }
  .back-button { margin-bottom: 35px; }
  .progress-steps li span { display: none; }
  .messages { max-height: none; }
  .form-foot span { display: none; }
  .form-foot { justify-content: flex-end; }
  .voice-console { grid-template-columns: 58px 1fr 34px; padding: 14px; }
}