.inside-intro { position: relative; isolation: isolate; overflow: hidden; display: block; padding: 0; min-height: max(100svh,var(--garden-required-height,0px)); }
.garden-base { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100svh; padding: max(7rem,calc(var(--garden-header-height,104px) + 6rem)) clamp(10rem,17vw,18rem); pointer-events: none; }
@media(max-width:900px) { .garden-base { padding-inline: 1.25rem; } }
.garden-welcome { position: relative; top: calc(var(--garden-header-height,104px) * .5 - 12px); z-index: 2; max-width: 100%; pointer-events: none; }
.garden-welcome :is(button,a) { pointer-events: auto; }
/* Loading and retry messages must not move the centered heading and button. */
.garden-feedback { position: absolute; top: 100%; inset-inline: 0; width: min(26rem, 100%); margin-inline: auto; }
.plant-button { border: 0; cursor: pointer; width: 300px; max-width: 100%; white-space: nowrap; transform: rotate(.5deg); transition: transform 240ms ease, background-color 240ms ease; }
.plant-button::before { background-image: url('/_immutable/972a2db8e8fda3b2/assets/plant-scribble.svg'); clip-path: inset(0 100% 0 0); transition: clip-path 300ms ease, opacity 180ms ease; }
.plant-button:focus-visible::before, .plant-button:active::before { clip-path: inset(0); }
.plant-button:active { transform: translateY(1px) rotate(-.3deg); }
.plant-button span { position: relative; z-index: 2; }
.plant-button .button-loader { position: absolute; z-index: 3; }
.plant-button .visually-hidden { position: absolute; }
.garden-link { display: block; margin: 1.3rem auto 0; border: 0; padding: .4rem; background: transparent; color: var(--quiet-ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
[hidden] { display: none !important; }
.garden-status { margin: .7rem 0 0; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 26rem; margin-inline: auto; }
.garden-status:empty { display: none; }
.flower-garden { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.garden-flower { --flower-art-scale: .88; --flower-hover-scale: 1; --flower-hover-rotation: 3deg; position: absolute; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: default; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 180ms ease; border-radius: 45%; }
/* Preserve each permanent flower's visible size and center in dense gardens. */
.garden-flower::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%,24px); height: max(100%,24px); transform: translate(-50%,-50%); border-radius: inherit; }
.garden-flower:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 3px; }
.garden-flower img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform: scale(var(--flower-art-scale)) rotate(var(--flower-tilt,0deg)); }
.garden-flower[aria-busy="true"] img, .garden-flower[data-image-state="error"] img { visibility: hidden; }
.garden-flower[data-image-state="ready"] img { animation: flower-fade-in 650ms ease-out; }
.garden-flower[data-image-state="error"] .button-loader { display: flex; opacity: .55; }
.garden-flower[data-image-state="error"] .flower-spinner { animation: none; }
.garden-flower .flower-spinner { width: min(34px,65%); height: min(34px,65%); }
.garden-flower[aria-expanded="true"], .garden-flower:active { transform: rotate(var(--flower-hover-rotation)) scale(var(--flower-hover-scale)); }
.garden-flower.just-planted { animation: flower-arrive 650ms ease-out; }
.flower-tooltip { position: fixed; z-index: 100; box-sizing: border-box; width: max-content; max-width: min(240px,calc(100vw - 20px)); padding: 10px 12px; border: 1px solid #dedfd7; border-radius: 9px; background: var(--paper); box-shadow: 0 4px 18px #17171414; color: var(--ink); font: 18px/1.3 var(--heading-font); text-align: left; overflow-wrap: anywhere; line-break: strict; pointer-events: auto; }
.flower-tooltip:has(.flower-tooltip-relationship:not([hidden])) .flower-tooltip-name { padding-bottom: .4rem; border-bottom: 1px solid #dedfd7; }
.flower-tooltip-relationship { margin-top: .45rem; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--quiet-ink); text-wrap: pretty; }
.flower-tooltip-edit { display: block; width: 100%; min-height: 36px; margin-top: .65rem; padding: .35rem .7rem; border: 1px solid #cdd5bf; border-radius: 7px; background: #eff2e8; color: var(--ink); font: 16px/1.4 var(--heading-font); white-space: nowrap; cursor: pointer; }
.flower-tooltip-edit:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 3px; }
.flower-tooltip-edit:disabled { cursor: wait; }
.flower-tooltip-edit .flower-spinner { width: 24px; height: 24px; }
.flower-tooltip-status { max-width: 210px; margin: .55rem 0 0; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--quiet-ink); text-wrap: pretty; }
.flower-tooltip-status:empty { display: none; }
:lang(ko) .flower-tooltip { word-break: keep-all; }
:lang(ja) .flower-tooltip, :lang(zh-Hans) .flower-tooltip { font-size: 16px; line-height: 1.5; }
@keyframes flower-arrive { from { opacity: 0; transform: translateY(14px) rotate(-9deg); } to { opacity: 1; transform: none; } }
@keyframes flower-fade-in { from { opacity: 0; } to { opacity: 1; } }
.flower-dialog { color: var(--ink); border: 2px solid var(--ink); border-radius: 22px 27px 20px 25px; padding: 1.5rem; width: min(850px, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--paper); box-shadow: 0 12px 50px #302e201a; }
.flower-dialog::backdrop { background: #ffffffc9; backdrop-filter: blur(5px); }
body:has(dialog[open]) { overflow: hidden; }
.dialog-heading { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.dialog-heading h2 { margin: 0; font-family: var(--heading-font); font-size: 2rem; line-height: 1.3; font-weight: 400; text-wrap: balance; }
:lang(ja) .dialog-heading h2, :lang(zh-Hans) .dialog-heading h2 { font-size: 1.55rem; line-height: 1.5; }
.close-dialog { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; background: transparent; color: inherit; }
.close-dialog svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.flower-editor { width: min(600px,calc(100% - 2rem)); }
.flower-editor .dialog-heading { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; gap: .35rem; align-items: center; }
.flower-editor .dialog-heading h2 { grid-column: 2; text-align: center; }
.flower-editor .dialog-heading .close-dialog { grid-column: 3; }
.editor-layout { display: grid; gap: 1rem; }
.drawing-stage { display: grid; place-items: center; min-width: 0; }
.drawing-area { position: relative; width: min(100%,430px,calc(100dvh - 410px)); min-width: 220px; aspect-ratio: 1; margin: auto; border: 1px solid #ecece5; border-radius: 10px 8px 12px 9px; overflow: hidden; background: white; }
#flower-canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: var(--pencil-cursor, url('/_immutable/b573bccc9039ed27/assets/cursor-pencil.svg')) 4 28, crosshair; }
#flower-canvas[data-tool="marker"] { cursor: var(--marker-cursor, url('/_immutable/6ff68cc0e01c8677/assets/cursor-marker.svg')) 4 28, crosshair; }
#flower-canvas[data-tool="eraser"] { cursor: url('/_immutable/7b04020c507fc79a/assets/cursor-eraser.svg') 4 24, cell; }
.canvas-hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; pointer-events: none; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #b8b8b3; }
.drawing-area.has-drawing .canvas-hint { display: none; }
.drawing-controls { min-width: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.flower-palette { display: grid; grid-template-columns: repeat(10,minmax(0,36px)); justify-content: center; gap: 10px; margin: 4px auto 1.1rem; }
.colour-swatch { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1px solid #0002; background: var(--swatch); cursor: pointer; position: relative; }
.colour-swatch[aria-pressed=true] { outline: 2px solid var(--ink); outline-offset: 3px; }
.colour-swatch[aria-pressed=true]::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: white; border: 1px solid #171714; position: absolute; inset: 0; margin: auto; }
.drawing-tools { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem; margin: 0 0 1rem; }
.stroke-tools, .brush-sizes, .history-tools { display: flex; gap: .35rem; flex-wrap: wrap; }
.drawing-tools button, .history-tools button { border: 1px solid #b4b5a9; border-radius: 8px 6px 7px 6px; background: white; padding: .45rem .6rem; min-height: 42px; font-size: 14px; color: inherit; cursor: pointer; white-space: nowrap; }
.drawing-tools button[aria-pressed=true] { background: #f0f1e6; border-color: var(--flower-stem); }
.brush-sizes button { width: 42px; display: grid; place-items: center; }
.brush-sizes span { display: block; width: var(--brush-dot); height: var(--brush-dot); background: currentColor; border-radius: 50%; }
.brush-sizes [data-brush-size="0"] { --brush-dot: 3px; }
.brush-sizes [data-brush-size="1"] { --brush-dot: 7px; }
.brush-sizes [data-brush-size="2"] { --brush-dot: 13px; }
.editor-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #ecece5; padding-top: 1rem; }
.flower-name-step { text-align: left; width: 100%; margin: 0 auto 1.5rem; flex-shrink: 0; }
.flower-name-step label { display: block; font: 14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; margin-bottom: .5rem; }
.flower-name-step input + label, .flower-name-step textarea + label { margin-top: 1.5rem; }
.garden-phrase { display: inline-block; white-space: nowrap; }
#flower-name, #flower-relationship, #flower-message { font: 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: .65rem .75rem; border: 1px solid #9e9f92; border-radius: 7px 9px 6px 8px; width: 100%; background: #fff; color: inherit; }
.drawing-note { font: 14px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--quiet-ink); margin: .65rem 0 1rem; overflow-wrap: break-word; text-wrap: pretty; }
#flower-relationship, #flower-message { display: block; resize: vertical; min-height: calc(2.8em + 1.3rem + 2px); }
.flower-message-note { margin: -.15rem 0 .5rem; color: var(--quiet-ink); font: 13px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-wrap: pretty; }
.editor-status { font: 14px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--ink); margin: .75rem 0 1.25rem; text-wrap: pretty; }
.editor-status:empty { display: none; }
.garden-primary, .garden-secondary { cursor: pointer; min-height: 46px; padding: .7rem 1rem; font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; border-radius: 10px 8px 12px 9px; border: 1.5px solid var(--ink); color: var(--ink); background: #f2f3e9; }
.garden-secondary { background: white; border-color: #a9aa9c; }
.editor-actions .garden-primary { min-width: 110px; }
.button-with-loader:not(.garden-flower) { position: relative; }
.button-loader { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; color: var(--flower-stem); }
.button-with-loader[aria-busy="true"] { opacity: 1; cursor: wait; }
.button-with-loader[aria-busy="true"] .button-label { opacity: 0; }
.button-with-loader:not(.garden-flower)[aria-busy="true"] .button-loader { display: flex; }
.flower-spinner { width: 34px; height: 34px; animation: flower-turn 2.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes flower-turn { from { transform: rotate(-9deg); } to { transform: rotate(351deg); } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(prefers-reduced-motion:reduce) { .flower-spinner, .garden-flower[data-image-state="ready"] img { animation: none; } }
.flower-dialog button, .garden-link, #flower-name, #flower-relationship, #flower-message { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.flower-dialog button { -webkit-tap-highlight-color: transparent; }
.close-dialog { border-radius: 50%; }
@media(hover:hover) and (pointer:fine) {
  .plant-button:hover { background: #f7faef; transform: translateY(-2px) rotate(-1.25deg); }
  .plant-button:hover::before { clip-path: inset(0); }
  .garden-flower:hover { transform: rotate(var(--flower-hover-rotation)) scale(var(--flower-hover-scale)); }
  .flower-dialog button:not(:disabled):hover { transform: translateY(-2px); }
  .colour-swatch:not(:disabled):hover { transform: translateY(-2px) scale(1.1) !important; box-shadow: 0 3px 8px #26282220; }
  .garden-primary:not(:disabled):hover { background: #e5e9d2; }
  .garden-secondary:not(:disabled):hover, .drawing-tools button:not(:disabled):hover, .history-tools button:not(:disabled):hover { background: #f1f3e9; border-color: var(--flower-stem); }
  .close-dialog:hover { background: #f1f3e9; }
  .garden-link:hover { color: var(--ink); text-decoration-thickness: 2px; }
  #flower-name:hover, #flower-relationship:hover, #flower-message:hover { border-color: var(--flower-stem); }
}
.flower-dialog button:not(:disabled):active { background-color: #e5e9d2; }
.flower-dialog .colour-swatch:not(:disabled):active { background-color: var(--swatch); transform: scale(.94); }
.garden-link:active { color: var(--ink); }
button:disabled { opacity: .42; cursor: default; }
.flower-dialog button:focus-visible, .flower-dialog input:focus-visible, .flower-dialog textarea:focus-visible, .garden-link:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 4px; }
.flower-viewer { width: min(510px,calc(100% - 2rem)); text-align: center; }
.flower-viewer h2 { overflow-wrap: anywhere; }
.flower-view-heading { min-width: 0; text-align: left; }
.flower-relationship { margin: .25rem 0 0; font: 17px/1.4 var(--heading-font); color: var(--quiet-ink); overflow-wrap: anywhere; text-wrap: pretty; }
:lang(ja) .flower-relationship, :lang(zh-Hans) .flower-relationship { font-size: 15px; line-height: 1.5; }
.flower-viewer.naming-flower h2 { overflow-wrap: normal; }
.flower-viewer .drawing-note:empty { display: none; }
.flower-preview-stage { position: relative; width: min(100%,330px); aspect-ratio: 1; margin: 0 auto 1.5rem; flex-shrink: 0; }
.flower-preview-stage .button-loader { display: flex; }
.flower-preview-stage[aria-busy="true"] canvas { visibility: hidden; }
#flower-preview { display: block; width: 100%; height: auto; }
.flower-viewer.naming-flower .flower-preview-stage { width: min(100%,230px); }
.viewer-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; flex-shrink: 0; }
#save-flower { min-width: 5rem; }
.flower-viewer .garden-link { margin-block: 1.25rem; }
#replace-flower { margin-top: 1.25rem; }
:lang(ko) .flower-dialog { word-break: keep-all; }
:lang(ja) .flower-dialog, :lang(zh-Hans) .flower-dialog { line-break: strict; }
@media(max-width:900px) { .plant-button { font-size: 1.7rem; min-height: 54px; width: 280px; padding-inline: 1rem; margin-top: 1.5rem; } :lang(ja) .plant-button, :lang(zh-Hans) .plant-button { font-size: 1.25rem; } }
@media(max-width:600px) {
  .flower-dialog { width: 100%; height: 100dvh; max-width: none; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: 1rem; }
  .dialog-heading { margin-bottom: 1rem; }
  .dialog-heading h2 { font-size: 1.8rem; }
  .flower-editor { padding: max(.75rem,env(safe-area-inset-top)) 1rem max(1.5rem,env(safe-area-inset-bottom)); }
  .flower-editor[open] { display: flex; flex-direction: column; }
  .flower-editor .dialog-heading { flex: 0 0 auto; }
  .flower-editor .dialog-heading h2 { font-size: clamp(1.35rem,6vw,1.8rem); }
  .flower-editor .editor-layout { flex: 1; min-height: min-content; grid-template-rows: minmax(220px,1fr) auto; gap: .75rem; }
  .flower-editor .drawing-stage { container-type: size; min-height: 220px; }
  .flower-editor .drawing-area { width: min(100cqw,100cqh); min-width: 0; margin: auto; }
  .flower-palette { grid-template-columns: repeat(10,minmax(0,34px)); gap: 7px; margin: 6px auto .75rem; }
  .drawing-tools { margin-bottom: .65rem; justify-content: space-between; flex-wrap: nowrap; gap: .4rem; }
  .stroke-tools, .brush-sizes { flex-wrap: nowrap; }
  .brush-sizes { margin-left: auto; }
  .drawing-tools button { padding-inline: .45rem; }
  .brush-sizes button { width: 36px; }
  .editor-actions { flex-wrap: wrap; justify-content: center; }
  .flower-editor .editor-actions { padding-top: 1rem; gap: 1rem; }
  .editor-actions .garden-primary { flex: 1; }
  .history-tools { justify-content: center; }
  .drawing-note { margin-bottom: .65rem; }
  .flower-viewer { display: none; }
  .flower-viewer[open] { display: flex; flex-direction: column; }
  .flower-viewer .dialog-heading { text-align: left; flex-shrink: 0; }
  .flower-viewer .editor-status { flex-shrink: 0; }
  .flower-preview-stage { margin-block: auto 1.5rem; }
  .flower-viewer .viewer-actions { margin-bottom: max(1rem,env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
  .stroke-tools, .brush-sizes { gap: .2rem; }
  .drawing-tools button { padding-inline: .3rem; }
  .brush-sizes button { width: 30px; }
}
@media(prefers-reduced-motion:reduce) { .garden-flower { animation: none !important; transition: none; } .flower-dialog button, .garden-link, #flower-name, #flower-relationship, #flower-message, .plant-button, .plant-button::before { transition: none; } .plant-button, .plant-button:hover, .plant-button:active { transform: none; } }

/* The controls exist only when a demo preset is explicitly opened. */
.garden-demo-panel { position: absolute; top: 5.5rem; inset-inline: 1rem; z-index: 3; width: fit-content; max-width: calc(100% - 2rem); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; padding: .6rem .8rem; border: 1px solid #d5d8c9; border-radius: 14px 12px 15px 13px; background: #fffffff5; color: var(--ink); font: 14px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.garden-demo-title { white-space: nowrap; }
.inside-intro:has(.garden-demo-panel) { min-height: max(100svh,44rem,var(--garden-required-height,0px)); }
.inside-intro:has(.garden-demo-panel) .garden-base { min-height: max(100svh,44rem); padding-top: calc(var(--demo-panel-bottom) + clamp(44px,8vw,117px) + 40px); }
.garden-demo-counts { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
.garden-demo-counts a { display: grid; place-items: center; min-width: 34px; min-height: 36px; padding: .3rem; border-radius: 7px; color: inherit; text-decoration: none; }
.garden-demo-counts a:active, .garden-demo-counts a[aria-current] { background: #e8edd9; }
@media(hover:hover) and (pointer:fine) { .garden-demo-counts a:hover { background: #e8edd9; } }
.garden-demo-counts a[aria-current] { box-shadow: inset 0 0 0 1px var(--flower-stem); }
.garden-demo-exit { color: var(--quiet-ink); text-underline-offset: 3px; white-space: nowrap; }
.garden-demo-panel a:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 2px; }

@media (any-pointer: coarse) {
  .flower-dialog .close-dialog { flex-basis: 44px; width: 44px; height: 44px; }
  .flower-editor .dialog-heading { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .flower-palette { width: 100%; max-width: 504px; grid-template-columns: repeat(auto-fit,44px); gap: 7px; }
  .drawing-tools { flex-wrap: wrap; justify-content: center; gap: .65rem; }
  .brush-sizes { margin-left: 0; }
  .drawing-tools button, .history-tools button { min-width: 44px; min-height: 44px; }
  .brush-sizes button { width: 44px; }
}
@media (any-pointer: coarse) and (max-width: 360px) {
  :lang(ja) .flower-editor .dialog-heading h2 { font-size: 1.25rem; }
}
#flower-sample-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
@media(max-width:600px) { .garden-demo-title { flex-basis: 100%; } .garden-demo-counts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; } .garden-demo-counts a { min-width: 0; } }

#flower-view-title { font-size: 1.7rem; }
:lang(ja) #flower-view-title, :lang(zh-Hans) #flower-view-title { font-size: 1.4rem; }