:root{--bg:#07110e;--panel:#0d1915;--panel2:#111f1a;--line:#23362e;--text:#eff8f2;--muted:#9eb1a6;--accent:#b9ff66;--accent2:#e8ffb9;--danger:#ff8d8d;--shadow:0 28px 70px rgba(0,0,0,.28)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 80% -10%,rgba(185,255,102,.12),transparent 30%),var(--bg);color:var(--text);font-family:Inter,"Noto Sans JP",system-ui,-apple-system,sans-serif;line-height:1.6}.hero{border-bottom:1px solid var(--line);background:linear-gradient(130deg,rgba(185,255,102,.05),transparent 55%)}.hero-inner{max-width:1180px;margin:auto;padding:64px 28px 54px}.eyebrow{font-size:.72rem;letter-spacing:.2em;color:var(--accent);font-weight:800;margin:0 0 10px}.hero h1{font-size:clamp(2.2rem,6vw,4.9rem);line-height:.98;letter-spacing:-.055em;margin:0;max-width:820px}.lead{max-width:720px;color:var(--muted);margin:24px 0 0;font-size:1.03rem}.layout{max-width:1180px;margin:0 auto;padding:34px 28px 80px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:24px;align-items:start}.panel{background:rgba(13,25,21,.92);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.input-panel{padding:28px}.result-panel{padding:28px;position:sticky;top:20px;min-height:520px}.section-head{display:flex;gap:14px;align-items:flex-start}.section-head h2{font-size:1.15rem;margin:0 0 2px}.section-head p{color:var(--muted);font-size:.86rem;margin:0}.step{font-size:.72rem;font-weight:900;color:#07110e;background:var(--accent);border-radius:999px;padding:4px 8px;margin-top:2px}.top-gap{margin-top:34px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.mode-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;background:#0a1511;transition:.15s}.mode-card:hover,.mode-card.active{border-color:var(--accent);background:rgba(185,255,102,.07)}.mode-card input{position:absolute;opacity:0}.mode-card strong{font-size:.92rem}.mode-card span{font-size:.74rem;color:var(--muted);margin-top:6px;line-height:1.45}.subpanel{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:14px}.subhead{display:flex;justify-content:space-between;align-items:center}.subhead h3{font-size:.95rem;margin:0}.subhead span{color:var(--accent);font-weight:800;font-size:.8rem}.six-grid,.eight-grid,.field-grid{display:grid;gap:10px;margin-top:12px}.six-grid{grid-template-columns:repeat(3,1fr)}.eight-grid{grid-template-columns:repeat(4,1fr)}.field-grid{grid-template-columns:repeat(2,1fr)}label span{display:block;color:var(--muted);font-size:.75rem;margin-bottom:5px}input,select{width:100%;border:1px solid #2d4339;background:#08120e;color:var(--text);border-radius:9px;padding:10px 11px;font:inherit;font-size:.9rem;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(185,255,102,.08)}.hint{font-size:.72rem;color:var(--muted);margin:6px 0 0}.inline-field{display:grid;grid-template-columns:1fr 130px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.inline-field span{margin:0}.archetype-field{margin-top:14px}.primary{width:100%;margin-top:26px;border:0;background:var(--accent);color:#07110e;border-radius:12px;padding:14px;font-weight:900;font-size:1rem;cursor:pointer;transition:.15s}.primary:hover{transform:translateY(-1px);background:var(--accent2)}.error{background:rgba(255,141,141,.08);color:var(--danger);border:1px solid rgba(255,141,141,.3);padding:10px 12px;border-radius:10px;margin-top:18px;font-size:.83rem}.hidden{display:none!important}.result-empty{min-height:460px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.result-empty h2{color:var(--text);font-size:1.2rem;margin:16px 0 5px}.result-empty p{max-width:330px;font-size:.82rem}.orb{width:74px;height:74px;border:1px solid var(--accent);border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:1.3rem;font-weight:900;box-shadow:0 0 40px rgba(185,255,102,.12)}.result-heading{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.result-heading h2{margin:0;font-size:1.45rem}.badge{border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:5px 9px;font-size:.7rem;font-weight:800}.resource-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.metric{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px}.metric span{display:block;color:var(--muted);font-size:.7rem}.metric strong{display:block;font-size:1.1rem;margin-top:2px}.result-block{margin-top:22px}.result-block h3{margin:0 0 8px;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.level-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(35,54,46,.7)}.level-row:last-child{border-bottom:0}.level-name{font-size:.86rem}.level-value{font-variant-numeric:tabular-nums;font-size:.85rem}.level-value b{color:var(--accent);font-size:1.05rem}.steps{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}.steps summary{cursor:pointer;font-weight:800;font-size:.82rem}.step-item{font-size:.75rem;color:var(--muted);padding:7px 0;border-bottom:1px dashed var(--line)}.step-item b{color:var(--text)}.footnote{color:var(--muted);font-size:.69rem;margin-top:20px}footer{border-top:1px solid var(--line);color:#6f8178;text-align:center;padding:24px;font-size:.7rem}@media(max-width:900px){.layout{grid-template-columns:1fr}.result-panel{position:static;min-height:auto}.mode-grid{grid-template-columns:1fr}.six-grid{grid-template-columns:repeat(2,1fr)}.eight-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:520px){.hero-inner{padding:42px 18px 36px}.layout{padding:18px 12px 50px}.input-panel,.result-panel{padding:18px;border-radius:16px}.six-grid,.eight-grid,.field-grid{grid-template-columns:repeat(2,1fr)}.resource-summary{grid-template-columns:1fr}.inline-field{grid-template-columns:1fr 110px;gap:8px}.hero h1{font-size:2.55rem}.lead{font-size:.88rem}}