/* Tokens lifted from the desktop shell (Proyectos/shell/theme): glass tint
   #101217, material alphas .26/.32/.40/.94, edge light .20 top / .12 bottom,
   hover/press layers .08, text .95/.64/.36, radii 6/10/14/20/28, Inter. */
:root{
  --surface:16,18,23;
  --mat-thin:.26; --mat-regular:.32; --mat-thick:.40; --mat-opaque:.94;
  --edge-top:rgba(255,255,255,.20); --edge-bottom:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.95); --text-2:rgba(255,255,255,.64); --text-3:rgba(255,255,255,.36);
  --hover:rgba(255,255,255,.08); --press:rgba(255,255,255,.08); --divider:rgba(255,255,255,.064);
  --card:rgba(255,255,255,.048);
  --accent:#f0c27a; --accent-rgb:240,194,122;
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"JetBrains Mono","JetBrainsMono Nerd Font Mono","Cascadia Mono","Fira Code","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --top:calc(10px + env(safe-area-inset-top,0px));
  --bottom:calc(14px + env(safe-area-inset-bottom,0px));
  --card-w:312px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:var(--text);font:13px/1.45 var(--font);overflow:hidden;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
#sea{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
#sea.pointer{cursor:pointer}
a{color:inherit}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:1px solid rgba(var(--accent-rgb),.8);outline-offset:2px}

/* ---- glass -------------------------------------------------------------- */
.glass{position:relative;background:rgba(var(--surface),var(--mat-thick));
  -webkit-backdrop-filter:blur(26px) saturate(1.35);backdrop-filter:blur(26px) saturate(1.35);
  box-shadow:0 8px 32px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,var(--edge-top),var(--edge-bottom));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.sheen::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%)}
.ibtn{appearance:none;border:0;width:28px;height:28px;border-radius:50%;background:transparent;color:var(--text-2);
  display:grid;place-items:center;cursor:pointer;position:relative;transition:background .12s,color .12s,transform .12s}
.ibtn:hover{background:var(--hover);color:var(--text)}
.ibtn:active{background:rgba(255,255,255,.16);transform:scale(.92)}
.ibtn.armed{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.55)}
.ibtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---- frame --------------------------------------------------------------- */
/* One margin for everything that floats: --gap is the space between the screen
   edge and the card + panel block (top, left, bottom). The panel sits right next
   to the card, --sep apart, so the two read as one block and the sea stays free
   on the right. The top pill and the language switch sit inside that band
   (--band-y centers their 30px in it), so nothing has to dodge them. */
:root{--gap:48px;--sep:12px;--band-y:calc((var(--gap) - 30px) / 2)}
@media (max-width:900px){:root{--card-w:264px}}

/* ---- top pill (the shell's bar) ----------------------------------------- */
.bar{position:fixed;top:calc(var(--band-y) + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  height:30px;padding:0 14px;border-radius:999px;display:flex;align-items:center;gap:14px;
  background:rgba(var(--surface),var(--mat-regular));font-size:12px;font-weight:500;color:var(--text-2);
  user-select:none;z-index:30;white-space:nowrap}
.bar b{color:var(--text);font-weight:600;letter-spacing:.01em}
.bar .sep{width:1px;height:12px;background:var(--divider)}
.bar .live{display:inline-flex;align-items:center;gap:6px}
.bar .live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.6);
  animation:pulse 2.6s ease-in-out infinite}
.bar .sky{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.04em}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
/* language switch: top right, in the same band as the pill; quiet until you reach for it */
.lang{appearance:none;position:fixed;right:var(--gap);top:calc(var(--band-y) + env(safe-area-inset-top,0px));height:30px;padding:0 12px;
  border:0;border-radius:999px;display:flex;align-items:center;gap:6px;cursor:pointer;z-index:30;user-select:none;
  background:rgba(var(--surface),var(--mat-thin));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:var(--text-3);font:500 11px var(--font);letter-spacing:.03em;opacity:.72;transition:opacity .14s,background .14s,transform .12s}
.lang:hover,.lang:focus-visible{opacity:1;background:rgba(var(--surface),var(--mat-thick))}
.lang:active{transform:scale(.97)}
.lang span{transition:color .14s}
.lang span.on{color:var(--text)}
.lang i{font-style:normal;opacity:.55}

/* ---- the card (left) ---------------------------------------------------- */
.card{position:fixed;left:var(--gap);top:var(--gap);bottom:var(--gap);width:var(--card-w);border-radius:var(--r-lg);
  z-index:20;display:flex;flex-direction:column;padding:16px 20px 20px;overflow:hidden;will-change:transform;
  background:rgba(var(--surface),var(--mat-thick))}
.card-top{display:flex;justify-content:flex-end;margin:-6px -10px 0 0}
/* square, rounded corners: the illustration's ears reach the top corners, a circle would clip them */
.avatar{width:min(100%,30vh);aspect-ratio:1;flex:none;border-radius:var(--r-md);position:relative;overflow:hidden;margin-top:4px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.avatar::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);pointer-events:none}
.avatar img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s cubic-bezier(.2,0,0,1)}
.avatar.has-photo img{opacity:1}
.avatar .mono{position:absolute;inset:0;display:grid;place-items:center;font:600 46px var(--mono);color:var(--accent);
  letter-spacing:-.04em;text-shadow:0 0 24px rgba(var(--accent-rgb),.35)}
.avatar .wave{position:absolute;left:0;right:0;bottom:6px;text-align:center;font:11px var(--mono);color:var(--text-3);letter-spacing:.12em;
  white-space:nowrap;overflow:hidden}
.card h1{margin:16px 0 0;font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.card .handle{display:flex;align-items:center;gap:8px;margin-top:5px;color:var(--text-2);font-size:13px}
.card .handle code{font-family:var(--mono);font-size:12px;color:var(--accent);background:rgba(var(--accent-rgb),.08);
  padding:1px 7px;border-radius:var(--r-xs)}
.card .where{color:var(--text-3);font-size:12px;margin-top:4px}
.card .blurb{margin:14px 0 0;color:var(--text-2);font-size:13px;line-height:1.5}
/* what's going on: two quiet rows; the free height is shared above and below them */
.facts{margin:auto 0 0;border-radius:var(--r-md);background:var(--card);overflow:hidden;flex:none}
.card .blurb + .facts{margin-top:auto}
.card .blurb{margin-bottom:16px}
.fact{appearance:none;border:0;background:transparent;width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 8px;
  padding:10px 12px;text-align:left;color:var(--text);font:500 13px var(--font);position:relative;transition:background .14s,box-shadow .2s}
.fact + .fact{border-top:1px solid var(--divider)}
.fact .k{grid-column:1 / -1;color:var(--text-3);font-size:11px;font-weight:400}
.fact .v{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;min-width:0}
.fact .go{color:var(--text-3);font-size:12px;transition:transform .2s var(--ease),color .14s}
button.fact{cursor:pointer}
button.fact:hover{background:var(--hover)}
button.fact:hover .go{transform:translateX(2px);color:var(--accent)}
button.fact:active{background:rgba(255,255,255,.16)}
button.fact.armed{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)}
/* the links, as a row of icons (the full list with usernames is in "about") */
.icons{list-style:none;margin:auto 0 0;padding:14px 0 0;display:flex;justify-content:space-between;border-top:1px solid var(--divider);flex:none}
.facts + .icons{margin-top:auto}
.facts{margin-bottom:16px}
.icn{appearance:none;border:0;width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;cursor:pointer;position:relative;
  background:var(--card);color:var(--text-2);text-decoration:none;transition:background .14s,color .14s,transform .14s,box-shadow .2s}
.icn svg{width:16px;height:16px;fill:currentColor;transition:transform .3s var(--ease)}
.icn:hover,.icn:focus-visible{background:var(--hover);color:var(--text)}
.icn:hover svg{transform:translateY(-1px)}
.icn:active{transform:scale(.94);background:rgba(255,255,255,.16)}
.icn.armed{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5)}
.icn.copied{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.7);color:var(--accent)}
/* tooltip: the aria-label itself, so it follows the language */
.icn::after{content:attr(aria-label);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);opacity:0;pointer-events:none;
  padding:5px 9px;border-radius:999px;background:rgba(var(--surface),var(--mat-opaque));color:var(--text);font:500 11.5px var(--font);white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:opacity .14s,transform .2s var(--ease)}
.icn:hover::after,.icn:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.icons li:first-child .icn::after{left:0;transform:translate(0,4px)}
.icons li:first-child .icn:hover::after,.icons li:first-child .icn:focus-visible::after{transform:none}
.icons li:last-child .icn::after{left:auto;right:0;transform:translate(0,4px)}
.icons li:last-child .icn:hover::after,.icons li:last-child .icn:focus-visible::after{transform:none}
@media (max-width:900px){.icn{width:32px;height:32px}}
@media (max-height:660px){.facts{display:none}}
.lnk{appearance:none;display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:var(--r-sm);width:100%;
  background:var(--card);color:var(--text);font:500 13px var(--font);text-decoration:none;cursor:pointer;border:0;position:relative;
  text-align:left;transition:background .14s,transform .14s,box-shadow .2s}
.lnk::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.lnk:hover{background:var(--hover)}
.lnk:hover::after{transform:scaleX(1)}
.lnk.armed{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5)}
.lnk:active{transform:scale(.97);background:rgba(255,255,255,.16)}
.lnk svg{width:15px;height:15px;fill:currentColor;flex:none;opacity:.85;transition:opacity .14s,transform .3s var(--ease)}
.lnk:hover svg{opacity:1;transform:translateY(-1px)}
.lnk .sub{margin-left:auto;color:var(--text-3);font-size:11.5px;font-family:var(--mono)}
.lnk .go{margin-left:auto;color:var(--text-3);font-size:12px;transition:transform .2s var(--ease),color .14s}
.lnk:hover .go{transform:translateX(2px);color:var(--text-2)}
.lnk.copied{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.7)}
.lnk.copied .go{color:var(--accent)}
.cardtab{position:fixed;left:0;top:50%;transform:translate(-100%,-50%);z-index:19;width:40px;height:112px;border-radius:0 var(--r-md) var(--r-md) 0;
  border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(var(--surface),var(--mat-thick));color:var(--text-2);will-change:transform}
.cardtab b{font:600 18px var(--mono);color:var(--accent)}
.cardtab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cardtab:hover{color:var(--text)}
.cardtab.armed{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.55)}

/* ---- the panel (right next to the card) --------------------------------- */
.panel{position:fixed;left:calc(var(--gap) + var(--card-w) + var(--sep));top:var(--gap);bottom:var(--gap);
  width:min(780px,calc(100vw - var(--gap) * 2 - var(--card-w) - var(--sep)));border-radius:var(--r-lg);z-index:20;display:flex;flex-direction:column;
  overflow:hidden;will-change:transform,opacity;background:rgba(var(--surface),var(--mat-thick))}
.phead{display:flex;align-items:center;gap:8px;padding:8px 10px 0 12px;border-bottom:1px solid var(--divider);flex:none}
.tabs{display:flex;position:relative;gap:2px;flex:1}
.tab{appearance:none;border:0;background:transparent;height:40px;padding:0 14px;border-radius:var(--r-sm) var(--r-sm) 0 0;cursor:pointer;
  color:var(--text-2);font:500 13px var(--font);letter-spacing:.01em;position:relative;transition:color .14s,background .14s}
.tab:hover{color:var(--text);background:var(--hover)}
.tab[aria-selected=true]{color:var(--text)}
.tab.armed{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)}
.ind{position:absolute;left:0;bottom:-1px;height:2px;width:60px;background:var(--accent);border-radius:2px;
  box-shadow:0 0 10px rgba(var(--accent-rgb),.6);transform-origin:left;will-change:transform}
.pbody{flex:1;overflow:auto;padding:26px 28px 32px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.pane{display:none;max-width:720px}
.pane.on{display:block;animation:pane .36s var(--ease)}
@keyframes pane{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pane h2{margin:0 0 6px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.pane .lead{margin:0 0 20px;color:var(--text-2);font-size:14px}
.pane h3{margin:30px 0 12px;font-size:12px;font-weight:500;color:var(--text-2)}
.pane p{margin:12px 0 0;font-size:14.5px;line-height:1.6;max-width:60ch}
.pane .mono{font-family:var(--mono);font-size:12.5px;color:var(--text-3)}
.tag{display:inline-block;font-size:11px;font-weight:500;color:var(--accent);background:rgba(var(--accent-rgb),.08);
  padding:2px 8px;border-radius:999px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:4px}
.proj{display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border-radius:var(--r-md);background:var(--card);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:background .16s,transform .22s var(--ease),box-shadow .2s}
.proj::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(240px 120px at var(--mx,50%) var(--my,0%),rgba(var(--accent-rgb),.10),transparent 70%);opacity:0;transition:opacity .25s}
.proj:hover{background:var(--hover);transform:translateY(-2px)}
.proj:hover::before{opacity:1}
.proj.armed{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5)}
.proj:active{transform:scale(.985)}
.proj .name{display:flex;align-items:center;gap:8px;font:600 14.5px var(--mono);letter-spacing:-.01em}
.proj .name svg{width:14px;height:14px;fill:currentColor;opacity:.7}
.proj .name .go{margin-left:auto;color:var(--text-3);font:400 13px var(--font);transition:transform .2s var(--ease),color .14s}
.proj:hover .name .go{transform:translate(2px,-2px);color:var(--accent)}
.proj .desc{color:var(--text-2);font-size:13px;line-height:1.5;margin:0}
.proj .stack{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto;padding-top:4px}
.proj .stack span{font:11px var(--mono);color:var(--text-3);padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.04)}
/* the featured project: one big card, not a link */
.feat{display:flex;align-items:center;gap:28px;padding:24px 26px;border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.09),rgba(255,255,255,.04) 62%);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.20)}
.feat .txt{flex:1;min-width:0}
.feat .top{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.feat .name{font-size:26px;font-weight:600;letter-spacing:-.015em;line-height:1.15}
.feat p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--text)}
.feat p.mono{margin-top:14px}
.chest{font:13px/1.2 var(--mono);color:var(--text-3);white-space:pre;margin:0;flex:none;user-select:none}
.chest b{color:var(--accent);font-weight:400}
.biglinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.biglinks .lnk{height:50px;padding:0 16px;font-size:14px}
.biglinks .lnk svg{width:18px;height:18px}
.biglinks .lnk .sub + .go{margin-left:12px}

/* minimized panel: a pill at the bottom with the tabs */
.pill{position:fixed;left:50%;bottom:var(--bottom);transform:translate(-50%,220%);z-index:21;display:flex;align-items:center;gap:2px;padding:5px;
  border-radius:999px;background:rgba(var(--surface),var(--mat-regular));will-change:transform;pointer-events:none}
.pill.on{pointer-events:auto}
.pill .tab{height:32px;border-radius:999px;padding:0 12px;white-space:nowrap}
.pill .ibtn{margin-left:4px}

/* ---- toast / hint ------------------------------------------------------- */
.toast{position:fixed;top:calc(52px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%,-8px);opacity:0;
  padding:8px 14px;border-radius:999px;font-size:12.5px;color:var(--text-2);pointer-events:none;z-index:40;
  background:rgba(var(--surface),var(--mat-opaque));transition:opacity .28s,transform .4s var(--ease);white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--text);font-weight:500}
.hint{position:fixed;right:var(--gap);bottom:calc((var(--gap) - 28px) / 2 + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:11px;
  color:var(--text-3);letter-spacing:.02em;pointer-events:none;z-index:5;transition:opacity 1.2s;user-select:none;
  padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.hint.off{opacity:0}
.hint em{font-style:normal;color:var(--text-2)}

/* ---- the sky panel (right): time of day + weather ---------------------------- */
/* Bottom right, under the lighthouse's strip: it never covers the lighthouse. Folded it is a small pill with the current look. */
.skyp{position:fixed;right:var(--gap);bottom:var(--gap);width:236px;border-radius:var(--r-lg);z-index:22;overflow:hidden;
  background:rgba(var(--surface),var(--mat-thick))}
.skyp:not(.open){width:auto;max-width:236px;border-radius:999px}
.skyp-head{appearance:none;border:0;background:transparent;width:100%;height:36px;padding:0 12px 0 13px;display:flex;align-items:center;gap:8px;cursor:pointer;
  color:var(--text-2);font:500 12px var(--font);text-align:left;position:relative;transition:color .14s,background .14s}
.skyp-head:hover{color:var(--text);background:var(--hover)}
.skyp-head svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.skyp-head .chev{width:12px;height:12px;transition:transform .25s var(--ease)}
.skyp.open .skyp-head .chev{transform:rotate(180deg)}
.skyp-cur{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skyp-body{display:none;padding:0 12px 13px;border-top:1px solid var(--divider)}
.skyp.open .skyp-body{display:block;animation:pane .3s var(--ease)}
.skyp-k{display:block;margin:12px 0 7px;color:var(--text-3);font-size:11px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{appearance:none;border:0;height:26px;padding:0 10px;border-radius:999px;background:var(--card);color:var(--text-2);font:500 12px var(--font);
  cursor:pointer;transition:background .14s,color .14s,transform .12s,box-shadow .2s}
.chip:hover,.chip:focus-visible{background:var(--hover);color:var(--text)}
.chip:active{transform:scale(.95)}
.chip[aria-pressed=true]{color:var(--accent);background:rgba(var(--accent-rgb),.10);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.38)}
.chip.armed{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.5)}
.skyp-src{margin:13px 0 0;color:var(--text-3);font:11px/1.45 var(--mono);letter-spacing:.02em;min-height:1.45em}
/* narrower than a wide desktop the strip right of the content panel is too thin: folded it is just an icon in the gutter */
@media (max-width:1299px){
  .skyp{right:12px}
  .skyp:not(.open){width:34px;height:34px;border-radius:50%}
  .skyp:not(.open) .skyp-head{height:34px;padding:0;justify-content:center}
  .skyp:not(.open) .skyp-cur,.skyp:not(.open) .chev{display:none}
}

/* ---- phone: home screen + full-screen sheets ---------------------------- */
.home{display:none}
@media (max-width:640px){
  .card,.cardtab,.hint{display:none}
  .panel{left:10px;right:10px;top:calc(var(--gap) + env(safe-area-inset-top,0px));bottom:10px;width:auto;border-radius:var(--r-lg)}
  .pbody{padding:20px 18px 32px}
  .pane h2{font-size:20px}
  .phead{padding:6px 6px 0 6px}
  .tab{padding:0 10px;font-size:12.5px}
  .pill{display:none}
  .bar{font-size:11px;gap:10px}
  .lang{right:10px}
  /* the sky panel: an icon top left (the bar is in the middle, the language switch on the right); open, it drops down over everything */
  .skyp{left:10px;right:auto;bottom:auto;top:calc(var(--band-y) + env(safe-area-inset-top,0px));z-index:35}
  .skyp:not(.open){width:30px;height:30px}
  .skyp:not(.open) .skyp-head{height:30px}
  .skyp.open{width:min(300px,calc(100vw - 92px))}
  .skyp.open .skyp-head .chev{transform:none}
  .feat{flex-direction:column;align-items:flex-start;gap:18px;padding:20px 18px}
  .feat .name{font-size:22px}
  /* home: two sections on top, the links as a row of icons underneath */
  .home{display:flex;flex-direction:column;gap:10px;position:fixed;left:16px;right:16px;bottom:calc(var(--bottom) + 8px);z-index:18;
    padding:12px 10px 10px;border-radius:var(--r-xl);background:rgba(var(--surface),var(--mat-regular));will-change:transform}
  .home .apps{display:flex;justify-content:center;gap:36px}
  .home .dock{display:flex;justify-content:space-between;padding:10px 6px 0;border-top:1px solid var(--divider)}
  .home .dock .lk{appearance:none;border:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    background:var(--card);color:var(--text-2);transition:transform .2s var(--ease),background .15s,color .15s,box-shadow .2s}
  .home .dock .lk:active{transform:scale(.92);background:rgba(255,255,255,.14);color:var(--text)}
  .home .dock .lk.copied{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.7);color:var(--accent)}
  .home .dock .lk svg{width:18px;height:18px;fill:currentColor}
  .app{appearance:none;border:0;background:transparent;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;min-width:72px;cursor:pointer;color:var(--text-2)}
  .app .ic{width:50px;height:50px;border-radius:var(--r-md);display:grid;place-items:center;background:rgba(255,255,255,.05);
    box-shadow:inset 0 1px 0 var(--edge-top);transition:transform .2s var(--ease),background .15s}
  .app:active .ic{transform:scale(.92);background:rgba(255,255,255,.14)}
  .app svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
  .app span{font-size:11px}
  /* the card lives inside the about sheet */
  .pane .card{display:flex;position:static;width:auto;padding:0;background:transparent;box-shadow:none;border-radius:0;margin-bottom:22px;
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .pane .card::before{display:none}
  .pane .card .card-top,.pane .card .facts,.pane .card .icons{display:none}   /* the about sheet lists every link right below */
  .pane .card .avatar{width:112px}
  .pane .card .blurb{margin-bottom:0}
}
@media (max-width:359px){.bar .sky,.bar .sep.s2{display:none}}
@media (prefers-reduced-motion:reduce){
  .ibtn,.lnk,.lnk::after,.lnk svg,.lnk .go,.icn,.icn svg,.icn::after,.fact,.fact .go,.tab,.ind,.proj,.proj::before,.proj .name .go,.toast,.app .ic,.lang,.lang span,.avatar img,.home .dock .lk,.skyp-head,.skyp-head .chev,.chip{transition:none}
  .bar .live i{animation:none}
  .pane.on{animation:none}
  .skyp.open .skyp-body{animation:none}
}