:root {
    --teal: #0D9488;
    --teal-dark: #115E59;
    --ink: #1F2933;
    --muted: #5B6670;
    --line: #E3E7EA;
    --bg: #FFFFFF;
    --bg-soft: #F5F7F8;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.55;
}
a { color: var(--teal-dark); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--teal-dark); outline-offset: 3px; }

.site-header { border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; }
.wordmark { color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; }
.wordmark-sub { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); letter-spacing: 0; }

.page { max-width: 46rem; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2; margin: 0 0 1rem; letter-spacing: -0.015em; }
p { max-width: 38rem; }
.notice { background: var(--bg-soft); border-left: 4px solid var(--teal); padding: 1rem 1.25rem; margin: 1.5rem 0; }
.back { display: inline-block; margin-top: 1rem; }

/* Big buttons: light teal with large bold white text (meets WCAG AA for large text) */
.big-buttons { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 640px) { .big-buttons { grid-template-columns: 1fr 1fr; } }
.big-button {
    display: flex; align-items: center; justify-content: center;
    min-height: 6rem; padding: 1.25rem;
    background: var(--teal); color: #fff;
    font-size: 1.3rem; font-weight: 700; text-decoration: none; text-align: center;
    border-radius: 14px; border: 0; cursor: pointer;
}
.big-button:hover { background: var(--teal-dark); }
.big-button.test { background: var(--bg-soft); color: var(--teal-dark); border: 2px dashed var(--teal); }

/* Test page */
.controls { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.btn {
    min-height: 3.25rem; padding: 0.75rem 1.25rem;
    background: var(--teal); color: #fff; border: 0; border-radius: 10px;
    font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer;
}
.btn:hover { background: var(--teal-dark); }
.flower-stage { min-height: 16rem; display: flex; align-items: center; justify-content: center; background: var(--bg-soft); border-radius: 14px; }
.flower-stage svg { width: min(14rem, 70vw); height: auto; }
.flower-hidden { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .flower-stage svg { transition: transform .2s ease; } }

/* Make the hidden attribute win over display:flex rules */
[hidden] { display: none !important; }
.show-button { position: fixed; z-index: 10; margin: 0; }

/* Drawing page: full-screen layer; only the circles catch the pointer */
.drawing-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; overflow: visible; }
.drawing-line { stroke: var(--ink); stroke-linecap: round; }
.drawing-end { fill: var(--teal); pointer-events: auto; cursor: grab; touch-action: none; }
.drawing-end:hover, .drawing-end.dragging { fill: var(--teal-dark); }
.drawing-end.dragging { cursor: grabbing; }
.drawing-end:focus { outline: none; }
.drawing-end:focus-visible { stroke: var(--teal-dark); stroke-width: 3px; stroke-opacity: .45; }