/* vutru.css: giao diện vũ trụ dùng chung cho trang chính /tools/ và mọi trang trạm (làm lại trang Công cụ, 04/10/2026).
   Cùng ngôn ngữ thiết kế với trang chủ mới (hệ mặt trời, QĐ-93): nền sao, cam kem ấm, viền sáng, kính mờ, nút tròn.
   Token chép từ ari-yoga/assets/cong/cong.css (không import: hai trang do hai phiên làm, chép để không giẫm lên nhau).
   Chuyển động chỉ transform/opacity. Giảm chuyển động: tắt hết ở cuối tệp. */

:root {
  color-scheme: dark;
  --nen-1: #2a1836; --nen-2: #150d22; --nen-3: #0a0712; --nen-4: #050409;
  --chu: #fff7f0; --chu-mo: rgb(255 247 240 / .72); --chu-nhat: rgb(255 247 240 / .5);
  --vien: #ffe2c4; --nhan: #ffb46b; --hong: #f284b5;
  --kinh: rgb(10 7 18 / .55); --kinh-dac: rgb(21 13 34 / .88); --duong: rgb(255 226 196 / .16);
  --em: cubic-bezier(.22, .9, .24, 1);
  --f-hien: "Bricolage Grotesque", "Ari Hien DP", "Be Vietnam Pro", system-ui, sans-serif;
  --f-doc: "Be Vietnam Pro", "Ari Doc DP", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--nen-4); }
body {
  margin: 0; min-height: 100dvh; color: var(--chu); font: 400 1rem/1.6 var(--f-doc);
  background:
    radial-gradient(ellipse 55% 40% at 68% 22%, rgb(162 58 138 / .18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 22% 72%, rgb(106 58 176 / .15), transparent 70%),
    radial-gradient(ellipse at 50% 45%, var(--nen-1) 0%, var(--nen-2) 42%, var(--nen-3) 78%, var(--nen-4) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
h1, h2, h3 { font-family: var(--f-hien); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
::selection { background: rgb(255 180 107 / .35); }
:focus-visible { outline: 2px solid var(--nhan); outline-offset: 3px; border-radius: 8px; }

.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 99px; background: var(--chu); color: #1a0f22; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* nền sao: canvas cố định phía sau mọi thứ (vutru.js vẽ) */
#sao { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ---------------------------------------------------------------- thanh đầu: nút ← về, tên, nút loa */
.vt-bar {
  position: fixed; z-index: 30; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  pointer-events: none;
}
.vt-bar > * { pointer-events: auto; }
.vt-ve, .vt-tieng, .vt-bar .sndfab {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--vien); background: rgb(10 7 18 / .55); color: var(--vien); cursor: pointer; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgb(255 226 196 / .18), inset 0 0 10px rgb(255 226 196 / .06);
  transition: scale 140ms var(--em), background-color 240ms var(--em);
}
.vt-ve:hover, .vt-tieng:hover, .vt-bar .sndfab:hover { background: rgb(255 226 196 / .14); }
.vt-ve:active, .vt-tieng:active, .vt-bar .sndfab:active { scale: .94; }
.vt-bar .sndfab { position: relative; }
.vt-bar .sndfab svg { width: 22px; height: 22px; fill: currentColor; }
.vt-bar .sndfab .wave { opacity: 1; transition: opacity .3s; }
.vt-bar .sndfab .slash { opacity: 0; transition: opacity .3s; }
.vt-bar .sndfab.off { opacity: .65; }
.vt-bar .sndfab.off .wave { opacity: 0; }
.vt-bar .sndfab.off .slash { opacity: 1; }
.vt-bar .sndfab.waiting::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--nhan); opacity: .6; }
.vt-bar .sndfab .tip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vt-ve svg, .vt-tieng svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vt-phai { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.vt-tieng .gach { opacity: 0; transition: opacity .2s; }
.vt-tieng[aria-pressed="true"] { opacity: .65; }
.vt-tieng[aria-pressed="true"] .song { opacity: 0; }
.vt-tieng[aria-pressed="true"] .gach { opacity: 1; }
.vt-ten { display: inline-flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: var(--chu);
  font: 600 clamp(15px, .6vw + 13px, 19px)/1 var(--f-hien); letter-spacing: .04em; text-shadow: 0 1px 6px rgb(0 0 0 / .7); }
.vt-ten img { height: 28px; width: auto; flex: none; }
.vt-ten span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .vt-ten span { display: none; } }

/* ---------------------------------------------------------------- thành phần dùng chung */
.vt-nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 99px;
  border: 0; font: 600 15px/1 var(--f-doc); letter-spacing: .03em; text-decoration: none; cursor: pointer; color: #1a0f22;
  background: linear-gradient(180deg, #ffe9d2, #ffb46b); box-shadow: 0 6px 22px rgb(255 180 107 / .35);
  transition: scale 140ms var(--em);
}
.vt-nut:active { scale: .96; }
.vt-nut.vien { background: none; box-shadow: none; color: var(--vien); border: 1.5px solid var(--vien); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .2s !important; scroll-behavior: auto !important; }
}

/* ================================================================ BỘ HÀNH TINH (05/10/2026, cô Ari: "lột xác giao diện các ứng dụng theo concept tiểu hành tinh sinh động, nhấn vào phập phùng")
   Lớp da dùng chung cho MỌI trạm, không đổi logic của ứng dụng nào: nút chính là hành tinh khí có dải mây trôi, ô chọn là mặt trăng (chọn rồi thì có
   vành quỹ đạo), nút phụ là vành quỹ đạo, thẻ là ô cửa sổ nhìn ra vũ trụ, mỗi trang có hành tinh của khu mình bồng bềnh ở đầu trang.
   Mọi chạm đều "phập phùng" (hx-phap, hx-song do vutru.js gắn). Giảm chuyển động: đứng yên. Trang nào cần hơn (ly nước thành hành tinh đại dương…) làm
   riêng trong tệp cc/ của trang đó. */
@keyframes hx-phap { 0% { transform: scale(1); } 20% { transform: scale(1.1, .86); } 46% { transform: scale(.93, 1.09); } 70% { transform: scale(1.03, .98); } 100% { transform: scale(1); } }
@keyframes hx-lac { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes hx-xoay-may { 0% { background-position: 130% 0, 0 0, 0 0; } 60%, 100% { background-position: -30% 0, 0 0, 0 0; } }
@keyframes hx-song { 0% { opacity: .75; transform: translate(-50%, -50%) scale(.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

body[data-tool] { --hx-cam-sang: #ffd9ae; --hx-cam: #ffb46b; --hx-cam-toi: #e6803c; }
.hx-phap { animation: hx-phap .55s cubic-bezier(.3, 1.4, .5, 1) both; }
.hx-song { position: absolute; width: 150%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgb(255 255 255 / .55), rgb(255 226 196 / .22) 45%, transparent 70%); animation: hx-song .65s ease-out forwards; }

/* ---- nút chính: hành tinh khí (dải mây trôi chậm, điểm sáng, bóng tối bên dưới) */
body[data-tool] .btn:not(.ghost):not(.lnk):not([disabled]):not([aria-disabled="true"]) {
  position: relative; overflow: hidden; isolation: isolate; color: #1a0f22; border: 0;
  background:
    linear-gradient(100deg, transparent 32%, rgb(255 255 255 / .22) 50%, transparent 68%) 0 0 / 260% 100% no-repeat,
    radial-gradient(70% 90% at 22% 14%, rgb(255 255 255 / .6), transparent 55%),
    radial-gradient(130% 170% at 30% 20%, var(--hx-cam-sang) 0%, var(--hx-cam) 46%, var(--hx-cam-toi) 100%);
  box-shadow: inset -12px -14px 24px rgb(140 55 8 / .38), inset 5px 6px 12px rgb(255 255 255 / .38), 0 8px 26px rgb(255 160 90 / .42);
  animation: hx-xoay-may 5.5s ease-in-out infinite; }
body[data-tool] .btn.big:not(.ghost):not([disabled]) { border-radius: 999px; }
@media (hover: hover) { body[data-tool] .btn:not(.ghost):not(.lnk):not([disabled]):hover { filter: brightness(1.08) saturate(1.05); box-shadow: inset -12px -14px 24px rgb(140 55 8 / .32), inset 5px 6px 12px rgb(255 255 255 / .45), 0 10px 34px rgb(255 160 90 / .6); } }
body[data-tool] .btn[disabled], body[data-tool] .btn[aria-disabled="true"] { animation: none; }

/* ---- nút phụ: vành quỹ đạo */
body[data-tool] .btn.ghost { position: relative; overflow: hidden; background: radial-gradient(120% 160% at 25% 10%, rgb(255 226 196 / .13), rgb(10 7 18 / .55) 62%); border: 1.5px solid rgb(255 226 196 / .5);
  box-shadow: inset 0 0 0 1px rgb(255 226 196 / .06); }
@media (hover: hover) { body[data-tool] .btn.ghost:hover { border-color: #ffe2c4; box-shadow: 0 0 18px rgb(255 180 107 / .3); } }

/* ---- ô chọn: mặt trăng nhỏ; chọn rồi thì sáng lên và có vành quỹ đạo như Thổ tinh */
body[data-tool] .chip, body[data-tool] .dots button, body[data-tool] .beats i {
  position: relative; background: radial-gradient(130% 170% at 24% 14%, rgb(255 226 196 / .22), rgb(28 18 46 / .75) 55%, rgb(10 7 18 / .85));
  border: 1px solid rgb(255 226 196 / .3); box-shadow: inset -4px -5px 10px rgb(0 0 0 / .35), inset 2px 3px 6px rgb(255 255 255 / .06); transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, border-color .3s; }
body[data-tool] .chip:hover { transform: translateY(-2px); border-color: rgb(255 226 196 / .65); }
body[data-tool] .chip[aria-pressed="true"], body[data-tool] .dots button.on, body[data-tool] .beats i.on, body[data-tool] .chip.on, body[data-tool] .chip.active {
  color: #1a0f22; border-color: transparent;
  background: radial-gradient(70% 90% at 24% 14%, rgb(255 255 255 / .55), transparent 55%), radial-gradient(130% 170% at 30% 20%, var(--hx-cam-sang), var(--hx-cam) 50%, var(--hx-cam-toi));
  box-shadow: inset -5px -6px 11px rgb(140 55 8 / .4), inset 2px 3px 6px rgb(255 255 255 / .4), 0 0 20px rgb(255 160 90 / .5); }
body[data-tool] .chip[aria-pressed="true"]::after, body[data-tool] .chip.on::after, body[data-tool] .chip.active::after {
  content: ""; position: absolute; left: -9px; right: -9px; top: 50%; height: 46%; translate: 0 -50%; rotate: -8deg; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgb(255 226 196 / .75); border-bottom-color: transparent; border-left-color: rgb(255 226 196 / .3); filter: drop-shadow(0 0 4px rgb(255 180 107 / .6)); }

/* ---- thẻ: ô cửa sổ nhìn ra vũ trụ (một quầng hành tinh mờ ở góc) */
body[data-tool] .card { position: relative; overflow: clip; }
body[data-tool] .card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 170px; height: 170px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 35% 35%, rgb(255 180 107 / .13), rgb(255 140 90 / .04) 55%, transparent 70%); border: 1px solid rgb(255 226 196 / .07); }
body[data-tool] .card > * { position: relative; z-index: 1; }

/* ---- ô nhập: khe sáng khi chạm vào */
body[data-tool] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus, body[data-tool] select:focus, body[data-tool] textarea:focus {
  outline: none; border-color: #ffe2c4; box-shadow: 0 0 0 3px rgb(255 180 107 / .28), 0 0 22px rgb(255 160 90 / .3); }

/* ---- hành tinh của khu ở đầu mỗi trang (data-khu do vutru.js gắn theo nút ← về khu) */
body[data-tool] .thero { position: relative; }
body[data-tool][data-khu] .thero::after { content: ""; position: absolute; right: 0; top: -6px; width: clamp(72px, 22vw, 104px); aspect-ratio: 1; background: var(--hx-hanh) center / contain no-repeat;
  filter: drop-shadow(0 0 18px rgb(255 160 90 / .45)); animation: hx-lac 7s ease-in-out infinite; pointer-events: none; }
body[data-tool][data-khu] .thero > h1, body[data-tool][data-khu] .thero > .lede { max-width: calc(100% - clamp(78px, 22vw, 108px)); }
body[data-tool][data-khu="cothe"] { --hx-hanh: url("hanh-tinh/cothe.webp"); }
body[data-tool][data-khu="tientrinh"] { --hx-hanh: url("hanh-tinh/tientrinh.webp"); }
body[data-tool][data-khu="baitap"] { --hx-hanh: url("hanh-tinh/baitap.webp"); }
body[data-tool][data-khu="nhip"] { --hx-hanh: url("hanh-tinh/nhip.webp"); }
body[data-tool][data-khu="giacngu"] { --hx-hanh: url("hanh-tinh/giacngu.webp"); }
body[data-tool][data-khu="yoga"] { --hx-hanh: url("hanh-tinh/yoga.webp"); }
body[data-tool][data-khu="anuong"] { --hx-hanh: url("hanh-tinh/anuong.webp"); }
body[data-tool][data-khu="hoitho"] { --hx-hanh: url("hanh-tinh/hoitho.webp"); }
@media (prefers-reduced-motion: reduce) {
  body[data-tool] .btn:not(.ghost), body[data-tool][data-khu] .thero::after, .hx-phap, .hx-song { animation: none !important; }
  body[data-tool] .chip, body[data-tool] .chip:hover { transition: none; transform: none; }
}

/* ---- riêng từng trạm (thí điểm 05/10/2026) ------------------------------------------------------------ */
/* Đo BPM: nút gõ nhịp là một hành tinh tím có vành quỹ đạo; mỗi lần gõ phập phùng (vutru.js) + vòng nhịp .bpm-ring toả ra */
body[data-tool="tap-bpm"] .bpm-tap { border: 0; color: #fff; text-shadow: 0 1px 10px rgb(20 5 50 / .6); overflow: visible;
  background: radial-gradient(60% 60% at 28% 20%, rgb(255 255 255 / .5), transparent 55%), radial-gradient(120% 120% at 30% 24%, #cdb2ff 0%, #8f5fd6 44%, #3a1f6e 100%);
  box-shadow: inset -16px -20px 36px rgb(18 4 48 / .6), inset 8px 10px 20px rgb(255 255 255 / .2), 0 0 48px rgb(160 110 255 / .45); }
body[data-tool="tap-bpm"] .bpm-tap::before { content: ""; position: absolute; left: -16%; right: -16%; top: 40%; height: 24%; border-radius: 50%; rotate: -14deg; pointer-events: none; z-index: 3;
  border: 2px solid rgb(255 226 196 / .65); border-top-color: transparent; filter: drop-shadow(0 0 8px rgb(255 180 107 / .5)); }
body[data-tool="tap-bpm"] .bpm-ring { border-color: rgb(255 214 160 / .8); }
body[data-tool="tap-bpm"] .bpm-count i { background: radial-gradient(130% 170% at 24% 14%, rgb(255 226 196 / .25), rgb(28 18 46 / .8)); border-radius: 50%; }
body[data-tool="tap-bpm"] .bpm-count i.on { background: radial-gradient(70% 90% at 24% 14%, rgb(255 255 255 / .55), transparent 55%), radial-gradient(130% 170% at 30% 20%, #ffd9ae, #ffb46b 50%, #e6803c); color: #1a0f22; box-shadow: 0 0 14px rgb(255 160 90 / .6); }
body[data-tool="tap-bpm"] .bpm-alt .alt { background: radial-gradient(130% 170% at 24% 14%, rgb(255 226 196 / .18), rgb(10 7 18 / .6)); border-radius: 20px; }
body[data-tool="tap-bpm"] .bpm-alt .alt.on { border-color: #ffe2c4; box-shadow: 0 0 20px rgb(255 180 107 / .35); }
body[data-tool="uong-nuoc"] .un-vien { fill: rgba(20, 34, 84, .88); stroke: rgba(190, 225, 255, .7); }

/* Quả cầu thở (Nhịp thở Ari, Nghỉ một phút…): chính là hành tinh của khu, phình ra khi hít vào và xẹp lại khi thở ra (logic --s giữ nguyên) */
body[data-tool][data-khu] .orb { background: var(--hx-hanh) center / 122% no-repeat; }
body[data-tool] .orb { position: relative;
  box-shadow: 0 0 60px rgb(126 190 235 / .45), 0 0 120px rgb(126 190 235 / .18); }
body[data-tool] .orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .3), transparent 42%), radial-gradient(circle at 72% 80%, rgb(8 4 30 / .5), transparent 58%); }
body[data-tool] .orb b { position: relative; z-index: 1; color: #fff; text-shadow: 0 2px 14px rgb(5 8 30 / .9), 0 0 3px rgb(5 8 30 / .6); }

/* Thang chấm 1–5 (Hôm nay nên tập gì) và các mức Đo độ dẻo: cũng là mặt trăng; chọn rồi thì sáng lên có vành, giống ô chọn */
body[data-tool] .ss-muc, body[data-tool] .dd-muc {
  position: relative; background: radial-gradient(130% 170% at 24% 14%, rgb(255 226 196 / .22), rgb(28 18 46 / .75) 55%, rgb(10 7 18 / .85));
  border: 1px solid rgb(255 226 196 / .3); box-shadow: inset -4px -5px 10px rgb(0 0 0 / .35), inset 2px 3px 6px rgb(255 255 255 / .06);
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, border-color .3s; }
body[data-tool] .ss-muc { border-radius: 50%; }
body[data-tool] .ss-muc[aria-pressed="true"], body[data-tool] .dd-muc[aria-pressed="true"] {
  color: #1a0f22; border-color: transparent;
  background: radial-gradient(70% 90% at 24% 14%, rgb(255 255 255 / .55), transparent 55%), radial-gradient(130% 170% at 30% 20%, var(--hx-cam-sang), var(--hx-cam) 50%, var(--hx-cam-toi));
  box-shadow: inset -5px -6px 11px rgb(140 55 8 / .4), inset 2px 3px 6px rgb(255 255 255 / .4), 0 0 22px rgb(255 160 90 / .55); }
body[data-tool] .ss-muc[aria-pressed="true"]::after, body[data-tool] .dd-muc[aria-pressed="true"]::after {
  content: ""; position: absolute; left: -9px; right: -9px; top: 50%; height: 40%; translate: 0 -50%; rotate: -10deg; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgb(255 226 196 / .75); border-bottom-color: transparent; border-left-color: rgb(255 226 196 / .3); filter: drop-shadow(0 0 4px rgb(255 180 107 / .6)); }

/* Đồng hồ thiền: hành tinh của khu nằm giữa vòng chuông, mờ để số phút vẫn dễ đọc */
body[data-tool="dong-ho-thien"][data-khu] .dh-vong::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: var(--hx-hanh) center / 124% no-repeat; opacity: .5; filter: drop-shadow(0 0 24px rgb(126 190 235 / .45)); }
body[data-tool="dong-ho-thien"] .dh-vong > * { position: relative; z-index: 1; }
body[data-tool="dong-ho-thien"] .dh-giua .clock { text-shadow: 0 2px 16px rgb(5 8 30 / .9); }
/* Đồng hồ buổi tập: số phút nằm trên một quỹ đạo, chạy bắt đầu thì hành tinh nhỏ quay quanh */
body[data-tool="dong-ho-tap"] .timer .clock, body[data-tool="nghi-1-phut"] .timer .clock { position: relative; z-index: 1; text-shadow: 0 2px 16px rgb(5 8 30 / .85); }
body[data-tool="dong-ho-tap"] .timer::before { content: ""; display: block; width: 64%; max-width: 250px; height: 54px; margin: 0 auto -62px; border-radius: 50%; border: 1.5px solid rgb(255 226 196 / .28); rotate: -4deg; pointer-events: none; }

/* Ô chọn tư thế (Giữ tư thế) và ô số liệu (Tiến trình): ô cửa sổ có quầng hành tinh; chọn rồi thì sáng viền và nổi lên */
body[data-tool] .tt-o { position: relative; border-radius: 22px; border: 1px solid rgb(255 226 196 / .28);
  background: radial-gradient(130% 150% at 24% 8%, rgb(255 226 196 / .2), rgb(28 18 46 / .78) 58%, rgb(10 7 18 / .88)); box-shadow: inset -4px -6px 12px rgb(0 0 0 / .35);
  transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, border-color .3s; }
body[data-tool] .tt-o:hover { transform: translateY(-2px); }
body[data-tool] .tt-o[aria-pressed="true"] { border-color: #ffe2c4; box-shadow: 0 0 24px rgb(255 160 90 / .5), inset 0 0 0 1px rgb(255 226 196 / .45);
  background: radial-gradient(130% 150% at 30% 8%, rgb(255 190 130 / .38), rgb(40 22 56 / .82) 62%); }
body[data-tool] .tt-o[aria-pressed="true"]::after { content: ""; position: absolute; left: -7px; right: -7px; top: 36%; height: 26%; rotate: -8deg; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgb(255 226 196 / .6); border-bottom-color: transparent; border-left-color: rgb(255 226 196 / .25); filter: drop-shadow(0 0 4px rgb(255 180 107 / .55)); }
body[data-tool] .metric { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgb(255 226 196 / .22);
  background: radial-gradient(120% 140% at 18% 0%, rgb(255 180 107 / .2), rgb(10 7 18 / .55) 62%); }
body[data-tool] .metric::after { content: ""; position: absolute; right: -22px; bottom: -22px; width: 64px; height: 64px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgb(255 226 196 / .22), rgb(255 140 90 / .05) 60%, transparent 72%); border: 1px solid rgb(255 226 196 / .1); }
body[data-tool] .metric .n b { background: linear-gradient(180deg, #fff, #ffd9ae); -webkit-background-clip: text; background-clip: text; color: transparent; }