:root{--bg:#08070c;--bg-glow-a:#ff2d7838;--bg-glow-b:#7c5cff33;--ink:#fff;--muted:#ffffff85;--line:#ffffff1f;--surface:#ffffff0e;--accent:#ff2d78;--accent-2:#7c5cff;--star:#ffc531;--star-glow:#ffc53180;--shadow:0 18px 50px #00000080;--r:18px;--neon:0}html[data-night=true]{--bg:#04020a;--bg-glow-a:#ff008066;--bg-glow-b:#00eaff42;--accent:#ff1f8f;--accent-2:#9d5cff;--star:#ffe600;--star-glow:#ffe600cc;--line:#ffffff2e;--neon:1}[data-tone=roast]{--accent:#ff3b1f;--accent-2:#ff9500;--star:#ff9f0a;--star-glow:#ff9f0a8c}*{box-sizing:border-box}html,body{height:100%;margin:0;padding:0}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,system-ui,sans-serif}body:before{content:"";z-index:-1;background:radial-gradient(42% 38% at 18% 12%, var(--bg-glow-a), transparent 70%), radial-gradient(46% 42% at 84% 82%, var(--bg-glow-b), transparent 72%);filter:blur(calc(6px + var(--neon) * 10px)) saturate(calc(1 + var(--neon) * .5));pointer-events:none;animation:22s ease-in-out infinite alternate drift;position:fixed;inset:-20%}body.lock{width:100%;position:fixed;inset:0;overflow:hidden}@keyframes drift{0%{transform:translate(-2%,-1%)scale(1)}to{transform:translate(3%,2%)scale(1.08)}}button,input{font:inherit;color:inherit}.shell{min-height:100dvh;padding:max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));place-items:center;display:grid;position:relative;overflow:hidden}.stage{width:100%;max-width:520px}.panel{text-align:center;flex-direction:column;align-items:center;gap:clamp(14px,3.2vh,22px);display:flex}.panel--enter{animation:.5s cubic-bezier(.22,1,.36,1) both rise}@keyframes rise{0%{opacity:0;transform:translateY(14px)scale(.985)}to{opacity:1;transform:none}}.headline{letter-spacing:-.045em;text-wrap:balance;background:linear-gradient(178deg,#fff 30%,#ffffffa8);color:#0000;text-shadow:0 0 calc(3px + var(--neon) * 32px) #ffffff29;-webkit-background-clip:text;background-clip:text;margin:0 0 -.16em;padding-bottom:.16em;font-size:clamp(2.6rem,13vw,4.4rem);font-weight:900;line-height:.9}.subtext{color:var(--muted);letter-spacing:-.01em;text-wrap:balance;margin:-6px 0 0;font-size:clamp(.9rem,3.7vw,1.05rem)}.hint{letter-spacing:.24em;text-transform:uppercase;color:var(--muted);opacity:.75;margin:0;font-size:.72rem;animation:2.6s ease-in-out infinite breathe}@keyframes breathe{0%,to{opacity:.4}50%{opacity:.95}}.response{letter-spacing:-.03em;text-wrap:balance;max-width:22ch;margin:0;font-size:clamp(1.3rem,5.6vw,1.85rem);font-weight:800;line-height:1.18}.response--confirm{background:linear-gradient(96deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin-bottom:-.12em;padding-bottom:.12em}.error{color:#ff6b6b;margin:-6px 0 0;font-size:.85rem}.stars{gap:clamp(2px,1.5vw,10px);margin:clamp(2px,1.5vh,10px) 0;display:flex}.star{cursor:pointer;touch-action:manipulation;background:0 0;border:0;width:clamp(54px,16.5vw,88px);height:clamp(54px,16.5vw,88px);padding:0;transition:transform .16s;position:relative}.star:active{transform:scale(.9)}.star svg{width:100%;height:100%;overflow:visible}.star svg path{fill:#ffffff0d;stroke:#ffffff4d;stroke-width:1.1px;stroke-linejoin:round;transition:fill .3s cubic-bezier(.2,.9,.25,1.3),stroke .2s}.star--on svg path{fill:var(--star);stroke:var(--star);filter:drop-shadow(0 0 calc(10px + var(--neon) * 12px) var(--star-glow))}.star--on svg{animation:.44s cubic-bezier(.2,.9,.25,1.45) both pop;animation-delay:calc(var(--i) * 78ms)}@keyframes pop{0%{transform:scale(.62)rotate(-14deg)}55%{transform:scale(1.26)rotate(4deg)}to{transform:scale(1)rotate(0)}}.star--picked:after{content:"";border:2px solid var(--star);pointer-events:none;border-radius:50%;animation:.62s ease-out forwards ring;position:absolute;inset:6%}@keyframes ring{0%{opacity:.75;transform:scale(.55)}to{opacity:0;transform:scale(2)}}.stars--compact .star{cursor:default;width:clamp(30px,8.5vw,42px);height:clamp(30px,8.5vw,42px)}.stars--compact .star--picked:after{display:none}.big-stars{letter-spacing:.1em;color:var(--star);filter:drop-shadow(0 0 calc(8px + var(--neon) * 14px) var(--star-glow));font-size:clamp(2rem,9vw,2.8rem)}.big-stars .dim{color:#ffffff24;filter:none}.handle-form{flex-direction:column;gap:10px;width:100%;display:flex}.field{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);align-items:center;gap:2px;padding:0 16px;transition:border-color .2s,box-shadow .2s;display:flex}.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent)}.at{color:var(--muted);font-size:1.25rem;font-weight:800}.input{letter-spacing:-.01em;background:0 0;border:0;outline:none;flex:1;min-width:0;height:60px;padding:0 4px;font-size:1.15rem;font-weight:700}.input::placeholder{color:#ffffff52;font-weight:600}.cta{border-radius:var(--r);background:linear-gradient(96deg, var(--accent), var(--accent-2));color:#fff;letter-spacing:-.015em;cursor:pointer;width:100%;min-height:60px;box-shadow:var(--shadow), 0 0 calc(var(--neon) * 34px) color-mix(in srgb, var(--accent) 55%, transparent);border:0;justify-content:center;align-items:center;gap:10px;padding:0 20px;font-size:1.08rem;font-weight:800;text-decoration:none;transition:transform .14s,filter .2s,opacity .2s;display:flex}.cta:active{filter:brightness(1.12);transform:scale(.975)}.cta:disabled{opacity:.42;cursor:not-allowed}.cta--link{animation:2.8s ease-in-out .6s infinite nudge}@keyframes nudge{0%,92%,to{transform:none}95%{transform:translateY(-3px)}}.handle-chip{background:#0000003d;border-radius:999px;padding:3px 9px;font-size:.92rem;font-weight:700}.skip{color:var(--muted);text-underline-offset:4px;text-decoration:underline;-webkit-text-decoration-color:var(--line);text-decoration-color:var(--line);cursor:pointer;background:0 0;border:0;padding:8px 12px;font-size:.88rem;font-weight:600;transition:color .2s}.skip:active{color:var(--ink)}.roast{top:max(14px, env(safe-area-inset-top));cursor:pointer;opacity:.45;background:0 0;border:0;align-items:center;gap:8px;padding:8px 10px;transition:opacity .2s;display:flex;position:absolute;right:14px}.roast--on,.roast:active{opacity:1}.roast__label{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:.63rem;font-weight:700}.roast--on .roast__label{color:var(--accent)}.roast__track{border:1px solid var(--line);background:#ffffff24;border-radius:999px;width:34px;height:20px;transition:background .25s;position:relative}.roast--on .roast__track{background:linear-gradient(96deg, var(--accent), var(--accent-2));box-shadow:0 0 16px color-mix(in srgb, var(--accent) 60%, transparent)}.roast__knob{background:#fff;border-radius:50%;width:14px;height:14px;transition:transform .28s cubic-bezier(.2,.9,.25,1.4);position:absolute;top:2px;left:2px}.roast--on .roast__knob{transform:translate(14px)}.page{min-height:100dvh;padding:max(28px, env(safe-area-inset-top)) 20px 40px;flex-direction:column;align-items:center;gap:22px;display:flex}.page__title{letter-spacing:-.04em;text-align:center;margin:0;font-size:clamp(1.9rem,8vw,2.6rem);font-weight:900}.page__sub{color:var(--muted);text-align:center;margin:-14px 0 0;font-size:.9rem}.grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;width:100%;max-width:560px;display:grid}.card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:20px 18px}.card__value{letter-spacing:-.04em;background:linear-gradient(96deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:clamp(2rem,9vw,2.7rem);font-weight:900;line-height:1}.card__label{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-size:.72rem}.bars{flex-direction:column;gap:8px;width:100%;max-width:560px;display:flex}.bar{color:var(--muted);grid-template-columns:58px 1fr 34px;align-items:center;gap:10px;font-size:.85rem;display:grid}.bar__track{background:#ffffff14;border-radius:999px;height:10px;overflow:hidden}.bar__fill{background:linear-gradient(90deg, var(--accent), var(--accent-2));min-width:3px;height:100%;box-shadow:0 0 calc(var(--neon) * 20px) color-mix(in srgb, var(--accent) 60%, transparent);border-radius:999px;transition:width .4s;display:block}.bar__n{text-align:right;color:var(--ink);font-weight:700}.table{border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:560px;overflow:hidden}.row{border-bottom:1px solid var(--line);grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 16px;font-size:.9rem;display:grid}.row:last-child{border-bottom:0}.row__stars{color:var(--star);letter-spacing:.08em}.row__handle{text-overflow:ellipsis;white-space:nowrap;font-weight:700;overflow:hidden}.row__time{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.78rem}.qr-plate{box-shadow:var(--shadow), 0 0 calc(var(--neon) * 50px) color-mix(in srgb, var(--accent) 45%, transparent);background:#fff;border-radius:24px;padding:18px;line-height:0}.qr-plate svg{width:min(70vw,300px);height:auto;display:block}.qr-url{color:var(--muted);word-break:break-all;text-align:center;max-width:90vw;font-size:.85rem}.empty{color:var(--muted);font-size:.9rem}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.05ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}