:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#48483d;background:#f6f1e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:300px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #708354;outline-offset:5px}header{position:absolute;top:32px;left:38px;z-index:2}.brand{display:flex;align-items:center;gap:10px;color:#3d4433;text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.5px}.brand-mark{font-size:24px;letter-spacing:-5px;border:1.5px solid #8d9878;border-radius:7px;padding:1px 7px 3px 3px}.brand-mark span{font-size:23px}main{height:100svh;min-height:650px;position:relative;overflow:hidden}#scene{position:absolute;inset:0;border:0;padding:0;width:100%;height:100%;background:none;touch-action:manipulation}canvas{width:100%;height:100%;display:block}.controls{position:absolute;bottom:max(72px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 40px));text-align:center}#hint{border:0;background:none;font-size:14px;letter-spacing:.15px;color:#77796a;margin-bottom:22px;padding:8px}#link-form{display:flex;align-items:center;gap:12px;background:#ffffff90;border:1px solid #d7d6c98a;border-radius:16px;padding:8px 10px 8px 18px;box-shadow:0 4px 18px #66643d05;backdrop-filter:blur(15px)}.link-icon{font-size:22px;color:#9c9e8e}input{width:100%;min-width:0;outline:none;border:0;background:transparent;color:#525647;font-size:16px;height:36px}#share{width:38px;height:38px;flex-shrink:0;border:0;border-radius:9px;background:transparent;display:grid;place-items:center}#share:hover{background:#e5e7db}svg{width:21px;height:21px}.seasons{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:17px}.seasons button{border:1px solid transparent;background:none;border-radius:24px;font-size:14px;padding:9px 14px;display:flex;align-items:center;gap:7px;color:#858677}.seasons button[aria-pressed=true]{background:#e4e8d8;border-color:#d7dfc9;color:#4b6139}.seasons button span{font-size:20px;line-height:1}#error{margin:5px 0 0;font-size:13px;color:#a23f32}#error:empty{display:none}#swatches{height:20px;margin-top:12px}#swatches button{background:var(--swatch);border:2px solid #f6f1e7;outline:1px solid #d0cbbc;border-radius:50%;height:18px;width:18px;margin:0 5px}footer{position:absolute;bottom:22px;left:32px;right:30px;display:flex;justify-content:space-between;align-items:center;color:#999a8a;font-size:12px;pointer-events:none}footer button{pointer-events:auto;border:1px solid #b9bbaa;border-radius:50%;background:none;width:22px;height:22px;font-family:Georgia,serif;font-size:14px}#share-menu{position:absolute;bottom:210px;left:calc(50% + 20px);background:#fffef8;border:1px solid #e0dfd3;box-shadow:0 12px 40px #3b47231a;border-radius:14px;padding:6px;z-index:5;width:195px}#share-menu button{display:block;border:0;background:none;width:100%;text-align:left;padding:13px 12px;border-radius:9px;font-size:14px}#share-menu button:hover{background:#ecefe3}#toast{position:absolute;top:82px;left:50%;transform:translateX(-50%);font-size:14px;background:#fffdf3;border-radius:20px;padding:10px 18px;box-shadow:0 5px 25px #27361112;opacity:0;transition:opacity .2s;pointer-events:none}#toast.visible{opacity:1}dialog{border:1px solid #dcddcd;border-radius:20px;padding:36px;max-width:min(420px,90vw);background:#fffdf5;color:#525647;line-height:1.65}dialog::backdrop{background:#333d2633;backdrop-filter:blur(5px)}dialog h1{font-size:24px;font-weight:500}dialog a{color:#657d47}#close-about{float:right;border:0;background:none;font-size:25px}.credit{font-size:14px;color:#8d927e}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#fallback{position:absolute;top:18%;left:50%;transform:translateX(-50%)}#fallback img{max-width:70vw;width:320px}@media(max-width:600px){header{top:22px;left:24px}.brand{font-size:15px}.controls{bottom:66px}.seasons button{padding:9px 11px}footer{left:24px;right:24px}footer span{font-size:12px}#share-menu{left:auto;right:20px}main{min-height:600px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

header{right:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}.mode-switch{display:flex;gap:3px;padding:4px;border:1px solid #d9ddcd;border-radius:24px;background:#faf9f1cc;backdrop-filter:blur(12px)}.mode-switch button{border:0;background:transparent;border-radius:20px;padding:8px 13px;font-size:14px;color:#777e6b;white-space:nowrap}.mode-switch button[aria-pressed=true]{background:#e1e8d3;color:#405432;box-shadow:0 1px 3px #35451b15}@media(max-width:600px){header{right:24px}.mode-switch button{padding:8px 10px}}@media(max-width:480px){.brand>span:last-child{display:none}}

.seasons{gap:2px}.seasons button{padding:9px 10px}@media(max-width:430px){.seasons button{font-size:13px;padding:9px 7px;gap:4px}.seasons button span{font-size:17px}.mode-switch button{padding:8px 9px;font-size:13px}}

.seasons{flex-wrap:wrap}@media(max-width:480px){header{gap:8px}.mode-switch button{padding:8px 7px}}

/* Seasonal swatches must never change the camera viewport. */
#swatches{position:absolute;top:100%;left:0;width:100%;margin-top:10px}

/* Color choices occupy one stable row in every palette. */
.color-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}.color-controls #swatches{position:static;display:flex;align-items:center;gap:15px;width:auto;height:30px;margin:0}.color-controls #swatches button{width:23px;height:23px;margin:0;border:3px solid #f6f1e7;outline:1px solid #cbcbbb;transition:transform .18s,outline-color .18s}.color-controls #swatches button[aria-pressed=true]{outline:2px solid #65764d;transform:scale(1.12)}

#share-menu{width:min(320px,calc(100vw - 40px));left:50%;transform:translateX(-50%);padding:16px}#share-menu strong{font-size:16px}#share-menu p{font-size:13px;color:#858677;margin:7px 0 12px}#bonsai-link{font-size:12px;background:#f0f0e6;border-radius:7px;padding:0 9px;margin-bottom:8px}#native-share[hidden]{display:none}@media(max-width:480px){.brand>span:last-child{display:inline}}

#share-menu{width:224px;left:calc(50% + min(210px,50vw - 20px));transform:translateX(-100%);bottom:190px;padding:9px 12px;border-radius:16px;background:#fcf8ef;box-shadow:0 6px 20px #50442a24;border:1px solid #e5ded0}#share-menu button{display:flex;align-items:center;gap:13px;font-size:14px;padding:11px 9px;color:#514536}#share-menu button span{width:18px;text-align:center;font-size:19px;color:#75614b}#share-menu hr{height:1px;border:0;background:#e9e1d5;margin:4px 2px}#share-menu input[hidden]{display:none}#share-menu input{margin-top:8px}#share{background:#52745a;color:#fff;border-radius:12px}#share:hover{background:#405d47}

#visitor-actions[hidden]{display:none}#visitor-actions{display:flex;gap:9px;margin-bottom:10px}#visitor-actions a{display:flex;align-items:center;justify-content:center;min-height:48px;flex:1;padding:12px 16px;border:1px solid #e1d7c8;border-radius:12px;text-decoration:none;font-size:14px;font-weight:500;color:#514536;background:#fffaf1}#visitor-actions #make-another{background:#52745a;border-color:#52745a;color:white}.shared-view .controls{width:min(620px,calc(100% - 40px))}.shared-view .color-controls,.shared-view #url,.shared-view .link-icon,.shared-view #error{display:none}.shared-view #link-form{border:0;background:none;box-shadow:none;padding:0;backdrop-filter:none;justify-content:center}.shared-view #share{width:48px;height:48px}.shared-view #hint{border:1px solid #e4ded1;border-radius:24px;font-size:12px;padding:9px 15px;margin-bottom:20px}.shared-view #share-menu{left:50%;transform:translateX(-50%);bottom:190px}@media(max-width:430px){#visitor-actions a{padding:12px 8px;font-size:13px}}

/* Shared-page actions form one row; sharing stays beside the primary action. */
.shared-view .controls{display:grid;grid-template-columns:minmax(0,1fr) 48px;column-gap:9px;align-items:end}
.shared-view #hint{grid-column:1 / -1;justify-self:center}
.shared-view #visitor-actions{grid-column:1;grid-row:2;margin-bottom:0}
.shared-view #link-form{grid-column:2;grid-row:2}
.shared-view #share-menu{left:calc(50% + min(310px,50vw - 20px));transform:translateX(-100%);bottom:calc(max(72px,env(safe-area-inset-bottom)) + 60px)}
@media(max-width:600px){.shared-view #share-menu{bottom:126px}}
@media(max-width:380px){.shared-view .controls{width:calc(100% - 24px);column-gap:6px}.shared-view #visitor-actions{gap:6px}.shared-view #visitor-actions a{font-size:12px;padding:10px 5px}}

.brand-logo{width:39px;height:39px;flex-shrink:0;color:#52745a}.brand{gap:10px;letter-spacing:-.65px;font-weight:650}.brand>span:last-child{display:inline}

.custom-swatch{position:relative;display:grid;place-items:center;width:25px;height:25px;border:3px solid #f6f1e7;border-radius:50%;outline:1px solid #cbcbbb;background:conic-gradient(#e8a4b7,#dfba67,#77a971,#83c5df,#a58bcd,#e8a4b7);cursor:pointer}.custom-swatch span{color:#fff;font-weight:700;text-shadow:0 1px 3px #334433}.custom-swatch.selected{outline:2px solid #52745a;transform:scale(1.12)}.custom-swatch:focus-within{outline:2px solid #52745a;outline-offset:3px}#custom-color{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}

#color-panel[hidden]{display:none}#color-panel{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);width:min(300px,calc(100vw - 40px));padding:20px;background:#fffaf1;border:1px solid #dedbcc;border-radius:19px;box-shadow:0 12px 40px #39443124;text-align:left;z-index:8}.picker-heading{display:flex;align-items:center;justify-content:space-between}.picker-heading strong{font-size:16px}.color-controls #swatches #close-color{border:0;outline:none;background:none;width:24px;height:24px;font-size:23px;transform:none}#color-panel p{font-size:12px;color:#858677;margin:6px 0 17px}#color-panel>label{font-size:12px;display:block;margin-top:13px}#color-panel input[type=range]{appearance:none;width:100%;height:12px;border-radius:10px;margin:9px 0;cursor:pointer;padding:0;touch-action:pan-y}#color-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}#color-panel input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border:3px solid white;border-radius:50%;background:transparent;box-shadow:0 1px 5px #0005}#color-panel input[type=range]::-moz-range-thumb{width:15px;height:15px;border:3px solid white;border-radius:50%;background:transparent;box-shadow:0 1px 5px #0005}.picker-value{display:flex;gap:10px;align-items:center;margin-top:17px;padding:8px;border:1px solid #dfdfd2;border-radius:10px}.picker-value label{font-size:11px;color:#858677}#color-preview{width:25px;height:25px;border-radius:6px;flex-shrink:0}#color-panel #custom-color{position:static;opacity:1;width:100%;height:26px;font-size:13px;font-family:monospace;padding:0}.color-controls #swatches #open-color{background:conic-gradient(#e8a4b7,#dfba67,#77a971,#83c5df,#a58bcd,#e8a4b7);color:white;font-size:19px;line-height:17px}

.color-controls #swatches #open-color{display:grid;place-items:center;padding:0;position:relative;font-size:0;line-height:1}
#open-color::before,#open-color::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border-radius:1px;pointer-events:none}
#open-color::before{width:10px;height:2px}
#open-color::after{width:2px;height:10px}

footer>a{pointer-events:auto;color:inherit;text-decoration:none}footer>a:hover{text-decoration:underline}#visit-link{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}


/* Useful, crawlable context follows the full-screen generator. */
.site-guide{max-width:760px;margin:0 auto;padding:56px 28px 80px;line-height:1.75;font-size:16px;color:#525647;border-top:1px solid #dfdfd2}
.site-guide h1{font-size:clamp(24px,4vw,32px);line-height:1.25;font-weight:600;letter-spacing:-.6px;margin:0 0 22px}
.site-guide h2{font-size:21px;line-height:1.4;margin:32px 0 12px;font-weight:600}
.site-guide ol{padding-left:24px}.site-guide li{padding:4px 0 4px 4px}
.site-guide details{border-bottom:1px solid #dfdfd2;padding:15px 0}.site-guide summary{cursor:pointer;font-weight:500}.site-guide details p{margin:12px 0 0}.site-guide a{color:#405d47}
.shared-view .site-guide{display:none}
body:has(.site-guide)>footer{top:calc(max(100svh,650px) - 44px);bottom:auto}
dialog h2{font-size:24px;font-weight:500}
@media(max-width:600px){body:has(.site-guide)>footer{top:calc(max(100svh,600px) - 44px)}.site-guide{padding:40px 24px 60px}}