:root{--np-color-bubblegum: #ff6ec7;--np-color-cyan: #00d4ff;--np-color-lime: #a4ff5a;--np-color-tangerine: #ff9500;--np-color-lavender: #c39bff;--np-color-aqua-blue: #4faaff;--np-color-chrome-hi: #ffffff;--np-color-chrome-lo: #7a8aa0;--np-color-panel-glass: rgba(255, 255, 255, .35);--np-radius-button: 16px;--np-radius-panel: 20px;--np-radius-toast: 12px;--np-shadow-panel: 0 8px 24px rgba(20, 30, 60, .25), 0 2px 6px rgba(20, 30, 60, .15), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .08);--np-shadow-button-hi: inset 0 2px 4px rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .15);--np-font-chrome: "Chicago FLF", "Chicago 12", "Perfect DOS VGA 437", system-ui, sans-serif;--np-font-body: "Comic Neue", "Comic Sans MS", system-ui, sans-serif;--np-font-display: "Rubik Bubbles", "Fredoka", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}body{font-family:var(--np-font-body, system-ui, sans-serif);color:#1a1a2e;background:radial-gradient(ellipse at 20% 0%,var(--np-color-bubblegum, #ff6ec7) 0%,transparent 55%),radial-gradient(ellipse at 80% 100%,var(--np-color-cyan, #00d4ff) 0%,transparent 55%),linear-gradient(180deg,#ffe6f5,#e6f7ff);background-attachment:fixed;min-height:100vh;min-height:100dvh}#app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:1rem;gap:1rem;max-width:640px;margin:0 auto}.np-join{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:#fff9;border-radius:var(--np-radius-panel, 20px);box-shadow:var(--np-shadow-panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.np-join h1{margin:0;font-family:var(--np-font-display, system-ui, sans-serif);font-size:2rem;color:var(--np-color-bubblegum);text-shadow:0 2px 0 rgba(255,255,255,.9)}.np-join label{display:flex;flex-direction:column;gap:.35rem;font-weight:700}.np-join input[type=text]{padding:.7em .9em;font:inherit;font-size:1.1rem;border-radius:var(--np-radius-button, 16px);border:2px solid rgba(0,0,0,.15);background:#ffffffd9;outline:none}.np-join input[type=text]:focus{border-color:var(--np-color-cyan, #00d4ff);box-shadow:0 0 0 4px #00d4ff40}.np-join .np-room-code{font-family:var(--np-font-chrome, system-ui, monospace);font-size:1.4rem;letter-spacing:.15em;text-align:center;padding:.5rem;background:#ffffff80;border-radius:var(--np-radius-button)}