.wrap.wide{ max-width:860px; }
.feel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:8px 0 36px; }
.feel{ font-family:var(--font); font-size:1rem; font-weight:300; line-height:1.4; color:var(--text); text-align:left; background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px 20px; cursor:pointer; transition:background .2s, border-color .2s; }
.feel:hover{ background:var(--panel-strong); }
.feel[aria-pressed="true"]{ background:rgba(160,130,255,.18); border-color:var(--violet); }
@media (max-width:560px){ .feel-grid{ grid-template-columns:1fr; } }
.result{ display:flex; flex-direction:column; align-items:flex-start; padding:34px 30px; background:var(--panel); border:1px solid var(--border); border-radius:24px; scroll-margin-top:100px; }
.result[hidden]{ display:none; }
.result-orb{ width:96px; height:96px; border-radius:50%; margin-bottom:22px; background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.95) 0,rgba(255,255,255,.4) 15%,transparent 36%),radial-gradient(circle at 26% 74%,#9fe9d6 0,transparent 48%),radial-gradient(circle at 78% 72%,#d9a4ee 0,transparent 52%),radial-gradient(circle at 76% 26%,#a9b6ff 0,transparent 48%),#c7b8f3; box-shadow:inset -8px -10px 22px rgba(112,84,205,.38),0 0 50px 8px rgba(160,130,255,.3); }
.o2{ filter:hue-rotate(40deg); } .o3{ filter:hue-rotate(95deg); } .o4{ filter:hue-rotate(150deg); } .o5{ filter:hue-rotate(205deg); } .o6{ filter:hue-rotate(255deg); } .o7{ filter:hue-rotate(305deg); } .o8{ filter:hue-rotate(340deg); }
.wrap .result .result-kicker{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.wrap .result h2{ margin:0 0 10px; font-size:2rem; font-weight:200; letter-spacing:-.01em; }
.wrap .result .result-desc{ font-size:1.1rem; color:var(--text); }
.result-actions{ display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 22px; }
.ghost{ font-family:var(--font); font-size:.82rem; font-weight:500; color:var(--text); background:var(--panel-strong); border:1px solid var(--border); border-radius:999px; padding:10px 22px; cursor:pointer; }
.ghost:hover{ background:var(--panel); }
.wrap .result .result-more{ margin:0; font-size:.9rem; }