/* Still's look, shared by the checkout, business and join pages (the app keeps its own copy inline). */

/* Still's look comes from its logo: a tilted egg shaped loop made of see-through
   layers, each with a bright thin edge, darker in the folds, soft cool grey on
   white, no hard corners. So: cool whites and greys, pebble shapes that are never
   quite round, and panels built as stacked layers that fan out from one side. */
:root{
  --bg:#F2F3F5; --ink:#17181C; --ink2:#5D616A; --ink3:#9CA0A8; --line:rgba(24,26,32,.08);
  --well:rgba(110,116,128,.07); --layer:rgba(255,255,255,.62); --edge:rgba(255,255,255,.95);
  --warn:#A9472F; --good:#3E7D62;
  --graphite:linear-gradient(165deg,#3C3F47 0%,#1E2026 100%);
  --lift:0 30px 70px -40px rgba(40,44,54,.38);
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--ink);font:400 15px/1.4 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:default}
:focus-visible{outline:2px solid rgba(60,64,74,.45);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* the background: the logo's loop, very large and very faint, drifting slowly */
.veils{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.veils .drift{transform-box:fill-box;transform-origin:center;animation:drift 48s ease-in-out infinite alternate}
.veils .drift.b{animation-duration:60s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(5deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.veils .drift{animation:none}}

.wrap{position:relative;z-index:1;width:min(440px,100%);margin:0 auto;padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 28px)}
.top{display:flex;align-items:center;justify-content:space-between;height:48px;margin-bottom:18px}
.mark{display:inline-flex;align-items:center;text-decoration:none}
.mark img{display:block;height:51px;width:auto}
.chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 15px;font-weight:600;font-size:14px}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:13px 15px 14px 12px;background:var(--layer);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 4px rgba(255,255,255,.35),0 10px 24px -16px rgba(40,44,54,.4);
  transform:perspective(60px) rotateX(-5deg) skewX(-4deg);transform-origin:50% 50%}
.chip.on{font-family:var(--mono);font-weight:500;font-size:13px}
/* a little loop, the logo's shape, for "you" */
.orb{display:inline-block;flex:none;width:16px;height:16px;background:url(/logo.png) center/contain no-repeat}
.orb.big{width:30px;height:30px}

/* the card: a stack of see-through layers, like the logo's bands. The top layer
   holds the content; two more fan out behind it toward the bottom left and meet
   again at the top right. */
.card{position:relative;padding:10px 10px 16px;border-radius:40px 50px 44px 36px/40px 46px 52px 40px;
  background:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
  box-shadow:inset 0 0 0 1px var(--edge),inset 0 -22px 34px -28px rgba(98,104,116,.22),var(--lift)}
.card::before,.card::after{content:"";position:absolute;pointer-events:none;transform-origin:100% 0;border-radius:inherit}
.card::before{inset:0;z-index:-1;background:rgba(255,255,255,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 18px 40px -30px rgba(40,44,54,.3);transform:rotate(-2.2deg) translate(-2px,6px)}
.card::after{inset:0;z-index:-2;background:rgba(236,238,242,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);transform:rotate(-4.6deg) translate(-4px,12px)}
.tabs{display:flex;gap:2px;padding:0 0 8px}
.tab{position:relative;isolation:isolate;flex:1 1 auto;height:38px;padding:0 4px;font-weight:500;font-size:13.5px;color:var(--ink3);letter-spacing:-.01em;transition:background .25s,color .2s,box-shadow .25s}
.tab:hover{color:var(--ink2)}
.tab.on{color:var(--ink)}
/* the open tab rises as its own small layer, a soft trapezoid narrower on top */
.tab.on::before{content:"";position:absolute;inset:1px 0;z-index:-1;border-radius:12px 13px 11px 10px;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 3px rgba(255,255,255,.3),0 6px 14px -9px rgba(40,44,54,.45);
  transform:perspective(50px) rotateX(6deg) skewX(-4deg);transform-origin:50% 100%}
.pane{padding:4px 4px 0}

.hero{display:flex;align-items:baseline;gap:8px;padding:10px 6px 14px}
.hero b{font-size:44px;font-weight:500;letter-spacing:-.045em;line-height:1}
.hero span{color:var(--ink2);font-size:15px}
/* the fields sit in the folds: a little darker, lit along the bottom edge */
.field{position:relative;background:linear-gradient(180deg,rgba(110,116,128,.085),rgba(110,116,128,.04));border-radius:24px 28px 26px 21px/24px 24px 28px 22px;
  box-shadow:inset 0 1px 2px rgba(60,64,74,.06),inset 0 -1px 0 rgba(255,255,255,.95);padding:12px 15px;margin-bottom:8px}
.frow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.flab{font-size:13px;color:var(--ink2);font-weight:500}
.mini{font-size:13px;color:var(--ink2);font-weight:500;border-radius:10px 8px 10px 7px;padding:2px 6px;margin:-2px -6px}
.mini:hover{color:var(--ink);background:rgba(110,116,128,.08)}
.amt{flex:1;min-width:0;width:100%;border:0;background:none;outline:none;padding:6px 0 2px;font-size:34px;font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.amt::placeholder{color:#C3C6CC}
.amt.out{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amt.dim{color:#C3C6CC}
.unit{font-weight:600;font-size:15px;color:var(--ink2)}
.fsub{font-size:13px;color:var(--ink3);min-height:18px}
/* coin buttons: soft trapezoids, narrower on top and leaning right, with a see-through outer band */
.tok{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 8px;font-weight:600;font-size:15px;flex:none}
.tok::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:15px 12px 11px 14px;background:linear-gradient(170deg,#fff,#F4F5F7);
  box-shadow:inset 0 0 0 1px rgba(24,26,32,.06),0 0 0 4px rgba(255,255,255,.55),0 8px 18px -12px rgba(40,44,54,.45);transform:perspective(60px) rotateX(7deg) skewX(5deg);transform-origin:50% 100%;transition:box-shadow .2s}
.tok:hover::before{box-shadow:inset 0 0 0 1px rgba(24,26,32,.12),0 0 0 4px rgba(255,255,255,.75),0 8px 18px -12px rgba(40,44,54,.5)}
.tok svg{width:10px;height:10px;color:var(--ink3)}
.ic{position:relative;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#E9EBEE;color:var(--ink2);font-size:11px;font-weight:600;overflow:hidden;flex:none}
.ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the switch: a small plate leaning the other way, a faint ring inside it */
.flip{position:relative;z-index:2;isolation:isolate;display:grid;place-items:center;width:52px;height:42px;margin:-21px auto -13px}
.flip::before,.flip::after{content:"";position:absolute;transform-origin:50% 100%}
.flip::before{inset:0;z-index:-1;border-radius:12px 16px 14px 10px;background:linear-gradient(160deg,#fff,#EDEFF2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),inset 0 0 0 6px rgba(255,255,255,.55),inset 0 0 0 7px rgba(110,116,128,.13),0 8px 18px -10px rgba(40,44,54,.5);transform:perspective(70px) rotateX(11deg) skewX(-7deg)}
.flip::after{inset:-5px;z-index:-2;border-radius:16px 20px 18px 14px;background:var(--bg);box-shadow:0 0 0 1px rgba(24,26,32,.05);transform:perspective(80px) rotateX(11deg) skewX(-7deg)}
.flip svg{position:relative;width:17px;height:17px;color:#41444C;transition:transform .3s}
.flip:active svg{transform:rotate(180deg)}
.meta{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink2);padding:2px 6px 10px;min-height:28px}
.meta .warn{color:var(--warn)}

/* buttons: graphite, each kind its own quiet trapezoid, with a faint outer band like another layer */
.go{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:56px;color:#fff;font-weight:600;font-size:16px;letter-spacing:-.01em;text-decoration:none;transition:transform .08s,opacity .2s}
.go::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:16px 19px 17px 14px;background:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 4px rgba(30,32,38,.05),0 14px 26px -16px rgba(20,22,28,.6);
  transform:perspective(300px) rotateX(3deg) skewX(-2.5deg);transform-origin:50% 100%}
.go:active:not(:disabled){transform:scale(.99)}
.go:disabled{color:rgba(24,26,32,.36)}
.go:disabled::before{background:rgba(110,116,128,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.go.ghost{color:var(--ink)}
.go.ghost::before{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(24,26,32,.09),0 0 0 4px rgba(255,255,255,.5),0 8px 20px -14px rgba(40,44,54,.4)}
/* each tab's main button: centered, a comfy width, wider on top with the left side flaring out */
.pane .go{width:min(264px,100%);margin:8px auto 0}
.pane .go::before{border-radius:13px 17px 19px 11px;transform:perspective(140px) rotateX(-4.5deg) skewX(4.25deg);transform-origin:50% 50%}
/* not connected: the same button in a translucent black, saying Connect */
.pane .go.connect{color:#fff}
.pane .go.connect::before{background:linear-gradient(165deg,rgba(44,46,53,.6),rgba(23,24,28,.46));box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px rgba(255,255,255,.12),0 0 0 4px rgba(30,32,38,.04),0 12px 24px -16px rgba(20,22,28,.4)}
.fee{font-size:12.5px;color:var(--ink3);text-align:center;padding:8px 6px 0;min-height:24px}
/* notes: a see-through layer with a bright edge */
.sub{font-size:13px;line-height:1.45;color:var(--ink2);text-align:left;margin:10px 0;padding:10px 13px;border-radius:18px 14px 17px 12px/16px 12px 18px 14px;
  background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 3px rgba(255,255,255,.25)}
.line{font-size:13px;color:var(--ink2);padding:0 6px 10px;margin:0;min-height:8px}
.line.warn{color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:2px 0 12px}
.ch{position:relative;isolation:isolate;height:36px;padding:0 15px;font-weight:500;font-size:14px}
/* choices lean one way, then the other */
.ch::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px 13px 11px 10px;background:rgba(255,255,255,.74);box-shadow:inset 0 0 0 1px rgba(24,26,32,.08),0 0 0 3px rgba(255,255,255,.4),0 4px 10px -8px rgba(40,44,54,.35);
  transform:perspective(50px) rotateX(5deg) skewX(4deg);transform-origin:50% 100%;transition:background .2s}
.ch:nth-child(even)::before{transform:perspective(50px) rotateX(5deg) skewX(-4deg)}
.ch:hover::before{background:rgba(255,255,255,.92)}
.ch.on{color:#fff}
.ch.on::before{background:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -9px rgba(20,22,28,.6)}
.meter{height:6px;border-radius:3px;background:rgba(110,116,128,.12);overflow:hidden;margin:2px 6px 8px}
.meter i{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#D3D6DB,#9CA0A8 50%,var(--warn) 100%);background-size:var(--full,100%) 100%;transition:width .2s}
.rows{display:flex;flex-direction:column;gap:7px;padding-top:14px}
.rhead{font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;padding:0 6px 2px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 12px 15px;border-radius:22px 18px 21px 16px/20px 16px 22px 18px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 3px rgba(255,255,255,.25)}
.row b{display:block;font-weight:600;font-size:15px}
.row small{display:block;color:var(--ink2);font-size:13px;margin-top:1px}
.btn{position:relative;isolation:isolate;height:36px;padding:0 15px;font-weight:600;font-size:13.5px;flex:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px 11px 10px 13px;background:#fff;box-shadow:inset 0 0 0 1px rgba(24,26,32,.08),0 0 0 3px rgba(255,255,255,.5);
  transform:perspective(50px) rotateX(-5deg) skewX(3deg);transform-origin:50% 50%}
.btn:hover::before{box-shadow:inset 0 0 0 1px rgba(24,26,32,.16),0 0 0 3px rgba(255,255,255,.7)}
.btn.dark{color:#fff}
.btn.dark::before{background:var(--graphite);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.loan{display:flex;flex-direction:column;gap:8px;padding:15px;border-radius:26px 22px 25px 20px/24px 20px 26px 22px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 3px rgba(255,255,255,.25)}
.loan .meter{margin:4px 0}
.note{margin:14px 6px 0;font-size:13.5px;color:var(--ink2);min-height:20px;text-align:center}
.note.bad{color:var(--warn)}
.note a{color:var(--ink);font-weight:600;text-decoration:none;margin-left:6px}
/* waiting: a little loop turning */
.loop{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;background:url(/logo.png) center/contain no-repeat;transform-origin:49% 58%;animation:loop 1.6s linear infinite}
@keyframes loop{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.loop{animation:none}}
.wait{padding:30px 6px;text-align:center;color:var(--ink3);font-size:14px}
.foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 0 0;font-size:12px;color:var(--ink3)}
.foot a{color:var(--ink3);text-decoration:none;border-bottom:1px solid rgba(24,26,32,.15);padding-bottom:1px}
.foot a:hover{color:var(--ink);border-color:var(--ink)}

/* sheets: wallets, coins, words, each a layer of its own */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(242,243,245,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sheet[hidden]{display:none}
.panel{position:relative;width:min(440px,100%);max-height:86dvh;overflow:auto;background:linear-gradient(170deg,rgba(255,255,255,.96),rgba(250,251,252,.92));border-radius:30px 34px 0 0;
  box-shadow:inset 0 0 0 1px var(--edge),0 -20px 60px -30px rgba(40,44,54,.38);padding:16px 16px calc(env(safe-area-inset-bottom) + 18px);animation:unroll .36s cubic-bezier(.2,.7,.2,1) backwards}
@media (min-width:600px){.sheet{align-items:center}.panel{border-radius:30px 36px 32px 26px/30px 32px 36px 28px}}
/* a sheet opens from the top down: the panel unrolls, and its rows follow one after another */
@keyframes unroll{from{clip-path:inset(0 0 100% 0);opacity:.4}to{clip-path:inset(0 0 0 0);opacity:1}}
.panel .rise{animation:rise .4s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 34ms + 60ms)}
@keyframes rise{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.panel,.panel .rise{animation:none}}
.phead{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 12px}
.phead h3{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em}
.x{position:relative;isolation:isolate;display:grid;place-items:center;width:34px;height:34px}
.x::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:11px 12px 10px 9px;background:var(--well);transform:perspective(40px) rotateX(6deg) skewX(-5deg);transform-origin:50% 100%}
.x svg{width:14px;height:14px}
.list{display:flex;flex-direction:column;gap:2px}
.item{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border-radius:18px 14px 17px 12px/16px 12px 18px 14px;text-align:left;text-decoration:none;color:var(--ink);transition:background .2s}
.item:hover{background:var(--well)}
.item .grow{flex:1;min-width:0}
.item b{display:block;font-weight:600}
.item small{display:block;color:var(--ink3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .end{text-align:right;font-variant-numeric:tabular-nums}
.item img.w{width:30px;height:30px;border-radius:10px 8px 10px 7px}
.lab{font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin:12px 10px 4px}
.search{width:100%;height:48px;border-radius:20px 16px 19px 14px/18px 14px 20px 16px;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;padding:0 15px;font-size:16px;outline:none;margin-bottom:6px}
.search:focus{box-shadow:inset 0 0 0 1px rgba(24,26,32,.25)}
.addr{display:block;font:500 13px/1.45 var(--mono);word-break:break-all;background:var(--well);border-radius:16px 13px 15px 11px;padding:10px 12px;margin:0 0 8px;user-select:all}
.words{margin:0 0 10px;padding:12px;list-style:none;counter-reset:w;display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;background:var(--well);border-radius:20px 16px 19px 14px;user-select:all}
.words li{counter-increment:w;font:500 14px/1.3 var(--mono)}
.words li::before{content:counter(w);display:inline-block;width:24px;color:var(--ink3)}
.stack{display:flex;flex-direction:column;gap:8px}
.two{display:flex;gap:8px}.two>*{flex:1}
.input{width:100%;height:48px;border-radius:20px 16px 19px 14px/18px 14px 20px 16px;border:0;box-shadow:inset 0 0 0 1px var(--line);background:#fff;padding:0 15px;font:500 14px var(--mono);outline:none}
.small{font-size:13px;color:var(--ink2);margin:0 2px 10px;line-height:1.45}
.small.bad{color:var(--warn)}
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(242,243,245,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal .panel{animation:none;max-width:360px;border-radius:30px 36px 32px 26px/30px 32px 36px 28px}
.mark{position:relative}
/* light passing through the logo's layers: faint pearl colors, cut to its shape, drifting */
.sheen{position:absolute;inset:0;pointer-events:none;-webkit-mask:url(/logo.png) center/100% 100% no-repeat;mask:url(/logo.png) center/100% 100% no-repeat;
  background:linear-gradient(118deg,transparent 6%,#8FE9BE 13%,#E3F58A 18%,#FFB3C6 23%,transparent 31%,transparent 50%,#C4B5FF 58%,#9CE6FF 64%,#8FE9BE 69%,transparent 77%);background-size:260% 260%;
  mix-blend-mode:color;opacity:.3;animation:sheen 16s ease-in-out infinite alternate}
@keyframes sheen{from{background-position:0% 0%}to{background-position:100% 100%}}
@media (prefers-reduced-motion:reduce){.sheen{animation:none}}

/* ---- shared additions for the business pages ---- */
.table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:14px}
.table th{font-size:11.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:0 10px 2px}
.table td{background:rgba(255,255,255,.62);padding:10px;vertical-align:middle}
.table td:first-child{border-radius:14px 0 0 14px}.table td:last-child{border-radius:0 14px 14px 0}
.table .r{text-align:right}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:4px 0 12px}
.stat div{padding:12px 14px;border-radius:18px 14px 17px 12px/16px 12px 18px 14px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--edge),0 0 0 3px rgba(255,255,255,.25)}
.stat b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat small{display:block;color:var(--ink2);font-size:12.5px}
.form{display:flex;flex-direction:column;gap:8px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:500;color:var(--ink2)}
.form .input{font-family:var(--font);font-size:15px}
.code{display:block;font:500 12px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all;background:var(--well);border-radius:14px;padding:10px 12px;user-select:all}
.pill-row{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11.5px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}
.ok{color:var(--good)}
.bad{color:var(--warn)}
.qr{display:grid;place-items:center;margin:6px auto 4px;width:min(260px,100%);aspect-ratio:1;padding:14px;border-radius:24px 28px 26px 21px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 0 0 4px rgba(255,255,255,.6),0 18px 34px -24px rgba(40,44,54,.5)}
.qr svg{width:100%;height:100%}
.center{text-align:center}
.big{font-size:44px;font-weight:500;letter-spacing:-.045em;line-height:1.05}
.muted{color:var(--ink2)}
.spacer{height:10px}
/* how a screen works: a small i that opens a note */
.info{margin:10px 0 0;text-align:center}
.info summary{list-style:none;display:inline-grid;place-items:center;width:28px;height:28px;cursor:pointer;font:italic 600 14px/1 Georgia,serif;color:var(--ink2);border-radius:11px 9px 12px 8px;background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--line),0 0 0 3px rgba(255,255,255,.4);transition:color .2s,background .2s}
.info summary::-webkit-details-marker{display:none}
.info summary:hover,.info[open] summary{color:var(--ink);background:#fff}
.info .sub{margin:8px 0 0}