:root { --cedar:#24483a; --persimmon:#d95d39; --gold:#e1ad3d; --paper:#fffaf0; --ink:#2d2a20; --muted:#665f50; --line:rgba(36,72,58,.17); }
* { box-sizing:border-box; } body { margin:0; background:linear-gradient(160deg,#fffaf0,#edf7f2); color:var(--ink); font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif; } main { width:min(100% - 28px,1120px); margin:0 auto; padding:18px 0 42px; } .site-nav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; padding:8px; border:1px solid rgba(36,72,58,.16); border-radius:999px; background:rgba(255,250,240,.86); box-shadow:0 12px 30px rgba(50,41,20,.10); backdrop-filter:blur(18px); } .site-nav a { min-height:44px; display:inline-flex; align-items:center; border-radius:999px; background:transparent; color:var(--cedar); padding:10px 16px; font-weight:900; text-decoration:none; transition:transform 160ms ease,background 160ms ease,color 160ms ease,box-shadow 160ms ease; } .button { border:1px solid var(--line); border-radius:999px; background:rgba(255,250,240,.78); color:var(--cedar); padding:9px 14px; font-weight:900; text-decoration:none; } .site-nav a:hover { transform:translateY(-1px); background:rgba(36,72,58,.12); } .site-nav a[aria-current="page"] { background:var(--persimmon); color:#fffaf0; box-shadow:0 8px 18px rgba(217,93,57,.25); } .site-nav a:focus-visible,.button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; } .button:hover { background:var(--cedar); color:#fffaf0; } .hero,.card,.faq,.worksheet { border:1px solid var(--line); border-radius:28px; background:rgba(255,250,240,.86); box-shadow:0 18px 50px rgba(50,41,20,.10); } .hero { padding:clamp(24px,5vw,54px); margin-bottom:16px; } .eyebrow { color:var(--persimmon); font-size:.78rem; font-weight:900; letter-spacing:.07em; text-transform:uppercase; } h1,h2,h3 { color:var(--cedar); line-height:1.1; } h1 { margin:.25rem 0 .75rem; font-size:clamp(2.25rem,6vw,4.8rem); } h2 { margin-top:0; } p,li { line-height:1.65; } .lead { max-width:760px; color:var(--muted); font-size:1.08rem; } .actions,.grade-nav { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .button.primary { background:var(--cedar); color:#fffaf0; } .grade-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(145px,1fr)); gap:10px; } .kanji-card { display:block; border:1px solid var(--line); border-radius:18px; padding:13px; background:#fffdf7; color:inherit; text-decoration:none; } .kanji-card:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(50,41,20,.12); } .kanji { color:var(--cedar); font-size:2rem; font-weight:900; line-height:1; } .reading { color:var(--persimmon); font-weight:900; } .meaning { color:var(--muted); font-size:.82rem; } .two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:16px 0; } .card,.faq { padding:24px; } .faq + .faq { margin-top:12px; } .worksheet { padding:22px; } .worksheet-header { display:flex; justify-content:space-between; gap:18px; border-bottom:2px solid var(--cedar); margin-bottom:16px; } .worksheet-header h1 { font-size:2rem; } .worksheet-meta { display:flex; gap:18px; flex-wrap:wrap; font-weight:800; } .worksheet-table { width:100%; border-collapse:collapse; } .worksheet-table th,.worksheet-table td { border:1px solid #a69e8d; padding:8px; text-align:left; vertical-align:middle; } .worksheet-table .character { width:12%; color:var(--cedar); font-size:2rem; font-weight:900; text-align:center; } .writing-boxes { color:#9e9582; font-size:1.5rem; letter-spacing:.18em; white-space:nowrap; } .print-actions { margin:16px 0; } footer { margin-top:24px; text-align:center; color:var(--muted); } footer a,a { color:#a6402b; } @media(max-width:650px){ main{width:min(100% - 18px,1120px);padding-top:10px}.two-col{grid-template-columns:1fr}.hero,.card,.faq,.worksheet{border-radius:22px;padding:20px}.grade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.worksheet-header{display:block}.writing-boxes{font-size:1.1rem} } @media print { body{background:#fff;color:#000} main{width:100%;padding:0}.site-nav,.print-actions,footer{display:none}.worksheet{border:0;box-shadow:none;padding:0}.worksheet-table tr{break-inside:avoid}.worksheet-table th,.worksheet-table td{border-color:#555} }