:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 100%;
  line-height: 1.4;
  color: #fff8ed;
  background: #14251f;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { scroll-snap-type: y proximity; }
body { margin: 0; }
button { font: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #ffe2a3; outline-offset: 4px; }
button:disabled { cursor: default; }
#app {
  width: min(100%, 34rem);
  min-height: 100vh;
  min-height: 100svh;
  margin-inline: auto;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
}
.choices { display: grid; gap: 0.75rem; width: 100%; }
.home { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.9rem; padding-block: 0.25rem 1rem; }
.home-view {
  background-color: #f2eee5;
  background-image:
    radial-gradient(ellipse 62% 38% at 14% 18%, rgba(255, 255, 255, 0.38), transparent 78%),
    radial-gradient(ellipse 54% 42% at 84% 22%, rgba(207, 196, 177, 0.26), transparent 80%),
    radial-gradient(ellipse 76% 48% at 62% 58%, rgba(255, 255, 255, 0.24), transparent 78%),
    radial-gradient(ellipse 46% 38% at 25% 88%, rgba(210, 198, 178, 0.22), transparent 82%),
    radial-gradient(ellipse 50% 44% at 91% 90%, rgba(255, 255, 255, 0.29), transparent 80%);
  color: #314534;
  color-scheme: light;
}
.home h1 { margin: 0; text-align: center; color: #314534; font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 6vw, 1.875rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; }
.home h1::before { content: ""; display: block; width: 3.3rem; height: 1.7rem; margin: 0 auto 0.12rem; background: url("./images/title-sprig-laces.png") center / contain no-repeat; }
.home h1::after { content: ""; display: block; width: 5.2rem; height: 0.7rem; margin: 0.24rem auto 0; opacity: 0.5; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 30'%3E%3Cpath d='M10 16 C40 9 69 12 97 16 C124 20 149 19 171 12' fill='none' stroke='%2384927d' stroke-opacity='.35' stroke-width='.55' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.reset { padding: 0.7rem 1rem; border: 1px solid #728477; border-radius: 0.625rem; background: transparent; color: #cfdbc9; font-size: 1rem; }
.reset:active { background: #213b30; border-color: #fff8ed; color: #fff8ed; }
.home-view .reset { color: #4c5f50; border-color: #9aa79a; }
.home-view .reset:active { background: #e7e0d1; border-color: #314534; color: #314534; }
.places { --diameter: clamp(5.35rem, min(29vw, 14svh), 8.5rem); display: grid; grid-template-columns: repeat(2, var(--diameter)); justify-content: center; gap: 0.7rem 1rem; }
.place { position: relative; display: block; width: var(--diameter); height: var(--diameter); padding: 0; overflow: hidden; border: 2px solid #e5ddc7; border-radius: 50%; background: #263b31; }
.place img { position: absolute; max-width: none; height: auto; display: block; pointer-events: none; }
.place::after { content: ""; position: absolute; inset: 43% 0 0; z-index: 1; background: linear-gradient(to bottom, transparent, rgba(20, 37, 31, 0.76)); pointer-events: none; }
.place-label { position: absolute; inset: auto 0 0.55rem; z-index: 2; padding-inline: 0.2rem; color: #fff8ed; font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(0.72rem, 3.2vw, 1rem); line-height: 1.05; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.38); }
.place:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
.place:active { border-color: #fff; }
.quiet-menu { align-self: center; margin-top: 0.1rem; color: #5c6e60; font-size: 0.84rem; }
.quiet-menu summary { padding: 0.25rem 0.5rem; cursor: pointer; text-align: center; list-style: none; }
.quiet-menu summary::-webkit-details-marker { display: none; }
.quiet-menu summary::before { content: "⋯"; margin-right: 0.3rem; color: #788879; }
.quiet-menu[open] summary::before { content: "×"; }
.quiet-menu .reset { display: block; margin: 0.4rem auto 0; font-size: 0.9rem; }
.choice {
  width: 100%;
  min-height: clamp(4.5rem, 10svh, 5.8rem);
  padding: 0.85rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(242, 238, 229, 0.96);
  color: #314534;
  border: 1px solid rgba(242, 238, 229, 0.35);
  border-radius: 1rem;
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  overflow-wrap: break-word;
}
.choice:active:not(:disabled) { background: #fff8ed; border-color: #fff8ed; transform: translateY(1px); }
.choice:disabled { color: #78877b; background: rgba(242, 238, 229, 0.48); border-color: rgba(242, 238, 229, 0.2); }
.invitation-copy { display: flex; flex-direction: column; gap: 0.2rem; }
.invitation-label { font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(1.28rem, 5.3vw, 1.6rem); }
.invitation-subtitle { color: #667668; font-size: 0.84rem; letter-spacing: 0.015em; }
.choice-arrow { flex: 0 0 auto; color: #708271; font-size: 2rem; font-weight: 300; line-height: 1; }
.door { flex: 1; display: flex; flex-direction: column; gap: 1rem; padding-block: 0.5rem 1rem; }
.door-hero { position: relative; flex: 0 0 clamp(8.5rem, 27svh, 12rem); overflow: hidden; border-radius: 1.25rem; background: #263b31; isolation: isolate; }
.door-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(20, 37, 31, 0.82), rgba(20, 37, 31, 0.02) 62%); pointer-events: none; }
.door-hero img { position: absolute; max-width: none; height: auto; z-index: 0; display: block; }
.door-hero h1 { position: absolute; inset: auto 1.1rem 1rem; z-index: 2; margin: 0; color: #fff8ed; font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 400; line-height: 1.1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.reading { width: min(100%, 31rem); margin: auto; padding: clamp(4.5rem, 14svh, 8rem) 1rem clamp(4rem, 12svh, 7rem); text-align: center; }
.reading-kicker { margin: 0 0 0.65rem; color: rgba(242, 238, 229, 0.62); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.reading h1 { margin: 0 0 clamp(2rem, 7svh, 4rem); color: rgba(242, 238, 229, 0.8); font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: clamp(1.2rem, 5vw, 1.5rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.3; }
.reading p { margin: 0; color: #fff8ed; font-size: clamp(1.72rem, 6.6vw, 2.25rem); line-height: 1.48; font-weight: 400; overflow-wrap: break-word; white-space: pre-line; }
.reading-attribution { margin: 2rem 0 0 !important; color: rgba(242, 238, 229, 0.7) !important; font-size: 1rem !important; line-height: 1.4 !important; }
.reading:focus, h1:focus { outline: none; }
.controls { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 1rem; padding-block: 0.875rem; background: #14251f; }
.back, .use { min-height: 4rem; border-radius: 0.625rem; font-size: 1.1875rem; font-weight: 600; }
.back { padding: 0.75rem 1.125rem; border: 1px solid rgba(242, 238, 229, 0.55); background: transparent; color: #fff8ed; }
.back:active { background: #36533f; }
.use { flex: 1 1 10rem; padding: 0.875rem 1rem; border: 1px solid #f2eee5; background: #f2eee5; color: #314534; }
.use:active { background: #fff8ed; }
.use.undo { background: transparent; color: #fff8ed; }
@media (max-width: 350px) {
  #app { padding-inline: 1rem; }
  .choice { padding-inline: 1rem; }
  .reading p { font-size: 1.625rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

#app.reader { padding: 0; }
.reading-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  background: #14251f;
}
.reading-page::before,
.reading-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.reading-page::before { display: none; }
.reading-page::after { z-index: -1; background: #14251f; }
.reading-page .controls { position: static; margin-top: auto; background: transparent; }
.reading-page .back { background: rgba(20, 37, 31, 0.42); }
.reading-page .use { box-shadow: 0 0.35rem 1.2rem rgba(0, 0, 0, 0.14); }
.reading-page .use.undo { background: rgba(20, 37, 31, 0.42); }
.reading-page:focus { outline: none; }
@media (max-width: 350px) { .reading-page { padding-inline: 1rem; } }

.stillness { align-self: center; width: min(100%, 23rem); min-height: 3.5rem; padding: 0.75rem 1rem; border: 1px solid #314534; border-radius: 0.625rem; background: #314534; color: #f2eee5; font-size: 1.25rem; }
.stillness:active:not(:disabled) { background: #3d5748; }
.stillness:disabled { opacity: 0.5; }

.confirm-dialog {
  width: min(calc(100% - 2rem), 24rem);
  padding: 1.35rem;
  border: 1px solid rgba(242, 238, 229, 0.6);
  border-radius: 1rem;
  background: #f2eee5;
  color: #314534;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.28);
}
.confirm-dialog::backdrop { background: rgba(20, 37, 31, 0.58); }
.confirm-dialog p { margin: 0 0 1.2rem; font-family: Baskerville, "Iowan Old Style", "Palatino Linotype", Georgia, serif; font-size: 1.35rem; line-height: 1.3; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.65rem; }
.confirm-cancel, .confirm-mark { min-height: 2.9rem; padding: 0.65rem 0.9rem; border-radius: 0.55rem; font-size: 1rem; }
.confirm-cancel { border: 1px solid #9aa79a; background: transparent; color: #314534; }
.confirm-mark { border: 1px solid #314534; background: #314534; color: #f2eee5; }
.confirm-cancel:active { background: #e7e0d1; }
.confirm-mark:active { background: #3d5748; }