@layer components{.matter .smx-head{text-align:center;max-width:900px;margin:0 auto clamp(32px,4vw,52px)}.matter .smx-head .t-l{max-width:50ch;margin:18px auto 0}.matter .smx{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:clamp(20px,3vw,40px);display:grid}.matter .smx-list{gap:8px;margin:0;padding:0;list-style:none;display:grid}.matter .smx-q{text-align:left;width:100%;color:var(--ink-2);border:1px solid var(--line);transition:background .3s var(--ease), border-color .3s, box-shadow .3s var(--ease), color .3s;background:0 0;border-radius:18px;align-items:center;gap:14px;padding:16px 18px 16px 16px;display:flex;position:relative}.matter .smx-q:hover{background:rgb(var(--card-rgb) / .6)}.matter .smx-q[aria-pressed=true]{color:var(--ink);background:var(--card);border-color:#0000;box-shadow:0 20px 40px -26px #1d265073}.matter .smx-quote{width:34px;height:34px;color:var(--soft);background:var(--bg-2);border-radius:11px;flex:none;place-items:center;padding-top:12px;font-size:1.7rem;font-weight:600;line-height:1;transition:color .3s,background .3s;display:grid}.matter .smx-q[aria-pressed=true] .smx-quote{color:#fff;background:var(--iri)}.matter .smx-text{flex:1;font-size:1.02rem;font-weight:500;line-height:1.35}.matter .smx-arrow{color:var(--soft);opacity:0;transition:opacity .3s, translate .35s var(--ease);flex:none;translate:-6px}.matter .smx-q:hover .smx-arrow,.matter .smx-q[aria-pressed=true] .smx-arrow{opacity:1;translate:0}.matter .smx-q[aria-pressed=true] .smx-arrow{color:var(--cobalt-ink)}.matter .smx-card{isolation:isolate;background:var(--card);box-shadow:var(--shadow-lift);border-radius:30px;position:sticky;top:96px;overflow:hidden}.matter .smx-card:before{content:"";z-index:-1;background:radial-gradient(60% 120% at 100% 0,#e3a4cb73,#0000 60%),radial-gradient(70% 120% at 0 0,#a394ea66,#0000 60%),linear-gradient(#c7dafc73,#0000);height:200px;position:absolute;inset:0 0 auto}.matter .smx-body{animation:smx-in .5s var(--ease);padding:clamp(24px,3vw,36px)}@keyframes smx-in{0%{opacity:0;translate:0 10px}}.matter .smx-ico{width:56px;height:56px;color:var(--cobalt-ink);background:rgb(var(--card-rgb) / .8);border:1px solid rgb(var(--edge-rgb) / .95);border-radius:18px;place-items:center;margin-bottom:20px;display:grid;box-shadow:0 14px 30px -18px #1d265080}.matter .smx-label{color:var(--soft);margin:0;font-size:.84rem;font-weight:540}.matter .smx-top h3{letter-spacing:-.035em;margin:4px 0 0;font-size:clamp(1.6rem,1rem + 1.6vw,2.3rem);font-weight:420;font-stretch:108%;line-height:1.05}.matter .smx-plan{color:var(--ink-2);margin:18px 0 0;font-size:1.02rem;line-height:1.55}.matter .smx-plan b{color:var(--ink);font-weight:600}.matter .smx-inc{border-top:1px solid var(--line);grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:24px 0 0;padding:20px 0 0;list-style:none;display:grid}.matter .smx-inc li{color:var(--ink-2);align-items:flex-start;gap:10px;font-size:.92rem;line-height:1.4;display:flex}.matter .smx-inc svg{color:#fff;background:var(--iri);border-radius:50%;flex:none;width:20px;height:20px;margin-top:1px;padding:3px}.matter .smx-actions{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.matter .smx-actions .btn-glass{border-color:var(--line);box-shadow:none}.matter .smx-acc .smx-q{background:rgb(var(--card-rgb) / .55)}.matter .smx-acc li.on .smx-q{color:var(--ink);background:var(--card);border-color:#0000;border-radius:18px 18px 0 0}.matter .smx-acc li.on .smx-quote{color:#fff;background:var(--iri)}.matter .smx-chev{color:var(--soft);transition:rotate .35s var(--ease);flex:none}.matter .smx-acc li.on .smx-chev{color:var(--ink);rotate:180deg}.matter .smx-acc .smx-card{border-radius:0 0 22px 22px;position:relative;top:auto;box-shadow:0 24px 48px -30px #1d265073}.matter .smx-acc .smx-card:before{opacity:.7;height:140px}.matter .smx-acc .smx-body{padding:8px 18px 22px}.matter .smx-acc .smx-ico{border-radius:14px;width:46px;height:46px;margin-bottom:14px}@media (max-width:760px){.matter .smx-text{font-size:.97rem}.matter .smx-inc{grid-template-columns:minmax(0,1fr)}.matter .smx-actions .btn{flex:100%;justify-content:center}}@media (prefers-reduced-motion:reduce){.matter .smx-body{animation:none}}}
@layer components{.matter .hb-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.matter .hb{background:var(--card);box-shadow:var(--shadow-soft);transition:translate .45s var(--ease), box-shadow .45s var(--ease);border-radius:28px;flex-direction:column;padding:14px 14px 26px;display:flex}.matter .hb:hover{box-shadow:var(--shadow-lift);translate:0 -4px}.matter .hb h3{letter-spacing:-.015em;margin:22px 12px 0;font-size:1.2rem;font-weight:560;font-stretch:106%}.matter .hb>p{color:var(--mute);margin:8px 12px 0;font-size:.95rem;line-height:1.55}.matter .hb-demo{isolation:isolate;background:var(--bg);min-height:176px;color:var(--ink-2);border-radius:18px;align-content:center;gap:10px;padding:18px;font-size:.84rem;display:grid;position:relative;overflow:hidden}.matter .hb-demo:before{content:"";z-index:-1;filter:blur(40px);opacity:.35;background:conic-gradient(from 200deg,#e3a4cb,#a394ea,#5570dc,#c7dafc,#e3a4cb);border-radius:50%;width:180px;height:180px;position:absolute;top:-60px;right:-60px}.matter .hb-row{background:var(--card);border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:9px 12px;display:flex;box-shadow:0 1px 2px #131a3a0d}.matter .hb-row span{align-items:center;gap:6px;display:inline-flex}.matter .hb-row b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}.matter .hb-small{box-shadow:none;color:var(--mute);background:0 0;padding:0 4px;font-size:.78rem}.matter .hb-tag{color:var(--ink-2);background:var(--bg-2);border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:560}.matter .hb-amber{color:var(--warn-fg);background:var(--warn-bg)}.matter .hb-green{color:var(--ok-fg);background:var(--ok-bg)}.matter .hb-meter{background:var(--card);border-radius:99px;height:8px;overflow:hidden}.matter .hb-meter i{border-radius:inherit;transform-origin:0;height:100%;transition:transform 1.4s var(--ease) .3s;background:linear-gradient(90deg,#f0c27a,#e8a24f);display:block;transform:scaleX(0)}.matter .hb-good i{background:var(--iri)}.matter .hb.in .hb-meter i{transform:scaleX(1)}.matter .hb-msg{border-radius:14px;max-width:88%;margin:0;padding:9px 12px;line-height:1.4}.matter .hb-user{color:#fff;background:var(--fill);border-bottom-right-radius:4px;justify-self:end}.matter .hb-bot{background:var(--card);border-bottom-left-radius:4px;gap:8px;display:grid;box-shadow:0 1px 2px #131a3a0d}.matter .hb-src{color:var(--cobalt-ink);background:var(--iri-soft);border-radius:999px;justify-self:start;align-items:center;gap:5px;padding:3px 8px;font-size:.72rem;font-weight:540;display:inline-flex}.matter .hb-checks{flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;display:flex}.matter .hb-checks li{background:var(--card);border-radius:999px;align-items:center;gap:5px;padding:4px 9px;font-size:.74rem;font-weight:520;display:inline-flex}.matter .hb-checks svg{color:var(--ok-fg)}.matter .hb-checks .hb-flag{color:var(--warn-fg);background:var(--warn-bg)}.matter .hb-spark{color:var(--cobalt-ink)}.matter .hb-note{color:var(--mute);margin:-2px 4px 0;font-size:.78rem}.matter .hb-btns{gap:8px;display:flex}.matter .hb-btn{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:10px;flex:1;padding:8px;font-weight:560}.matter .hb-ink{color:#fff;background:var(--fill);border-color:var(--fill)}.matter .hb-url{color:var(--ink);background:var(--card);border-radius:999px;align-items:center;gap:8px;padding:10px 12px;font-weight:540;display:flex;box-shadow:0 1px 2px #131a3a0d}.matter .hb-url svg{color:var(--soft)}.matter .hb-live{background:#2fbf71;border-radius:50%;width:8px;height:8px;margin-left:auto;box-shadow:0 0 0 4px #2fbf712e}.matter .hb-shield{color:var(--cobalt-ink)}@media (max-width:1080px){.matter .hb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.matter .hb-grid{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:reduce){.matter .hb-meter i{transition:none;transform:none}}}