/* Lamp Before Sleep: a window at night in minimal line. One glow, hairlines, no filled panels.
   Gold (--ak-accent) is only ever on something the player can tap. */

:root {
  color-scheme: dark;
  --hair: 1px;
  --edge: max(12px, env(safe-area-inset-top));
  --side: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  --line-soft: color-mix(in srgb, var(--ak-ink-muted) 45%, transparent);
  --night: color-mix(in srgb, var(--ak-bg) 35%, #000);
  --label-px: 18px;
  --phase-px: 32px;
  --tap: 48px;
  --round: 999px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-backdrop-layer, var(--ak-bg-art));
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  font-size: var(--label-px);
  line-height: 1.45;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 2px solid var(--ak-focus);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* The page turning in for the night: a dark layer under everything that eases up each cycle. */
.night {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--night);
  opacity: 0;
  pointer-events: none;
}

.room {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-areas: "lamp" "tools";
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  width: 100%;
  max-width: 560px;
  height: 100dvh;
  margin: 0 auto;
  padding:
    calc(var(--ac-status-h, 60px) + 6px)
    var(--side)
    max(14px, env(safe-area-inset-bottom));
  touch-action: manipulation;
}

/* Small at the top left, clear of the status bar and the help corner. */
.logo {
  position: fixed;
  top: var(--edge);
  left: max(12px, env(safe-area-inset-left));
  z-index: 2;
  width: auto;
  height: 48px;
}

.line-btn {
  min-height: var(--tap);
  padding: 0 24px;
  border: var(--hair) solid var(--ak-accent);
  border-radius: var(--round);
  color: var(--ak-ink);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

/* Close sits just under the help button, top right, for the whole visit. */
.close {
  position: fixed;
  top: calc(var(--edge) + 84px);
  right: max(12px, env(safe-area-inset-right));
  z-index: 2;
  padding: 0 18px;
}

/* ---------- the lamp side ---------- */

.lamp-side {
  grid-area: lamp;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.note {
  margin: 0;
  min-height: 3.2em;
  color: var(--ak-ink-muted);
  text-align: left;
}

/* Leaves room for Close at the top right; the note's words flow round it. */
.note::before {
  content: "";
  float: right;
  width: 84px;
  height: 84px;
}

.note-word {
  display: block;
  color: var(--ak-ink-muted);
  font-size: var(--label-px);
  letter-spacing: 0.22em;
  text-transform: lowercase;
}

.note-word::after {
  content: "";
  display: block;
  width: 32px;
  margin: 4px 0 6px;
  border-top: var(--hair) solid var(--line-soft);
}

.note-line {
  display: block;
  color: var(--ak-ink);
  font-size: var(--label-px);
}

.stage {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: grid;
  place-items: center;
  container-type: size;
}

/* The lamp hangs a touch left of centre, where a lamp would. */
.lamp {
  position: relative;
  width: min(100cqw, 100cqh, 84vw);
  aspect-ratio: 1;
  translate: -3% 0;
}

.lamp-scale {
  position: absolute;
  inset: 0;
  transform: scale(0.5);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.glow {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.warmth { opacity: 0; }

/* The dashed reach of a full breath, shown only while teaching the first in-breath. */
.reach {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease;
}

.reach circle {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 0.8;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.room.is-reaching .reach { opacity: 0.9; }

/* The session's breaths: one thin arc per breath around the lamp, lit as each breath is done.
   It shows how far the session has come without a number counting down. */
.breaths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease-in-out;
}

.room:not([data-state="idle"]) .breaths { opacity: 1; }

.breaths path {
  fill: none;
  stroke: var(--ak-ink-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-opacity: 0.45;
  vector-effect: non-scaling-stroke;
  transition: stroke 2000ms ease-in-out, stroke-opacity 2000ms ease-in-out;
}

.breaths path.is-done {
  stroke: var(--ak-ink);
  stroke-opacity: 1;
}

.phase-slot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 72px;
}

.tally {
  margin: 0;
  color: var(--ak-ink-muted);
  letter-spacing: 0.08em;
}

.session-line {
  margin: 4px 0 0;
  color: var(--ak-ink-muted);
  letter-spacing: 0.06em;
  text-align: center;
}

.room:not([data-state="breathing"]) .session-line { display: none; }

.room:not([data-state="idle"]) .tally,
.room:not([data-state="idle"]) .week { display: none; }

/* The week of lamps: seven small hairline lamps, lit (filled) for each evening breathed.
   A missed evening just stays unlit; nothing is lost. */
.week {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ak-ink-muted);
  letter-spacing: 0.08em;
}

.week-lamps {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.week-lamps svg {
  width: 14px;
  height: 14px;
  overflow: visible;
}

.week-lamps circle {
  fill: none;
  stroke: var(--ak-ink-muted);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.week-lamps .is-lit circle {
  fill: var(--ak-ink);
  stroke: var(--ak-ink);
}

.week-lamps .is-tonight { width: 18px; height: 18px; }

.phase {
  margin: 0;
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: var(--phase-px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  opacity: 1;
  transition: opacity 700ms ease-in-out;
}

.phase.is-out { opacity: 0; }

.room[data-state="idle"] .phase {
  max-width: 20em;
  color: var(--ak-ink-muted);
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.room[data-state="ending"] .phase {
  max-width: 18em;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* ---------- the tools side ---------- */

.tools-side {
  grid-area: tools;
  display: grid;
  min-height: 0;
}

.idle-tools,
.session-tools {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  transition: opacity 900ms ease-in-out 300ms;
}

.session-tools {
  justify-content: flex-end;
  gap: 12px;
}

/* One set of controls at a time: the set that leaves goes at once, so two never overlap. */
.room[data-state="idle"] .session-tools,
.room:not([data-state="idle"]) .idle-tools {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none;
}

/* At the end the breath's controls step away too, and only the closing line is left. */
.room[data-state="ending"] .session-tools {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms ease-in-out, visibility 0s linear 600ms;
}

.tiny {
  margin: 4px 0 0;
  color: var(--ak-ink-muted);
  font-size: var(--label-px);
  letter-spacing: 0.18em;
  text-transform: lowercase;
}

.patterns,
.lengths {
  display: flex;
  justify-content: center;
  gap: 4px;
  width: 100%;
}

.pattern {
  display: flex;
  flex: 0 1 108px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 4px 6px;
  border-radius: 20px;
  color: var(--ak-ink-muted);
}

.pattern svg {
  width: 42px;
  height: 28px;
  overflow: visible;
}

.pattern path,
.pattern rect,
.pattern circle {
  fill: none;
  stroke: var(--ak-ink-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pattern span {
  padding-bottom: 2px;
  border-bottom: var(--hair) solid transparent;
  letter-spacing: 0.06em;
}

.pattern[aria-checked="true"] { color: var(--ak-ink); }

.pattern[aria-checked="true"] path,
.pattern[aria-checked="true"] rect,
.pattern[aria-checked="true"] circle {
  stroke: var(--ak-accent);
  stroke-width: 2;
}

.pattern[aria-checked="true"] span { border-bottom-color: var(--ak-accent); }

.counts {
  margin: 0;
  color: var(--ak-ink-muted);
  letter-spacing: 0.08em;
}

.length {
  min-height: var(--tap);
  padding: 0 14px;
  border: var(--hair) solid transparent;
  border-radius: var(--round);
  color: var(--ak-ink-muted);
  white-space: nowrap;
}

.length[aria-checked="true"] {
  border-color: var(--ak-accent);
  color: var(--ak-ink);
}

.go {
  position: relative;
  min-width: 200px;
  min-height: 54px;
  margin-top: 8px;
  font-size: 20px;
}

.extras {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.quiet {
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 0 12px;
  border-radius: var(--round);
  color: var(--ak-ink-muted);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.quiet .state {
  margin-left: 4px;
  padding-bottom: 1px;
  border-bottom: var(--hair) solid var(--line-soft);
}

.quiet[aria-pressed="true"] { color: var(--ak-ink); }
.quiet[aria-pressed="true"] .state { border-bottom-color: var(--ak-accent); }

.where {
  margin: 0;
  color: var(--ak-ink-muted);
  letter-spacing: 0.04em;
  text-align: center;
}

.where.is-trouble { color: var(--ak-ink); }

/* One message at a time, in a slot of fixed height so the controls under it never move. */
.message-slot {
  display: grid;
  place-items: end center;
  width: 100%;
  min-height: 7.5em;
}

.message-slot > * { grid-area: 1 / 1; }

.cue-note {
  max-width: 22em;
  margin: 0;
  color: var(--ak-ink-muted);
  letter-spacing: 0.02em;
  text-align: center;
}

.session-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.pause { min-width: 140px; }

/* ---------- teaching: a caption on solid backing, a hairline arrow, a slow ring ---------- */

.teach {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-width: 22em;
  pointer-events: none;
}

.teach-text {
  margin: 0;
  padding: 12px 20px;
  border: var(--hair) solid var(--ak-accent);
  border-radius: 24px;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-size: 19px;
  line-height: 1.4;
  text-align: center;
}

.teach-arrow {
  width: 20px;
  height: 32px;
  overflow: visible;
}

.teach-arrow path {
  fill: none;
  stroke: var(--ak-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The first caption sits low on the lamp side and points down to Breathe. */
.teach-idle {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 3;
  width: min(100%, 22em);
  translate: -50% 0;
  flex-direction: column-reverse;
}

.teach-idle .teach-arrow { transform: rotate(0deg); }

.go.is-taught::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--ak-accent);
  border-radius: var(--round);
  pointer-events: none;
}

/* ---------- the ending: labels fade to hairlines one by one ---------- */

.fade-step {
  transition: opacity 900ms ease-in-out;
  transition-delay: calc(var(--i, 0) * 300ms);
}

.room[data-state="ending"] .fade-step {
  opacity: 0;
  pointer-events: none;
}

.room[data-state="ending"] .note,
.room[data-state="breathing"] .note {
  visibility: hidden;
}

.room[data-state="ending"] .breaths,
.room[data-state="ending"] .close {
  opacity: 0;
  pointer-events: none;
  transition: opacity 900ms ease-in-out;
}

/* When the ending circle arrives, the room's words step out from behind it at that moment, so
   nothing shows through the circle as it settles; the glow stays. */
.room.is-behind .phase-slot,
.room.is-behind .breaths,
.room.is-behind .close,
.room.is-behind .session-tools {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* The ending circle: room for its lines at a comfortable size, in full ink. */
#activity-chrome-ending#activity-chrome-ending.site-insighfulness .ac-card {
  --ac-circle: min(88vw, 64dvh, 440px);
  padding: calc(var(--ac-circle) * 0.11);
  gap: 10px;
}

#activity-chrome-ending#activity-chrome-ending.site-insighfulness .ac-verdict { font-size: 22px; }

#activity-chrome-ending#activity-chrome-ending.site-insighfulness .ac-lines {
  color: var(--ak-ink);
  font-size: 19px;
  line-height: 1.45;
}

#activity-chrome-ending#activity-chrome-ending.site-insighfulness .ac-line + .ac-line { margin-top: 4px; }

/* Sideways: the circle as tall as the screen allows, its two buttons beside it rather than below. */
@media (orientation: landscape) and (max-height: 500px) {
  #activity-chrome-ending#activity-chrome-ending.site-insighfulness {
    padding: 12px 24px;
    background: var(--ak-bg);
  }

  #activity-chrome-ending#activity-chrome-ending.site-insighfulness .ac-card {
    --ac-circle: min(86dvh, 46vw, 420px);
    translate: -110px 0;
  }

  #activity-chrome-ending#activity-chrome-ending.site-insighfulness .ac-actions {
    top: 50%;
    left: calc(100% + 32px);
    flex-direction: column;
    align-items: stretch;
    translate: 0 -50%;
  }
}

/* ---------- sideways: the lamp, its breath word and its few controls as one group ---------- */

@media (orientation: landscape) {
  /* The window's top half only: the sill and rooftops would cut straight across a short screen. */
  body { background-position: center top; }

  .room {
    grid-template-areas: "lamp tools";
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 28px;
    max-width: 900px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .tools-side { align-self: center; }

  /* Sideways the top bar has room to spare: Close sits on it, just left of the help button,
     so it never lands on the tools below. */
  .close {
    top: var(--edge);
    right: calc(72px + env(safe-area-inset-right));
  }

  .note::before { display: none; }

  .session-tools { justify-content: center; }

  .message-slot { min-height: 6em; }

  .note { min-height: 2.6em; }

  .note-word { display: inline; }

  .note-word::after {
    content: " · ";
    display: inline;
    width: auto;
    margin: 0;
    border: 0;
  }

  .note-line { display: inline; }

  .phase-slot { min-height: 64px; }

  /* Captions point across to their partner: the first one right to Breathe, the next left to the lamp. */
  .teach-idle .teach-arrow,
  .teach-session .teach-arrow { transform: rotate(-90deg); }

  .teach-idle {
    flex-direction: row-reverse;
    left: auto;
    right: 0;
    translate: 0 0;
  }

  .teach-session { flex-direction: row; }
}

/* Short screens tighten the gaps so the lamp keeps its room. */
@media (max-height: 720px) and (orientation: portrait) {
  .room { gap: 6px; }
  .idle-tools { gap: 2px; }
  .pattern { min-height: 58px; }
  .go { margin-top: 4px; min-height: 50px; }
  .phase-slot { min-height: 64px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  .idle-tools { gap: 0; }
  .tiny { display: none; }
  .pattern { min-height: 56px; }
  .go { margin-top: 2px; min-height: 48px; }
}

/* ---------- motion, only when it is welcome ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .go.is-taught::after {
    animation: lbs-ring 2400ms ease-in-out infinite;
  }

  :root:not(.ac-still) .room.is-reaching .reach {
    animation: lbs-ring 2400ms ease-in-out infinite;
  }

  :root:not(.ac-still) .teach:not([hidden]) {
    animation: lbs-arrive 900ms ease-out both;
  }

  :root:not(.ac-still) .room[data-state="ending"] .phase {
    animation: lbs-arrive 900ms ease-out both;
  }

  @keyframes lbs-ring {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
  }

  @keyframes lbs-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* The opening's setup sideways: start.js pins its button to the bottom, where on a short
   landscape screen it lands over the lengths. Here the circle sits left and the choices,
   the button and the about link stack on the right, all in view. */
@media (orientation: landscape) and (max-height: 500px) {
  #activity-start#activity-start#activity-start.is-setup .ak-sheet {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "head groups" "head go" "head how";
    align-content: center;
    align-items: center;
    column-gap: 40px;
    row-gap: 4px;
    width: min(100%, 760px);
    min-height: 100%;
  }

  #activity-start#activity-start#activity-start.is-setup .ak-head {
    grid-area: head;
    width: min(200px, 56dvh);
    margin: 0 16px;
  }

  #activity-start#activity-start#activity-start.is-setup .ak-groups { grid-area: groups; margin-top: 0; }

  #activity-start#activity-start#activity-start.is-setup .ak-group { margin-bottom: 8px; }

  #activity-start#activity-start#activity-start.is-setup .ak-legend { margin-bottom: 2px; }

  #activity-start#activity-start#activity-start .lbs-counts { margin-top: 2px; }

  #activity-start#activity-start#activity-start.is-setup .ak-go {
    grid-area: go;
    position: static;
    margin: 12px auto 0;
  }

  #activity-start#activity-start#activity-start.is-setup .ak-how { grid-area: how; justify-self: center; }
}

/* The pattern row joined to the opening's setup, with its counts underneath. */
#activity-start .lbs-counts {
  margin: 8px 0 0;
  color: var(--ak-ink-muted);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* start.js's help button wears this site's "~"; a small word under it says what it is. */
#activity-help::after {
  content: "help";
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  translate: -50% 0;
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.2;
  pointer-events: none;
}

/* ---------- the opening (start.js) lit by the same lamp ---------- */

/* start.js draws a plain circle around the title. Here it becomes the lamp itself: the painted
   glow, its edge faded to nothing, with the logo resting in it. The circle's own slow breathing
   (start.js) carries the glow, so the opening breathes with the same light the session dims. */
#activity-start#activity-start#activity-start.site-insighfulness .ak-head {
  position: relative;
  isolation: isolate;
  width: min(84vw, 44dvh, 400px);
  background: none;
  box-shadow: none;
}

#activity-start#activity-start#activity-start.site-insighfulness .ak-head::before,
#activity-start#activity-start#activity-start.site-insighfulness .ak-head::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* The soft light around the lamp. */
#activity-start#activity-start#activity-start.site-insighfulness .ak-head::before {
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ak-ink) 34%, transparent) 40%, transparent);
}

/* The lamp: the painted glow, its rim faded so only the warm cream shows. */
#activity-start#activity-start#activity-start.site-insighfulness .ak-head::after {
  inset: -4%;
  background: url("art/lamp-glow.png") center / contain no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 84%);
  mask-image: radial-gradient(closest-side, #000 52%, transparent 84%);
}

/* The logo is a picture with its own dark outline, so it reads on the cream; no other words go on the light. */
#activity-start#activity-start#activity-start.site-insighfulness .ak-head .ak-tagline { display: none; }

#activity-start#activity-start#activity-start.site-insighfulness .ak-head .ak-title {
  display: grid;
  place-items: center;
  width: 100%;
  margin: 0;
}

#activity-start#activity-start#activity-start.site-insighfulness .ak-head .ak-logo {
  width: 54%;
  height: auto;
  max-width: none;
  max-height: none;
}

#activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-head { width: min(56vw, 26dvh, 240px); }

#activity-start#activity-start#activity-start.site-insighfulness.is-setup .ak-head { width: min(64vw, 30dvh, 280px); }

/* The instructions are long: their button sits at the end of them rather than over them. */
#activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-go { position: static; }

@media (orientation: landscape) and (max-height: 500px) {
  /* Sideways, the lamp keeps the left half and the words and the way in sit beside it. */
  #activity-start#activity-start#activity-start.site-insighfulness .ak-scene,
  #activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-sheet {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 40px;
    row-gap: 12px;
    width: min(100%, 860px);
    min-height: 0;
    margin: 0 auto;
  }

  #activity-start#activity-start#activity-start.site-insighfulness .ak-scene > *,
  #activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-sheet > * { grid-column: 2; }

  #activity-start#activity-start#activity-start.site-insighfulness .ak-scene > .ak-head,
  #activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-sheet > .ak-head {
    grid-column: 1;
    grid-row: 1 / span 6;
    align-self: start;
    position: sticky;
    top: 24px;
    width: min(40vw, 74dvh, 300px);
    margin: 0 24px;
  }

  #activity-start#activity-start#activity-start.site-insighfulness .ak-scene-lines { max-width: none; }

  #activity-start#activity-start#activity-start.site-insighfulness .ak-scene-line { font-size: 22px; }

  #activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-howto { text-align: left; }

  #activity-start#activity-start#activity-start.site-insighfulness.is-instructions .ak-go { margin: 8px 0 0; }

  #activity-start#activity-start#activity-start.site-insighfulness.is-setup .ak-head { width: min(40vw, 74dvh, 280px); }
}