:root{color-scheme:light;--paper:#fffdf6;--bg:#f3f0e6;--ink:#2d4439;--green:#315e4c;--green-soft:#e6eee4;--orange:#a24f31;--muted:#667367;--line:#d9ddcc;--yellow:#f3ce79;font-family:"Hiragino Maru Gothic ProN","BIZ UDPGothic","Noto Sans JP",system-ui,sans-serif;font-synthesis:none;color:var(--ink);background:var(--bg);font-size:17px;line-height:1.75}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation;cursor:pointer;border:1px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);min-height:52px;padding:12px 20px;font-weight:600}button:hover:not(:disabled){background:#edf1e7}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #c67d24;outline-offset:4px}button.primary{background:var(--green);color:#fffdf6;border-color:var(--green);box-shadow:0 4px 0 #224734}button.primary:hover:not(:disabled){background:#254f3d}button.flat{border:0;background:transparent;box-shadow:none}button.small{font-size:14px;padding:10px 14px;min-height:48px}button.wide{width:100%}a{color:var(--green)}h1,h2,h3,p{margin:0}h1{font-size:clamp(30px,5vw,46px);line-height:1.4;letter-spacing:.07em}h2{font-size:26px;line-height:1.5}h3{font-size:19px}p+p{margin-top:12px}.muted{color:var(--muted);font-size:14px}.eyebrow{color:var(--orange);font-size:13px;font-weight:700;letter-spacing:.15em}.shell{max-width:1050px;margin:auto;padding:24px 32px 36px}.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:28px}.brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:.04em}.brand img{width:40px;height:40px}.top-actions{display:flex;flex-wrap:wrap;gap:8px}.badge{font-size:13px;padding:4px 12px;background:var(--green-soft);border-radius:99px;color:var(--green)}.home{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:44px;min-height:510px}.intro{padding:12px 0}.intro h1{margin:12px 0 18px}.intro .lead{font-size:18px;line-height:2;margin-bottom:26px}.start-card{background:var(--paper);border:1px solid var(--line);padding:20px;border-radius:20px;max-width:380px}.start-card .primary{font-size:20px}.start-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;gap:8px}.start-card .muted{margin-top:12px}.scene{width:100%;display:block}.scene-wrap{position:relative;padding:20px 0}.scene-caption{text-align:center;font-size:14px;letter-spacing:.12em;color:var(--muted)}.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:20px;margin-top:28px;font-size:13px;color:var(--muted)}.play-shell{max-width:820px}.progress-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}.progress-dots{display:flex;gap:10px}.dot{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e6e7da;font-size:14px}.dot.current{outline:2px solid var(--green);outline-offset:4px;background:var(--paper)}.dot.done{background:var(--green);color:white}.recipient{display:flex;gap:12px;align-items:center;justify-content:center;margin:12px 0 18px}.animal{background:var(--green-soft);display:grid;place-items:center;border-radius:50%;font-size:38px;width:76px;height:76px}.recipient .muted{font-size:14px}.postcard{position:relative;background:var(--paper);border:1px solid #d7d8c8;box-shadow:0 8px 24px #2d443908;border-radius:24px;padding:32px 26px;text-align:center}.postcard:before{content:"";display:block;height:6px;background:repeating-linear-gradient(120deg,#bd6950 0 14px,transparent 14px 26px,#7d9d8e 26px 40px,transparent 40px 52px);border-radius:4px;margin-bottom:26px;opacity:.75}.instruction{font-size:18px;margin-bottom:18px}.sentence{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:clamp(26px,4.5vw,38px);font-weight:600;line-height:1.7;margin:26px 0 30px;letter-spacing:.04em}.blank{min-width:62px;min-height:66px;display:inline-grid;place-items:center;border:2px dashed #9baa9b;border-radius:12px;color:var(--green);background:#f2f5eb}.blank.filled{border-style:solid;background:var(--green-soft)}.answers{display:flex;justify-content:center;gap:28px}.answer{min-width:112px;min-height:100px;font-size:46px;border:2px solid var(--line);box-shadow:0 4px 0 #e1e4d8}.answer.reveal{border-color:var(--green);background:var(--green-soft)}.feedback{min-height:68px;display:grid;place-items:center;font-size:18px;margin:22px auto 8px;max-width:600px}.feedback.good{color:var(--green)}.action-row{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.audio-error{color:#8d432c;font-size:14px;margin-top:12px}.lesson{max-width:680px;margin:30px auto;text-align:center}.lesson .big-letter{font-size:66px;line-height:1.4;color:var(--green);font-weight:600}.lesson .postcard{padding:28px}.lesson .rule{font-size:21px;margin:20px 0}.lesson .example{font-size:28px;background:var(--green-soft);padding:20px;border-radius:12px;margin:20px 0}.finish{text-align:center;max-width:650px;margin:48px auto}.finish img{width:140px;height:140px}.finish h1{margin:22px 0 16px}.finish .action-row{margin-top:28px}.collection{display:flex;justify-content:center;gap:12px;margin:26px 0}.stamp{border:2px dashed #b19c73;padding:12px 20px;font-size:30px;border-radius:10px;background:#fff9e8}.panel{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;margin:20px 0}.panel>p{margin-top:10px}.panel h2{font-size:22px;margin-bottom:12px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{display:flex;flex-direction:column;gap:7px;font-size:15px}.field input,.field select,.field textarea{min-width:0;width:100%;min-height:48px;border:1px solid #bfc8b8;border-radius:10px;padding:10px 12px;background:white;color:var(--ink)}.field textarea{min-height:90px;resize:vertical}.check-field{display:flex;align-items:center;gap:12px;min-height:48px;font-size:15px}.check-field input{width:22px;height:22px;accent-color:var(--green)}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.stat{padding:16px;background:var(--green-soft);border-radius:12px}.stat strong{display:block;font-size:26px}.stat span{font-size:13px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top}th{font-weight:600;white-space:nowrap}.record-detail{margin-top:12px}summary{cursor:pointer;min-height:48px;padding:10px 0;color:var(--green)}.record-detail .sentence-small{font-size:15px}.tag{font-size:12px;display:inline-block;padding:2px 8px;border-radius:5px;background:#edece0;margin:2px}.note-grid{display:grid;grid-template-columns:180px 1fr auto;align-items:end;gap:12px;margin-top:16px}.notice{background:#fff0d3;color:#74491f;border-bottom:1px solid #dfc290;padding:12px 20px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font-size:14px}.quiet .recipient,.quiet .postcard:before{display:none}.quiet .postcard{box-shadow:none}.quiet .postcard{padding-top:24px}.hidden,[hidden]{display:none!important}dialog{border:1px solid var(--line);border-radius:24px;background:var(--paper);color:var(--ink);padding:28px;max-width:min(540px,calc(100% - 32px));box-shadow:0 20px 80px #1c332333}dialog::backdrop{background:#19372966}dialog h2{margin-bottom:16px}dialog p{margin-bottom:22px}dialog .action-row{justify-content:flex-end}.loading{padding:80px;text-align:center}.empty{padding:20px 0;color:var(--muted)}.status-msg{min-height:24px;color:var(--green);font-size:14px}.print-only{display:none}
.intro h1{font-size:clamp(28px,3.3vw,36px);letter-spacing:.03em}
@media(max-width:760px){.shell{padding:20px}.home{gap:24px;min-height:auto}.home .scene-wrap{padding:0}.start-card{max-width:none}.note-grid{grid-template-columns:1fr}.stats-grid{gap:8px}.stat{padding:12px}.stat strong{font-size:22px}}
@media(max-width:560px){.shell{padding:16px}.topbar{gap:8px;margin-bottom:18px}.brand{font-size:15px}.brand img{width:32px;height:32px}.top-actions{gap:0}.home{display:flex;flex-direction:column-reverse;gap:4px}.scene-wrap{width:230px}.scene-caption{display:none}.intro{width:100%;text-align:center}.intro h1{font-size:30px;margin:8px 0 12px}.intro .lead{font-size:16px;margin-bottom:18px}.start-info{font-size:15px}.footer{margin-top:22px;font-size:12px}.postcard{padding:22px 16px;border-radius:20px}.answers{gap:24px}.answer{min-width:100px;min-height:92px;font-size:42px}.sentence{gap:8px;font-size:28px}.blank{min-width:52px;min-height:58px}.instruction{font-size:16px}.feedback{font-size:17px;min-height:85px}.settings-grid{grid-template-columns:1fr}.panel{padding:18px}.stats-grid{grid-template-columns:1fr}.stat{display:flex;gap:16px;align-items:center}.stat strong{min-width:75px}.progress-row{font-size:14px}.lesson .example{font-size:24px}.lesson .rule{font-size:18px}.animal{width:58px;height:58px;font-size:30px}.finish{margin:25px auto}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media print{body{background:white}button,.topbar,.footer,#notice,.no-print{display:none!important}.shell{max-width:none;padding:0}.panel{break-inside:avoid;border-radius:0}.print-only{display:block}}