.hash-route{--bg: #020617;--bg-panel: rgba(15, 23, 42, .8);--bg-strong: rgba(2, 6, 23, .95);--border: #1e293b;--text: #e2e8f0;--muted: #cbd5e1;--muted-2: #94a3b8;--accent: #8b5cf6;--accent-2: #a855f7;--accent-3: #6366f1;--shadow: 0 12px 45px rgba(0, 0, 0, .35);font-family:Inter,Segoe UI,system-ui,sans-serif;color:var(--text);background-color:var(--bg);color-scheme:dark}.hash-route *{box-sizing:border-box}.hash-route{margin:0;width:100%;display:flex;flex-direction:column;gap:1.25rem;background-color:var(--bg);color:var(--text)}.hash-route button{font-family:inherit;background:transparent;border:none;color:inherit}.hash-route p{color:var(--muted)}.app{display:flex;flex-direction:column;gap:1.25rem}.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}@media(max-width:900px){.panels{grid-template-columns:1fr}}.panel{background:linear-gradient(155deg,#6366f114,#0f172ae6),var(--bg-panel);border-radius:1.15rem;padding:1rem;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:visible}.panel h2{margin:0 0 .5rem;font-size:1.1rem;display:flex;align-items:center;gap:.4rem;color:#fff}.panel h2 span.step-number{font-size:.72rem;background:#6366f133;color:#fff;border-radius:999px;padding:.1rem .45rem;border:1px solid rgba(167,139,250,.45);box-shadow:0 0 0 1px #a78bfa2e}.panel small{color:var(--muted-2);font-size:.8rem}.card{margin-top:.8rem;background:var(--bg-panel);border-radius:1.15rem;border:1px solid var(--border);padding:.8rem;min-height:3.3rem;position:relative;box-shadow:var(--shadow),inset 0 1px #ffffff08}.hash-route .word-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.6rem}.hash-route button.word-chip{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;padding:.25rem .7rem;border-radius:999px;border:1px solid #334155;background:#ffffff0d;color:var(--text);font-size:.85rem;cursor:pointer;text-transform:uppercase;letter-spacing:.06em;transition:background .15s ease,border-color .15s ease,transform .1s ease,box-shadow .15s ease}.hash-route button.word-chip:hover{background:#ffffff1a;border-color:#ffffff40;color:#fff;transform:translateY(-1px)}.hash-route button.word-chip.active{background:#8b5cf633;border:1px solid rgba(167,139,250,.5);color:#fff;box-shadow:0 0 0 1px #a78bfa33,0 10px 30px #6366f129;transform:translateY(-1px)}.word-bubble{display:none;align-items:center;flex-wrap:wrap;gap:.35rem;padding:.4rem .9rem;border-radius:999px;border:1px solid rgba(168,85,247,.4);background:linear-gradient(135deg,#6366f13d,#a855f738);font-weight:600;letter-spacing:.04em;font-size:.95rem;opacity:0;transform:translateY(8px) scale(.96);transition:opacity .2s ease,transform .2s ease;color:#fff;box-shadow:0 8px 30px #00000040}.bubble-key{text-transform:uppercase;letter-spacing:.08em}.bubble-separator{color:var(--muted-2)}.bubble-value{color:#fff;font-weight:600}.word-bubble.visible{display:inline-flex;opacity:1;transform:translateY(0) scale(1)}.input-hint{font-size:.8rem;color:var(--muted-2);margin-top:.4rem}.flow-arrow{position:absolute;right:.35rem;top:.5rem;font-size:1.3rem;color:#fff;opacity:.35}.flow-arrow.down{display:none}@media(max-width:900px){.flow-arrow{display:none}.flow-arrow.down{display:block;position:static;margin-top:.25rem;text-align:center}}.steps{display:flex;flex-direction:column;gap:.4rem;font-size:.85rem;color:var(--muted)}.step{opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease}.step.visible{opacity:1;transform:translateY(0)}.step-label{color:var(--muted-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.letters-row,.numbers-row{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.2rem}.letter-box,.number-box{min-width:1.6rem;text-align:center;border-radius:.35rem;font-size:.8rem;padding:.2rem .35rem}.letter-box{background:#ffffff0d;border:1px solid var(--border);color:#fff}.number-box{background:#6366f124;border:1px solid rgba(99,102,241,.45);color:#fff}.equation{margin-top:.2rem;font-family:JetBrains Mono,Menlo,Consolas,monospace;font-size:.85rem;color:var(--muted)}.equation-highlight{color:#fff;font-weight:700}.sum-pill{display:inline-flex;align-items:center;gap:.2rem;padding:.2rem .5rem;border-radius:999px;background:#ffffff0d;border:1px solid var(--border);font-size:.8rem;margin-top:.3rem;color:#fff;box-shadow:inset 0 1px #ffffff05}.sum-pill span.label{color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem}.sum-pill span.value{font-weight:700;color:#fff}.hash-table{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem}.array-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem;align-items:stretch}.array-index{min-width:2.2rem;padding:.25rem .4rem;border-radius:.4rem;background:var(--bg-strong);border:1px solid var(--border);font-family:JetBrains Mono,Menlo,Consolas,monospace;font-size:.75rem;display:flex;align-items:center;justify-content:center;color:var(--muted-2)}.array-cell{border-radius:.45rem;background:var(--bg-strong);border:1px solid var(--border);padding:.25rem .4rem;min-height:1.4rem;display:flex;align-items:center}.cell-content{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;width:100%}.cell-node{background:linear-gradient(150deg,#6366f124,#0f172ae6);border:1px solid rgba(99,102,241,.4);border-radius:.45rem;padding:.25rem .5rem;display:flex;flex-direction:column;gap:.1rem;min-width:5rem;box-shadow:0 6px 18px #00000040}.node-key{font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#e2e8f0}.node-value{color:#fff;font-size:.82rem}.node-arrow{color:#fff;font-weight:700}.node-null{color:var(--muted-2);font-size:.8rem}.node-found{border-color:#a855f7cc;background:radial-gradient(circle at 20% 20%,#a855f733,#0f172aeb);box-shadow:0 0 0 1px #a855f740,0 8px 20px #6366f14d}.cell-empty{color:#64748b;font-size:.78rem}.array-row.active .array-cell{border-color:#8b5cf699;background:linear-gradient(135deg,#8b5cf629,#6366f11f);box-shadow:0 8px 24px #6366f140}.array-row.active .array-index{border-color:#8b5cf6b3;color:#fff;background:#8b5cf61f}.array-row.active .array-cell:after{content:"index used";margin-left:auto;font-size:.7rem;color:#fff;opacity:.9}@keyframes collision-bump{0%{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}to{transform:translate(0)}}.array-cell.collision{animation:collision-bump .4s ease}.collision-label{font-size:.78rem;color:#fff;margin-top:.35rem}.use-case{background:linear-gradient(150deg,#6366f11a,#020617f2);border-radius:1.15rem;border:1px solid var(--border);padding:1rem;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1rem;align-items:center}@media(max-width:900px){.use-case{grid-template-columns:1fr}}.use-case h2{margin:0 0 .4rem;font-size:1.1rem;color:#fff}.use-case p{margin:0 0 .3rem;font-size:.9rem;color:var(--muted)}.use-case ul{margin:.1rem 0 0;padding-left:1.15rem;font-size:.85rem;color:var(--muted-2)}.use-case ul li{margin-bottom:.15rem}.use-case-note{color:var(--muted);margin-top:.5rem}.kv-table{border-radius:.7rem;border:1px solid var(--border);background:var(--bg-strong);padding:.6rem .35rem .6rem .6rem;font-size:.82rem;display:flex;flex-direction:column;gap:.35rem;max-height:9.5rem;overflow-y:auto;box-shadow:inset 0 1px #ffffff08}.kv-row{display:flex;justify-content:space-between;gap:.5rem;padding:.25rem .4rem;border-radius:.5rem;background:#ffffff05;border:1px dashed var(--border)}.kv-key{font-family:JetBrains Mono,Menlo,Consolas,monospace;text-transform:lowercase;color:var(--muted)}.kv-value{color:#fff;font-weight:600}.kv-caption{font-size:.72rem;color:var(--muted-2);text-align:right}.hash-route code{background:#ffffff0d;border:1px solid var(--border);padding:.05rem .35rem;border-radius:.35rem;color:#fff}.space-gradient-dark{background:radial-gradient(1200px 600px at -10% -20%,rgba(168,85,247,.15),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(99,102,241,.12),transparent 60%),linear-gradient(135deg,#1e1b4b,#0b1020 60%,#070914)}.starfield{background:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.35) 50%,transparent 51%),radial-gradient(1px 1px at 80% 20%,rgba(255,255,255,.25) 50%,transparent 51%),radial-gradient(1px 1px at 60% 70%,rgba(255,255,255,.18) 50%,transparent 51%),radial-gradient(1px 1px at 30% 80%,rgba(255,255,255,.28) 50%,transparent 51%);background-size:400px 400px,500px 500px,600px 600px,700px 700px;background-repeat:repeat}.starfield-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;background:transparent}
