/* Quiet backgrounds are independent of the reading layout and never intercept input. */
body.public-page { isolation:isolate; }
.ambient-background { --pattern-ink:#74835a; --pattern-opacity:.09; --warm-a:#efc9bc52; --warm-b:#e2bbce30; --ambient-paper:#fef3f2; background:var(--ambient-paper); position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; contain:strict; }
.ambient-background[data-palette="matcha"] { --warm-a:#d8dfb952; --warm-b:#f0d3b839; --ambient-paper:#f5f5eb; }
.ambient-background[data-palette="gold"] { --warm-a:#edcb8457; --warm-b:#efbea239; --ambient-paper:#fff6e8; }
.ambient-background[data-accent="indigo"] { --pattern-ink:#5e7197; }
.ambient-background[data-strength="soft"] { --pattern-opacity:.15; }
.ambient-background[data-strength="clear"] { --pattern-opacity:.23; }
.ambient-warmth, .ambient-pattern, .ambient-particles { position:absolute; inset:0; width:100%; height:100%; }
.ambient-warmth { background:radial-gradient(ellipse at 12% 0,var(--warm-a),transparent 62%),radial-gradient(ellipse at 96% 90%,var(--warm-b),transparent 58%); }
[data-gradient="false"] .ambient-warmth { display:none; }
.ambient-pattern { background:var(--pattern-ink); opacity:var(--pattern-opacity); mask-repeat:repeat; mask-size:96px; mask-image:var(--pattern-image); }
[data-pattern="asanoha"], .pattern-swatch[data-pattern="asanoha"] { --pattern-image:url("/images/pattern-asanoha.svg"); }
[data-pattern="seigaiha"], .pattern-swatch[data-pattern="seigaiha"] { --pattern-image:url("/images/pattern-seigaiha.svg?v=72e0e2ae8d65"); }
[data-pattern="yabane"], .pattern-swatch[data-pattern="yabane"] { --pattern-image:url("/images/pattern-yabane.svg"); }
[data-pattern="shoji"], .pattern-swatch[data-pattern="shoji"] { --pattern-image:url("/images/pattern-shoji.svg"); }
[data-pattern="none"] .ambient-pattern { display:none; }
.ambient-background:not(.ambient-preview) .ambient-pattern { mask-image:var(--pattern-image),linear-gradient(90deg,#000,#0003 28%,#0001 55%,#0003 80%,#000); mask-size:96px,100% 100%; mask-repeat:repeat,no-repeat; mask-composite:intersect; }
.ambient-particles { display:block; opacity:.5; }
.public-page:has(> [data-atmosphere]) .region-footer > .component-full-width::before { background:#7a8a5d; mask-image:var(--footer-pattern); mask-size:48px; mask-repeat:repeat; opacity:.28; height:34px; }
.public-page:has(> [data-pattern="asanoha"]) { --footer-pattern:url("/images/pattern-asanoha.svg"); }
.public-page:has(> [data-pattern="seigaiha"]) { --footer-pattern:url("/images/pattern-seigaiha.svg?v=72e0e2ae8d65"); }
.public-page:has(> [data-pattern="yabane"]) { --footer-pattern:url("/images/pattern-yabane.svg"); }
.public-page:has(> [data-pattern="shoji"]) { --footer-pattern:url("/images/pattern-shoji.svg"); }
.public-page:has(> [data-pattern="none"]) .region-footer > .component-full-width::before { display:none; }
.atmosphere-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.65fr); gap:24px; align-items:start; }
.atmosphere-settings, .atmosphere-aside { display:grid; gap:20px; min-width:0; }
.design-form .atmosphere-section, .design-form .atmosphere-preview-panel { margin:0; padding:24px; }
.atmosphere-section h2 { margin:0 0 16px; }
.atmosphere-fieldset { border:0; min-width:0; padding:0; margin:20px 0; }
.atmosphere-fieldset legend { font-weight:600; margin:0 0 12px; padding:0; }
.motif-choices, .pattern-choices, .palette-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.palette-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
label.atmosphere-choice { position:relative; display:flex; margin:0; padding:14px 12px; cursor:pointer; border:1px solid var(--line); border-radius:10px; background:#fffcfa; min-width:0; line-height:1.4; transition:background .16s,border-color .16s; }
.atmosphere-choice:hover { border-color:#839369; background:#fbfaf4; }
.atmosphere-choice:has(input:checked) { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:#f2f5ea; }
.atmosphere-choice:has(input:focus-visible) { outline:3px solid #a7b78c; outline-offset:3px; }
.atmosphere-choice input[type="radio"] { position:absolute; top:12px; right:10px; width:15px; height:15px; margin:0; accent-color:var(--accent); z-index:2; }
.atmosphere-choice > span { pointer-events:none; display:flex; flex-direction:column; align-items:flex-start; gap:8px; width:100%; min-width:0; }
.atmosphere-choice strong { font:600 14px/1.4 var(--sans); overflow-wrap:anywhere; }
.atmosphere-choice small { font:11px/1.4 var(--sans); color:var(--accent); }
.motif-symbol { display:block; width:36px; height:38px; font:32px/1.2 var(--serif); color:#bd7086; }
.motif-fireflies { color:#9c8330; }
.motif-momiji { color:#b96535; }
.motif-snow { color:#819a9e; }
.pattern-swatch { display:block; width:100%; height:66px; background:#859666; mask:var(--pattern-image) repeat center / 60px; margin:10px 0 2px; opacity:.6; }
.pattern-swatch[data-pattern="none"] { background:linear-gradient(145deg,#fae8e1,#fef8f4); mask:none; border-radius:6px; opacity:1; }
.palette-swatch { height:34px; width:34px; border-radius:50%; border:1px solid #ddccc3; margin-top:8px; }
.palette-sakura { background:linear-gradient(135deg,#efc5cd,#f8dfbd); }
.palette-matcha { background:linear-gradient(135deg,#c1d39f,#eddfb5); }
.palette-gold { background:linear-gradient(135deg,#e6c27a,#f5e3c4); }
.atmosphere-feedback { padding:12px 14px; border-radius:8px; background:#f2f5ea; color:#48662f; font:14px/1.5 var(--sans); margin:16px 0; }
.season-explanation { margin:16px 0; }
.season-explanation > summary { font:600 14px/1.5 var(--sans); cursor:pointer; color:var(--accent); }
.season-explanation dl { margin:10px 0; font:13px/1.6 var(--sans); }
.season-explanation dl > div { display:flex; justify-content:space-between; gap:16px; padding:6px 0; border-bottom:1px solid var(--line); }
.season-explanation dd { margin:0; text-align:right; }
.atmosphere-preview-stage { position:relative; isolation:isolate; height:280px; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); margin:12px 0 16px; }
.ambient-background.ambient-preview { position:absolute; z-index:0; }
.atmosphere-preview-content { position:relative; z-index:1; text-align:center; padding:46px 12px; pointer-events:none; }
.atmosphere-preview-content h2 { font-size:34px; margin:4px 0 12px; }
.atmosphere-preview-content p { font:16px/1.7 var(--serif); margin:0; }
.preview-flower { color:#a9727c; font:25px/1 var(--serif); }
.atmosphere-preview-panel > .eyebrow { margin:0; color:var(--accent); font:12px/1.5 var(--sans); letter-spacing:.06em; }
.atmosphere-preview-panel h2 { margin:0 0 10px; }
.atmosphere-form .design-save { position:static; z-index:auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.atmosphere-reset { margin-top:20px; }
.atmosphere-form [hidden] { display:none !important; }
@media(min-width:1000px) { .atmosphere-aside { position:sticky; top:24px; } }
@media(max-width:900px) { .atmosphere-layout { grid-template-columns:minmax(0,1fr); } .atmosphere-aside { grid-row:1; position:sticky; top:8px; z-index:5; align-self:start; } .atmosphere-preview-panel + .atmosphere-preview-panel { display:none; } .atmosphere-preview-stage { height:150px; margin:8px 0; } .atmosphere-preview-content { padding:18px 12px; } .atmosphere-preview-content h2 { font-size:26px; margin:2px 0 6px; } .atmosphere-preview-content p { font-size:13px; } .atmosphere-preview-panel > .hint { font-size:12px; margin:8px 0; } .atmosphere-preview-panel { padding:14px; } .atmosphere-preview-panel > .button { min-height:36px; font-size:12px; } }
@media(max-width:420px) { .atmosphere-section, .atmosphere-preview-panel { padding:18px; } .palette-choices { gap:6px; } .palette-choices label.atmosphere-choice { padding:12px 8px; } .atmosphere-choice strong { font-size:13px; } .atmosphere-form .design-save button { width:100%; } }
@media(prefers-reduced-motion:reduce) { .atmosphere-choice { transition:none; } .ambient-particles { visibility:hidden; } }

/* The interval and its unit form a single readable field. */
.palette-rotation-settings { margin:16px 0; }
.palette-interval-input { display:flex; align-items:stretch; max-width:260px; margin-bottom:18px; }
.palette-interval-input input { min-width:0; width:100%; margin:0; border-radius:8px 0 0 8px; }
.palette-interval-input > span { display:flex; align-items:center; padding:0 14px; border:1px solid var(--line); border-left:0; border-radius:0 8px 8px 0; background:#f4eee7; font:14px/1.4 var(--sans); }
[data-palette-date-preview] { margin:16px 0; }

@media(max-width:900px) { .atmosphere-aside:has([data-palette-date-preview]:not([hidden])) { position:static; } }