/* ============================================================
   A Line A Day — single-box daily micro-journal
   Theme system: everything is driven by CSS variables so the
   icon click can cycle the whole look. Default theme = "clean"
   (style-examples/lineaday-design-01).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* --- defaults (clean / design-01) --- */
  --bg: var(--tint);   /* clean theme: background follows live word-count tint */
  --ink: #141414;

  --title-font: "Helvetica Neue", Arial, system-ui, sans-serif;
  --title-weight: 800;
  --title-size: clamp(2.6rem, 9vw, 6rem);
  --title-spacing: -0.01em;
  --title-transform: uppercase;
  --title-align: center;
  --title-color: #111111;

  --post-font: Georgia, "Times New Roman", serif;
  --post-style: italic;
  --post-weight: 500;
  --post-transform: none;
  --post-color: #141414;
  --post-size: clamp(1.7rem, 5.2vw, 3.1rem);
  --post-align: left;

  --hero-bg: transparent;
  --hero-pad-top: 3.5rem;

  --input-bg: #ffffff;
  --input-ink: #141414;
  --input-border: 1px solid #e2e2e2;
  --input-radius: 999px;
  --input-shadow: 0 1px 3px rgba(0,0,0,.07);
  --input-align: center;

  --surface: var(--tint, #ffffff);   /* today + archive post background */
  --surface-radius: 0px;
  --surface-shadow: none;
  --surface-pad: 0px;
  --surface-border: none;

  --accent: #141414;        /* delete control */
  --accent-ink: #ffffff;
  --accent-shape: 50%;      /* border-radius of delete */

  --meta-color: #8a8a8a;
  --chip-bg: rgba(0,0,0,.06);   /* subtle surfaces: post-icon, calendar cells, nav */

  /* icon: clean theme shows the LINE only, large + faint (watermark) */
  --icon-fill: transparent;
  --icon-line: #ededed;
  --icon-size: min(46vw, 430px);
  --icon-opacity: 1;
  --icon-top: -2.2rem;
  --icon-left: -4.5rem;
  --icon-z: 0;

  --content-max: 1080px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --tint: #ffffff;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--title-font);
  -webkit-font-smoothing: antialiased;
  transition: background .5s ease, color .3s ease;
}

.screen { min-height: 100vh; width: 100%; }

/* ---------------- Hero (the interface) ---------------- */
.hero {
  position: relative;
  min-height: 50vh;
  padding: var(--hero-pad-top) var(--gutter) 2rem;
  background: var(--hero-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  overflow: hidden;
  transition: background .5s ease;
}

#siteIcon {
  position: absolute;
  top: var(--icon-top);
  left: var(--icon-left);
  width: var(--icon-size);
  height: var(--icon-size);
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: var(--icon-opacity);
  z-index: var(--icon-z);
  line-height: 0;
  transition: transform .6s ease, opacity .3s ease;
}
#siteIcon:hover { transform: rotate(8deg); }
#siteIcon svg { width: 100%; height: 100%; display: block; }
#siteIcon .layer-fill { fill: var(--icon-fill); }
#siteIcon .layer-line { fill: var(--icon-line); }

.wordmark {
  position: relative;
  z-index: 2;
  pointer-events: none;   /* clicks outside the text still fall through to the icon */
  margin: 0;
  font-family: var(--title-font);
  font-weight: var(--title-weight);
  font-size: var(--title-size);
  letter-spacing: var(--title-spacing);
  text-transform: var(--title-transform);
  text-align: var(--title-align);
  line-height: 0.95;
  color: var(--title-color);
}
/* the wordmark text itself cycles the flourish */
.wordmark-btn {
  all: unset;
  display: inline-block;
  pointer-events: auto;
  cursor: pointer;
}
.wordmark-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.input-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  margin-inline: var(--input-mi, auto);
  align-self: var(--input-self, center);
}
:root { --input-mi: auto; --input-self: center; }

#lineInput {
  width: 100%;
  padding: 0.85rem 1.4rem;
  font-family: var(--title-font);
  font-size: 1rem;
  color: var(--input-ink);
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  box-shadow: var(--input-shadow);
  text-align: var(--input-align);
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
#lineInput::placeholder { color: #9a9a9a; opacity: 1; }
#lineInput:focus { border-color: var(--accent); }
#lineInput:disabled { opacity: .75; cursor: not-allowed; }

.message {
  position: relative;
  z-index: 2;
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  font-family: var(--title-font);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--meta-color);
}
.message.cmd { color: var(--accent); font-weight: 600; }

/* ---------------- Today's post (prominent) ---------------- */
.today {
  min-height: 50vh;
  padding: 1rem var(--gutter) 3rem;
  display: flex;
  align-items: flex-start;
}
.today[hidden] { display: none; }

.post--today {
  position: relative;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  background: var(--surface);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  padding: var(--surface-pad);
  transition: background .5s ease;
}
.post--today .post-text {
  margin: 0;
  padding-right: 8rem;
  font-family: var(--post-font);
  font-style: var(--post-style);
  font-weight: var(--post-weight);
  text-transform: var(--post-transform);
  font-size: var(--post-size);
  line-height: 1.12;
  text-align: var(--post-align);
  color: var(--post-color);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}
.post-date {
  font-family: var(--title-font);
  font-size: 0.95rem;
  color: var(--meta-color);
}
.post-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--chip-bg);
  font-family: var(--post-font);
  font-size: 1rem;
}
.post-icon[hidden] { display: none; }

.post-actions {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.delete-btn {
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1;
  color: var(--accent-ink);
  background: var(--accent);
  border: none;
  border-radius: var(--accent-shape);
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}
.delete-btn:hover { transform: scale(1.06); }

/* ---------------- Archive (older lines, below the fold) ---------------- */
.archive {
  padding: 0 var(--gutter) 5rem;
  max-width: var(--content-max);
  margin-inline: auto;
}
.archive:empty { display: none; }

.post--old {
  position: relative;
  background: var(--surface);
  border: var(--surface-border);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  padding: clamp(1rem, 3vw, 1.6rem);
  margin-bottom: 1rem;
  transition: background .4s ease;
}
.post--old .post-text {
  margin: 0;
  font-family: var(--post-font);
  font-style: var(--post-style);
  font-weight: var(--post-weight);
  text-transform: var(--post-transform);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--post-color);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.post--old .post-meta { margin-top: .5rem; }
.post--old .post-date { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.fade-out { animation: fadeOut .6s forwards; }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-6px); } }

/* ---------------- Calendar ---------------- */
.calendar {
  padding: 1rem var(--gutter) 4rem;
  max-width: 560px;
  margin-inline: auto;
}
.calendar[hidden] { display: none; }
.calendar-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem;
}
.cal-month { flex: 1; text-align: center; font-weight: 700; font-size: 1.1rem; }
.cal-nav, .cal-close {
  width: 2.2rem; height: 2.2rem;
  border: none; background: var(--chip-bg); color: var(--ink);
  border-radius: 8px; font-size: 1.2rem; cursor: pointer;
}
.cal-close { border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
.calendar-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--chip-bg);
  border-radius: 8px;
  font-size: .85rem;
  font-family: var(--title-font);
}
.calendar-day.empty { background: none; }
.calendar-day.has-post { cursor: pointer; color: #111; font-weight: 600; }
.calendar-day.today-cell { outline: 2px solid var(--accent); outline-offset: -2px; }
.calendar-detail {
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  background: var(--chip-bg);
  font-family: var(--post-font);
  font-size: 1.1rem;
}
.calendar-detail[hidden] { display: none; }
.calendar-detail .cd-date {
  display: block; font-family: var(--title-font);
  font-size: .8rem; color: var(--meta-color); margin-bottom: .35rem;
}

/* ============================================================
   FLOURISHES
   Cycled by clicking the wordmark (html[data-flourish="..."]).
   The SVGs are applied as masks so they recolor per theme via
   --flourish-color (falls back to the theme accent).
   ============================================================ */
.fl { display: none; pointer-events: none; }

/* frame: double rule around today's card */
.fl-frame {
  position: absolute;
  inset: 5px;
  border: 1px solid var(--flourish-color, var(--accent));
  outline: 1px solid var(--flourish-color, var(--accent));
  outline-offset: 3px;
  border-radius: calc(var(--surface-radius) * 0.6);
}
html[data-flourish="frame"] .post--today .fl-frame { display: block; }

/* corner ornaments */
.fl-corner {
  position: absolute;
  width: clamp(26px, 4.5vw, 40px);
  height: clamp(26px, 4.5vw, 40px);
  background: var(--flourish-color, var(--accent));
  -webkit-mask: url("flourishes/corner.svg") center / contain no-repeat;
  mask: url("flourishes/corner.svg") center / contain no-repeat;
}
.fl-tl { top: 7px; left: 7px; }
.fl-tr { top: 7px; right: 7px; transform: rotate(90deg); }
.fl-br { bottom: 7px; right: 7px; transform: rotate(180deg); }
.fl-bl { bottom: 7px; left: 7px; transform: rotate(270deg); }
html[data-flourish="corners"] .post--today .fl-corner { display: block; }

/* ornamental line break + fleuron (in-flow, after the text) */
.fl-divider, .fl-fleuron {
  margin: 1.2rem auto 0;
  background: var(--flourish-color, var(--accent));
}
.fl-divider {
  width: min(280px, 70%);
  height: 20px;
  -webkit-mask: url("flourishes/divider.svg") center / contain no-repeat;
  mask: url("flourishes/divider.svg") center / contain no-repeat;
}
.fl-fleuron {
  width: 32px;
  height: 32px;
  -webkit-mask: url("flourishes/fleuron.svg") center / contain no-repeat;
  mask: url("flourishes/fleuron.svg") center / contain no-repeat;
}
html[data-flourish="divider"] .post--today .fl-divider { display: block; }
html[data-flourish="fleuron"] .post--today .fl-fleuron { display: block; }

/* frame + corners need breathing room on themes whose card has no padding */
html[data-flourish="frame"] .post--today,
html[data-flourish="corners"] .post--today {
  padding: max(var(--surface-pad), 1.6rem);
}

/* ============================================================
   THEMES
   ============================================================ */

/* ---- coral (design-02): coral hero band, cream body, heavy caps ---- */
html[data-theme="coral"] {
  --bg: #f2e8d5;
  --ink: #1a1a1a;
  --hero-bg: #e9512c;
  --hero-pad-top: 2.2rem;
  --title-color: #f7eedd;
  --title-transform: uppercase;
  --title-align: center;
  --title-weight: 800;
  --title-size: clamp(2.4rem, 8vw, 5rem);
  --post-font: var(--title-font);
  --post-style: normal;
  --post-weight: 800;
  --post-transform: uppercase;
  --post-color: #161616;
  --post-size: clamp(1.9rem, 6vw, 3.4rem);
  --input-bg: #fffdf8;
  --input-border: none;
  --accent: #161616;
  --accent-ink: #fff;
  --accent-shape: 999px;
  --surface: transparent;
  --icon-fill: #f7eedd;
  --icon-line: #e9512c;
  --icon-size: 58px;
  --icon-top: 1.6rem;
  --icon-left: var(--gutter);
}
html[data-theme="coral"] .delete-btn { width: 3.4rem; }
/* design-02 renders status messages as a black pill chip with cream caps */
html[data-theme="coral"] .message {
  width: fit-content;
  margin-inline: auto;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  background: #161616;
  color: #f7eedd;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
html[data-theme="coral"] .message:empty { background: transparent; padding: 0.45rem 0; }

/* ---- editorial (design-03): cream, serif title, blue post card ---- */
html[data-theme="editorial"] {
  --bg: #efe9dc;
  --ink: #1c1c1c;
  --title-font: Georgia, "Times New Roman", serif;
  --title-weight: 500;
  --title-transform: none;
  --title-align: center;
  --title-color: #1c1c1c;
  --title-size: clamp(2.6rem, 8vw, 5.2rem);
  --post-font: Georgia, "Times New Roman", serif;
  --post-style: normal;
  --post-weight: 500;
  --post-color: #14233b;
  --input-bg: #fffdf8;
  --input-border: 1px solid #d8cfbb;
  --accent: #e98a2b;
  --accent-ink: #161616;
  --accent-shape: 14px;
  --surface: #cfe0ec;
  --surface-radius: 16px;
  --surface-pad: clamp(1.4rem, 4vw, 2.4rem);
  --meta-color: #5b6b7e;
  --icon-fill: #1c1c1c;
  --icon-line: #1c1c1c;
  --icon-size: 54px;
  --icon-top: 1.7rem;
  --icon-left: var(--gutter);
}
/* design-03's signature: a big orange rounded panel with a black × */
html[data-theme="editorial"] .delete-btn {
  width: 4.6rem;
  height: 5.4rem;
  border-radius: 18px;
  font-size: 2.1rem;
}
/* hairline rule under the date, like the card in design-03 */
html[data-theme="editorial"] .post--today .post-meta {
  border-bottom: 1px solid rgba(20, 35, 59, 0.22);
  padding-bottom: 0.85rem;
}

/* ---- sky (design-09): soft blue gradient, white rounded cards ---- */
html[data-theme="sky"] {
  --bg: linear-gradient(160deg, #aac0e8 0%, #c7d4ee 55%, #d7def0 100%);
  --ink: #1b2a44;
  --title-font: "Helvetica Neue", Arial, sans-serif;
  --title-weight: 800;
  --title-transform: none;
  --title-align: center;
  --title-color: #1b2a44;
  --post-font: Georgia, "Times New Roman", serif;
  --post-style: normal;
  --post-weight: 500;
  --post-color: #1b2a44;
  --input-bg: #ffffff;
  --input-border: none;
  --input-shadow: 0 4px 14px rgba(31,58,110,.18);
  --accent: #3f73c8;
  --accent-ink: #fff;
  --accent-shape: 50%;
  --surface: #ffffff;
  --surface-radius: 18px;
  --surface-pad: clamp(1.4rem, 4vw, 2.4rem);
  --surface-shadow: 0 8px 26px rgba(31,58,110,.16);
  --meta-color: #5f6f8c;
  --icon-fill: #3f73c8;
  --icon-line: #ffffff;
  --icon-size: 52px;
  --icon-top: 1.7rem;
  --icon-left: var(--gutter);
}
/* design-09 puts the blue × at the card's top-right corner */
html[data-theme="sky"] .post--today .post-actions {
  top: 1.3rem;
  right: 1.3rem;
  transform: none;
}

/* ---- meadow (design-05): warm cream, colored corner blocks, serif ---- */
html[data-theme="meadow"] {
  --bg: #efe9dc;
  --ink: #21201b;
  --title-font: Georgia, "Times New Roman", serif;
  --title-weight: 500;
  --title-transform: none;
  --title-align: center;
  --title-color: #21201b;
  --post-font: Georgia, "Times New Roman", serif;
  --post-style: normal;
  --post-weight: 500;
  --post-color: #21201b;
  --input-bg: #fffdf8;
  --input-border: 1px solid #d8cfbb;
  --accent: #1f1d18;
  --accent-ink: #fff;
  --accent-shape: 50%;
  --surface: #f6f1e6;
  --surface-radius: 14px;
  --surface-pad: clamp(1.3rem, 4vw, 2.2rem);
  --surface-border: 1px solid #ddd3bf;
  --meta-color: #7a7363;
  --icon-fill: #21201b;
  --icon-line: #21201b;
  --icon-size: 50px;
  --icon-top: 1.7rem;
  --icon-left: var(--gutter);
}
/* decorative edge blocks — design-05 shows rounded color blocks peeking in
   from the page edges (sage, tan, orange, navy), not corner triangles */
html[data-theme="meadow"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='130'%3E%3Crect width='220' height='130' rx='28' fill='%23a9bb97'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='120'%3E%3Crect width='210' height='120' rx='28' fill='%23e2d2ab'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='160'%3E%3Crect width='230' height='160' rx='28' fill='%23d6913f'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Crect width='220' height='140' rx='28' fill='%233c5c82'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position:
    left -70px top 6%,
    right -70px top 3%,
    right -90px top 46%,
    left -80px bottom 7%;
}
html[data-theme="meadow"] .screen { position: relative; z-index: 1; }

/* ---- midnight (dark): minimal dark twin of "clean" ---- */
html[data-theme="midnight"] {
  --bg: #0e0e12;
  --ink: #ececf1;
  --title-font: "Helvetica Neue", Arial, system-ui, sans-serif;
  --title-weight: 800;
  --title-transform: uppercase;
  --title-align: center;
  --title-color: #f5f5f8;
  --post-font: Georgia, "Times New Roman", serif;
  --post-style: italic;
  --post-weight: 500;
  --post-color: #e8e8ee;
  --input-bg: #1a1a20;
  --input-ink: #f5f5f8;
  --input-border: 1px solid #2c2c34;
  --input-shadow: none;
  --accent: #f5f5f8;
  --accent-ink: #0e0e12;
  --accent-shape: 50%;
  --surface: transparent;
  --meta-color: #8a8a94;
  --chip-bg: rgba(255,255,255,.08);
  --icon-fill: transparent;
  --icon-line: #27272e;   /* faint light-on-dark watermark, line only */
  --icon-size: min(46vw, 430px);
  --icon-top: -2.2rem;
  --icon-left: -4.5rem;
}

/* ---- slate (dark): cards + cool blue accent, dark twin of "sky" ---- */
html[data-theme="slate"] {
  --bg: linear-gradient(165deg, #0f131a 0%, #161c26 100%);
  --ink: #dfe6f0;
  --title-font: "Helvetica Neue", Arial, system-ui, sans-serif;
  --title-weight: 800;
  --title-transform: none;
  --title-align: center;
  --title-color: #eef2f8;
  --post-font: Georgia, "Times New Roman", serif;
  --post-style: normal;
  --post-weight: 500;
  --post-color: #e6edf6;
  --input-bg: #1b212c;
  --input-ink: #eef2f8;
  --input-border: 1px solid #2b3340;
  --input-shadow: 0 8px 24px rgba(0,0,0,.45);
  --accent: #5b8def;
  --accent-ink: #0b0e13;
  --accent-shape: 50%;
  --surface: #1b212c;
  --surface-radius: 18px;
  --surface-pad: clamp(1.4rem, 4vw, 2.4rem);
  --surface-shadow: 0 12px 32px rgba(0,0,0,.5);
  --surface-border: 1px solid #2a3240;
  --meta-color: #8895a8;
  --chip-bg: rgba(255,255,255,.07);
  --icon-fill: #5b8def;
  --icon-line: #eef2f8;
  --icon-size: 52px;
  --icon-top: 1.7rem;
  --icon-left: var(--gutter);
}

/* ---- parlor (design-07): cream header, deep green body, gilt-framed card
        with a red botanical side panel (placeholder SVG for now) ---- */
html[data-theme="parlor"] {
  --bg: #1d3c30;
  --ink: #f3ead8;
  --hero-bg: #f1e8d4;
  --hero-pad-top: 2.6rem;
  --title-font: Georgia, "Times New Roman", serif;
  --title-weight: 600;
  --title-transform: none;
  --title-align: center;
  --title-color: #232820;
  --title-size: clamp(2.4rem, 7.5vw, 4.6rem);
  --post-font: Georgia, "Times New Roman", serif;
  --post-style: normal;
  --post-weight: 500;
  --post-color: #2b2a22;
  --post-size: clamp(1.5rem, 4.6vw, 2.8rem);
  --input-bg: #fbf6e9;
  --input-ink: #2b2a22;
  --input-border: 1px solid #d9cdab;
  --input-shadow: none;
  --accent: #20211c;
  --accent-ink: #f3ead8;
  --accent-shape: 999px;
  --surface: #f4edda;
  --surface-radius: 10px;
  --surface-pad: clamp(1.4rem, 4vw, 2.4rem);
  --surface-border: 1px solid #c8a24a;
  --meta-color: #877c5c;
  --chip-bg: rgba(243, 234, 216, 0.12);
  --icon-fill: #232820;
  --icon-line: #232820;
  --icon-size: 52px;
  --icon-top: 1.7rem;
  --icon-left: var(--gutter);
  --flourish-color: #b3892f;
  --panel-w: clamp(72px, 14vw, 140px);
}
html[data-theme="parlor"] .delete-btn { width: 3.4rem; }
/* gilt double frame: border (from --surface-border) + offset outline */
html[data-theme="parlor"] .post--today {
  outline: 1px solid #c8a24a;
  outline-offset: 4px;
  padding-left: calc(var(--panel-w) + var(--surface-pad));
}
/* red botanical panel down the card's left side */
html[data-theme="parlor"] .post--today::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--panel-w);
  border-radius: var(--surface-radius) 0 0 var(--surface-radius);
  background: #9c3f2c url("flourishes/botanic-panel.svg") center / auto 86% no-repeat;
}

/* ---------------- Responsive: portrait / mobile ---------------- */
@media (orientation: portrait), (max-width: 640px) {
  .hero { min-height: 40vh; }
  .today { min-height: 60vh; }
  .post-actions {
    top: 0; right: 0; transform: none;
    gap: 0.4rem;
  }
  .delete-btn {
    width: 2.6rem; height: 2.6rem; font-size: 1.3rem;
  }
  .post--today .post-text { padding-right: 6.2rem; }
  html[data-theme="editorial"] .delete-btn {
    width: 3.1rem; height: 3.6rem; border-radius: 12px; font-size: 1.5rem;
  }
  html[data-theme="parlor"] { --panel-w: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}