@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111111;--ink:#f4f3ef;--muted:#797976;--accent:#ff784f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 'Be Vietnam Pro',system-ui,sans-serif}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent;cursor:pointer}button:focus-visible,[tabindex]:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:7px}[hidden]{display:none!important}.app{max-width:680px;min-height:100svh;margin:0 auto;padding:24px 28px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column}header{height:42px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.bell{position:relative;width:42px;height:42px;margin-left:auto;display:grid;place-items:center;color:#acaca8;background:transparent;border:0;border-radius:50%}.bell svg{width:23px;height:23px}.bell:hover{color:var(--ink);background:#222}.permission-dot{position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:transparent}.bell.granted .permission-dot{background:var(--accent)}.bell.denied{color:#686865}.bell.denied .permission-dot{background:#b75c51}.bell.pending{opacity:.4;cursor:wait}.welcome{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 0 90px;gap:46px}h1{font-weight:700;font-size:clamp(43px,9vw,64px);line-height:1.14;letter-spacing:-2.8px;text-align:center;margin:0}h1 span{color:var(--accent)}.pill{position:relative;width:146px;height:64px;border:1px solid #41413e;border-radius:999px;background:#252523;color:#a7a7a1;display:flex;align-items:center;padding:0 21px;transition:background .2s}.pill>span{font-size:14px;letter-spacing:1.5px;font-weight:600;margin-left:auto}.pill i{position:absolute;left:7px;top:7px;width:48px;height:48px;background:var(--ink);border-radius:50%;box-shadow:0 2px 10px #0003;transition:transform .2s}.pill:hover{border-color:#777770}.pill.compact{width:86px;height:38px;background:var(--accent);border-color:var(--accent);padding:0 12px;color:#28160e}.compact>span{margin:0;font-size:11px;letter-spacing:1px}.compact i{left:5px;top:5px;width:26px;height:26px;transform:translateX(48px);background:#271b16}.session{flex:1;display:flex;flex-direction:column;gap:24px;padding:42px 0 28px;min-height:0}.automatic{display:flex;align-items:center;gap:12px;width:fit-content;cursor:pointer;font-size:16px;font-weight:400}.automatic input{width:20px;height:20px;margin:0;accent-color:var(--accent);cursor:pointer}.pad{position:relative;isolation:isolate;flex:1;min-height:380px;border:1px solid #3a3a36;border-radius:26px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#191918;display:grid;place-items:center;transition:border-color .2s,background .2s}.pad>span{position:relative;z-index:1;pointer-events:none;color:#8f8f88;font-size:18px;letter-spacing:-.35px}.pad.engaged{border-color:#a25b43;background:#211b18}.pad.engaged>span{color:#e4a28a}canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}footer{text-align:center;color:#777770;font-size:13px;font-weight:400;flex-shrink:0;padding-top:12px}dialog{background:#1c1c1a;color:var(--ink);border:1px solid #45413b;border-radius:24px;width:390px;max-width:calc(100% - 40px);padding:56px 28px 36px;text-align:center}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog h2{font-size:25px;line-height:1.4;margin:0;overflow-wrap:anywhere}dialog p{font-size:16px;color:#aaa99f;white-space:pre-wrap;overflow-wrap:anywhere;margin:16px 0 0}dialog p:empty{display:none}.close{position:absolute;top:13px;right:13px;border:0;background:none;color:#aaa;width:34px;height:34px;border-radius:50%}.close svg{width:22px;height:22px}.close:hover{background:#333}@media(min-width:760px){.app{padding-top:36px;padding-bottom:30px}.session{padding-top:54px;padding-bottom:36px}.pad{min-height:420px}.welcome{gap:52px}}@media(max-height:650px){.welcome{padding:35px 0;gap:30px}.session{padding-top:24px}.pad{min-height:260px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Neon pink: steady LED glow, without flashing. */
:root{--bg:#120812;--ink:#ffe9f7;--muted:#c28aad;--accent:#ff2daa}
body{background:radial-gradient(ellipse at 50% 35%,#271023 0%,#120812 65%)}
h1{color:#ffe9f7;text-shadow:0 0 2px #fff4,0 0 10px #ff2daa90,0 0 28px #ff2daa50,0 0 55px #ff2daa25}
h1 span{color:#ff67c4;text-shadow:0 0 10px #ff2daa,0 0 25px #ff2daa80}
.bell{color:#ffa0da;filter:drop-shadow(0 0 5px #ff2daa65)}
.bell:hover{background:#351027;color:#ffddf2}.bell.denied{color:#985b83}.bell.denied .permission-dot{background:#d6578e}
.pill{background:#2c1027;border-color:#a63e85;color:#ffb2e1;box-shadow:0 0 12px #ff2daa25,inset 0 0 12px #ff2daa10}
.pill>span{text-shadow:0 0 7px #ff2daa90}
.pill i{background:#ffe5f5;box-shadow:0 0 10px #ff2daa60,0 0 22px #ff2daa30}
.pill:hover{border-color:#ff71c8;box-shadow:0 0 18px #ff2daa40}
.pill.compact{background:#ff2daa;border-color:#ff77ce;color:#2a0821;box-shadow:0 0 15px #ff2daa55}.compact>span{text-shadow:none}.compact i{background:#330c28;box-shadow:0 0 8px #ffb0df55}
.automatic span{color:#ffd6f0;text-shadow:0 0 8px #ff2daa65,0 0 20px #ff2daa25}
.automatic input{filter:drop-shadow(0 0 4px #ff2daa45)}
.pad{background:radial-gradient(ellipse at center,#2b1028 0%,#1c0b1a 75%);border-color:#96376f;box-shadow:inset 0 0 24px #ff2daa0d,0 0 15px #ff2daa18}
.pad>span{color:#ffb9e4;font-size:clamp(16px,4.3vw,20px);font-weight:600;letter-spacing:.5px;text-align:center;padding:20px;text-shadow:0 0 4px #ff2daa90,0 0 14px #ff2daa70,0 0 30px #ff2daa35}
.pad.engaged{border-color:#ff78d0;background:radial-gradient(ellipse at center,#471139 0%,#250c21 75%);box-shadow:0 0 6px #ff2daa90,0 0 25px #ff2daa50,inset 0 0 35px #ff2daa18}
.pad.engaged>span{color:#fff1fb;text-shadow:0 0 4px #fff7,0 0 12px #ff2daa,0 0 28px #ff2daaa0}
footer{color:#d69fc1;text-shadow:0 0 8px #ff2daa70,0 0 18px #ff2daa25}
dialog{background:#240d20;border-color:#ad3d85;box-shadow:0 0 35px #ff2daa25}dialog h2{color:#ffe4f5;text-shadow:0 0 10px #ff2daa80}dialog p{color:#d8adc8}.close{color:#ffc8e9}.close:hover{background:#4c163c}