:root{color-scheme:light;--bg: #f3f7fc;--panel: #ffffff;--line: #d5deeb;--text: #1d2a44;--muted: #6a7891;--accent: #fb8500}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Hiragino Sans,Noto Sans JP,sans-serif;line-height:1.6}.page{max-width:560px;margin:0 auto;padding:16px 16px 48px}h1{margin:0;font-size:1.4rem}.sub{margin:4px 0 14px;color:var(--muted);font-size:.9rem}h2{margin:0 0 12px;font-size:1.15rem}h3{margin:22px 0 8px;font-size:.95rem;color:var(--accent)}.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mode-card{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:14px;text-decoration:none;color:inherit;background:var(--panel);box-shadow:0 0 0 1px var(--line)}.mode-card svg{width:100%;height:auto;display:block}.mode-card b{font-size:.95rem}.mode-card span{color:var(--muted);font-size:.75rem}.mode-section{margin-top:18px;padding:16px;border-radius:16px;background:var(--panel);box-shadow:0 0 0 1px var(--line)}.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;counter-reset:step}.steps.four{grid-template-columns:repeat(2,1fr)}.steps li{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:12px;background:#eef3fa;counter-increment:step}.steps li:before{content:counter(step);position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#fff;font-size:.75rem;font-weight:800;text-align:center;line-height:20px}.steps svg{width:100%;height:auto;display:block}.steps b{font-size:.85rem}.steps span{color:var(--muted);font-size:.72rem;line-height:1.5}.points{width:100%;margin-top:12px;border-collapse:collapse;font-size:.85rem}.points th,.points td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}.points td{font-weight:800;color:var(--accent);white-space:nowrap}.note{margin:10px 0 0;color:var(--muted);font-size:.8rem}.formula{display:flex;align-items:stretch;gap:6px;flex-wrap:wrap}.term{flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;padding:8px 6px;border-radius:12px;background:#2b3a55;color:#fff}.term.app{background:#00a693}.term.app{flex:1.5}.term.app b{font-size:.82rem;white-space:nowrap}.term b{font-size:.95rem}.term small{font-size:.62rem;opacity:.85;text-align:center}.op{align-self:center;font-size:1.3rem;font-weight:900;color:var(--muted)}.example{margin:8px 0 0;font-size:.82rem;color:var(--muted)}.example b{color:var(--accent)}.rules{list-style:none;margin:0;padding:0;display:grid;gap:8px}.rules li{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center}.rules svg{width:40px;height:40px}.rules b{display:block;font-size:.88rem}.rules span{color:var(--muted);font-size:.76rem}.legend{margin:0 0 8px;color:var(--muted);font-size:.78rem}.dot{display:inline-block;width:10px;height:10px;margin:0 4px 0 8px;vertical-align:-1px}.dot.round{border-radius:50%;background:#fb8500}.dot.tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #7b61ff}.shapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}.shapes li{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:10px;background:#eef3fa}.shapes img{height:44px;width:auto;max-width:100%}.shape-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.62rem;font-weight:700}.shape-tag{position:absolute;top:4px;right:4px;padding:0 5px;border-radius:6px;font-size:.58rem;font-weight:800;color:#fff}.shape-tag.round{background:#fb8500}.shape-tag.tri{background:#7b61ff}.recipes{list-style:none;margin:0;padding:0;display:grid;gap:6px}.recipes li{padding:8px 10px;border-radius:12px;background:#eef3fa}.recipe-head{display:flex;justify-content:space-between;align-items:baseline}.recipe-head b{font-size:.88rem}.bonus{color:var(--accent);font-weight:900}.recipe-blocks{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.recipe-block{display:inline-flex;align-items:center;gap:4px;padding:2px 6px 2px 3px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.64rem;font-weight:700}.recipe-block img{height:16px;width:auto}.after{list-style:none;margin:0;padding:0;display:grid;gap:6px}.after li{display:flex;flex-direction:column;padding:8px 10px;border-radius:12px;background:#eef3fa}.after b{font-size:.88rem}.after span{color:var(--muted);font-size:.76rem}.play{display:block;margin-top:16px;padding:12px;border-radius:12px;text-align:center;background:linear-gradient(180deg,#ffad33,#ff8a00);color:#1b1200;font-weight:800;text-decoration:none}.play.secondary{background:#eef3fa;color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}@media(max-width:420px){.steps{grid-template-columns:1fr 1fr}.steps li:last-child:nth-child(odd){grid-column:1 / -1}}