:root { --ink: #182128; --muted: #667064; --paper: #d9f06a; --line: rgba(24,33,40,.18); --coral: #ee7359; --leaf: #70a06d; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: 'DM Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }.garden-shell { max-width: 1480px; min-height: 100vh; margin: auto; padding: 0 5vw; overflow: hidden; }.project-nav { height: 84px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.back-link { color: var(--muted); }.back-link:hover { color: var(--ink); }.project-id { display: flex; gap: 15px; }.project-id span { color: var(--muted); }.project-id strong { color: var(--coral); font-weight: 400; }.nav-stamp { color: var(--muted); }
.garden-layout { display: grid; grid-template-columns: minmax(285px, .7fr) minmax(480px, 1.3fr); gap: 8vw; align-items: center; min-height: calc(100vh - 84px); padding: 68px 0 83px; }.eyebrow, .control-group label, .control-label output, .palette-picker legend, .poster-topline, .poster-caption, .poster-corner, .studio-note, .project-footer { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }.eyebrow { color: var(--coral); margin: 0 0 26px; }.seed-mark { display: inline-block; margin-right: 8px; color: var(--coral); }.studio-controls h1 { margin: 0 0 27px; font-size: clamp(63px, 8.6vw, 119px); line-height: .78; letter-spacing: -.1em; font-weight: 600; }.studio-controls h1 em { font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: var(--coral); letter-spacing: -.1em; }.intro { max-width: 350px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
#garden-form { max-width: 390px; margin-top: 48px; }#garden-form > label { display: block; margin-bottom: 9px; font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; }#phrase { width: 100%; padding: 13px 0; border: 0; border-bottom: 1px solid var(--ink); outline: 0; background: transparent; color: var(--ink); font-size: 22px; letter-spacing: -.04em; }#phrase:focus { border-color: var(--coral); }.control-group { margin-top: 23px; }.control-label { display: flex; justify-content: space-between; margin-bottom: 9px; }.control-label label { color: var(--muted); }.control-label output { color: var(--ink); }.control-group input[type="range"] { width: 100%; height: 2px; accent-color: var(--coral); }.palette-picker { padding: 0; margin: 28px 0 0; border: 0; }.palette-picker legend { padding: 0; margin-bottom: 11px; color: var(--muted); }.palette-options { display: flex; gap: 11px; }.palette { width: 39px; height: 39px; display: flex; flex-direction: column; padding: 6px; gap: 3px; border: 1px solid transparent; border-radius: 50%; background: var(--palette-paper); transition: transform .2s, box-shadow .2s; }.palette i { display: block; width: 100%; height: 7px; border-radius: 7px; background: var(--palette-ink); }.palette i:nth-child(2) { background: var(--palette-accent); }.palette i:nth-child(3) { background: var(--palette-leaf); }.palette:hover, .palette.is-active { transform: scale(1.13); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink); }.palette[data-palette="chlorophyll"] { --palette-paper: #d9f06a; --palette-ink: #182128; --palette-accent: #ee7359; --palette-leaf: #70a06d; }.palette[data-palette="orchard"] { --palette-paper: #f5bc79; --palette-ink: #2a2724; --palette-accent: #bd584c; --palette-leaf: #5d8257; }.palette[data-palette="twilight"] { --palette-paper: #31395e; --palette-ink: #f2e7c5; --palette-accent: #e98987; --palette-leaf: #8db9ae; }.palette[data-palette="sundae"] { --palette-paper: #f4cadc; --palette-ink: #34283c; --palette-accent: #7559ad; --palette-leaf: #94ae79; }.button-row { display: flex; gap: 8px; margin-top: 30px; }.seed-button, .download-button { flex: 1; padding: 14px 10px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .07em; transition: transform .2s, background .2s; }.download-button { background: var(--ink); color: var(--paper); }.seed-button:hover, .download-button:hover { transform: translateY(-2px); }.seed-button:hover { background: rgba(255,255,255,.35); }.download-button:hover { background: var(--coral); border-color: var(--coral); }.button-row span { margin-left: 6px; font-size: 14px; }.studio-note { display: flex; gap: 12px; margin: 35px 0 0; color: var(--muted); line-height: 1.55; text-transform: none; letter-spacing: 0; }.studio-note > span { display: block; width: 34px; height: 1px; margin-top: 7px; background: var(--coral); }
.poster-column { min-width: 0; }.poster-topline { display: flex; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid var(--line); color: var(--muted); }.poster-topline span:last-child { color: var(--coral); }.poster-frame { position: relative; width: min(100%, 620px); margin: 17px auto 0; border: 1px solid rgba(24,33,40,.25); padding: 12px; background: rgba(255,255,255,.25); box-shadow: 14px 16px 0 rgba(24,33,40,.09); }.poster-frame canvas { display: block; width: 100%; height: auto; background: var(--paper); }.poster-corner { position: absolute; z-index: 2; color: var(--ink); font-size: 9px; writing-mode: vertical-rl; pointer-events: none; }.corner-a { top: 22px; left: 3px; transform: rotate(180deg); }.corner-b { right: 3px; bottom: 22px; }.poster-caption { display: flex; justify-content: space-between; gap: 12px; width: min(100%, 620px); margin: 22px auto 0; color: var(--muted); font-size: 9px; }.poster-caption b { color: var(--coral); font-weight: 400; }.project-footer { display: flex; justify-content: space-between; padding: 25px 0; color: var(--muted); border-top: 1px solid var(--line); }.project-footer a { color: var(--ink); }.project-footer a:hover { color: var(--coral); }
@media (max-width: 900px) { .garden-layout { grid-template-columns: 1fr; gap: 62px; }.studio-controls { max-width: 550px; }.poster-column { width: 100%; }.poster-frame, .poster-caption { margin-left: 0; margin-right: 0; } }
@media (max-width: 570px) { .garden-shell { padding: 0 19px; }.project-nav { height: 69px; }.project-id span, .nav-stamp { display: none; }.garden-layout { padding-top: 55px; }.studio-controls h1 { font-size: 80px; }.poster-frame { padding: 7px; }.poster-caption { flex-wrap: wrap; line-height: 1.5; }.project-footer { flex-wrap: wrap; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { transition-duration: .01ms !important; } }