:root{--bg-top: #e3ede0;--bg-bottom: #b9c9b0;--paper: rgba(248, 250, 243, .84);--paper-strong: rgba(252, 255, 248, .94);--ink: #1f241d;--muted: #54614f;--accent: #3f6f4f;--accent-soft: rgba(63, 111, 79, .2);--accent-strong: #6f8f4f;--success: #2d6a43;--danger: #8a4732;--border: rgba(31, 36, 29, .14);--shadow: 0 24px 60px rgba(49, 68, 42, .16);--font-display: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;--font-body: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(circle at top,rgba(255,255,255,.55),transparent 34%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom));color:var(--ink);font-family:var(--font-body)}body:before{position:fixed;inset:0;background:linear-gradient(90deg,rgba(90,64,34,.035) 50%,transparent 50%),linear-gradient(#ffffff14,#0000000a);background-size:6px 6px,100% 100%;content:"";mix-blend-mode:multiply;opacity:.4;pointer-events:none}button{font:inherit}button:focus-visible{outline:3px solid rgba(63,111,79,.34);outline-offset:3px}code{font-family:SFMono-Regular,Consolas,Menlo,Monaco,monospace}.app-shell{position:relative;min-height:100vh;padding:32px 20px 48px}.paper-grain{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.36),transparent 16%),radial-gradient(circle at 80% 30%,rgba(111,143,79,.1),transparent 18%),radial-gradient(circle at 70% 75%,rgba(63,111,79,.12),transparent 20%);pointer-events:none}.screen{position:relative;z-index:1;width:min(1120px,100%);margin:0 auto}.screen-start,.screen-results{display:grid;gap:28px;align-items:start;padding-top:32px}.hero-copy{max-width:720px}.eyebrow{margin:0 0 10px;color:var(--accent);font-size:.85rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}h1,h2{margin:0;font-family:var(--font-display);font-weight:600}h1{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1.02}h2{font-size:clamp(1.6rem,3vw,2.4rem)}.lede,.summary-copy{margin:14px 0 0;max-width:62ch;color:var(--muted);font-size:1.04rem;line-height:1.8}.panel,.reading-card,.result-panel,.status-bar{border:1px solid var(--border);border-radius:28px;background:var(--paper);box-shadow:var(--shadow);backdrop-filter:blur(12px)}.panel{padding:28px}.panel-block+.panel-block{margin-top:28px}.panel>.primary-button{display:inline-flex;margin-top:32px}.panel-block h2{margin-bottom:14px}.choice-grid{display:grid;gap:14px}.difficulty-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.choice,.chip,.command-card,.primary-button,.secondary-button{transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease,opacity .18s ease}.choice{display:grid;gap:8px;padding:18px;border:1px solid var(--border);border-radius:20px;background:#fffcf5d1;color:inherit;text-align:left;cursor:pointer}.choice:hover,.chip:hover,.command-card:hover,.primary-button:hover,.secondary-button:hover{transform:translateY(-2px)}.command-card:disabled:hover{transform:none}.selected{border-color:#3f6f4f8f;background:linear-gradient(180deg,#3f6f4f2e,#ffffffc7);box-shadow:0 14px 34px #3f6f4f24}.chip.selected{background:var(--accent);color:#f8f6f0;border-color:transparent;font-weight:700;box-shadow:none}.choice-title{font-size:1.15rem;font-weight:700}.choice-text,.choice-meta{color:var(--muted);line-height:1.6}.chip-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:4px}.chip{min-width:88px;padding:12px 18px;border:1px solid var(--border);border-radius:999px;background:#fffcf5d1;cursor:pointer}.primary-button,.secondary-button{border:none;border-radius:999px;padding:15px 24px;cursor:pointer}.primary-button{background:linear-gradient(135deg,var(--accent),#2f5740);color:#f8f6f0;font-weight:700}.secondary-button{background:#ffffffad;color:var(--ink);border:1px solid var(--border)}.toggle-button{min-width:132px;padding:12px 16px;border:1px solid var(--border);border-radius:999px;background:#fffcf5d1;color:var(--ink);cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}.toggle-button.enabled{border-color:transparent;background:var(--accent);color:#f8f6f0;font-weight:700}.toggle-button:disabled{opacity:.58;cursor:not-allowed}.toggle-button-compact{min-width:0;padding:8px 14px}.screen-play{display:grid;gap:20px}.status-bar{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:18px 22px}.status-item{display:grid;gap:4px}.status-item-audio{align-items:start}.status-label{color:var(--muted);font-size:.85rem}.timer-bar{overflow:hidden;inline-size:100%;block-size:7px;border-radius:999px;background:#3f6f4f24}.timer-bar-fill{block-size:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#79a05c);transition:width .22s linear,background-color .22s ease}.timer-bar-fill.warning{background:linear-gradient(90deg,#b96b34,var(--danger))}.play-layout{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:22px;align-items:start}.reading-card{position:sticky;top:24px;padding:20px}.reading-label{margin:0 0 16px;color:var(--accent-strong);font-size:.9rem;font-weight:700}.reading-frame{display:flex;justify-content:center;align-items:flex-start;block-size:min(760px,calc(100vh - 230px));min-block-size:360px;padding:26px 18px;border-radius:18px;background:linear-gradient(180deg,#ffffffad,#e9f0e0eb),linear-gradient(90deg,rgba(111,143,79,.12),transparent 16%,rgba(63,111,79,.08));border:1px solid rgba(111,143,79,.18);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}.reading-text{margin:0;inline-size:100%;max-inline-size:100%;writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--font-display);font-size:clamp(1.55rem,2.2vw,2rem);line-height:1.95;letter-spacing:.08em}.reading-char{display:inline-block;opacity:0;filter:blur(8px);animation:reveal-reading-char 1.2s ease-out both}.reading-char-space{min-inline-size:.7em}.reading-char-word{white-space:nowrap;word-break:keep-all}@keyframes reveal-reading-char{0%{opacity:0;filter:blur(8px);transform:translateY(4px)}60%{opacity:.6;filter:blur(3px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}.answer-column{display:grid;gap:18px}.card-grid{display:grid;gap:14px}.card-grid[data-difficulty=easy]{grid-template-columns:repeat(2,minmax(0,1fr))}.card-grid[data-difficulty=normal]{grid-template-columns:repeat(3,minmax(0,1fr))}.card-grid[data-difficulty=hard]{grid-template-columns:repeat(4,minmax(0,1fr))}.command-card{display:grid;gap:12px;min-height:136px;padding:18px;border:1px solid var(--border);border-radius:24px;background:linear-gradient(180deg,#fbfdf7f2,#e7efdfeb);color:inherit;text-align:left;cursor:pointer}.command-card:disabled{cursor:default}.command-card-label{color:var(--muted);font-size:.82rem}.command-card strong{font-size:1.16rem;line-height:1.45}.command-card.correct{border-color:#235c4366;background:linear-gradient(180deg,#235c431f,#ffffffdb)}.command-card.wrong{border-color:#9f35286b;background:linear-gradient(180deg,#9f352821,#ffffffdb)}.result-panel{padding:22px;background:linear-gradient(180deg,#fbfef8f0,#edf4e5e6)}.verdict{margin:0 0 10px;font-size:1.1rem;font-weight:800}.verdict.correct{color:var(--success)}.verdict.wrong{color:var(--danger)}.result-command,.result-explanation{margin:0;line-height:1.8}.result-explanation{margin-top:10px;color:var(--muted)}.next-button{margin-top:18px}.screen-results{padding-top:72px}.result-summary{max-width:760px;margin:0 auto}.summary-score{margin:18px 0 8px;color:var(--accent-strong);font-family:var(--font-display);font-size:clamp(3rem,8vw,5rem);line-height:1}.summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:24px}.summary-grid div{display:grid;gap:6px;padding:18px;border:1px solid var(--border);border-radius:18px;background:#ffffff85}.summary-grid span{color:var(--muted)}.summary-grid strong{font-size:1.45rem}.result-actions{display:flex;gap:12px;margin-top:24px}@media(max-width:900px){.difficulty-grid,.status-bar,.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.play-layout{grid-template-columns:1fr}.reading-card{position:static}.reading-frame{block-size:min(520px,calc(100vh - 220px));min-block-size:320px}.reading-text{font-size:clamp(1.2rem,4vw,1.65rem)}.card-grid[data-difficulty=hard]{grid-template-columns:repeat(2,minmax(0,1fr))}.command-card{min-height:124px}}@media(max-width:640px){.app-shell{padding-inline:14px}.panel,.reading-card,.result-panel,.status-bar{border-radius:22px}.difficulty-grid,.status-bar,.summary-grid,.card-grid[data-difficulty=easy],.card-grid[data-difficulty=normal],.card-grid[data-difficulty=hard]{grid-template-columns:1fr}.toggle-button{width:100%}.reading-frame{block-size:min(420px,calc(100vh - 210px));min-block-size:260px;padding-inline:14px}.result-actions{flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reading-char{opacity:1;filter:blur(0);transform:none}}