/* ===================================================================
   global.css: every style on the site lives in this one file.
   Colors, fonts and the layout sizes are the variables at the top.
   =================================================================== */

/* The panel on the left is a sky: daytime in the light theme, night in the dark theme */
:root {
  /* Light theme: clean, cool greys */
  --bg: #f6f8fa;
  --fg: #0f1720;
  --muted: #5b6573;
  --line: #dde3ea;
  --card: #eef2f6;

  /* Accents: one main color (buttons, links, highlights) and two helpers for the skill bars */
  --accent: #2563eb;
  --accent-ink: #ffffff;    /* text on top of the accent color */
  --accent-2: #0f9f6e;
  --accent-3: #d4a017;
  --terminal-bg: #0d1520;
  --sky: #8ec8f0;           /* shown for a moment before the sky is drawn */
  --sky-ink: #0b2545;       /* your name on the daytime sky */

  /* Layout: header, footer, right bar and sky panel */
  --header-height: 4.9rem;
  --footer-height: 3.2rem;
  --rail-width: 3.5rem;
  --panel-width: 42vw;
  --radius: 8px;

  /* Fonts */
  --font-display: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
}

/* Dark theme: deep navy, a shade darker than GitHub's dark mode */
:root[data-theme=dark] {
  --bg: #0a0e14;
  --fg: #e6edf3;
  --muted: #8b949e;
  --line: #1f2733;
  --card: #111823;
  --accent: #4d94ff;
  --accent-ink: #ffffff;
  --accent-2: #3fb68b;
  --accent-3: #e3b341;
  --terminal-bg: #05080d;
  --sky: #000;
  --sky-ink: #f2f4f8;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: clamp(16px,.5vw + 8px,24px);
}

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

.term,
.chat-list,
.pal-list {
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}

a {
  color: inherit;
  text-underline-offset: .2em;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.ico {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* ---------- Header (fixed at the top) ---------- */
header {
  position: fixed;
  top: 0;
  left: var(--panel-width);
  right: var(--rail-width);
  height: var(--header-height);
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(1.25rem,3.5vw,3.5rem);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.logo {
  font: 600 1.6rem/1 var(--font-display);
  letter-spacing: -.01em;
  text-decoration: none;
}

.logo::after {
  content: ".";
  color: var(--accent);
}

.tools {
  display: flex;
  gap: .7rem;
  align-items: center;
}

.kbtn {
  display: flex;
  align-items: center;
  gap: .6rem;
  height: 2.7rem;
  padding: 0 .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: 500 .85rem var(--font-body);
  transition: border-color .2s,color .2s;
}

.kbtn:hover {
  border-color: var(--fg);
  color: var(--fg);
}

kbd {
  font: 500 .7rem var(--font-mono);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .05rem .4rem;
  color: var(--muted);
}

.aibtn,
.tbtn {
  display: none;
  text-decoration: none;
}

.burger {
  width: 2.7rem;
  height: 2.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 5px;
}

.burger i {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s;
}

.burger.open i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger.open i:nth-child(2) {
  opacity: 0;
}

.burger.open i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Dropdown menu ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 28;
  background: rgba(0,0,0,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

.scrim.on {
  opacity: 1;
  pointer-events: auto;
}

.menu {
  position: fixed;
  top: var(--header-height);
  left: var(--panel-width);
  right: var(--rail-width);
  z-index: 29;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: .4rem clamp(1.25rem,3.5vw,3.5rem) 1.4rem;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .5s cubic-bezier(.2,.8,.2,1),visibility 0s .5s;
}

.menu.open {
  visibility: visible;
  clip-path: inset(0);
  transition: clip-path .5s cubic-bezier(.2,.8,.2,1);
}

.menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
  font: 600 clamp(1.5rem,3vw,2.2rem)/1.1 var(--font-display);
  letter-spacing: -.025em;
  text-decoration: none;
  transition: opacity .3s,padding .35s cubic-bezier(.2,.8,.2,1);
}

.menu:hover a {
  opacity: .35;
}

.menu a:hover {
  opacity: 1;
  padding-left: .9rem;
  color: var(--accent);
}

.menu a.on::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-height:640px) {
  .menu {
    padding-bottom: .8rem;
  }
  .menu a {
    padding: .5rem 0;
    font-size: clamp(1.2rem,4.4vh,1.7rem);
  }
}

/* ---------- Star panel and side rail ---------- */
.panel {
  position: fixed;
  top: 0;
  bottom: var(--footer-height);
  left: 0;
  width: var(--panel-width);
  background: var(--sky);
  color: var(--sky-ink);
  transition: color 1.2s;
  overflow: hidden;
}

.net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The faint JA mark on pages other than home */
.mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 14vw/1 var(--font-display);
  color: rgba(255, 255, 255, .06);
  pointer-events: none;
}

/* Your name and the lead line, sitting at the bottom of the sky on the home page */
.sky-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(1.5rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 6vh, 5rem);
  user-select: none;        /* clicking around the sky should not select the name */
  -webkit-user-select: none;
}

.sky-lead {
  max-width: 30ch;
  margin-top: 1.4rem;
  opacity: .78;
  font-size: 1.05rem;
  animation: up .8s .9s backwards;
}

.rail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: var(--footer-height);
  width: var(--rail-width);
  z-index: 6;
  border-left: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ai {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background .25s, color .25s, transform .25s;
}

.ai:hover {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(-8deg);
}

/* the assistant is already open, so the button would only repeat it */
.ai.here {
  visibility: hidden;
}
.ai::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + .8rem);
  top: 50%;
  transform: translate(6px,-50%);
  padding: .4rem .7rem;
  border-radius: var(--radius);
  background: var(--fg);
  color: var(--bg);
  font: 500 .8rem var(--font-body);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s,transform .3s cubic-bezier(.2,.8,.2,1);
}

.ai:hover::after,
.ai:focus-visible::after {
  opacity: 1;
  transform: translate(0,-50%);
}

.rail span {
  writing-mode: vertical-rl;
  max-height: 14rem;
  margin-top: 1.6rem;
  overflow: hidden;
  font: 400 .75rem var(--font-mono);
  color: var(--muted);
  transition: max-height .7s cubic-bezier(.7,0,.2,1),margin-top .7s cubic-bezier(.7,0,.2,1),opacity .4s;
}

[data-page=contact] .rail span {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
}

[data-page=contact] .fsoc {
  display: none;
}

/* ---------- Page frame and footer ---------- */
.wrap {
  margin: 0 var(--rail-width) 0 var(--panel-width);
  padding: var(--header-height) 0 var(--footer-height);
  min-height: 100svh;
}

.page {
  width: 100%;
  max-width: 72rem;
  min-height: calc(100svh - var(--header-height) - var(--footer-height));
  padding: clamp(2rem,5vw,4.5rem) clamp(1.25rem,3.5vw,3.5rem);
}

.page>* {
  animation: up .7s cubic-bezier(.2,.8,.2,1) backwards;
}

.page>:nth-child(2) {
  animation-delay: .07s;
}

.page>:nth-child(3) {
  animation-delay: .14s;
}

.page>:nth-child(4) {
  animation-delay: .21s;
}

.page>:nth-child(n+5) {
  animation-delay: .28s;
}

.page>.pfolio {
  animation: none;
}

.pfolio>* {
  animation: up .7s cubic-bezier(.2,.8,.2,1) backwards;
}

.pfolio>:nth-child(2) {
  animation-delay: .07s;
}

.pfolio>:nth-child(3) {
  animation-delay: .14s;
}

.pfolio>:nth-child(4) {
  animation-delay: .21s;
}

.pfolio>:nth-child(n+5) {
  animation-delay: .28s;
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.rv {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
}

.rv.in {
  opacity: 1;
  transform: none;
}

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--footer-height);
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0 clamp(1.25rem,3.5vw,3.5rem);
  background: var(--bg);
  border-top: 1px solid var(--line);
  font-size: .8rem;
  color: var(--muted);
}

.sw {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  cursor: pointer;
  font: 500 .75rem var(--font-body);
}

.sw em {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-style: normal;
  opacity: .4;
  transition: opacity .3s;
}

:root:not([data-theme=dark]) .sw .lt,
:root[data-theme=dark] .sw .dk {
  opacity: 1;
}

.pill {
  width: 2.5rem;
  height: 1.3rem;
  border-radius: 99px;
  border: 1.5px solid currentColor;
  position: relative;
}

.pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: .78rem;
  height: .78rem;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .4s cubic-bezier(.3,1.5,.5,1);
}

:root[data-theme=dark] .pill::after {
  transform: translateX(1.2rem);
}

.fsoc {
  display: none;
  gap: 1rem;
}

/* ---------- Text, labels, buttons ---------- */
.title {
  font: 600 clamp(2.6rem,5vw,4.4rem)/1 var(--font-display);
  letter-spacing: -.025em;
}

.intro {
  max-width: 46ch;
  margin: 1.2rem 0 1.8rem;
  color: var(--muted);
}

.note {
  color: var(--muted);
  font-size: .92rem;
  margin: .6rem 0 1.2rem;
  max-width: 62ch;
}

/* Section headings inside a page ("Skills", "Education"...) */
.lab {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin: 3.4rem 0 1.3rem;
  font: 500 1.6rem/1.2 var(--font-display);
}

/* The "Sample" badge on placeholder content */
.tag {
  order: 1;
  font: 500 .7rem var(--font-mono);
  font-style: normal;
  background: color-mix(in srgb, var(--accent-3) 22%, transparent);
  color: var(--fg);
  padding: .1rem .45rem;
  border-radius: 3px;
  margin-left: .6rem;
}

.lab .tag {
  margin: 0;
}

.tile .tag {
  margin-left: .6rem;
}

.post h3 .tag {
  vertical-align: middle;
  margin-left: .8rem;
}

/* Buttons: the main one is filled with the accent color, .ghost is just an outline */
.btn {
  display: inline-block;
  padding: .8rem 1.35rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font: 600 .92rem var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.btn.sm {
  padding: .55rem 1rem;
  font-size: .85rem;
}

.btn:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}

.btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg);
}

.btn.ghost:hover {
  border-color: var(--fg);
}

.btn:disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

.acts {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}

.back {
  display: inline-block;
  margin-bottom: 2rem;
  font: 500 .92rem var(--font-body);
  color: var(--muted);
  text-decoration: none;
}

.back::before {
  content: "\2190  ";   /* left arrow */
}

.back:hover {
  color: var(--accent);
}

.meta {
  margin-top: .8rem;
  color: var(--muted);
}

.wide {
  margin: 2rem 0;
}

.wide .im {
  aspect-ratio: 16/9;
}

.prose p {
  max-width: 60ch;
  margin-top: 1.2rem;
  color: var(--muted);
}

/* ---------- Home ---------- */
h1.name {
  font: 700 min(calc(var(--panel-width) * .2), 11rem)/.92 var(--font-display);
  letter-spacing: -.05em;
  cursor: default;
}

.row {
  display: block;
  white-space: nowrap;
}

.ch {
  display: inline-block;
  will-change: transform;
  animation: rise 1.1s cubic-bezier(.2,.8,.2,1) backwards;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(55%);
  }
}

/* The right side: photo and hello on top, four shortcut cards under it */
.home {
  min-height: calc(100svh - var(--header-height) - var(--footer-height) - 2 * clamp(2rem, 5vw, 4.5rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(2rem, 5vh, 3.5rem);
}

.hello {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.hello-title {
  font: 600 clamp(2rem, 3.2vw, 3rem)/1.1 var(--font-display);
  letter-spacing: -.025em;
}

.hello .intro {
  margin: .9rem 0 1.6rem;
}

.portrait {
  width: clamp(9rem, 15vw, 15rem);
  aspect-ratio: 4/5;
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.portrait-initials {
  display: grid;
  place-items: center;
  height: 100%;
  font: 600 3rem var(--font-display);
  color: var(--accent);
}

.shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}

.shortcut {
  position: relative;
  display: grid;
  gap: .2rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  background: var(--card);
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}

.shortcut:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.shortcut small {
  font: 500 .75rem var(--font-mono);
  color: var(--accent);
}

.shortcut b {
  font: 600 1.1rem/1.25 var(--font-display);
  letter-spacing: -.02em;
  white-space: nowrap;
}

.shortcut span {
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}

.shortcut .ico {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: var(--muted);
  transition: transform .2s, color .2s;
}

.shortcut:hover .ico {
  color: var(--accent);
  transform: translateX(3px);
}

/* ---------- Portfolio ---------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.7rem;
  margin: 2.6rem 0 1.6rem;
}

.tabs button,
.tabs a {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .3rem 0;
  color: var(--muted);
  cursor: pointer;
  font: 500 .95rem var(--font-body);
  text-decoration: none;
  transition: color .2s,border-color .2s;
}

.tabs button:hover,
.tabs a:hover {
  color: var(--fg);
}

.tabs .on {
  color: var(--fg);
  border-color: var(--accent);
}

.pg {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(12.5rem,1fr));
  gap: 1.5rem;
}

.tile {
  text-decoration: none;
  display: block;
}

.im {
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  aspect-ratio: 4/5;
}

.im svg,
.im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: var(--accent);
  transition: transform .8s cubic-bezier(.2,.8,.2,1),filter .6s;
}

.tile:hover .im svg,
.post:hover .im svg,
.tile:hover .im img,
.post:hover .im img {
  transform: scale(1.04);
}

.tile:hover h3 {
  color: var(--accent);
}

.tile h3 {
  font: 600 1.1rem/1.2 var(--font-display);
  margin-top: .9rem;
}

.tile small {
  color: var(--muted);
  font-size: .8rem;
}

.repo {
  display: grid;
  gap: .15rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: padding .3s cubic-bezier(.2,.8,.2,1);
}

.repo:hover {
  padding-left: .9rem;
}

.repo:hover h3 {
  color: var(--accent);
}

.repo h3 {
  font: 600 1.15rem/1.2 var(--font-display);
}

.meta2 {
  font: 500 .78rem var(--font-mono);
  color: var(--muted);
}

.repo p {
  color: var(--muted);
  font-size: .92rem;
}

.repos {
  border-top: 1px solid var(--line);
  padding-top: 1.4rem;
}

/* ---------- About ---------- */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 3.5rem;
}

.info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem 3rem;
}

.info b {
  font-weight: 600;
}

.info span {
  color: var(--muted);
}

.sk {
  margin-bottom: 1.2rem;
  font-size: .9rem;
}

.sk p {
  display: flex;
  justify-content: space-between;
}

.tr {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line);
  margin-top: .5rem;
}

.fl {
  height: 100%;
  border-radius: 3px;
  background: var(--bar-color);
  transform-origin: 0 0;
  animation: grow 1.3s cubic-bezier(.2,.8,.2,1) backwards;
}

@keyframes grow {
  from {
    transform: scaleX(0);
  }
}

.rings {
  display: flex;
  gap: 1.2rem;
  justify-content: space-between;
}

.ring {
  text-align: center;
  font-size: .8rem;
  flex: 1;
  max-width: 7rem;
}

.ring svg {
  width: 100%;
}

.ring circle:last-of-type {
  animation: dash 1.4s cubic-bezier(.2,.8,.2,1) backwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 213.6;
  }
}

.sv {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1rem;
}

.box {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem;
  transition: border-color .3s;
}

.box:hover {
  border-color: var(--muted);
}

.box .ico {
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: .9rem;
  color: var(--accent);
}

.box h3 {
  font: 600 1.05rem/1.2 var(--font-display);
}

.box p {
  color: var(--muted);
  font-size: .88rem;
  margin-top: .4rem;
}

.chip {
  display: inline-block;
  font: 500 .78rem var(--font-mono);
  color: var(--muted);
  margin-bottom: .5rem;
}

.stack {
  display: grid;
  gap: 1rem;
}

/* ---------- News ---------- */
.post {
  display: grid;
  grid-template-columns: minmax(9rem,17rem) 1fr;
  gap: 1.8rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.post .im {
  aspect-ratio: 4/3;
}

.post h3 {
  font: 600 clamp(1.25rem,2.2vw,1.8rem)/1.15 var(--font-display);
  letter-spacing: -.025em;
}

.post p {
  color: var(--muted);
  margin: .7rem 0 1.2rem;
  font-size: .92rem;
}

.more {
  display: block;
  margin: 2.4rem auto 0;
  padding: .7rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  font: 500 .92rem var(--font-body);
  transition: border-color .2s;
}

.more:hover {
  border-color: var(--fg);
}

/* ---------- Contact ---------- */
.cl {
  border-top: 1px solid var(--line);
  max-width: 40rem;
}

.cl a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font: 600 1.5rem/1.2 var(--font-display);
  transition: padding .3s cubic-bezier(.2,.8,.2,1);
}

.cl a span {
  margin-left: auto;
  font: 400 .9rem var(--font-body);
  color: var(--muted);
}

.cl a:hover {
  padding-left: 1rem;
  color: var(--accent);
}

/* ---------- Lab: one screen, no page scrolling ----------
   The Lab page is as tall as the window. The heading and the switch share a row and the
   tool grows to fill whatever is left, so the chat box, terminal and visualizer are always in view.
   If the window is really too small, the page scrolls instead of clipping anything. */

:root[data-page=lab] .page {
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.2rem,2.4vw,2rem);
  padding-bottom: clamp(1.2rem,2.4vw,2rem);
}

.labpage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lab-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .8rem 2rem;
  margin-bottom: .9rem;
}

.labpage .title {
  font-size: clamp(2.2rem,3.6vw,3.2rem);
}

.lab-intro {
  margin: -.3rem 0 1rem;
  max-width: none;
  font-size: .95rem;
}

.labpage>.note {
  margin: 0 0 1rem;
}

.labpage[data-tool=assistant]>.note {
  display: none;
}

/* the chat header already says what it is */
.tool {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  padding: clamp(1rem,2.2vw,1.6rem);
}

@media (max-height:780px) {
  .lab-intro {
    display: none;
  }
}

@media (max-height:700px) {
  :root[data-page=lab] .page {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .tool {
    padding: .9rem;
    gap: .6rem;
  }
  .chat {
    gap: .6rem;
  }
  .chat-head {
    padding-bottom: .6rem;
  }
  .chat-list {
    min-height: 7rem;
  }
  .chips button {
    padding: .35rem .7rem;
    font-size: .76rem;
  }
  .lab-top {
    margin-bottom: .7rem;
  }
  .labpage .title {
    font-size: 2rem;
  }
  .labpage>.note {
    margin-bottom: .7rem;
  }
}

/* The switch between Lab tools: one small control with a sliding thumb instead of a row of tabs */
.seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% / var(--n));
  background: var(--accent);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}

.seg a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: .7rem 1.2rem;
  color: var(--muted);
  font: 500 .88rem var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color .25s;
}

.seg a:hover {
  color: var(--fg);
}

.seg a[aria-current] {
  color: var(--accent-ink);
}

.ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: flex-end;
  margin: 0 0 1.2rem;
}

.sel {
  display: grid;
  gap: .4rem;
  font: 500 .85rem var(--font-body);
  color: var(--muted);
}

select {
  font: 500 .95rem var(--font-mono);
  padding: .75rem .9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 12rem;
}

input[type=range] {
  accent-color: var(--accent);
  min-width: 9rem;
  width: 100%;
}

/* Sorting visualizer: one toolbar, and the bars take the remaining height */
.svbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .9rem 1.6rem;
}

.svbar .sel {
  flex: 1 1 9rem;
  min-width: 8rem;
}

.svbar .s-alg {
  flex: 0 0 auto;
}

.s-btns {
  display: flex;
  gap: .6rem;
  margin-left: auto;
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1 0 9rem;
  min-height: 9rem;
  padding: .6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.bars i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--muted);
  min-width: 1px;
}

.bars i.hl {
  background: var(--accent);
}

.bars.done i {
  background: var(--accent-2);
}

.note.stat {
  margin: 0;
}

/* Terminal fills the tool; the quick buttons under it run a command with one tap */
.term {
  flex: 1 0 12rem;
  min-height: 12rem;
  overflow: auto;
  padding: 1rem 1.1rem;
  background: var(--terminal-bg);
  color: #e6e0d4;
  border-radius: var(--radius);
  font: 400 .85rem/1.65 var(--font-mono);
}

.tl {
  white-space: pre-wrap;
  word-break: break-word;
}

.tl.in {
  color: #fffaf0;
}

.ps {
  color: #e0b44f;
}

.tl.live {
  display: flex;
  gap: 1ch;
}

.term input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  font: inherit;
  color: #fffaf0;
  caret-color: #4d94ff;
}

.quick {
  margin: 0;
}

.quick button {
  font-family: var(--font-mono);
  font-size: .74rem;
}

/* ---------- Ask Jakub (assistant chat) ----------
   One icon only (in the header). The message list grows and scrolls inside itself, and the
   suggestions and the input stay pinned under it, so you never scroll the page to find the input. */

.chat {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-height: 0;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}

.chat-head div {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.chat-head b {
  font: 600 1.2rem var(--font-display);
  letter-spacing: -.025em;
}

.chat-head small {
  display: block;
  color: var(--muted);
  font-size: .78rem;
}

.av {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
}

.chat-list {
  flex: 1 1 0;
  min-height: 11rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding: .2rem .3rem .2rem 0;
}

.msg {
  display: flex;
  max-width: min(44rem,88%);
  animation: up .4s cubic-bezier(.2,.8,.2,1) backwards;
}

.msg.user {
  align-self: flex-end;
}

.bub {
  padding: .75rem 1rem;
  background: var(--card);
  border-radius: 14px 14px 14px 4px;
  font-size: .95rem;
  min-width: 0;
}

.msg.user .bub {
  background: var(--fg);
  color: var(--bg);
  border-radius: 14px 14px 4px 14px;
}

.bt {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.snote {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: .8rem;
}

.snote .tag {
  margin: 0 .4rem 0 0;
}

.dots {
  display: flex;
  gap: .3rem;
  padding: .35rem 0;
}

.dots i {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--muted);
  animation: blink 1.1s infinite;
}

.dots i:nth-child(2) {
  animation-delay: .15s;
}

.dots i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes blink {
  0%,
  60%,
  100% {
    opacity: .25;
  }
  30% {
    opacity: 1;
  }
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.bub .chips {
  margin-top: .8rem;
}

.chips button,
.chip-link {
  border: 1px solid var(--line);
  border-radius: 99px;
  background: none;
  padding: .4rem .85rem;
  font: 500 .82rem var(--font-body);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .2s,background .2s,color .2s;
}

.chips button:hover,
.chip-link:hover {
  border-color: var(--fg);
}

.chips button:disabled {
  opacity: .4;
  pointer-events: none;
}

.chat-form {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}

.chat-form:focus-within {
  border-color: var(--accent);
}

.chat-in {
  flex: 1;
  min-width: 0;
  padding: .9rem 1rem;
  border: 0;
  outline: none;
  background: none;
  font: 500 .95rem var(--font-body);
}

.send {
  flex: none;
  width: 3.3rem;
  display: grid;
  place-items: center;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  transition: opacity .2s;
}

.send:disabled {
  opacity: .25;
  cursor: default;
}

/* ---------- Command palette ----------
   On a computer it rolls down from the Search button in the header (CommandPalette.js sets
   --pal-top and --pal-right to sit right under it). Clicking anywhere else closes it.
   On a phone it is a bottom sheet instead (see the phone section). */
.pal-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s,visibility 0s .3s;
}

.pal-wrap.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .2s;
}

.pal {
  position: absolute;
  top: var(--pal-top, 5rem);
  right: var(--pal-right, 5rem);
  width: min(34rem, calc(100vw - 2rem));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
  clip-path: inset(0 0 100% 0 round calc(var(--radius) * 1.5));
  transition: clip-path .35s cubic-bezier(.2,.8,.2,1);
}

.pal-wrap.open .pal {
  clip-path: inset(0 0 0 0 round calc(var(--radius) * 1.5));
}

.pal-in {
  width: 100%;
  padding: 1.1rem 1.3rem;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  outline: none;
  font: 500 1.05rem var(--font-body);
}

.pal-list {
  max-height: min(22rem,50svh);
  overflow: auto;
  padding: .4rem 0;
}

.pal-group {
  padding: .7rem 1.3rem .2rem;
  font: 500 .75rem var(--font-mono);
  color: var(--muted);
}

.pal-empty {
  padding: 1.2rem 1.3rem;
  color: var(--muted);
}

.pi {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
  padding: .65rem 1.3rem;
  cursor: pointer;
}

.pi small {
  font: .72rem var(--font-mono);
  opacity: .65;
  white-space: nowrap;
}

.pi mark {
  background: none;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.pi.on {
  background: var(--card);
  box-shadow: inset 3px 0 var(--accent);
}

.pal-foot {
  display: flex;
  gap: 1.4rem;
  padding: .7rem 1.3rem;
  border-top: 1px solid var(--line);
  font: .7rem var(--font-mono);
  color: var(--muted);
}

.tabbar {
  display: none;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
  :root {
    --panel-width: 36vw;
  }
  .sv {
    grid-template-columns: repeat(2,1fr);
  }
  .kbtn kbd {
    display: none;
  }
}

@media (max-width:960px) {
  .two,
  .info {
    grid-template-columns: 1fr;
  }
  .two>div+div {
    margin-top: .5rem;
  }
}

/* ===== Phones: its own layout, not a squeezed desktop =====
   - the sky (or your photo) is a fixed backdrop behind everything
   - a compact app bar on top, tabs along the bottom
   - cards swipe sideways, filters are chips, the assistant fills the screen */

@media (max-width:820px) {
  :root {
    --panel-width: 100%;
    --rail-width: 0px;
    --footer-height: 0px;
    --header-height: 3.6rem;
    --tabbar-height: 3.8rem;
    --safe-bottom: env(safe-area-inset-bottom,0px);
  }
  body {
    -webkit-tap-highlight-color: transparent;
  }
  .page>* {
    animation-duration: .55s;
  }
  /* the sky: the top of the home page, hidden on other pages */
  .panel {
    position: relative;
    bottom: auto;
    width: 100%;
    height: 62svh;
    min-height: 22rem;
    margin-top: var(--header-height);
    z-index: 0;
  }
  :root:not([data-page=home]) .panel {
    display: none;
  }
  .sky-copy {
    padding: 1.25rem 1.25rem 4.5rem;
  }
  .sky-lead {
    font-size: 1rem;
    margin-top: 1rem;
  }
  /* app bar */
  header {
    left: 0;
    right: 0;
    height: var(--header-height);
    padding: 0 .7rem 0 1rem;
    background: color-mix(in srgb,var(--bg) 80%,transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .logo {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.15rem;
  }
  .logo::before {
    content: "JA";
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--accent-ink);
    font: 600 .85rem var(--font-display);
  }
  .logo::after {
    content: none;
  }
  .tools {
    gap: .2rem;
  }
  .kbtn {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    justify-content: center;
    border: 0;
  }
  .kbtn:not(.tbtn) span,
  .kbtn kbd {
    display: none;
  }
  .tbtn,
  .aibtn {
    display: flex;
  }
  .aibtn {
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    margin-left: .3rem;
  }
  :root[data-theme=dark] .tbtn .i-moon,
  :root:not([data-theme=dark]) .tbtn .i-sun {
    display: none;
  }
  .burger,
  .menu,
  .scrim,
  .rail {
    display: none;
  }
  /* frame */
  .wrap {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: var(--header-height) 0 0;
    min-height: 0;
  }
  .page {
    min-height: calc(100svh - var(--header-height) - var(--tabbar-height));
    padding: 1.6rem 1.25rem 2rem;
  }
  footer {
    position: relative;
    z-index: 1;
    height: auto;
    justify-content: center;
    padding: 1.2rem 1.25rem calc(var(--tabbar-height) + var(--safe-bottom) + 1.4rem);
    border-top: 1px solid var(--line);
    background: none;
  }
  footer .sw,
  .fsoc {
    display: none;
  }
  /* bottom tabs */
  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(var(--n),1fr);
    height: calc(var(--tabbar-height) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: color-mix(in srgb,var(--bg) 85%,transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    color: var(--muted);
    text-decoration: none;
    font: 500 .68rem var(--font-body);
    transition: color .2s;
  }
  .tabbar a.on {
    color: var(--fg);
  }
  .tabbar a.on::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 28%;
    right: 28%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--accent);
  }
  .tabbar a:active {
    transform: scale(.94);
  }
  .tabbar .ico {
    width: 1.4rem;
    height: 1.4rem;
  }
  /* home */
  :root[data-page=home] .wrap {
    padding-top: 0;
  }
  :root[data-page=home] .page {
    min-height: 0;
    padding-top: 0;
  }
  h1.name {
    font-size: clamp(4rem, 22vw, 8rem);
    line-height: .9;
  }
  .home {
    min-height: 0;
    display: block;
  }
  .hello {
    display: block;
  }
  /* the photo becomes a round avatar that overlaps the bottom edge of the sky */
  .portrait {
    position: relative;
    width: 7.5rem;
    aspect-ratio: 1;
    margin-top: -3.75rem;
    border-radius: 50%;
    border: 4px solid var(--bg);
  }
  .portrait-initials {
    font-size: 2.2rem;
  }
  .hello-title {
    margin-top: 1rem;
    font-size: 2rem;
  }
  .hello .acts .btn {
    flex: 1;
    text-align: center;
  }
  .shortcuts {
    grid-template-columns: 1fr;
    gap: .7rem;
    margin-top: 2rem;
  }
  /* pages */
  .title {
    font-size: clamp(2.8rem,14vw,4.2rem);
  }
  .tabs::-webkit-scrollbar,
  .sv::-webkit-scrollbar,
  .chips::-webkit-scrollbar {
    display: none;
  }
  .tabs button,
  .tabs a {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .5rem .9rem;
    text-align: center;
  }
  /* :hover too, because phones keep the hover state after a tap */
  .tabs .on,
  .tabs .on:hover {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
  }
  .sv {
    display: flex;
    gap: .9rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.25rem;
    margin: 0 -1.25rem;
    padding: 0 1.25rem .6rem;
    scrollbar-width: none;
  }
  .sv .box {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }
  /* portfolio: a native-app style screen. Filters are one equal-width switch, projects are a
     two-column grid (the first one is featured when All is selected), the contact button sits
     under the projects, and GitHub repositories are compact cards. Nothing scrolls sideways. */
  .pfolio {
    display: flex;
    flex-direction: column;
  }
  .pfolio .title {
    font-size: clamp(2.4rem,12vw,3.4rem);
  }
  .pfolio .intro {
    margin: .5rem 0 1.2rem;
    font-size: .95rem;
  }
  .pfolio>.tabs {
    order: 2;
    display: grid;
    grid-template-columns: repeat(var(--n),minmax(0,1fr));
    gap: 0;
    margin: 0 0 1rem;
  }
  .pfolio>.tabs button {
    padding: .6rem 0;
    font-size: .85rem;
    border-radius: 0;
  }
  .pfolio>.tabs button:first-child {
    border-radius: var(--radius) 0 0 var(--radius);
  }
  .pfolio>.tabs button:last-child {
    border-radius: 0 var(--radius) var(--radius) 0;
  }
  .pfolio>.tabs button+button {
    margin-left: -1px;
  }
  .pfolio>.tabs .on {
    position: relative;
    z-index: 1;
  }
  .pfolio>.pg {
    order: 3;
  }
  .pfolio>.acts {
    order: 4;
    margin-top: 1rem;
  }
  .pfolio>.acts .btn {
    width: 100%;
    text-align: center;
    padding: .9rem .8rem;
  }
  .pfolio>.lab {
    order: 5;
    margin: 2.2rem 0 1rem;
  }
  .pfolio>.repos {
    order: 6;
  }
  .pg {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .7rem;
    margin: 0;
    padding: 0;
  }
  .tile {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: color-mix(in srgb,var(--bg) 72%,transparent);
    transition: border-color .2s;
  }
  .tile:active {
    border-color: var(--fg);
  }
  .tile .im {
    aspect-ratio: 1;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .tile h3 {
    font-size: .95rem;
    margin: .7rem .8rem 0;
  }
  .tile small {
    display: block;
    margin: .15rem .8rem .8rem;
    font-size: .75rem;
  }
  .tile .tag {
    position: absolute;
    top: .5rem;
    left: .5rem;
    margin: 0;
    background: var(--bg);
  }
  .pg[data-feat=true] .tile:first-child {
    grid-column: 1/-1;
  }
  .pg[data-feat=true] .tile:first-child .im {
    aspect-ratio: 16/9;
  }
  .pg[data-feat=true] .tile:first-child h3 {
    font-size: 1.15rem;
  }
  .repos {
    border-top: 0;
    padding-top: 0;
  }
  .repos .ctl {
    display: grid;
    gap: .7rem;
    margin: 0 0 1rem;
  }
  .repos .tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .repos .tabs button {
    padding: .45rem .8rem;
    font-size: .66rem;
  }
  .repos .sel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
  }
  .repos select {
    flex: 1;
    min-width: 0;
    max-width: 62%;
    padding: .55rem .7rem;
  }
  .repo {
    padding: .9rem 1rem;
    margin-bottom: .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: color-mix(in srgb,var(--bg) 72%,transparent);
  }
  .repo:hover {
    padding-left: 1rem;
  }
  .repo:active {
    border-color: var(--fg);
  }
  .repo h3 {
    font-size: 1.05rem;
  }
  .repo p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .88rem;
  }
  .info {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .info p {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 0;
    border-bottom: 1px solid var(--line);
  }
  .stack {
    gap: 1.2rem;
    padding-left: 1.1rem;
    border-left: 1px solid var(--line);
  }
  .stack .box::before {
    content: "";
    position: absolute;
    left: calc(-1.1rem - 4px);
    top: 1.7rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
  }
  .rings {
    gap: .6rem;
  }
  .post {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.4rem 0;
  }
  .post .im {
    aspect-ratio: 16/10;
  }
  .cl a {
    font-size: 1.3rem;
    padding: 1.3rem 0;
  }
  .btn {
    padding: .95rem 1.3rem;
  }
  .wide .im {
    aspect-ratio: 4/3;
  }
  /* lab: one screen. The switch is a full-width control, the tool fills the rest, nothing scrolls the page */
  :root[data-page=lab] footer {
    display: none;
  }
  :root[data-page=lab] .page {
    min-height: calc(100svh - var(--header-height));
    padding: .9rem 1.25rem calc(var(--tabbar-height) + var(--safe-bottom) + .9rem);
  }
  .lab-top {
    display: block;
    margin-bottom: .8rem;
  }
  .lab-top .title,
  .lab-intro {
    display: none;
  }
  .seg {
    display: grid;
    width: 100%;
  }
  .seg a {
    padding: .72rem .4rem;
    font-size: .66rem;
  }
  .labpage>.note {
    margin: 0 0 .8rem;
    font-size: .78rem;
    line-height: 1.45;
  }
  .tool {
    border: 0;
    padding: 0;
    gap: .7rem;
  }
  .chat {
    gap: .7rem;
  }
  .chat-head {
    padding-bottom: .7rem;
  }
  .chat-head small {
    display: none;
  }
  .msg {
    max-width: 94%;
  }
  .bub {
    font-size: .98rem;
  }
  .chat>.chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -1.25rem;
    padding: 0 1.25rem;
    scrollbar-width: none;
  }
  .chat>.chips button {
    flex: none;
    white-space: nowrap;
  }
  .chips.quick {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .chat-in,
  .pal-in,
  select {
    font-size: 16px;
  }
  .chat-in {
    padding: .85rem .9rem;
  }
  .term {
    font-size: .8rem;
    padding: .8rem .9rem;
  }
  .svbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
  }
  .svbar .sel {
    min-width: 0;
  }
  .svbar .s-alg {
    grid-column: 1/-1;
  }
  .svbar select {
    width: 100%;
    min-width: 0;
    padding: .65rem .8rem;
  }
  .s-btns {
    grid-column: 1/-1;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: .5rem;
  }
  .s-btns .btn {
    padding: .8rem 0;
    text-align: center;
  }
  .bars {
    flex-basis: 8rem;
    min-height: 8rem;
  }
  /* search becomes a bottom sheet */
  .pal-wrap {
    background: rgba(0,0,0,.45);
  }
  .pal {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 85svh;
    border-width: 1px 0 0;
    border-radius: calc(var(--radius) * 2) calc(var(--radius) * 2) 0 0;
    clip-path: none;
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    padding-bottom: var(--safe-bottom);
  }
  .pal-wrap.open .pal {
    clip-path: none;
    transform: none;
  }
  .pal-list {
    max-height: 52svh;
  }
  .pal-foot {
    display: none;
  }
}

@media (max-width:820px) and (max-height:640px) {
  .labpage>.note {
    display: none;
  }
}

/* very short phones: the tool needs the room more than its caption does */
@media (max-width:380px) {
  .sv .box {
    flex-basis: 82%;
  }
}

@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    animation: none!important;
    transition-duration: .01ms!important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
}