:root{--ink: #1a1410;--ink-soft: #3d342c;--paper: #f4ebe0;--paper-2: #ebe0d2;--card: #fffaf4;--line: rgba(26, 20, 16, .1);--coral: #e85d4c;--coral-deep: #c94436;--sage: #5a7a62;--gold: #c9a227;--muted: #7a6f64;--shadow: 0 18px 50px rgba(26, 20, 16, .12);--radius: 22px;--font-display: "Fraunces", Georgia, serif;--font-body: "Outfit", system-ui, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);font-family:var(--font-body);background:radial-gradient(1200px 600px at 10% -10%,rgba(232,93,76,.12),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(201,162,39,.14),transparent 50%),linear-gradient(180deg,#f7f0e6 0%,var(--paper) 40%,#e8ddd0 100%);-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:0}.app{position:relative;z-index:1;max-width:480px;margin:0 auto;min-height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px}.header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;animation:rise .55s ease both}.brand{display:flex;flex-direction:column;gap:4px}.brand h1{margin:0;font-family:var(--font-display);font-weight:700;font-size:1.85rem;letter-spacing:-.02em;line-height:1.1}.brand p{margin:0;color:var(--muted);font-size:.92rem}.live-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 24px #1a14100f;font-size:.78rem;font-weight:600;color:var(--ink-soft);white-space:nowrap}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--sage);box-shadow:0 0 #5a7a6280;animation:pulse 2s ease infinite}.live-dot.off{background:var(--muted);animation:none;box-shadow:none}.device-card{background:var(--ink);color:#f7efe6;border-radius:calc(var(--radius) + 4px);padding:18px 18px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;animation:rise .6s .05s ease both}.device-card:after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(232,93,76,.35),transparent 70%);pointer-events:none}.device-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}.device-name{font-family:var(--font-display);font-size:1.35rem;font-weight:700}.device-meta{margin-top:8px;font-size:.86rem;color:#f7efe6b8;position:relative;z-index:1}.device-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;position:relative;z-index:1}.stat{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px}.stat b{display:block;font-size:1.35rem;font-family:var(--font-display);margin-bottom:2px}.stat span{font-size:.78rem;color:#f7efe6a6}.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;animation:rise .6s .1s ease both}.filters::-webkit-scrollbar{display:none}.chip{border:1px solid var(--line);background:var(--card);color:var(--ink-soft);border-radius:999px;padding:9px 14px;font:inherit;font-size:.86rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease,color .15s ease}.chip:hover{transform:translateY(-1px)}.chip.active{background:var(--ink);color:#f7efe6;border-color:var(--ink)}.feed-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;animation:rise .6s .12s ease both}.feed-head h2{margin:0;font-family:var(--font-display);font-size:1.2rem}.feed-head span{color:var(--muted);font-size:.82rem}.feed{display:flex;flex-direction:column;gap:12px;flex:1}.msg{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 15px 13px;box-shadow:0 10px 28px #1a14100d;animation:rise .45s ease both;position:relative}.msg.fresh{border-color:#e85d4c59;box-shadow:0 12px 32px #e85d4c1f}.msg-top{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.who{display:flex;align-items:center;gap:10px;min-width:0}.avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:600;font-size:.95rem;flex-shrink:0}.who-text{min-width:0}.who-text strong{display:block;font-size:.95rem;font-weight:600}.who-text em{font-style:normal;color:var(--muted);font-size:.78rem}.badge{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:5px 9px;border-radius:999px;background:var(--paper-2);color:var(--ink-soft);flex-shrink:0}.badge.voice{background:#5a7a6226;color:var(--sage)}.badge.text{background:#e85d4c1f;color:var(--coral-deep)}.msg-body{font-size:1.05rem;line-height:1.4;color:var(--ink);word-break:break-word}.msg-body.phrase{font-family:var(--font-display);font-size:1.35rem;font-weight:600;letter-spacing:-.01em}.voice-row{display:flex;align-items:center;gap:12px;margin-top:4px}.play-btn{width:48px;height:48px;border:none;border-radius:50%;background:var(--coral);color:#fff;font-size:1rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px #e85d4c4d;transition:transform .15s ease,background .15s ease;flex-shrink:0}.play-btn:hover{transform:scale(1.04);background:var(--coral-deep)}.play-btn.playing{background:var(--ink);box-shadow:none}.voice-meta{flex:1;min-width:0}.voice-meta strong{display:block;font-size:.95rem}.voice-meta span{color:var(--muted);font-size:.8rem}.wave{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:6px}.wave i{display:block;width:3px;border-radius:2px;background:#1a14102e;animation:none}.play-btn.playing+.voice-meta .wave i{background:var(--coral);animation:bar .9s ease-in-out infinite}.wave i:nth-child(1){height:8px;animation-delay:0s}.wave i:nth-child(2){height:16px;animation-delay:.1s}.wave i:nth-child(3){height:12px;animation-delay:.2s}.wave i:nth-child(4){height:20px;animation-delay:.05s}.wave i:nth-child(5){height:10px;animation-delay:.15s}.wave i:nth-child(6){height:15px;animation-delay:.25s}.wave i:nth-child(7){height:9px;animation-delay:.12s}.wave i:nth-child(8){height:18px;animation-delay:.18s}.empty,.error,.loading{text-align:center;padding:36px 18px;color:var(--muted);background:#fffaf48c;border:1px dashed var(--line);border-radius:var(--radius)}.empty h3,.error h3{margin:0 0 8px;font-family:var(--font-display);color:var(--ink);font-size:1.25rem}.empty p,.error p{margin:0;line-height:1.45;font-size:.92rem}.footer-hint{text-align:center;color:var(--muted);font-size:.78rem;margin-top:auto;padding-top:8px}.footer-hint a{color:var(--coral-deep)}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%{box-shadow:0 0 #5a7a6273}70%{box-shadow:0 0 0 8px #5a7a6200}to{box-shadow:0 0 #5a7a6200}}@keyframes bar{0%,to{transform:scaleY(.55)}50%{transform:scaleY(1)}}@media (min-width: 520px){.app{padding-top:32px}}