@font-face {                              /* Fraunces (SIL OFL), self-hosted: the page policy allows no outside fonts */
  font-family: "Fraunces"; font-style: italic; font-weight: 600 800; font-display: swap;
  src: url("fonts/fraunces-italic-latin.woff2") format("woff2");
}

/* Gleanscape "landscape" look. One self-contained layer on top of styles.css:
   softer, rounder frames that sit like terraces on the ground, a sky-glow at the
   top of the page, hills at the foot of the sidebar, and the painted title.
   Everything is tokens, so it can be tuned here. To switch the whole look off,
   remove the "landscape look" lines from index.html (see .rollback/README.md). */

:root {
  /* rounder everything: the existing rules all read these tokens */
  --r-sm: 9px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 28px;

  --ground: #e6d8b9;                      /* the soil the panels rest on */
  --sky: rgba(238, 190, 130, .34);        /* dawn glow along the top edge */
  --hill-far: rgba(184, 134, 47, .15);
  --hill-near: rgba(79, 111, 62, .19);

  --wm-a: #c08a2c; --wm-b: #cf5b3c; --wm-c: #8c2f3a; --wm-d: #4f6f3e;
  --wm-sun: #f0b43c;
  --wm-ridge-far: rgba(184, 134, 47, .75); --wm-ridge-near: rgba(79, 111, 62, .9);

  --shadow: 0 1px 2px rgba(60, 35, 10, .06), 0 10px 28px rgba(60, 35, 10, .10);
}
:root[data-theme="dark"] {
  --ground: #0d0805;
  --sky: rgba(217, 96, 109, .13);
  --hill-far: rgba(217, 174, 82, .10);
  --hill-near: rgba(143, 174, 120, .12);
  --wm-a: #efc765; --wm-b: #ee8a68; --wm-c: #e0707c; --wm-d: #9bbd83;
  --wm-sun: #ffd277;
  --wm-ridge-far: rgba(217, 174, 82, .8); --wm-ridge-near: rgba(143, 174, 120, .9);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --ground: #0d0805;
    --sky: rgba(217, 96, 109, .13);
    --hill-far: rgba(217, 174, 82, .10);
    --hill-near: rgba(143, 174, 120, .12);
    --wm-a: #efc765; --wm-b: #ee8a68; --wm-c: #e0707c; --wm-d: #9bbd83;
    --wm-sun: #ffd277;
    --wm-ridge-far: rgba(217, 174, 82, .8); --wm-ridge-near: rgba(143, 174, 120, .9);
  }
}

/* ============================================================ small touches */

* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.avatar { border-radius: 38%; }
.msg-user .msg-body { border-radius: var(--r-lg) var(--r-lg) 6px var(--r-lg); }
.composer { border-radius: var(--r-xl); padding: 7px 8px; }
.composer textarea { padding-left: 4px; }
.composer textarea:focus-visible { outline: none; }          /* the whole composer already shows focus */
.popover, .toast { border-radius: var(--r-lg); }
.menu-item, .conv-row, .assistant-head { border-radius: var(--r); }
.topbar { background: linear-gradient(to bottom, var(--sky), transparent 100%), var(--bg); border-bottom-color: transparent; }
.thread-empty .avatar { box-shadow: 0 10px 30px rgba(60, 35, 10, .22), inset 0 -3px 0 rgba(0, 0, 0, .12); }

/* ============================================================ terraces (desktop) */
/* On a wide screen the sidebar and the chat are two rounded panels resting on the
   ground. On a phone nothing here applies: the drawer stays a plain full-height sheet. */
@media (min-width: 821px) {
  .shell { background: var(--ground); }
  .sidebar {
    position: relative; margin: 10px 0 10px 10px; overflow: hidden;
    border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
  }
  .main {
    margin: 10px; overflow: hidden; background: var(--bg); position: relative;
    border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow);
  }
  .sidebar > * { position: relative; z-index: 1; }
  /* rolling hills at the foot of the sidebar */
  .sidebar::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 0; pointer-events: none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V70C40 40 80 52 120 66S210 92 272 52V150Z' fill='%23b8862f' fill-opacity='.55'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 272 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150V100C50 76 96 96 150 106S240 92 272 82V150Z' fill='%234f6f3e' fill-opacity='.55'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
    opacity: .38;
  }
  :root[data-theme="dark"] .sidebar::before { opacity: .22; }
  .side-foot { background: transparent; }
}
@media (min-width: 821px) and (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .sidebar::before { opacity: .22; }
}

/* ================================================================ the title */

.wordmark {
  position: relative; display: inline-block; font-weight: 700; font-style: italic;
  font-family: "Fraunces", var(--font-text); font-size: 27px; line-height: 1.05; letter-spacing: .005em;
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 72;
  padding-bottom: .36em; color: var(--accent); white-space: nowrap;
}
.login-card .wordmark { font-size: 46px; margin: 2px auto var(--s3); }
.wm-word { display: inline-block; filter: drop-shadow(0 .035em 0 color-mix(in srgb, var(--ink) 14%, transparent)); }
.wm-l {
  display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image:
    linear-gradient(104deg, transparent 38%, rgba(255, 252, 235, .95) 50%, transparent 62%),
    linear-gradient(96deg, var(--wm-a) 0%, var(--wm-b) 34%, var(--wm-c) 64%, var(--wm-d) 100%);
  background-size: 400% 100%, 6.1em 100%;
  background-repeat: no-repeat;
  background-position: 170% 0, calc(var(--i) * -.6em) 0;
}
/* a touch of sheen when you rest on the title */
.wordmark:hover .wm-l { animation: wm-sheen .9s calc(var(--i) * 45ms) var(--ease) 1 both; }

.wm-sun {
  position: absolute; left: 61%; top: .02em; width: .2em; height: .2em; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff6c8, var(--wm-sun) 55%, color-mix(in srgb, var(--wm-sun) 60%, var(--wm-b)));
  box-shadow: 0 0 .35em .08em color-mix(in srgb, var(--wm-sun) 55%, transparent);
}
.wm-ridge { position: absolute; left: 1%; bottom: 0; width: 98%; height: .3em; overflow: visible; pointer-events: none; }
.wm-hill { fill: none; stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wm-hill.far { stroke: var(--wm-ridge-far); }
.wm-hill.near { stroke: var(--wm-ridge-near); stroke-width: 1.9; }

@keyframes wm-sheen {
  from { background-position: 170% 0, calc(var(--i) * -.6em) 0; }
  to   { background-position: -70% 0, calc(var(--i) * -.6em) 0; }
}
@keyframes wm-rise {
  from { opacity: 0; transform: translateY(.55em) scale(.92); filter: blur(7px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wm-draw { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes wm-sunrise {
  from { opacity: 0; transform: translateY(.9em) scale(.6); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================ startup splash */

.splash {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; cursor: pointer;
  background:
    radial-gradient(ellipse 90% 60% at 50% 112%, color-mix(in srgb, var(--wm-sun) 34%, transparent), transparent 70%),
    linear-gradient(to bottom, var(--sky), transparent 55%),
    var(--bg);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.splash.leaving { opacity: 0; transform: scale(1.035); pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 0 20px; }
.splash .splash-mark { font-size: clamp(54px, 14vw, 132px); }
.splash .wm-l { opacity: 0; }
.splash .wm-sun { opacity: 0; }
.splash .wm-ridge { clip-path: inset(-20% 100% -20% 0); }
.splash-line {
  font-family: "Fraunces", var(--font-text); font-style: italic; font-size: clamp(15px, 2.2vw, 20px);
  letter-spacing: .32em; text-transform: uppercase; color: var(--ink-faint); opacity: 0;
}
.splash.play .wm-l {
  animation:
    wm-rise .5s calc(var(--i) * 32ms) var(--ease) both,
    wm-sheen .55s calc(.3s + var(--i) * 26ms) cubic-bezier(.4, 0, .2, 1) 1 both;
}
.splash.play .wm-sun { animation: wm-sunrise .5s .25s var(--ease) both; }
.splash.play .wm-ridge { animation: wm-draw .6s .1s var(--ease) both; }
.splash.play .splash-line { animation: wm-fade .45s .45s ease both; }
@keyframes wm-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: .8; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
  .wordmark:hover .wm-l { animation: none; }
}

/* ============================================== full-screen modes, softened */
/* Ramblefield and Orchard Drill rest on the ground like the chat panels do, with
   rounded glass chrome. Phones keep their edge-to-edge layout. */
@media (min-width: 821px) {
  .ramblefield, .orchard-drill { inset: 10px 10px 10px calc(var(--edge-w) + 8px); border-radius: 26px; box-shadow: var(--shadow-lg); }
  .edgebar { top: 10px; bottom: 10px; left: 10px; width: calc(var(--edge-w) - 10px); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .08); }
}
.rf-bg {
  background:
    radial-gradient(ellipse 60% 46% at 24% 22%, rgba(214, 150, 90, .13), transparent 70%),
    radial-gradient(ellipse 54% 44% at 80% 78%, rgba(90, 130, 90, .14), transparent 70%),
    radial-gradient(ellipse 80% 38% at 50% 108%, rgba(190, 80, 90, .16), transparent 70%),
    radial-gradient(ellipse at 50% 45%, #121820 0%, #080a0e 58%, #030304 100%);
}
.rf-stage { inset: 64px 26px 80px; }
.rf-tile-inner {
  border-radius: 24px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .10), 0 22px 56px rgba(0, 0, 0, .65);
}
.rf-tile.ready .rf-tile-inner { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .16), 0 22px 64px rgba(0, 0, 0, .7), 0 0 50px var(--rf-glow); }
.rf-tile:hover .rf-tile-inner, .rf-tile:focus-visible .rf-tile-inner { transform: scale(1.045); box-shadow: 0 0 0 2px rgba(255, 224, 170, .6), 0 30px 80px rgba(0, 0, 0, .8), 0 0 70px var(--rf-glow); }
.rf-shimmer { background: linear-gradient(110deg, #121a22 25%, #29353a 50%, #121a22 75%); background-size: 250% 100%; }
/* the label becomes a frosted pill resting low on the tile */
.rf-label {
  left: 10px; right: auto; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 13px; border-radius: 999px;
  background: rgba(10, 12, 16, .55); backdrop-filter: blur(10px); text-shadow: none;
  border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-actions { top: 10px; right: 10px; }
.rf-seed { grid-template-columns: 1fr auto; gap: 12px; }
.rf-seed-input {
  padding: 14px 24px; border: 1px solid var(--rf-chrome-line); border-radius: 999px;
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(10px); font-style: italic;
}
.rf-seed-input:focus { border-color: rgba(255, 220, 170, .6); box-shadow: 0 0 0 4px rgba(255, 196, 120, .12); }
.rf-estimate { padding-left: 24px; }
.rf-back, .rf-corner .icon-btn { border-radius: 50%; }
.rf-back { background: var(--rf-chrome); border: 1px solid var(--rf-chrome-line); }
.rf-crumbs {
  left: 50%; right: auto; transform: translateX(-50%); bottom: 14px; height: auto; max-width: calc(100% - 28px);
  padding: 6px; border-radius: 999px; background: rgba(12, 15, 20, .62); backdrop-filter: blur(14px);
  border: 1px solid var(--rf-chrome-line);
}
.rf-history { border-radius: 26px; }
@media (max-width: 820px) { .rf-crumbs { padding: 5px; } }

/* the explainer overlay and its stage take the same rounded, soft treatment */
.xp-controls, .xp-confirm .primary, .xp-confirm .ghost { border-radius: 999px; }
.explainer-row, .portrait-img { border-radius: var(--r-lg); }