:root{
  --bg:#F3F3F6;
  --bg-deep:#E9E9EE;
  --surface:rgba(255,255,255,.74);
  --surface-a:rgba(255,255,255,.86);
  --surface-b:rgba(255,255,255,.66);
  --surface-2:rgba(255,255,255,.55);
  --surface-solid:#FFFFFF;
  --hairline:rgba(9,10,14,.085);
  --hairline-2:rgba(9,10,14,.05);
  --ink:#0B0B0D;
  --ink-2:rgba(58,60,68,.62);
  --ink-3:rgba(58,60,68,.34);
  --accent:#0A6BF0;
  --accent-soft:rgba(10,107,240,.10);
  --green:#2EBE6E;
  --amber:#E9A020;
  --red:#EE4B3F;
  --r-xl:30px; --r-lg:24px; --r-md:18px; --r-sm:13px; --r-xs:9px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.22,1.16,.36,1);
  --shadow-1:0 1px 2px rgba(14,16,22,.045), 0 8px 20px -12px rgba(14,16,22,.18);
  --shadow-2:0 1px 3px rgba(14,16,22,.06), 0 26px 50px -24px rgba(14,16,22,.30);
  --shadow-3:0 -1px 0 rgba(9,10,14,.05), 0 -30px 60px -30px rgba(14,16,22,.35);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --dock-h:58px;
  --blur:saturate(190%) blur(28px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Helvetica Neue",system-ui,sans-serif;
}
body[data-tone="sand"]{ --bg:#F6F2EC; --bg-deep:#EDE6DC; --surface:rgba(255,253,250,.76); --surface-a:rgba(255,254,251,.88); --surface-b:rgba(255,251,245,.68); --hairline:rgba(60,44,20,.10); }
body[data-tone="glacier"]{ --bg:#EFF3F7; --bg-deep:#E2E9F0; --surface:rgba(252,254,255,.76); --surface-a:rgba(254,255,255,.88); --surface-b:rgba(246,251,255,.68); --hairline:rgba(12,40,66,.10); }
*,*::before,*::after{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  overscroll-behavior:none;
  font-size:15px;
  line-height:1.35;
  letter-spacing:.005em;
}
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; font-weight:600; }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.grain{
  position:fixed; inset:-40%; z-index:0; pointer-events:none; opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  background-size:220px 220px;
}
.aurora{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* The glow used to be produced with filter:blur(58px) on 74-80vw elements, which
   re-rasterised a huge blurred layer every frame and cost ~20ms/frame. A wider
   radial falloff looks the same but paints as a plain gradient. The gradient
   alphas below are the originals divided by the previous opacity, so the blended
   colour over the background is unchanged. */
.aurora i{ position:absolute; display:block; border-radius:50%; opacity:.382; will-change:transform; transform:translateZ(0); }
.aurora i:nth-child(1){ width:74vw; height:74vw; left:-24vw; top:-16vw; background:radial-gradient(circle at 34% 34%,rgba(120,168,255,.90),rgba(120,168,255,.42) 40%,rgba(120,168,255,0) 74%); animation:drift1 34s var(--ease-io) infinite alternate; }
.aurora i:nth-child(2){ width:66vw; height:66vw; right:-22vw; top:6vh; background:radial-gradient(circle at 58% 42%,rgba(255,190,150,.68),rgba(255,190,150,.31) 40%,rgba(255,190,150,0) 74%); animation:drift2 41s var(--ease-io) infinite alternate; }
.aurora i:nth-child(3){ width:80vw; height:80vw; left:8vw; bottom:-30vw; background:radial-gradient(circle at 50% 50%,rgba(180,150,255,.55),rgba(180,150,255,.25) 40%,rgba(180,150,255,0) 74%); animation:drift3 47s var(--ease-io) infinite alternate; }
body[data-tone="sand"] .aurora i:nth-child(1){ background:radial-gradient(circle at 30% 30%,rgba(255,196,132,.46),rgba(255,196,132,0) 70%); }
body[data-tone="sand"] .aurora i:nth-child(2){ background:radial-gradient(circle at 60% 40%,rgba(255,160,160,.34),rgba(255,160,160,0) 70%); }
body[data-tone="glacier"] .aurora i:nth-child(1){ background:radial-gradient(circle at 30% 30%,rgba(120,205,255,.50),rgba(120,205,255,0) 70%); }
body[data-tone="glacier"] .aurora i:nth-child(3){ background:radial-gradient(circle at 50% 50%,rgba(120,160,255,.32),rgba(120,160,255,0) 70%); }
@keyframes drift1{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(16vw,12vh,0) scale(1.14)} }
@keyframes drift2{ from{transform:translate3d(0,0,0) scale(1.08)} to{transform:translate3d(-14vw,18vh,0) scale(.94)} }
@keyframes drift3{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(-12vw,-14vh,0) scale(1.16)} }#stage{ position:fixed; inset:0; z-index:2; }
.view{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:calc(var(--safe-t) + 18px) 16px calc(var(--safe-b) + var(--dock-h) + 34px);
  opacity:0; visibility:hidden; transform:translate3d(0,8px,0) scale(.995);
  transition:opacity .30s var(--ease), transform .40s var(--ease), visibility .40s;
  will-change:opacity,transform;
}
.view.on{ opacity:1; visibility:visible; transform:none; }
.view.leaving{ opacity:0; transform:translate3d(0,-6px,0) scale(.997); }
.wrap{ max-width:640px; margin:0 auto; }
.pad{ padding-left:6px; padding-right:6px; }
.dock{
  position:fixed; z-index:14; left:50%; transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 14px);
  height:var(--dock-h); display:flex; align-items:center; gap:2px; padding:5px;
  border-radius:999px; background:var(--surface); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:.5px solid var(--hairline); box-shadow:var(--shadow-2);
  transition:transform .42s var(--spring), opacity .3s var(--ease);
}
.dock.hide{ transform:translateX(-50%) translateY(140%); opacity:0; pointer-events:none; }
.dock .tab{ position:relative; width:52px; height:48px; border-radius:999px; display:grid; place-items:center; color:var(--ink-3); transition:color .28s var(--ease), transform .34s var(--spring); }
.dock .tab svg{ width:23px; height:23px; transition:transform .38s var(--spring); }
.dock .tab:active{ transform:scale(.9); }
.dock .tab.on{ color:var(--ink); }
.dock .tab.on svg{ transform:translateY(-.5px) scale(1.04); }
.dock .pip{ position:absolute; top:4px; left:4px; width:52px; height:48px; border-radius:999px; background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.78)); box-shadow:0 1px 2px rgba(14,16,22,.10), 0 6px 14px -8px rgba(14,16,22,.30); transition:transform .46s var(--spring); z-index:-1; }
.dock .tab .bdg{ position:absolute; top:8px; right:11px; min-width:6px; height:6px; border-radius:3px; background:var(--accent); box-shadow:0 0 0 2px rgba(255,255,255,.9); transition:transform .3s var(--spring); }
.topline{ display:flex; align-items:center; gap:8px; margin:0 0 16px; min-height:38px; }
.topline .sp{ flex:1; }
.hero{ padding:0 4px 18px; }
.hero .big{ font-size:34px; font-weight:600; letter-spacing:-.022em; line-height:1.1; }
.hero .sub{ margin-top:7px; color:var(--ink-2); font-size:13.5px; font-weight:500; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.hair{ height:.5px; background:var(--hairline); margin:14px 0; }
/* Solid translucent fills instead of backdrop-filter. Every card sampling the
   backdrop behind it cost ~20ms/frame when several cards were on screen, and the
   gradient reads as the same frosted surface. */
.card{
  position:relative; background:linear-gradient(158deg,var(--surface-a),var(--surface-b));
  border:.5px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  overflow:hidden;
}
.card.pad{ padding:16px; }
.card.solid{ background:var(--surface-solid); }
.card .glow{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 80% at 50% -30%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%); }
.sec{ margin-top:22px; }
.sec-h{ display:flex; align-items:center; gap:8px; padding:0 6px 9px; color:var(--ink-3); }
.sec-h .t{ font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
/* Long lists: let the browser skip layout/paint for rows that are off screen.
   This is the main scroll-smoothness win and keeps all animations intact. */
.view .wrap > .sec,
.view .wrap > .card,
.view .wrap > .anim{
  content-visibility:auto;
  contain-intrinsic-size:auto 240px;
}
/* the dock blurs whatever scrolls underneath it; give it its own compositor
   layer so the blur is not re-rasterised on every scroll frame */
.dock{ will-change:opacity; }
.row{
  display:flex; align-items:center; gap:13px; padding:13px 15px; position:relative;
  transition:background .22s var(--ease), transform .34s var(--spring);
  text-align:left; width:100%;
}
.row + .row::before{ content:""; position:absolute; top:0; left:15px; right:0; height:.5px; background:var(--hairline-2); }
.row:active{ background:rgba(9,10,14,.035); transform:scale(.985); }
.row .grow{ flex:1; min-width:0; }
.row .nm{ font-size:15.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row .mt{ font-size:12.5px; color:var(--ink-3); margin-top:2px; display:flex; align-items:center; gap:6px; font-weight:500; }
.row .rt{ text-align:right; white-space:nowrap; }
.row .rt .v{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.row .rt .k{ font-size:12px; color:var(--ink-3); margin-top:2px; font-weight:500; }
.av{
  width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex:none;
  font-weight:600; font-size:15px; color:#fff; letter-spacing:-.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42), 0 3px 9px -4px rgba(14,16,22,.42);
  position:relative; overflow:hidden;
}
.av::after{ content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,0) 55%); }
.av.sm{ width:34px; height:34px; border-radius:11px; font-size:12.5px; }
.av.lg{ width:60px; height:60px; border-radius:19px; font-size:22px; }
/* token art: the letter tile stays underneath until the remote icon decodes */
.av.tok{ background:transparent; }
.av.tok .fb{ position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; color:#fff; font-weight:600; font-size:inherit; }
.av.tok img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s var(--ease); }
.av.tok.ld img{ opacity:1; }
.av.tok.ld .fb{ opacity:0; }
/* points threshold pill shown beside each token */
.ptn{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:3px;
  min-width:46px; padding:6px 7px; border-radius:11px;
  background:rgba(9,10,14,.055); color:var(--ink-2);
  font-size:12px; font-weight:600; line-height:1;
  border:.5px solid rgba(9,10,14,.05); white-space:nowrap;
}
.ptn b{ font-weight:650; font-size:12.5px; letter-spacing:-.02em; color:var(--ink); }
.ptn i{ font-style:normal; font-size:9.5px; opacity:.5; }
.ptn svg{ opacity:.42; }
@media (max-width:370px){ .ptn{ min-width:40px; padding:5px 5px; } .ptn i{ display:none; } }
.dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.dot.g{ background:var(--green); box-shadow:0 0 0 3px rgba(46,190,110,.16); }
.dot.y{ background:var(--amber); box-shadow:0 0 0 3px rgba(233,160,32,.16); }
.dot.r{ background:var(--red); box-shadow:0 0 0 3px rgba(238,75,63,.16); }
.dot.n{ background:var(--ink-3); box-shadow:0 0 0 3px rgba(58,60,68,.10); }.chips{ display:flex; gap:7px; overflow-x:auto; padding:2px 4px 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none; height:33px; padding:0 13px; border-radius:999px; display:inline-flex; align-items:center; gap:6px;
  background:var(--surface); border:.5px solid var(--hairline); color:var(--ink-2);
  font-size:13px; font-weight:550; white-space:nowrap;
  transition:transform .34s var(--spring), background .26s var(--ease), color .26s var(--ease), box-shadow .26s var(--ease);
}
.chip svg{ width:15px; height:15px; }
.chip:active{ transform:scale(.93); }
.chip.on{ background:var(--ink); color:#fff; border-color:transparent; box-shadow:0 6px 16px -8px rgba(14,16,22,.6); }
.chip.sm{ height:28px; padding:0 10px; font-size:12px; }
.seg{ display:flex; gap:2px; padding:3px; border-radius:12px; background:rgba(9,10,14,.055); position:relative; }
.seg button{ position:relative; z-index:1; flex:1; height:30px; border-radius:9px; font-size:13px; font-weight:550; color:var(--ink-2); transition:color .26s var(--ease), transform .3s var(--spring); }
.seg button:active{ transform:scale(.96); }
.seg button.on{ color:var(--ink); }
.seg .glider{ position:absolute; z-index:0; top:3px; bottom:3px; border-radius:9px; background:var(--surface-solid); box-shadow:0 1px 3px rgba(14,16,22,.12); transition:transform .42s var(--spring), width .42s var(--spring); }
.search{ display:flex; align-items:center; gap:9px; height:42px; padding:0 13px; border-radius:14px; background:var(--surface); border:.5px solid var(--hairline); box-shadow:var(--shadow-1); }
.search svg{ width:17px; height:17px; color:var(--ink-3); flex:none; }
.search input{ flex:1; border:0; background:none; outline:none; font-size:15px; min-width:0; }
.search input::placeholder{ color:var(--ink-3); }
.search .clr{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(9,10,14,.09); color:var(--ink-2); opacity:0; transform:scale(.6); transition:opacity .2s, transform .3s var(--spring); }
.search .clr.on{ opacity:1; transform:none; }
.search .clr svg{ width:12px; height:12px; }
.grid{ display:grid; gap:11px; }
.grid.c2{ grid-template-columns:1fr 1fr; }
.grid.c3{ grid-template-columns:repeat(3,1fr); }
.tile{
  position:relative; padding:15px; border-radius:var(--r-md); background:linear-gradient(158deg,var(--surface-a),var(--surface-b)); border:.5px solid var(--hairline);
  box-shadow:var(--shadow-1);
  transition:transform .36s var(--spring), box-shadow .3s var(--ease); text-align:left; overflow:hidden;
}
.tile:active{ transform:scale(.955); box-shadow:0 1px 2px rgba(14,16,22,.05); }
.tile .k{ font-size:11.5px; color:var(--ink-3); font-weight:600; letter-spacing:.03em; display:flex; align-items:center; gap:5px; }
.tile .k svg{ width:13px; height:13px; }
.tile .v{ font-size:23px; font-weight:600; letter-spacing:-.024em; margin-top:9px; }
.tile .u{ font-size:12px; color:var(--ink-3); margin-left:3px; font-weight:550; }
.tile .d{ font-size:12px; color:var(--ink-3); margin-top:5px; font-weight:500; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:44px; padding:0 18px; border-radius:14px; font-size:15px; font-weight:600; background:var(--surface); border:.5px solid var(--hairline); box-shadow:var(--shadow-1); transition:transform .34s var(--spring), filter .26s var(--ease), background .26s var(--ease); }
.btn svg{ width:17px; height:17px; }
.btn:active{ transform:scale(.955); }
.btn.pri{ background:linear-gradient(180deg,#1478F5,#0A62DE); color:#fff; border-color:transparent; box-shadow:0 1px 2px rgba(10,98,222,.24), 0 12px 26px -14px rgba(10,98,222,.75); }
.btn.ink{ background:linear-gradient(180deg,#2A2C33,#0B0B0D); color:#fff; border-color:transparent; }
.btn.wide{ width:100%; }
.btn.sm{ height:36px; padding:0 13px; font-size:13.5px; border-radius:11px; }
.iconbtn{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:.5px solid var(--hairline); box-shadow:var(--shadow-1); color:var(--ink); transition:transform .34s var(--spring), background .24s; }
.iconbtn svg{ width:19px; height:19px; }
.iconbtn:active{ transform:scale(.90); }
.iconbtn.plain{ background:transparent; border-color:transparent; box-shadow:none; }
.iconbtn.spin svg{ animation:spin .9s linear infinite; }
@keyframes spin{ to{transform:rotate(360deg)} }
.bar{ height:6px; border-radius:3px; background:rgba(9,10,14,.07); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#1478F5,#0A62DE); transition:width .9s var(--ease); }
.bar.g i{ background:linear-gradient(90deg,#3ED27C,#22A85D); }
.bar.y i{ background:linear-gradient(90deg,#F5B740,#DD9010); }
.bar.r i{ background:linear-gradient(90deg,#F5675C,#DC3A2E); }
.sk{ position:relative; overflow:hidden; background:rgba(9,10,14,.055); border-radius:8px; }
.sk::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent); animation:sweep 1.35s infinite; }
@keyframes sweep{ to{transform:translateX(100%)} }#layers{ position:fixed; inset:0; z-index:40; pointer-events:none; }
#layers > *{ pointer-events:auto; }
.backdrop{ position:fixed; inset:0; background:rgba(12,14,20,.30); backdrop-filter:blur(3px) saturate(120%); -webkit-backdrop-filter:blur(3px); opacity:0; transition:opacity .34s var(--ease); }
.backdrop.on{ opacity:1; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41;
  display:flex; flex-direction:column; max-height:94vh;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.97));
  backdrop-filter:saturate(200%) blur(34px); -webkit-backdrop-filter:saturate(200%) blur(34px);
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:.5px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-3);
  transform:translate3d(0,100%,0);
  transition:transform .48s var(--spring);
  will-change:transform; touch-action:pan-y;
}
.sheet.on{ transform:none; }
.sheet.drag{ transition:none; }
.sheet .grab{ flex:none; padding:9px 0 5px; display:grid; place-items:center; cursor:grab; touch-action:none; }
.sheet .grab i{ width:38px; height:5px; border-radius:3px; background:rgba(9,10,14,.17); transition:transform .3s var(--spring), background .3s; }
.sheet .grab:active i{ transform:scaleX(.88); background:rgba(9,10,14,.28); }
.sheet .body{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:6px 16px calc(var(--safe-b) + 24px); }
.sheet .hd{ padding:4px 16px 10px; display:flex; align-items:center; gap:12px; }
.sheet .hd .tt{ flex:1; min-width:0; }
.sheet .hd .tt .a{ font-size:20px; font-weight:600; letter-spacing:-.02em; }
.sheet .hd .tt .b{ font-size:13px; color:var(--ink-3); margin-top:3px; font-weight:500; }
.kv{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:11px 2px; position:relative; }
.kv + .kv::before{ content:""; position:absolute; top:0; left:2px; right:2px; height:.5px; background:var(--hairline-2); }
.kv .k{ font-size:13.5px; color:var(--ink-2); font-weight:500; }
.kv .v{ font-size:14px; font-weight:600; letter-spacing:-.01em; text-align:right; }
.kv .v.mono{ font-size:12.5px; font-weight:550; letter-spacing:0; }
.acts{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:6px 0 4px; }
.act{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; border-radius:var(--r-md); background:var(--surface-2); border:.5px solid var(--hairline-2); transition:transform .34s var(--spring), background .24s; }
.act:active{ transform:scale(.93); background:rgba(9,10,14,.06); }
.act .ic{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--surface-solid); box-shadow:var(--shadow-1); }
.act .ic svg{ width:19px; height:19px; }
.act .lb{ font-size:11.5px; font-weight:550; color:var(--ink-2); }
.toast{
  position:fixed; z-index:80; left:50%; bottom:calc(var(--safe-b) + var(--dock-h) + 26px);
  transform:translate(-50%,20px) scale(.96); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:999px;
  background:rgba(20,22,28,.92); color:#fff; font-size:13.5px; font-weight:550;
  box-shadow:0 18px 40px -18px rgba(10,12,18,.8); backdrop-filter:blur(20px);
  transition:opacity .3s var(--ease), transform .42s var(--spring);
  max-width:82vw;
}
.toast.on{ opacity:1; transform:translate(-50%,0) scale(1); }
.toast svg{ width:16px; height:16px; flex:none; }
.ptr{ position:fixed; z-index:9; left:50%; top:calc(var(--safe-t) + 6px); transform:translate(-50%,-140%); transition:transform .34s var(--ease), opacity .3s; opacity:0; }
.ptr.on{ transform:translate(-50%,0); opacity:1; }
.ptr .sp{ width:30px; height:30px; border-radius:50%; background:var(--surface); backdrop-filter:var(--blur); border:.5px solid var(--hairline); box-shadow:var(--shadow-1); display:grid; place-items:center; }
.ptr .sp svg{ width:15px; height:15px; }
.ptr.spin .sp svg{ animation:spin .9s linear infinite; }
.anim{ opacity:0; transform:translate3d(0,10px,0) scale(.985); animation:rise .58s var(--ease) forwards; animation-delay:calc(var(--i,0) * 46ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }
.pop{ animation:pop .42s var(--spring); }
@keyframes pop{ 0%{transform:scale(.9);opacity:0} 100%{transform:none;opacity:1} }
.flash{ animation:flash .9s var(--ease); }
@keyframes flash{ 0%,100%{background:transparent} 22%{background:var(--accent-soft)} }
.empty{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:44px 20px 40px; color:var(--ink-3); }
.empty svg{ width:64px; height:64px; opacity:.5; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.muted{ color:var(--ink-3); }
.tiny{ font-size:12px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal .d{ aspect-ratio:1; border-radius:11px; display:grid; place-items:center; font-size:12.5px; font-weight:600; background:rgba(9,10,14,.035); color:var(--ink-2); position:relative; transition:transform .3s var(--spring); }
.cal .d:active{ transform:scale(.9); }
.cal .d.has{ background:var(--accent-soft); color:var(--accent); }
.cal .d.has i{ position:absolute; bottom:5px; width:4px; height:4px; border-radius:2px; background:currentColor; opacity:.85; }
.cal .d.sel{ background:var(--ink); color:#fff; }
.cal .d.off{ opacity:.32; }
.cal .d.today{ box-shadow:inset 0 0 0 1.5px var(--accent); }
.spark{ width:100%; height:34px; display:block; overflow:visible; }
.ring{ width:52px; height:52px; flex:none; position:relative; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring .bgc{ fill:none; stroke:rgba(9,10,14,.08); stroke-width:5; }
.ring .fgc{ fill:none; stroke-width:5; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease), stroke .4s; }
.ring .mid{ position:absolute; inset:0; display:grid; place-items:center; font-size:13px; font-weight:650; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.09s !important; }
}