:root{--bg: #070a12;--card: rgba(255, 255, 255, .06);--card2: rgba(255, 255, 255, .1);--text: rgba(255, 255, 255, .92);--muted: rgba(255, 255, 255, .65);--line: rgba(255, 255, 255, .12);--accent: #ff6600;--accent2: #7c3aed}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}.page{min-height:100vh;position:relative;overflow:hidden}.bg{position:absolute;inset:-40%;background:radial-gradient(circle at 20% 20%,rgba(255,102,0,.3),transparent 45%),radial-gradient(circle at 75% 35%,rgba(124,58,237,.28),transparent 50%),radial-gradient(circle at 55% 80%,rgba(56,189,248,.12),transparent 45%);filter:blur(24px);transform:translateZ(0);animation:floaty 10s ease-in-out infinite}@keyframes floaty{0%,to{transform:translateZ(0) scale(1)}50%{transform:translate3d(0,-12px,0) scale(1.02)}}.wrap{position:relative;max-width:820px;margin:0 auto;padding:20px 18px 40px;display:flex;flex-direction:column;gap:18px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px}.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}.dot{width:12px;height:12px;border-radius:999px;background:var(--accent);box-shadow:0 0 0 6px #ff660026}.name{font-size:16px;color:var(--text)}.pill{font-size:12px;color:var(--muted);border:1px solid var(--line);background:#ffffff0d;padding:8px 10px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card{border:1px solid var(--line);background:linear-gradient(180deg,var(--card2),var(--card));border-radius:22px;padding:18px;box-shadow:0 18px 60px #0006;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateZ(0);animation:pop .26s ease-out}@keyframes pop{0%{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}.emoji{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;border:1px solid var(--line);background:#ffffff0d;margin-bottom:12px;font-size:22px}.quote{margin:0;font-size:22px;line-height:1.35;letter-spacing:.1px;white-space:pre-wrap}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.btn{border:1px solid var(--line);background:#ffffff0f;color:var(--text);padding:12px 14px;border-radius:14px;font-size:14px;font-weight:650;cursor:pointer;transition:transform .06s ease,background .2s ease,border-color .2s ease}.btn:hover{background:#ffffff1a;border-color:#ffffff2e}.btn:active{transform:translateY(1px) scale(.99)}.btn.primary{background:linear-gradient(135deg,#ff6600f2,#7c3aedd9);border-color:#ffffff2e}.btn.ghost{background:#ffffff08}.foot{display:flex;justify-content:center;padding-top:6px}.hint{color:var(--muted);font-size:12px;border:1px dashed rgba(255,255,255,.16);padding:10px 12px;border-radius:999px;background:#0000001a}.toast{position:fixed;left:50%;bottom:18px;transform:translate(-50%) translateY(10px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;background:#000000a6;border:1px solid rgba(255,255,255,.16);color:#ffffffeb;padding:10px 14px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:420px){.quote{font-size:20px}.wrap{padding:16px 14px 32px}}
