:root{--yellow: #ffdd33;--pink: #e6215b;--pink-action: #d51b50;--white: #ffffff;--ink: #222222;--hairline: #e4e4e4;--tint: #fffae0;--garden-gap: clamp(16px, 2vw, 40px);--garden-padding: clamp(16px, 2vw, 48px);--toolbar-height: 72px;--spring: cubic-bezier(.34, 1.56, .64, 1)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--white);color:var(--ink);font-family:Nunito,system-ui,sans-serif;-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh;height:100dvh}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none;padding:18px 32px;border-bottom:1px solid var(--hairline)}.logo{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:30px;font-weight:800;letter-spacing:.04em}.logo-mark{display:inline-block;color:var(--pink);transition:transform .6s var(--spring)}.logo:hover .logo-mark{transform:rotate(72deg) scale(1.15)}.workspace{flex:1;min-height:0;display:flex}.lineage{order:-1;flex:0 0 clamp(176px,16vw,264px);min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:0;background:var(--yellow)}.tree{position:relative;flex:none;transform-origin:0 0;will-change:transform}.tree-stems{position:absolute;top:0;right:0;bottom:0;left:0}.tree-stems path{fill:none;stroke:var(--pink);stroke-width:2.5;stroke-linecap:round;transition:stroke-width .2s}.tree-stems path.on-stem{stroke-width:5}.tree-node{position:absolute;width:48px;transform:translate(-50%,-50%)}.tree-node.previewed{z-index:1}.lineage .bloom-canvas{border-radius:50%;background:var(--white)}.lineage .bloom-canvas.current{box-shadow:0 0 0 4px var(--pink)}.lineage .bloom-canvas.clickable{transition:transform .3s var(--spring),box-shadow .2s}.lineage .bloom-canvas.clickable:not(.current):hover,.lineage .bloom-canvas.clickable:not(.current):focus-visible{background:var(--white);box-shadow:0 0 0 2px var(--pink);transform:translateY(-3px)}.lineage .bloom-canvas.clickable:not(.current):focus-visible{outline:2px solid var(--pink);outline-offset:3px}.lineage .bloom-canvas.off-stem img{opacity:.4;transition:opacity .2s}.lineage .bloom-canvas.off-stem:hover img,.lineage .bloom-canvas.off-stem:focus-visible img{opacity:1}.garden{flex:1;min-width:0;min-height:0;overflow:auto;display:flex;padding:var(--garden-padding);container:garden / size}.garden-board{--panel-size: max( 224px, min(800px, calc((100cqw - var(--garden-gap)) / 2), calc(100cqh - var(--toolbar-height))) );display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--garden-gap);flex:none;width:min(100%,calc(var(--panel-size) * 2 + var(--garden-gap)));margin:auto}.parent,.seedlings{min-width:0}.header-actions{display:flex;align-items:center;gap:20px}.header-choice{padding:6px 0;border:0;background:none;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}.header-choice:hover{color:var(--pink)}.header-choice:focus-visible{outline:3px solid var(--ink);outline-offset:4px}.parent:focus-visible,.starting-heading:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.lineage-view{position:relative;flex:1;min-height:0;overflow:clip;touch-action:none;cursor:grab}.lineage-view.dragging,.lineage-view.dragging *{cursor:grabbing}.lineage-view:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}.lineage-view .tree{position:absolute;left:0;top:0;margin:0}.lineage-controls{display:flex;align-items:center;justify-content:center;flex:none;height:56px;gap:8px}.lineage-return-hint{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.lineage-return-hint.cue-hidden{visibility:hidden}.return-hint-pointer{position:absolute;top:0;right:0;bottom:0;left:0;fill:none;stroke:var(--pink-action);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.return-hint-bubble{position:absolute;display:flex;align-items:center;margin:0;padding:10px 12px;border-radius:16px;background:var(--pink-action);color:var(--white);font-size:12px;font-weight:800;line-height:1.5}.icon-button.primary.compact{width:32px;height:32px;background:var(--white);color:var(--pink)}.compact .icon-glyph{width:18px;height:18px}.lineage-controls .action-control:first-child .action-tooltip{left:0;right:auto}.starting-garden{flex-direction:column}.starting-board{width:min(100%,max(224px,min(680px,100cqw,calc(100cqh - 176px))));flex:none;margin:auto}.starting-intro{margin-bottom:20px}.starting-heading{margin:0 0 8px;font-size:23px;font-weight:800}.starting-intro p{margin:0;font-size:13px;color:#6b6b6b}.garden-actions{gap:14px}.action-control{position:relative;display:inline-flex}.action-button{display:inline-flex;align-items:center;justify-content:center}.action-button:disabled{cursor:default;opacity:.45}.action-button:disabled:hover{transform:none}.action-button:disabled:hover .icon-glyph{transform:none}.action-button[aria-busy=true]{cursor:wait;opacity:.65}.action-tooltip{position:absolute;bottom:calc(100% + 10px);right:0;z-index:3;width:max-content;max-width:210px;padding:7px 10px;border:1px solid var(--hairline);border-radius:10px;background:var(--white);color:var(--ink);font-size:11px;line-height:1.4;pointer-events:none;visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .25s var(--spring)}.action-button:focus-visible+.action-tooltip{visibility:visible;opacity:1;transform:translateY(0)}@media(hover:hover)and (pointer:fine){.action-control:hover .action-tooltip{visibility:visible;opacity:1;transform:translateY(0)}}.lineage-return-tooltip{bottom:auto;right:auto;z-index:3;display:flex;align-items:center;justify-content:center}.lineage-return-tooltip.visible{visibility:visible;opacity:1;transform:none;pointer-events:auto}.action-colors:hover .icon-glyph{transform:rotate(-18deg)}.action-forms:hover .icon-glyph{transform:rotate(180deg)}.action-download{overflow:hidden}.action-download:hover .icon-glyph{transform:translateY(4px)}.garden-live{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.parent .bloom-canvas{border:1px solid var(--hairline)}.seedlings-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}.seedlings-grid .bloom-canvas{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}.toolbar{display:flex;justify-content:flex-end;align-items:center;height:var(--toolbar-height)}.icon-button{border:none;border-radius:50%;font:inherit;font-weight:800;line-height:1;cursor:pointer;transition:transform .35s var(--spring),box-shadow .2s}.icon-button.primary{width:56px;height:56px;background:var(--pink);color:var(--white);font-size:26px}.icon-button:hover{transform:scale(1.12)}.icon-glyph{display:inline-block;transition:transform .25s var(--spring)}.icon-button.spin-on-hover .icon-glyph{transition-duration:.35s}.icon-button.spin-on-hover:hover .icon-glyph{transform:rotate(180deg)}.icon-button.hop-on-hover{overflow:hidden}.icon-button.hop-on-hover:hover .icon-glyph{transform:translateY(5px)}.icon-button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.bloom-canvas{display:block;width:100%;padding:0;border:0;position:relative;aspect-ratio:1;overflow:hidden;background:var(--white)}.bloom-stage,.bloom-canvas img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.bloom-stage canvas{display:block;width:100%;height:100%}.bloom-canvas.clickable{cursor:pointer;transition:background-color .2s,opacity .2s}.bloom-stage{transition:transform .4s var(--spring)}.bloom-canvas.clickable:hover{background:var(--tint)}.bloom-canvas.clickable:hover .bloom-stage{transform:scale(1.1)}.bloom-canvas.clickable:active .bloom-stage{transform:scale(.94)}.bloom-canvas.clickable:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}@container garden (max-width: 480px){.garden-board{grid-template-columns:minmax(0,1fr);width:min(480px,100%)}}@media(prefers-reduced-motion:reduce){.logo-mark,.icon-button,.bloom-stage,.action-tooltip,.lineage .bloom-canvas.clickable{transition:none}.logo:hover .logo-mark,.icon-button:hover,.bloom-canvas.clickable:hover .bloom-stage,.bloom-canvas.clickable:active .bloom-stage,.lineage .bloom-canvas.clickable:not(.current):hover,.lineage .bloom-canvas.clickable:not(.current):focus-visible{transform:none}.icon-glyph,.icon-button.spin-on-hover .icon-glyph{transition:none}.icon-button.spin-on-hover:hover .icon-glyph,.icon-button.hop-on-hover:hover .icon-glyph,.action-button:hover .icon-glyph,.action-tooltip{transform:none}}@media(max-width:720px){.app{height:auto;min-height:100dvh}.header{padding:14px 16px}.header-actions{gap:12px}.starting-board{width:min(100%,480px)}.workspace{flex-direction:column}.lineage{order:1;flex:none;height:180px}.garden{flex:none;overflow:visible;padding:16px;container-type:inline-size}.garden-board{width:min(100%,800px)}}
