.idea-garden-page { --accent: #668c58; --garden-ink: #27332a; --garden-muted: #72766a; }
.idea-garden-page .site-nav a[aria-current="page"] { color: var(--accent); }
.idea-garden-page .site-nav a:hover, .idea-garden-page .header-link:hover { color: var(--accent); }
.idea-garden-page .site-footer { border-color: var(--line); }

.garden-hero { min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8%; padding-top: 54px; padding-bottom: 76px; }
.garden-hero-copy { max-width: 520px; padding-block: 20px; }
.garden-hero-copy .eyebrow { font-size: 9px; }
.garden-hero h1 { margin: 0 0 21px; font-size: clamp(64px, 8vw, 94px); font-weight: 500; line-height: .91; letter-spacing: -.085em; }
.garden-hero h1 em, .garden-section-heading h2 em, .world-builder-copy h2 em, .garden-end h2 em { color: var(--accent); font-family: var(--serif); font-weight: 500; }
.garden-hero-copy > p:not(.eyebrow) { max-width: 450px; margin: 0 0 25px; color: #67685d; font-size: 12px; line-height: 1.85; }
.garden-hero-art { min-height: 430px; position: relative; overflow: hidden; border: 1px solid #d9d6c9; background: radial-gradient(ellipse at 47% 44%, #e7edda 0, #ebe9dc 34%, #e1e1d2 100%); }
.garden-art-sun { position: absolute; top: 18%; right: 24%; width: 55px; aspect-ratio: 1; border-radius: 50%; background: #e5b56e; box-shadow: 0 0 0 15px #e5b56e1f, 0 0 55px #f7d3989c; }
.garden-art-orbit { position: absolute; top: 20%; left: 14%; width: 70%; height: 58%; border: 1px solid #7d91724e; border-radius: 50%; transform: rotate(-30deg); }
.garden-art-orbit.orbit-two { top: 28%; left: 21%; width: 61%; height: 45%; transform: rotate(34deg); border-color: #85977b63; }
.garden-art-stem { position: absolute; bottom: 14%; left: 49%; width: 2px; height: 46%; transform: rotate(2deg); transform-origin: bottom; background: linear-gradient(0deg, #687d54, #80a767); }
.garden-art-stem.stem-two { left: 34%; height: 36%; transform: rotate(-25deg); }
.garden-art-stem.stem-three { left: 64%; height: 32%; transform: rotate(24deg); }
.garden-art-leaf { position: absolute; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #729163; border-radius: 50% 50% 50% 4px; transform: rotate(-34deg); background: #91ad7d; color: #f6f2e5; font-size: 24px; box-shadow: 0 7px 18px #425b3b21; }
.garden-art-leaf.leaf-one { left: 22%; top: 40%; }
.garden-art-leaf.leaf-two { left: 46%; top: 28%; transform: rotate(18deg); background: #b0bb83; }
.garden-art-leaf.leaf-three { right: 17%; top: 49%; transform: rotate(54deg); background: #718c67; }
.garden-art-label, .garden-art-caption { position: absolute; z-index: 3; color: #646e5e; font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
.garden-art-label { top: 17px; left: 19px; }
.garden-art-caption { bottom: 17px; left: 19px; }
.garden-art-number { position: absolute; right: 18px; bottom: 11px; color: #778469; font-family: var(--serif); font-size: 34px; font-style: italic; }

.seed-maker, .world-builder, .seed-cards, .seed-shelf { padding-top: 82px; padding-bottom: 95px; border-top: 1px solid var(--line); }
.garden-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-top: 31px; }
.garden-section-heading h2, .world-builder-copy h2 { margin: 0; font-size: clamp(39px, 5vw, 55px); font-weight: 500; line-height: 1.04; letter-spacing: -.07em; }
.garden-section-heading > div > p { margin: 12px 0 0; color: var(--garden-muted); font-size: 11px; line-height: 1.7; }
.garden-side-note { color: #8b8a7d; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; line-height: 1.8; text-align: right; }
.seed-workbench { max-width: 930px; margin: 31px auto 0; padding: 22px; border: 1px solid #d6d1c4; background: #eeeae0; }
.seed-type-picker { display: flex; flex-wrap: wrap; gap: 7px; }
.seed-type { min-height: 38px; padding: 0 13px; border: 1px solid #d1caba; background: transparent; color: #6c6c60; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.seed-type span { margin-right: 6px; color: #778b68; font-size: 12px; }
.seed-type:hover, .seed-type:focus-visible { border-color: #758d66; color: #344431; }
.seed-type.is-active { border-color: #718762; background: #dfe6d5; color: #344431; }
.seed-type:focus-visible, .garden-button:focus-visible, .world-output-bottom button:focus-visible, .saved-seed button:focus-visible, .seed-card:focus-visible { outline: 2px solid #668c58; outline-offset: 3px; }
.seed-result { min-height: 230px; position: relative; display: flex; flex-direction: column; justify-content: center; margin-top: 15px; padding: 33px 36px; overflow: hidden; border: 1px solid #4f6750; background: radial-gradient(ellipse at 83% 9%, #628b5b27, transparent 37%), linear-gradient(139deg, #1e2d25, #26392f 61%, #1a2924); color: #f0eee1; }
.seed-result::after { content: '✳'; position: absolute; right: 27px; bottom: -47px; color: #d7e8c20b; font-size: 180px; pointer-events: none; }
.seed-result-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; color: #a9c39e; font-family: var(--mono); font-size: 7px; letter-spacing: .14em; }
.seed-sprout { color: #b8da9d; font-size: 19px; }
.seed-result > p { position: relative; z-index: 1; max-width: 710px; }
#seed-prompt { margin: 26px 0 11px; font-family: var(--serif); font-size: clamp(23px, 3vw, 34px); line-height: 1.28; }
.seed-twist { max-width: 640px; margin: 0; color: #b3c0ad; font-size: 10px; line-height: 1.7; }
.seed-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.garden-button { min-height: 40px; padding: 0 13px; border: 1px solid #cfcaba; background: transparent; color: #5a5e52; font-family: var(--mono); font-size: 8px; letter-spacing: .03em; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.garden-button:hover { transform: translateY(-2px); border-color: #829477; background: #e8e9dc; }
.garden-button-primary { border-color: #4f6b53; background: #536f56; color: #f8f4e9; }
.garden-button-primary:hover { border-color: #3d5941; background: #3e5d43; }
.garden-button-quiet { margin-left: auto; }
.garden-live { min-height: 16px; margin: 11px 0 0; color: #7d7e70; font-family: var(--mono); font-size: 7px; letter-spacing: .05em; }

.world-builder-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8%; align-items: center; margin-top: 34px; }
.world-builder-copy h2 { font-size: clamp(40px, 5vw, 57px); }
.world-builder-copy > p { max-width: 425px; margin: 15px 0 24px; color: #69695f; font-size: 11px; line-height: 1.8; }
.world-controls { display: grid; gap: 12px; }
.world-controls label { display: grid; gap: 6px; color: #79786d; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.world-controls select { width: 100%; min-height: 41px; padding: 0 32px 0 11px; appearance: none; border: 1px solid #d3cdbf; border-radius: 0; background: #f0ece3; color: #41453c; font: 10px var(--sans); letter-spacing: 0; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, #77816e 50%), linear-gradient(135deg, #77816e 50%, transparent 50%); background-position: calc(100% - 15px) 17px, calc(100% - 11px) 17px; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.world-controls select:focus-visible { outline: 2px solid #668c58; outline-offset: 2px; }
.world-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.world-output-card { min-height: 355px; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 39px; overflow: hidden; border: 1px solid #d8d1c3; background: radial-gradient(circle at 16% 18%, #d8c99c26 0 2px, transparent 3px), radial-gradient(circle at 79% 28%, #d8c99c35 0 1px, transparent 2px), radial-gradient(circle at 59% 77%, #a5ad8625 0 2px, transparent 3px), linear-gradient(145deg, #e9e5d8, #e2e1d2); }
.world-output-label { position: absolute; top: 20px; left: 22px; color: #777568; font-family: var(--mono); font-size: 7px; letter-spacing: .13em; }
#world-output { max-width: 445px; margin: 15px 0 34px; color: #3c4338; font-family: var(--serif); font-size: clamp(19px, 2.4vw, 27px); line-height: 1.48; }
.world-output-bottom { position: absolute; right: 20px; bottom: 18px; left: 22px; display: flex; justify-content: space-between; align-items: center; color: #77796a; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.world-output-bottom button { padding: 8px 0 8px 10px; border: 0; background: transparent; color: #4e654b; font: inherit; letter-spacing: inherit; cursor: pointer; }
.world-output-bottom button:hover { color: #253c2b; }
.world-stamp { position: absolute; top: 56px; right: 20px; display: grid; width: 55px; aspect-ratio: 1; place-content: center; transform: rotate(11deg); border: 1px solid #a96f50a8; border-radius: 50%; color: #9a624a; font-family: var(--mono); font-size: 6px; letter-spacing: .1em; line-height: 1.5; text-align: center; }

.seed-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 29px; }
.seed-card { min-height: 273px; display: flex; flex-direction: column; align-items: flex-start; padding: 17px 16px 14px; border: 1px solid #d7d0c3; background: #eeeae0; color: #30342d; text-align: left; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.seed-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 10px 22px #3c362016; }
.seed-card-mark, .seed-card-prompt { color: #73766a; font-family: var(--mono); font-size: 7px; letter-spacing: .1em; }
.seed-card-art { width: 100%; height: 93px; display: grid; place-items: center; margin: 12px 0; background: #dcdcca; color: #718359; font-size: 36px; }
.seed-card-amber .seed-card-art { background: linear-gradient(135deg, #eee0bd, #d3bd82); color: #986d3e; }
.seed-card-green .seed-card-art { background: linear-gradient(135deg, #dce4d4, #9eaf91); color: #54724d; }
.seed-card-blue .seed-card-art { background: linear-gradient(135deg, #d8e1e1, #a5b8b7); color: #507274; }
.seed-card-rose .seed-card-art { background: linear-gradient(135deg, #ecdcd5, #d0a79a); color: #9b695a; }
.seed-card strong { font-family: var(--serif); font-size: 17px; font-weight: 500; }
.seed-card > span:nth-of-type(3) { min-height: 43px; margin-top: 5px; color: #77776b; font-size: 9px; line-height: 1.55; }
.seed-card-prompt { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 11px; border-top: 1px solid #d4cdbf; }
.seed-card-prompt b { color: var(--accent); font-size: 13px; }

.seed-shelf { padding-bottom: 77px; }
.saved-count { padding-bottom: 6px; color: #7d8175; font-family: var(--mono); font-size: 7px; letter-spacing: .11em; }
.saved-seeds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 25px; }
.saved-empty { grid-column: 1 / -1; margin: 0; padding: 27px 21px; border: 1px dashed #c9c4b7; color: #7a796e; font-family: var(--serif); font-size: 16px; font-style: italic; text-align: center; }
.saved-seed { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; padding: 18px; border: 1px solid #d7d0c3; background: #eeeae0; }
.saved-seed > span { grid-column: 1 / -1; color: #7b806e; font-family: var(--mono); font-size: 7px; letter-spacing: .12em; }
.saved-seed p { margin: 0; color: #41453c; font-family: var(--serif); font-size: 16px; line-height: 1.5; }
.saved-seed-actions { display: flex; align-items: start; gap: 6px; }
.saved-seed button { padding: 6px 7px; border: 1px solid #d0cabc; background: transparent; color: #686b60; font-family: var(--mono); font-size: 7px; cursor: pointer; }
.saved-seed button:hover { border-color: #7c916e; color: #344c34; }
.shelf-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 23px; padding: 15px 17px; border-left: 2px solid #89a375; background: #e9e8dc; }
.shelf-note > span { color: #779267; }
.shelf-note p { margin: 0; color: #66685d; font-family: var(--serif); font-size: 13px; font-style: italic; line-height: 1.65; }
.garden-end { min-height: 330px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-block: 60px; border-top: 1px solid var(--line); text-align: center; }
.garden-end .eyebrow { display: flex; }
.garden-end h2 { margin: 0; font-size: clamp(47px, 6vw, 69px); font-weight: 500; line-height: .99; letter-spacing: -.07em; }
.garden-end > p:not(.eyebrow) { max-width: 440px; margin: 15px 0 0; color: #747469; font-size: 11px; line-height: 1.7; }
.garden-end .guide-end-links { margin-top: 21px; }

@media (max-width: 820px) {
  .garden-hero { min-height: 560px; gap: 5%; }
  .garden-hero-art { min-height: 360px; }
  .world-builder-grid { gap: 5%; }
  .world-output-card { min-height: 390px; padding: 30px; }
  .seed-card-grid { grid-template-columns: repeat(2, 1fr); }
  .seed-card { min-height: 250px; }
}
@media (max-width: 620px) {
  .idea-garden-page .site-nav.is-open { background: #f5f0e8; }
  .garden-hero { display: flex; flex-direction: column; align-items: stretch; gap: 25px; padding-top: 40px; padding-bottom: 57px; }
  .garden-hero h1 { font-size: 67px; }
  .garden-hero-art { min-height: 330px; }
  .seed-maker, .world-builder, .seed-cards, .seed-shelf { padding-top: 64px; padding-bottom: 68px; }
  .garden-section-heading { align-items: flex-start; margin-top: 27px; }
  .garden-section-heading h2, .world-builder-copy h2 { font-size: 42px; }
  .garden-side-note { display: none; }
  .seed-workbench { margin-top: 23px; padding: 13px; }
  .seed-type-picker { display: grid; grid-template-columns: repeat(2, 1fr); }
  .seed-type { justify-content: center; }
  .seed-result { min-height: 260px; padding: 24px 20px; }
  #seed-prompt { font-size: 25px; }
  .garden-button { flex: 1 1 auto; }
  .garden-button-quiet { margin-left: 0; }
  .world-builder-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 27px; }
  .world-controls select { min-height: 44px; }
  .world-output-card { min-height: 330px; padding: 29px 24px; }
  .world-stamp { top: 46px; }
  #world-output { padding-right: 12px; font-size: 22px; }
  .seed-card-grid { gap: 8px; }
  .seed-card { min-height: 254px; padding: 12px; }
  .seed-card-art { height: 73px; }
  .seed-card strong { font-size: 15px; }
  .seed-card > span:nth-of-type(3) { min-height: 50px; font-size: 8px; }
  .saved-seeds { grid-template-columns: 1fr; }
  .saved-seed { padding: 14px; }
  .garden-end h2 { font-size: 53px; }
}
@media (prefers-reduced-motion: reduce) {
  .seed-type, .garden-button, .seed-card { transition: none; }
  .seed-card:hover, .garden-button:hover { transform: none; }
}
