*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:#000;width:100%;height:100%;font-family:SF Mono,Fira Code,JetBrains Mono,Cascadia Code,monospace;overflow:hidden}#app{width:100%;height:100%}#three-canvas{z-index:1;position:fixed;inset:0}#overlay-canvas{z-index:2;pointer-events:none;position:fixed;inset:0}.overlay{z-index:100;background:radial-gradient(#0a0a1e 0%,#000 70%);flex-direction:column;justify-content:center;align-items:center;transition:opacity .8s;display:flex;position:fixed;inset:0}.overlay.hidden{opacity:0;pointer-events:none}.overlay h1{letter-spacing:.35em;text-transform:uppercase;background:linear-gradient(135deg,#00f0ff,#b44aff,#ff2d55);-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.4rem;font-size:clamp(1.6rem,4vw,2.8rem);font-weight:300}.overlay .subtitle{color:#445;letter-spacing:.12em;margin-bottom:2.4rem;font-size:.85rem}.start-btn{color:#00f0ff;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;background:0 0;border:1px solid #00f0ff40;border-radius:50px;padding:.9rem 2.8rem;font-family:inherit;font-size:.82rem;transition:all .3s}.start-btn:hover:not(:disabled){background:#00f0ff14;border-color:#00f0ff8c;box-shadow:0 0 30px #00f0ff1f}.start-btn:disabled{opacity:.3;cursor:not-allowed}.error-msg{color:#ff2d55;text-align:center;max-width:400px;margin-top:1.2rem;font-size:.78rem}.prompt-group{flex-direction:column;align-items:center;gap:.6rem;width:min(480px,80vw);margin-bottom:2rem;display:flex}.prompt-label{color:#556;letter-spacing:.14em;text-transform:uppercase;font-size:.65rem}.prompt-input{color:#ccd;letter-spacing:.04em;background:#ffffff0a;border:1px solid #00f0ff26;border-radius:12px;outline:none;width:100%;padding:.85rem 1.2rem;font-family:inherit;font-size:.82rem;transition:all .3s}.prompt-input::placeholder{color:#fff3}.prompt-input:focus{background:#ffffff0f;border-color:#00f0ff80;box-shadow:0 0 20px #00f0ff14}.model-group{flex-direction:column;align-items:center;gap:.5rem;width:min(480px,80vw);margin-bottom:2rem;display:flex}.model-row{width:100%}.model-btn{color:#889;letter-spacing:.06em;cursor:pointer;text-align:left;background:#ffffff08;border:1px solid #ffffff14;border-radius:10px;width:100%;padding:.7rem 1rem;font-family:inherit;font-size:.75rem;transition:all .3s}.model-btn:hover:not(:disabled){color:#aab;background:#ffffff0d;border-color:#00f0ff4d}.model-btn:disabled{opacity:.4;cursor:not-allowed}.download-placeholder{color:#334;letter-spacing:.06em;margin-top:.3rem;font-size:.6rem}.loading-bar-container{background:#ffffff0d;border-radius:2px;width:min(400px,70vw);height:4px;margin-bottom:1.5rem;position:relative;overflow:hidden}.loading-bar{background:linear-gradient(90deg,#00f0ff,#b44aff);border-radius:2px;height:100%;transition:width .3s}.loading-label{color:#556;letter-spacing:.1em;text-transform:uppercase;margin-bottom:1.5rem;font-size:.65rem}.hud{z-index:10;color:#445;letter-spacing:.12em;text-transform:uppercase;pointer-events:none;font-size:.7rem;position:fixed}.hud-tl{flex-direction:column;gap:.45rem;display:flex;top:1.4rem;left:1.4rem}.hud-tr{align-items:center;gap:.5rem;display:flex;top:1.4rem;right:1.4rem}.hud-br{bottom:1.4rem;right:1.4rem}.stat{gap:.35rem;display:flex}.stat .v{color:#778}.dot{background:#333;border-radius:50%;width:7px;height:7px;transition:all .4s}.dot.on{background:#0f8;box-shadow:0 0 8px #0f8}.dot.silence{background:#fa0;box-shadow:0 0 8px #fa0}.dot.inferring{background:#b44aff;animation:1s ease-in-out infinite pulse-dot;box-shadow:0 0 8px #b44aff}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.4}}.prompt-live{pointer-events:auto;color:#aab;letter-spacing:.04em;background:#ffffff0a;border:1px solid #00f0ff1f;border-radius:8px;outline:none;width:280px;padding:.35rem .6rem;font-family:inherit;font-size:.65rem;transition:border-color .3s,box-shadow .3s,background .3s}.prompt-live::placeholder{color:#ffffff2e}.prompt-live:focus{background:#ffffff0f;border-color:#00f0ff73;box-shadow:0 0 12px #00f0ff0f}.conn-label{color:#445}#center-text{z-index:20;text-align:center;pointer-events:none;background:linear-gradient(#0000 0%,#00000080 40%,#000000d9 100%);padding:0 2.5rem 2.2rem;position:fixed;bottom:0;left:0;right:0}#live-text{color:#eef;letter-spacing:.03em;opacity:0;filter:blur(12px);max-width:1400px;min-height:2rem;margin:0 auto;font-size:clamp(2rem,5.5vw,4rem);font-weight:300;line-height:1.35;transition:none;transform:scale(.15)}#live-text.pop-in{animation:.65s cubic-bezier(.34,1.56,.64,1) forwards popIn}#live-text.visible{opacity:1;filter:blur();transform:scale(1)}@keyframes popIn{0%{opacity:0;filter:blur(12px);transform:scale(.15)translateY(50px)}50%{opacity:1;filter:blur();transform:scale(1.08)translateY(-5px)}75%{transform:scale(.97)translateY(1px)}to{opacity:1;filter:blur();transform:scale(1)translateY(0)}}#center-metrics{opacity:0;justify-content:center;gap:2rem;margin-top:1rem;transition:opacity .5s;display:flex}#center-metrics.show{opacity:1}.metric{align-items:baseline;gap:.3rem;display:flex}.metric .num{color:#00f0ff;font-size:.95rem;font-weight:600}.metric .lbl{color:#445;letter-spacing:.08em;text-transform:uppercase;font-size:.58rem}#history{z-index:15;pointer-events:none;flex-direction:column-reverse;align-items:center;gap:.6rem;width:80vw;max-width:800px;max-height:30vh;display:flex;position:fixed;bottom:12rem;left:50%;overflow:hidden;transform:translate(-50%)}.h-item{text-align:center;opacity:0;color:#667;text-overflow:ellipsis;white-space:nowrap;background:#ffffff05;border:1px solid #ffffff08;border-radius:8px;max-width:100%;padding:.3rem .8rem;font-size:clamp(.65rem,1.2vw,.82rem);line-height:1.5;transition:opacity .5s,transform .5s;overflow:hidden;transform:scale(.85)translateY(15px)}.h-item.show{opacity:1;transform:scale(1)translateY(0)}.h-item.show:nth-child(2){opacity:.4;font-size:clamp(.58rem,1vw,.72rem)}.h-item.show:nth-child(3){opacity:.22;font-size:clamp(.52rem,.9vw,.65rem)}.h-item.show:nth-child(n+4){opacity:.1;font-size:clamp(.48rem,.8vw,.58rem)}
