:root{--ink:#182039;--muted:#66708b;--bg:#f5f7fc;--line:#e5e9f3;--primary:#4f46e5;--cyan:#0e7490;--orange:#c2410c;--red:#be123c}[data-theme="dark"]{--ink:#e5e7eb;--muted:#9ca3af;--bg:#0f172a;--line:#1e293b;--primary:#6366f1;--cyan:#06b6d4;--orange:#ea580c;--red:#ec4899}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);transition:background-color .3s ease,color .3s ease}.hero{background:radial-gradient(circle at 85% 25%,#6366f1,transparent 34%),linear-gradient(125deg,#10172e,#242060);padding:52px max(5vw,28px);color:#fff;display:flex;justify-content:space-between;gap:30px;align-items:flex-start}.hero h1{font-size:2.5rem;margin:5px 0}.hero p:not(.eyebrow){color:#dbe4ff;max-width:650px;margin:0}.eyebrow{letter-spacing:.12em;font-size:.7rem;font-weight:800;margin:0 0 8px;color:#6474d9}.hero .eyebrow{color:#aebaff}.badge,.success{padding:8px 12px;border-radius:999px;font-weight:700;font-size:.78rem;white-space:nowrap;background:#ffffff1a;border:1px solid #ffffff42}.header-actions{display:flex;gap:12px;align-items:center}.theme-toggle{background:#ffffff1a;border:1px solid #ffffff42;color:#fff;padding:8px 12px;border-radius:999px;cursor:pointer;font-size:1rem;transition:background-color .2s ease;display:grid;place-items:center}.theme-toggle:hover{background:#ffffff2d}.layout{max-width:1260px;margin:0 auto;padding:30px 24px 60px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.workspace{min-width:0}.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 8px 28px #28305c0a;margin-bottom:20px;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.card-title{display:flex;gap:12px;align-items:center}.card h2{font-size:1.1rem;margin:0}.card-title p{font-size:.85rem;color:var(--muted);margin:4px 0 0}.icon{background:#e0e7ff;color:var(--primary);width:35px;height:35px;display:grid;place-items:center;border-radius:10px;font-size:1.3rem;transition:background-color .3s ease,color .3s ease}.key{background:#cffafe;color:var(--cyan)}.round{background:#ffedd5;color:var(--orange)}[data-theme="dark"] .icon{background:#312e81}[data-theme="dark"] .icon.key{background:#164e63}[data-theme="dark"] .icon.round{background:#7c2d12}form{display:grid;gap:9px;margin-top:22px}label{font-weight:700;font-size:.85rem}input:not([type=radio]){margin-top:6px;width:100%;display:block;border:1px solid #cbd3e4;padding:12px;border-radius:9px;font:600 1rem ui-monospace,monospace;letter-spacing:.06em;color:var(--ink);background:var(--bg);transition:background-color .3s ease,border-color .3s ease,color .3s ease}[data-theme="dark"] input:not([type=radio]){border-color:#334155}small{font-size:.75rem;color:var(--muted)}.mode{display:flex;gap:24px;margin:8px 0}.mode label{font-weight:600}.mode input{accent-color:var(--primary)}button{border:0;border-radius:9px;background:var(--primary);color:#fff;font:700 .9rem inherit;padding:13px;cursor:pointer}button span{font-size:1.15rem;margin-left:5px}.error{color:var(--red);font-size:.85rem;font-weight:600;margin:0;min-height:0}.result-head{display:flex;justify-content:space-between;align-items:start}.result-head h2{font:800 2rem ui-monospace,monospace;color:var(--primary)}.success{color:#047857;background:#d1fae5;border:0}.output-grid{display:grid;grid-template-columns:1fr 1fr 140px;gap:14px;margin-top:16px}.output-grid>div{border-radius:10px;background:#f7f8fc;padding:12px}.output-grid span{display:block;color:var(--muted);font-size:.7rem;font-weight:700;text-transform:uppercase;margin-bottom:7px}.output-grid code{font-size:.88rem;color:#393599;font-weight:700}.state{display:grid;grid-template-columns:repeat(2,38px);gap:3px}.state b{font:700 1rem ui-monospace,monospace;background:#eef2ff;color:#3730a3;width:38px;height:31px;display:grid;place-items:center;border:1px solid #c7d2fe}.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.keys>div{padding:11px;background:#ecfeff;border-left:3px solid #0891b2;border-radius:7px}.keys span{display:block;font-weight:800;color:#0e7490}.keys code{font-size:.7rem;display:block;margin:5px 0}.keys b{font:700 1rem ui-monospace,monospace}.steps h3{font-size:.82rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:25px 0 8px}.steps h3:first-child{margin-top:18px}details{border:1px solid var(--line);border-radius:9px;margin:7px 0;overflow:hidden}summary{list-style:none;cursor:pointer;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;font-size:.84rem;font-weight:750;background:#fcfcff}summary::-webkit-details-marker{display:none}summary em{font:700 .75rem ui-monospace,monospace;color:#5b5a8c;font-style:normal}.detail{padding:14px;font-size:.82rem;color:#4b556d}.detail>p{margin-top:0;line-height:1.75}.transition{display:flex;align-items:center;gap:20px}.transition small{display:block;margin-bottom:5px}.transition>span{color:var(--primary);font-size:1.5rem}.calculation{margin-top:13px;max-height:260px;overflow:auto;background:#11182e;border-radius:8px;padding:10px}.calculation p{color:#dbeafe;font:500 .74rem/1.55 ui-monospace,monospace;margin:2px 0}.words{display:flex;flex-wrap:wrap;gap:7px}.words code{padding:5px 7px;background:#eef2ff;color:#3730a3;border-radius:4px}.sticky{position:sticky;top:20px}.reference h2{margin:0 0 15px}.reference h3{font-size:.84rem;margin:20px 0 8px;color:#4d5672}dl{margin:0}dl div{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:9px 0;font-size:.82rem}dt{color:var(--muted)}dd{margin:0;font-weight:750}.lookup{font:600 .7rem/1.8 ui-monospace,monospace;color:#7180a0;background:#f7f8fc;padding:8px;overflow:hidden}.lookup span,.lookup code{display:block;word-spacing:5px;white-space:nowrap}.lookup code{color:#3730a3}.math-matrix{display:grid;grid-template-columns:repeat(2,30px);gap:3px;border-left:2px solid #66708b;border-right:2px solid #66708b;width:max-content;padding:2px 8px}.math-matrix span{text-align:center;font:700 1rem ui-monospace,monospace}.rcon{display:flex;gap:8px}.rcon code{background:#fff7ed;color:#9a3412;padding:6px;font-size:.7rem;border-radius:4px}footer{text-align:center;padding:25px;color:#7c859e;font-size:.75rem;border-top:1px solid var(--line);transition:color .3s ease,border-color .3s ease}[data-theme="dark"] footer{color:#9ca3af}[data-theme="dark"] details{color:var(--ink)}[data-theme="dark"] code{background:#1e293b;color:#e5e7eb}[data-theme="dark"] dl{color:var(--ink)}[data-theme="dark"] .detail{background:#1e293b;border-radius:8px;padding:12px}[data-theme="dark"] .transition{border:1px solid var(--line);border-radius:8px;padding:12px}[data-theme="dark"] .words code{background:#0f172a;border:1px solid var(--line)}[data-theme="dark"] .lookup{background:#1e293b;border-color:#334155}[data-theme="dark"] .lookup code{color:#93c5fd}[data-theme="dark"] .math-matrix{border-left-color:var(--muted);border-right-color:var(--muted)}[data-theme="dark"] .rcon code{background:#3f2d1a;color:#fdba74}@media(max-width:880px){.layout{grid-template-columns:1fr}.reference{order:-1}.sticky{position:static}.hero{padding:35px 24px}.output-grid{grid-template-columns:1fr 1fr}.output-grid>div:last-child{grid-column:span 2}}@media(max-width:520px){.hero{display:block}.badge{display:inline-block;margin-top:18px}.layout{padding:18px 14px}.card{padding:16px}.output-grid,.keys{grid-template-columns:1fr}.output-grid>div:last-child{grid-column:span 1}.mode{gap:12px}.result-head h2{font-size:1.6rem}summary{align-items:flex-start;flex-direction:column}}