:root{--bg:#ffffff;--fg:#111827;--muted:#6b7280;--card:#f6f7f9;--border:#e5e7eb;--accent:#2563eb;--danger:#dc2626;--ok:#16a34a;--warn:#f59e0b;--fh:#a855f7;--shadow: 0 10px 24px rgba(0,0,0,.08);--radius: 18px}html[data-theme=dark]{--bg:#0b0d12;--fg:#f3f4f6;--muted:#9ca3af;--card:#141926;--border:#2a3142;--accent:#60a5fa;--danger:#f87171;--ok:#4ade80;--warn:#fbbf24;--fh:#c084fc;--shadow: 0 12px 28px rgba(0,0,0,.35)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji";background:var(--bg);color:var(--fg)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}canvas{display:block}.container{max-width:1080px;padding:22px;margin:0 auto}.topbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:18px}.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.pill{padding:10px 12px;border:1px solid var(--border);border-radius:999px;background:var(--card)}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}@media(max-width:860px){.grid{grid-template-columns:1fr}}h1{font-size:24px;margin:0 0 6px}p{margin:8px 0;color:var(--muted);line-height:1.35}.btn{border:1px solid var(--border);background:#fff0;color:var(--fg);padding:10px 14px;border-radius:12px;cursor:pointer}.btn:hover{border-color:color-mix(in oklab,var(--border),var(--fg) 18%)}.btn.primary{border-color:color-mix(in oklab,var(--accent),var(--border) 35%);background:color-mix(in oklab,var(--accent),transparent 90%)}.btn.danger{border-color:color-mix(in oklab,var(--danger),var(--border) 35%);background:color-mix(in oklab,var(--danger),transparent 92%)}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,monospace;border:1px solid var(--border);background:color-mix(in oklab,var(--card),#0000 0%);padding:2px 8px;border-radius:10px;color:var(--fg)}.big-area{-webkit-user-select:none;user-select:none;border:1px solid var(--border);border-radius:var(--radius);height:340px;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:var(--card);cursor:pointer}.big-area.go{border-color:color-mix(in oklab,var(--ok),var(--border) 30%);background:color-mix(in oklab,var(--ok),transparent 85%)}.big-area.early{border-color:color-mix(in oklab,var(--danger),var(--border) 30%);background:color-mix(in oklab,var(--danger),transparent 88%)}.stat{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed var(--border);padding-top:10px;margin-top:10px;color:var(--muted)}.stat b{color:var(--fg);font-weight:650}.small{font-size:12px;color:var(--muted)}.test-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.test-card{aspect-ratio:1 / 1;display:flex;flex-direction:column;justify-content:space-between;padding:18px}.test-card h2{font-size:18px;margin:0 0 8px}.test-card .desc{color:var(--muted);margin:0}.test-card .stats-mini{margin-top:10px;border-top:1px dashed var(--border);padding-top:10px;display:grid;gap:6px;color:var(--muted);font-size:13px}.test-card .stats-mini b{color:var(--fg)}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:10px}.choice{padding:14px;border-radius:14px;border:1px solid var(--border);background:#fff0;cursor:pointer;text-align:center;font-size:16px;color:var(--fg)}.choice:hover{border-color:color-mix(in oklab,var(--border),var(--fg) 18%)}.choice svg{width:46px;height:46px;display:block;margin:0 auto 6px}.target{display:flex;align-items:center;justify-content:center;color:var(--fg)}.target svg{width:110px;height:110px;display:block}.toggle{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:12px;background:color-mix(in oklab,var(--card),transparent 0%);-webkit-user-select:none;user-select:none}.toggle input{transform:translateY(1px)}.fh-hud{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 12px}@media(max-width:560px){.fh-hud{grid-template-columns:1fr}}.hpbar{width:100%;height:14px;border-radius:999px;background:color-mix(in oklab,var(--border),transparent 0%);overflow:hidden;border:1px solid var(--border)}.hpbar>div{height:100%;width:100%;background:var(--ok)}.hpbar.enemy>div{background:var(--danger)}.fh-arena{border:1px solid var(--border);border-radius:var(--radius);padding:14px;background:color-mix(in oklab,var(--card),transparent 0%)}.fh-guardwrap{display:flex;justify-content:center;margin-bottom:12px}.fh-guard{position:relative;width:min(460px,92vw);aspect-ratio:1 / 1;border-radius:20px;border:1px solid var(--border);overflow:hidden;color:var(--fg);background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--accent),transparent 94%) 0%,transparent 60%),radial-gradient(circle at 50% 50%,rgba(0,0,0,.06) 0%,transparent 72%)}html[data-theme=dark] .fh-guard{background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--accent),transparent 92%) 0%,transparent 60%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0%,transparent 72%)}.fh-guard svg{position:absolute;inset:0;width:100%;height:100%}.fh-guard .seg{fill:none;stroke:color-mix(in oklab,var(--fg),transparent 78%);stroke-width:8;transition:stroke .08s linear,stroke-width .08s linear,filter .08s linear}.fh-guard .inner{fill:none;stroke:color-mix(in oklab,var(--fg),transparent 85%);stroke-width:2}.fh-guard .center{fill:color-mix(in oklab,var(--fg),transparent 55%)}.fh-guard[data-guard=top] .seg-top,.fh-guard[data-guard=left] .seg-left,.fh-guard[data-guard=right] .seg-right{stroke:var(--accent);filter:drop-shadow(0 0 8px color-mix(in oklab,var(--accent),transparent 60%))}.fh-guard[data-desired=top] .seg-top,.fh-guard[data-desired=left] .seg-left,.fh-guard[data-desired=right] .seg-right{stroke-width:11}.fh-guard[data-guard=none] .seg{stroke:color-mix(in oklab,var(--danger),transparent 55%)}.fh-guard[data-atk-type=light]{--atkColor: var(--danger)}.fh-guard[data-atk-type=heavy]{--atkColor: var(--warn)}.fh-guard[data-atk-type=special]{--atkColor: var(--fh)}.fh-guard[data-attack=top] .seg-top,.fh-guard[data-attack=left] .seg-left,.fh-guard[data-attack=right] .seg-right{stroke:var(--atkColor);filter:drop-shadow(0 0 14px color-mix(in oklab,var(--atkColor),transparent 40%));stroke-width:10}.fh-guard[data-parry="1"][data-attack=top] .seg-top,.fh-guard[data-parry="1"][data-attack=left] .seg-left,.fh-guard[data-parry="1"][data-attack=right] .seg-right{filter:drop-shadow(0 0 18px color-mix(in oklab,var(--atkColor),transparent 25%)) drop-shadow(0 0 34px color-mix(in oklab,var(--atkColor),transparent 55%));stroke-width:12}.fh-indicator{--fhScale: 1;position:absolute;width:150px;height:150px;display:flex;align-items:center;justify-content:center;pointer-events:none;color:var(--danger);transform-origin:center center;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}.fh-indicator:before{content:"";position:absolute;inset:14px;border-radius:999px;border:2px solid rgba(255,255,255,.75);background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.18) 0%,transparent 60%);opacity:.9}html[data-theme=dark] .fh-indicator:before{border-color:#ffffff8c;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 0%,transparent 60%)}.fh-indicator[data-type=heavy]{color:var(--warn)}.fh-indicator[data-type=special]{color:var(--fh)}.fh-indicator[data-side=top]{left:50%;top:10%;transform:translate(-50%) rotate(0) scale(var(--fhScale))}.fh-indicator[data-side=left]{left:6%;top:52%;transform:translateY(-50%) rotate(-90deg) scale(var(--fhScale))}.fh-indicator[data-side=right]{right:6%;left:auto;top:52%;transform:translateY(-50%) rotate(90deg) scale(var(--fhScale))}@keyframes fhParryPulse{0%{filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}50%{filter:drop-shadow(0 0 16px color-mix(in oklab,currentColor,transparent 20%)) drop-shadow(0 12px 22px rgba(0,0,0,.22))}to{filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}}.fh-indicator.parry{animation:fhParryPulse .16s ease-in-out infinite}.fh-indicator.parry:before{box-shadow:0 0 18px color-mix(in oklab,currentColor,transparent 35%);border-color:#ffffffeb}.fh-arrow{width:104px;height:104px;position:relative;z-index:1}.fh-info{display:grid;gap:6px}