/* =========================================================
   Layout: app shell, sidebar, main column, page scaffolding
   ========================================================= */

.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0, 1fr);
  height:100vh;
  height:100dvh;
  transition:grid-template-columns var(--dur-3) var(--ease-in-out);
}
.app.sidebar-collapsed{ grid-template-columns:var(--sidebar-rail) minmax(0, 1fr); }
.app.auth-locked{ display:none; }

/* ---------- Sidebar ----------
   The geometry is the same open and collapsed: every icon sits on the
   rail's centre line (36px from the left edge), so collapsing only clips
   and fades the labels and nothing jumps sideways. */

.sidebar{
  position:relative;
  z-index:30;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100%;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:var(--surface-sunken);
}

.sidebar-head{
  display:flex;
  align-items:center;
  height:64px;
  padding:0 20px 0 var(--s-3);
  flex:none;
}
.sidebar-head .brand{ flex:1; min-width:0; overflow:hidden; }
/* the wordmark starts on the same line as the nav icons below it (the v lines up with their strokes) */
.sidebar-head .brand-logo{ margin-left:12px; }

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:4px;
  border-radius:var(--r-sm);
}
.brand-logo{
  height:26px;
  width:auto;
  flex:none;
  object-fit:contain;
}

.sidebar-collapse-btn{ flex:none; width:32px; height:32px; }
.sidebar-collapse-btn .i{ transition:transform var(--dur-3) var(--ease-in-out); }

/* Words fade in once the panel has mostly opened, and out straight away.
   Everything that is only text in the open sidebar uses this. */
.sidebar-head .brand,
.nav-label,
.folder-tree,
.sidebar-account-copy,
.sidebar-account-chevron{
  transition:opacity var(--dur-2) var(--ease-out) 110ms, visibility 0s linear 0s;
}
/* while the width animates, clip words instead of re-ellipsising them every frame */
.sidebar.is-resizing .tree-name,
.sidebar.is-resizing .nav-label{ text-overflow:clip; }

.sidebar-nav{
  position:relative;
  display:grid;
  gap:2px;
  padding:var(--s-1) var(--s-3) var(--s-3);
  flex:none;
}

.nav-indicator{
  position:absolute;
  top:0;
  left:var(--s-3);
  right:var(--s-3);
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:0 0 0 1px var(--line), var(--shadow-sm);
  opacity:0;
  pointer-events:none;
  transition:transform var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out), opacity var(--dur-2);
}
.nav-indicator::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--accent);
}
.nav-indicator.visible{ opacity:1; }
.nav-indicator.no-motion{ transition:none; }

/* Every row in the sidebar puts its icon on one column: 24px into the row,
   36px from the sidebar's edge. The collapsed rail is exactly that column. */
.side-nav-item{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  height:38px;
  padding:0 0 0 15px;
  overflow:hidden;
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:500;
  text-align:left;
  white-space:nowrap;
  transition:color var(--dur-1), background-color var(--dur-1);
}
.side-nav-item:hover{ color:var(--text); background:var(--hover); }
.side-nav-item:active .nav-icon{ transform:scale(.92); }
.side-nav-item.active{ color:var(--text); background:transparent; }
.side-nav-item.active .nav-icon{ color:var(--accent-text); }
.side-nav-item:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-2px; }
.nav-icon{ display:inline-flex; flex:none; transition:transform var(--dur-1) var(--ease-out); }
.nav-icon .i{ width:18px; height:18px; }
.nav-label{ overflow:hidden; text-overflow:ellipsis; }

.sidebar-library{
  display:flex;
  flex:1;
  flex-direction:column;
  min-height:0;
  padding:var(--s-3) var(--s-3) 0;
  border-top:1px solid var(--line-soft);
}

/* the + sits over the row's right end, so the Library icon never moves */
.side-section-head{
  position:relative;
  display:flex;
  align-items:center;
  height:38px;
  margin-bottom:2px;
  overflow:hidden;
  white-space:nowrap;
}
.tree-root{
  display:inline-flex;
  flex:1;
  align-items:center;
  gap:var(--s-3);
  min-width:0;
  height:38px;
  padding-left:15px;
  border-radius:var(--r-sm);
  color:var(--text-3);
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  letter-spacing:.1em;
  text-align:left;
  text-transform:uppercase;
  cursor:default;
  transition:background-color var(--dur-1), color var(--dur-1);
}
.tree-root .tree-icon{ color:inherit; }
.tree-root .tree-icon .i{ width:18px; height:18px; }
.side-section-add{ position:absolute; top:7px; right:6px; color:var(--text-3); transition:opacity var(--dur-2) var(--ease-out) 110ms, color var(--dur-1), background-color var(--dur-1); }
.side-section-add:hover{ color:var(--text); }

.folder-tree{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  margin:0 calc(var(--s-3) * -1);
  padding:0 var(--s-3) var(--s-6);
  scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.folder-tree-empty{
  padding:var(--s-2) 15px var(--s-3);
  color:var(--text-3);
  font-size:var(--fs-xs);
  line-height:1.55;
  white-space:normal;
}
/* a new library: one quiet card in place of the folder list */
.folder-tree-start{ display:grid; gap:6px; justify-items:start; margin:2px 0; padding:var(--s-4); border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--surface); white-space:normal; }
.folder-tree-start strong{ color:var(--text); font-size:var(--fs-sm); font-weight:600; }
.folder-tree-start span{ color:var(--text-3); font-size:var(--fs-xs); line-height:1.55; }
.folder-tree-start .btn{ margin-top:var(--s-2); }

.folder.flash{ animation:flash 900ms var(--ease-out); }

.tree-row{
  --pad:15px;
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  height:38px;
  padding:0 8px 0 var(--pad);
  overflow:hidden;
  border-radius:var(--r-sm);
  color:var(--text-2);
  font-size:var(--fs-sm);
  font-weight:500;
  text-align:left;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  transition:background-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1), padding var(--dur-3) var(--ease-in-out);
}
.tree-row:hover{ background:var(--hover); color:var(--text); }
.tree-row.active{ color:var(--text); }
.tree-row:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-2px; }

.tree-icon{ display:inline-grid; place-items:center; flex:none; width:18px; color:var(--text-3); transition:color var(--dur-1); }
.tree-icon .i{ width:18px; height:18px; stroke-width:1.6; }
.tree-row:hover .tree-icon{ color:var(--text-2); }
.tree-row.active .tree-icon{ color:var(--accent-text); }

.tree-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.tree-edit{ display:none; flex:none; }
.tree-folder:hover .tree-edit, .tree-edit:focus-visible{ display:grid; }
.tree-caret{ display:inline-flex; flex:none; color:var(--text-3); transition:transform var(--dur-3) var(--ease-out), opacity var(--dur-2) var(--ease-out) 110ms; }
.tree-caret .i{ width:14px; height:14px; stroke-width:2; }
.folder.open > .tree-folder .tree-caret{ transform:rotate(90deg); }

/* a quiz sits one step in from its folder */
.tree-leaf{ --pad:36px; height:34px; }
.tree-leaf .tree-icon{ width:16px; }
.tree-leaf .tree-icon .i{ width:16px; height:16px; }
.tree-add{ color:var(--text-3); font-weight:400; }
.tree-add .tree-icon .i{ width:14px; height:14px; transition:transform var(--dur-2) var(--ease-out); }
.tree-add:hover .tree-icon .i{ transform:rotate(90deg); }

/* the selected row: the nav indicator's look, in place */
.tree-row.active{
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line), var(--shadow-sm);
}
.tree-row.active::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--accent);
}

/* kept for the folder modal preview */
.folder-chip{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:none;
  border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--folder-color) 16%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--folder-color) 28%, transparent);
  color:var(--folder-color);
}
.folder-chip .i{ width:14px; height:14px; stroke-width:1.8; }
.folder-count{
  display:grid;
  place-items:center;
  min-width:22px;
  height:18px;
  padding:0 6px;
  border-radius:var(--r-pill);
  background:var(--surface-sunken);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--text-3);
  font-size:10.5px;
}

/* height animation via grid rows */
.quiz-list{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-3) var(--ease-in-out);
}
.folder.open > .quiz-list{ grid-template-rows:1fr; }
.folder:not(.animate) > .quiz-list{ transition:none; }
/* the list clips for its open/close animation, so its box spans the full sidebar width
   and the rows inside can still run edge to edge */
.quiz-list-inner{
  min-height:0;
  margin:0 calc(var(--s-3) * -1);
  padding:0 var(--s-3);
  overflow:hidden;
  opacity:0;
  transition:opacity var(--dur-2) var(--ease-out);
}
.folder.open > .quiz-list .quiz-list-inner{ padding-bottom:4px; opacity:1; }
.folder:not(.animate) .quiz-list-inner{ transition:none; }

/* account */
.sidebar-foot{
  position:relative;
  flex:none;
  padding:var(--s-3);
  border-top:1px solid var(--line-soft);
}
.sidebar-account{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  width:100%;
  padding:7px;
  overflow:hidden;
  border-radius:var(--r-sm);
  text-align:left;
  white-space:nowrap;
  transition:background-color var(--dur-1);
}
.sidebar-account:hover,
.sidebar-account[aria-expanded="true"]{ background:var(--hover); }
.sidebar-account:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-2px; }
.sidebar-account-copy{ display:flex; flex:1; flex-direction:column; min-width:0; line-height:1.3; }
.sidebar-account-copy strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-sm); font-weight:500; }
.sidebar-account-copy span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-3); font-size:var(--fs-xs); }
.sidebar-account-chevron{ display:inline-flex; color:var(--text-3); }
.sidebar-account-chevron .i{ width:16px; height:16px; }

.account-popover{
  position:absolute;
  left:var(--s-3);
  right:var(--s-3);
  bottom:calc(100% - 4px);
  z-index:40;
  display:grid;
  gap:1px;
  padding:var(--s-1);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  box-shadow:var(--shadow-md);
  opacity:0;
  visibility:hidden;
  transform:translateY(6px) scale(.98);
  transform-origin:bottom center;
  transition:opacity var(--dur-1) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-1);
}
.account-popover.open{ opacity:1; visibility:visible; transform:none; }

/* ---------- Collapsed: the same rows, narrowed to their icon column ----------
   Desktop only; on small screens the sidebar is always the full drawer. */

@media (min-width: 861px){
  /* The folder list keeps its open width while the sidebar animates, so it is
     clipped and revealed from the left instead of rewrapping word by word. */
  .folder-tree{ width:calc(var(--sidebar-w) - 1px); }
  .sidebar.sidebar-collapsed .sidebar-head .brand,
  .sidebar.sidebar-collapsed .nav-label,
  .sidebar.sidebar-collapsed .folder-tree,
  .sidebar.sidebar-collapsed .sidebar-account-copy,
  .sidebar.sidebar-collapsed .sidebar-account-chevron{
    opacity:0;
    pointer-events:none;
    transition-duration:var(--dur-1);
    transition-delay:0s;
  }
  /* collapsed, the folders leave entirely; the Library icon opens the sidebar again */
  .sidebar.sidebar-collapsed .side-section-add{ opacity:0; pointer-events:none; transition-delay:0s; }
  .sidebar.sidebar-collapsed .folder-tree{ visibility:hidden; transition:opacity var(--dur-1) var(--ease-out), visibility 0s linear var(--dur-1); }
  .sidebar.sidebar-collapsed .tree-root{ cursor:pointer; }
  .sidebar.sidebar-collapsed .tree-root:hover{ background:var(--hover); color:var(--text-2); }
  .sidebar.sidebar-collapsed .tree-root:focus-visible{ outline:2px solid var(--accent-line); outline-offset:-2px; }
  .sidebar.sidebar-collapsed .sidebar-collapse-btn .i{ transform:rotate(180deg); }

  /* The account menu opens beside the rail (fixed, so the rail never clips it). */
  .sidebar.sidebar-collapsed .account-popover{
    position:fixed;
    left:calc(var(--sidebar-rail) + 8px);
    right:auto;
    bottom:var(--s-3);
    width:232px;
    transform:translateX(-6px) scale(.98);
    transform-origin:bottom left;
  }
  .sidebar.sidebar-collapsed .account-popover.open{ transform:none; }
}

/* ---------- Main ---------- */

#main{
  position:relative;
  min-width:0;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  /* faint science doodles behind the pages (ui.js draws the tile); cards stay solid above it */
  background-image:var(--doodle, none);
  background-size:440px 440px;
}

.main-inner{ min-height:100%; }

.mobile-bar{ display:none; }

.page{
  width:100%;
  max-width:calc(var(--content-w) + 2 * var(--s-10));
  margin:0 auto;
  padding:var(--s-10) var(--s-10) var(--s-16);
}
.page-reading{ max-width:calc(var(--reading-w) + 2 * var(--s-10)); }

.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0 0 var(--s-5) -6px;
  padding:4px 8px 4px 6px;
  border-radius:var(--r-xs);
  color:var(--text-3);
  font-size:var(--fs-xs);
  font-weight:500;
  transition:color var(--dur-1), background-color var(--dur-1);
}
.back-link .i{ width:15px; height:15px; transition:transform var(--dur-2) var(--ease-out); }
.back-link:hover{ color:var(--text); background:var(--hover); }
.back-link:hover .i{ transform:translateX(-3px); }

.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-6);
  margin-bottom:var(--s-8);
  padding-bottom:var(--s-6);
  border-bottom:1px solid var(--line-soft);
}
.page-head-copy{ display:grid; gap:var(--s-2); min-width:0; }
.page-title{
  font-family:var(--font-serif);
  font-size:2.75rem;
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.01em;
  overflow-wrap:anywhere;
}
.page-sub{ max-width:60ch; color:var(--text-2); font-size:var(--fs-base); }
.page-actions{ display:flex; flex:none; gap:var(--s-2); }

.section{ margin-top:var(--s-12); }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--s-4);
  margin-bottom:var(--s-5);
}
.section-head > div{ display:grid; gap:6px; }
.section-head-tight{ align-items:center; margin:var(--s-10) 0 var(--s-3); }
.section-title{ font-size:var(--fs-xl); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px){
  .page{ padding:var(--s-8) var(--s-6) var(--s-12); }
}

@media (max-width: 860px){
  .app,
  .app.sidebar-collapsed{ grid-template-columns:minmax(0, 1fr); }

  .sidebar,
  .sidebar.sidebar-collapsed{
    position:fixed;
    inset:0 auto 0 0;
    width:min(300px, 86vw);
    transform:translateX(-102%);
    box-shadow:var(--shadow-lg);
    transition:transform var(--dur-3) var(--ease-in-out);
  }
  body.nav-open .sidebar{ transform:none; }

  .sidebar-collapse-btn{ display:none; }

  .sidebar-scrim{
    position:fixed;
    inset:0;
    z-index:25;
    background:var(--scrim);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--dur-3), visibility var(--dur-3);
  }
  body.nav-open .sidebar-scrim{ opacity:1; visibility:visible; }

  .mobile-bar{
    position:sticky;
    top:0;
    z-index:10;
    display:flex;
    align-items:center;
    gap:var(--s-2);
    height:56px;
    padding:0 var(--s-3);
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(12px);
  }

  .page{ padding:var(--s-6) var(--s-4) var(--s-12); }
  .page-head{ flex-direction:column; align-items:flex-start; gap:var(--s-4); margin-bottom:var(--s-6); }
  .page-title{ font-size:2.1rem; }
  .page-actions{ flex-wrap:wrap; max-width:100%; }
  .section-head{ flex-direction:column; align-items:stretch; }
  .search-field{ width:100%; }
  .field-grid{ grid-template-columns:1fr; }
  #toastHost{ right:var(--s-4); left:var(--s-4); bottom:var(--s-4); align-items:stretch; }
  .toast{ max-width:none; }
}

@media (min-width: 861px){
  .sidebar-scrim{ display:none; }
}

/* ---------- Boot screen (shown while the session is checked) ----------
   The "v." draws itself, an italic status line names the stage, and a
   hairline fills as the three real stages finish. */

.boot{
  --boot-hold:260ms;
  --boot-ink:var(--text);
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-content:center;
  padding:var(--s-4);
  overflow:hidden;
  background:var(--paper);
  transition:opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.boot.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
.boot.is-ready{ transition-delay:var(--boot-hold), calc(var(--boot-hold) + var(--dur-3)); }
.boot-light{
  position:absolute;
  left:50%;
  top:46%;
  width:min(1000px, 140vw);
  height:760px;
  transform:translate(-50%, -50%);
  background:radial-gradient(40% 40% at 50% 46%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%);
  pointer-events:none;
}
.boot-frame{ position:absolute; inset:28px; border:1px solid color-mix(in srgb, var(--text) 6%, transparent); border-radius:4px; pointer-events:none; }

.boot-stage{
  position:relative;
  display:grid;
  justify-items:center;
  margin-top:-4vh;
  animation:fade-in var(--dur-3) var(--ease-out) 80ms backwards;
}
.boot-mark{ width:120px; height:120px; overflow:visible; filter:drop-shadow(0 0 28px color-mix(in srgb, var(--accent) 30%, transparent)); }
.boot-v{
  fill:var(--boot-ink);
  fill-opacity:0;
  stroke:var(--boot-ink);
  stroke-width:9;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:boot-draw 1.4s var(--ease-in-out) 120ms forwards, boot-fill .6s var(--ease-out) 1.2s forwards;
}
.boot-dot{ fill:var(--accent); opacity:0; transform-box:fill-box; transform-origin:center; animation:boot-dot .5s var(--ease-spring) 1.45s forwards; }
@keyframes boot-draw{ to{ stroke-dashoffset:0; } }
@keyframes boot-fill{ to{ fill-opacity:1; stroke-width:0; } }
@keyframes boot-dot{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:none; } }

.boot-status{
  margin-top:var(--s-8);
  min-height:1.3em;
  color:var(--text);
  font-family:var(--font-serif);
  font-size:2rem;
  font-style:italic;
  line-height:1.2;
  letter-spacing:-.005em;
  text-align:center;
  animation:fade-in var(--dur-3) var(--ease-out);
}

/* a hairline that fills by stage, with a bright head */
.boot-progress{
  position:relative;
  width:220px;
  height:1px;
  margin-top:var(--s-6);
  background:color-mix(in srgb, var(--text) 12%, transparent);
}
.boot-progress i{
  position:absolute;
  inset:0 auto 0 0;
  width:var(--boot-fill, 8%);
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), var(--text));
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition:width .7s var(--ease-out);
}
.boot-progress b{
  position:absolute;
  top:-2px;
  left:var(--boot-fill, 8%);
  width:5px;
  height:5px;
  margin-left:-2.5px;
  border-radius:50%;
  background:var(--text);
  box-shadow:0 0 12px 2px color-mix(in srgb, var(--accent) 80%, transparent);
  transition:left .7s var(--ease-out);
}
.boot[data-stage="1"]{ --boot-fill:30%; }
.boot[data-stage="2"]{ --boot-fill:68%; }
.boot[data-stage="3"], .boot.is-ready{ --boot-fill:100%; }

.boot-steps{ display:flex; gap:var(--s-6); margin:var(--s-5) 0 0; padding:0; list-style:none; }
.boot-steps li{ color:color-mix(in srgb, var(--text) 32%, transparent); font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase; transition:color var(--dur-3); }
.boot-steps em{ margin-right:7px; color:inherit; font-family:var(--font-serif); font-size:14px; letter-spacing:0; text-transform:none; }
.boot[data-stage="1"] .boot-steps [data-step="1"],
.boot[data-stage="2"] .boot-steps [data-step="2"],
.boot[data-stage="3"] .boot-steps [data-step="3"]{ color:var(--text); }
.boot[data-stage="1"] .boot-steps [data-step="1"] em,
.boot[data-stage="2"] .boot-steps [data-step="2"] em,
.boot[data-stage="3"] .boot-steps [data-step="3"] em{ color:var(--accent-text); }
.boot[data-stage="2"] .boot-steps [data-step="1"],
.boot[data-stage="3"] .boot-steps [data-step="1"],
.boot[data-stage="3"] .boot-steps [data-step="2"],
.boot.is-ready .boot-steps li{ color:var(--text-2); }

.boot-logo{ position:absolute; left:60px; bottom:48px; height:24px; width:auto; opacity:.75; }
.boot-tag{ position:absolute; right:60px; bottom:54px; color:var(--text-3); font-size:10.5px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; }

.boot-slow{
  display:none;
  justify-items:center;
  gap:var(--s-3);
  max-width:280px;
  margin-top:var(--s-6);
  text-align:center;
}
.boot.is-slow .boot-slow{ display:grid; animation:fade-up var(--dur-3) var(--ease-out) both; }
.boot-slow p{ color:var(--text-2); font-size:var(--fs-xs); line-height:1.5; }

@media (max-width: 640px){
  .boot-frame{ inset:14px; }
  .boot-logo{ left:28px; bottom:30px; height:20px; }
  .boot-tag{ display:none; }
  .boot-status{ font-size:1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .boot-v{ animation:none; fill-opacity:1; stroke-width:0; stroke-dashoffset:0; }
  .boot-dot{ animation:none; opacity:1; }
  .boot-progress i, .boot-progress b{ transition:none; }
}

.app.is-leaving{ opacity:0; transition:opacity var(--dur-2) var(--ease-out); }