:root{--acc:#4d8dff;--bg:#05060a;--text:#eef0f7;--mute:#8d93a8}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font-family:'Outfit',system-ui,sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.5}
.aurora{position:fixed;inset:0;overflow:hidden;z-index:0}
.aurora i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);opacity:.38;background:var(--acc);transition:background 1s;animation:drift 22s ease-in-out infinite alternate}
.aurora i:nth-child(1){left:-15vmax;top:-20vmax}.aurora i:nth-child(2){right:-20vmax;top:10vmax;background:#7a4dff;animation-delay:-8s;opacity:.28}.aurora i:nth-child(3){left:20vmax;bottom:-30vmax;background:#18d6c4;animation-delay:-15s;opacity:.18}
@keyframes drift{to{transform:translate(8vmax,6vmax) scale(1.15)}}
main{position:relative;z-index:1;max-width:1020px;margin:0 auto;padding:70px 22px 40px;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(2.6rem,8vw,5.2rem);font-weight:800;letter-spacing:-.05em;line-height:.98;background:linear-gradient(180deg,#fff 30%,color-mix(in srgb,var(--acc) 60%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
.hero p{color:var(--mute);max-width:520px;margin:18px 0;animation:rise 1s .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hint{display:inline-block;padding:8px 18px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 60%,transparent);color:var(--acc);font-size:.88rem;box-shadow:0 0 30px -6px var(--acc);animation:breathe 2.2s ease-in-out infinite;transition:opacity .6s}
.hint.gone{opacity:0;pointer-events:none}
@keyframes breathe{50%{box-shadow:0 0 44px 0 var(--acc);transform:scale(1.03)}}
.glass{position:relative;border-radius:26px;padding:24px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 70px -24px rgba(0,0,0,.8);overflow:hidden}
.glass::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--acc) 20%,transparent),transparent 62%)}
.glass:hover::before{opacity:1}
h2{font-size:1rem;font-weight:600;margin-bottom:16px}
.viz-card{padding:0;height:190px}canvas{width:100%;height:100%;display:block}
.kb-card{display:flex;flex-direction:column;gap:14px;padding:22px 18px}
#kb{display:flex;flex-direction:column;gap:7px}.row{display:flex;gap:7px}
.key{height:clamp(34px,6vw,52px);border-radius:11px;display:grid;place-items:center;font-size:clamp(.65rem,1.5vw,.82rem);color:#9aa0b8;user-select:none;cursor:pointer;min-width:0;
 background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);transition:transform .09s,box-shadow .45s,background .45s,color .45s,border-color .45s}
.key.on{transform:translateY(3px);color:#fff;border-color:var(--acc);background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 55%,transparent),color-mix(in srgb,var(--acc) 14%,transparent));box-shadow:0 1px 0 rgba(0,0,0,.55),0 0 30px var(--acc),inset 0 0 16px color-mix(in srgb,var(--acc) 50%,transparent);transition:transform .05s,box-shadow .05s,background .05s}
textarea,input[type=text],#pname{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);color:var(--text);border-radius:14px;padding:12px 14px;font:inherit;outline:none;resize:none;transition:.25s}
textarea:focus,#pname:focus{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent),0 0 28px -4px var(--acc)}
.grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:22px}
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pc{text-align:left;border-radius:16px;padding:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text);font:inherit;cursor:pointer;transition:.3s}
.pc:hover{transform:translateY(-3px);background:rgba(255,255,255,.06)}.pc b{display:block;font-weight:600}.pc small{color:var(--mute);font-size:.78rem}
.pc i{display:block;width:26px;height:4px;border-radius:9px;margin-bottom:10px;background:var(--c);box-shadow:0 0 14px var(--c)}
.pc.sel{border-color:var(--c);box-shadow:0 0 34px -8px var(--c),inset 0 0 22px -12px var(--c);background:rgba(255,255,255,.07)}
label{display:flex;justify-content:space-between;color:var(--mute);font-size:.85rem;margin:14px 0 6px}label b{color:var(--acc);font-weight:600}
input[type=range]{width:100%;accent-color:var(--acc);height:5px;filter:drop-shadow(0 0 6px var(--acc))}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;min-height:34px}
.chip{display:inline-flex;gap:8px;align-items:center;padding:6px 8px 6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--text);font:.82rem 'Outfit';cursor:pointer;transition:.25s}
.chip:hover{border-color:var(--acc);box-shadow:0 0 20px -4px var(--acc)}.chip u{text-decoration:none;color:var(--mute);padding:0 4px}.chip u:hover{color:#ff6b81}
.chips .none{color:var(--mute);font-size:.85rem}
#pform{display:flex;gap:10px}
.btn{background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#7a4dff));color:#fff;border:0;border-radius:14px;padding:0 22px;font:600 .95rem 'Outfit';cursor:pointer;box-shadow:0 0 28px -6px var(--acc);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 44px -2px var(--acc)}.btn:active{transform:scale(.96)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stats b{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;text-shadow:0 0 24px var(--acc)}.stats span{color:var(--mute);font-size:.8rem}
.fine{color:var(--mute);font-size:.85rem;margin-top:14px}
footer{color:var(--mute);font-size:.8rem;text-align:center;padding:20px}footer a{color:var(--acc);text-decoration:none}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:780px){.grid2{grid-template-columns:1fr}.row,#kb{gap:4px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.tprompt{font:1.15rem/1.8 ui-monospace,Menlo,monospace;color:var(--mute);margin-bottom:14px;min-height:5.4em;letter-spacing:.01em}.tprompt .ok{color:#fff}.tprompt .bad{color:#ff6b81;text-decoration:underline}.tprompt .cur{background:color-mix(in srgb,var(--acc) 35%,transparent);border-radius:3px}
.trow{display:flex;gap:10px;margin-bottom:16px}.trow input{flex:1;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);color:var(--text);border-radius:14px;padding:12px 14px;font:inherit;outline:none}.trow input:focus{border-color:var(--acc)}.trow .btn{padding:12px 22px}
.tchart{width:100%;height:120px;margin-top:16px;display:block}h2 small{font-weight:400;margin-left:8px}
.chk{align-items:center;color:var(--text)}.mz{display:flex;gap:8px}#mz>div{display:flex;align-items:center;gap:8px;margin:10px 0}#mz b{width:46px;color:var(--acc);font-weight:600;font-size:.85rem}#mz select,#mz input[type=file]{flex:1;min-width:0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);color:var(--text);border-radius:10px;padding:7px;font:.8rem 'Outfit'}