@import "./opening.css";
@import "../ui/cursor.css";
@import "./home-header.css";
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#f2f3ed;color:#515b50;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:400}button,a,input{font:inherit}button,a,.import{-webkit-tap-highlight-color:transparent}button{border:0;color:inherit;cursor:pointer;background:transparent}button:focus-visible,a:focus-visible,input:focus-visible,main:focus-visible{outline:1px solid #596e56;outline-offset:5px}button:hover,a:hover{color:#253b2d}a{color:inherit;text-decoration:none}[hidden]{display:none!important}#mist-viewport{position:absolute;inset:0;touch-action:none;cursor:grab;outline:none}#mist-viewport:active{cursor:grabbing}#mist-canvas{width:100%;height:100%;display:block}header,footer{position:absolute;left:40px;right:40px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}header{top:30px;font-size:11px;letter-spacing:0}header a,header button,footer button{pointer-events:auto}.back{opacity:.65;padding:9px 0}.actions{display:flex;gap:18px;align-items:center}.actions button{padding:9px 0}.actions #compare{opacity:.7}#compare[aria-pressed=true]{color:#254a33;text-decoration:underline;text-underline-offset:5px}#tune span{padding-left:9px}footer{bottom:32px;align-items:flex-end}.signature h1{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:25px;letter-spacing:0;font-weight:400;margin:0 0 9px}.signature>span{font-size:8px;letter-spacing:0;opacity:.6}.gesture{position:absolute;left:50%;transform:translateX(-50%);text-align:center;font-size:10px;letter-spacing:0;opacity:.58;white-space:nowrap}.gesture>span{margin:0 12px}.track{width:96px;height:1px;background:#68776126;margin:17px auto 0;position:relative}.track i{position:absolute;width:19px;height:1px;background:#52654c;top:0;left:40%}#reset-view{font-size:10px;letter-spacing:0;opacity:.65;padding:10px 0}#controls{position:absolute;right:28px;top:76px;width:294px;max-height:calc(100% - 108px);overflow:auto;padding:24px;background:rgba(250,250,245,.94);border:1px solid #ffffffa6;box-shadow:0 8px 45px #273c2710;backdrop-filter:blur(16px);border-radius:3px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between}.panel-head p{font-size:8px;letter-spacing:0;margin:0 0 9px;opacity:.55}.panel-head h2{font-family:"Songti SC",serif;font-weight:400;font-size:18px;margin:0 0 22px}.panel-head button{font-size:23px;margin-top:-9px;margin-right:-7px}.presets{display:flex;border:1px solid #74857032;margin-bottom:23px}.presets button{flex:1;padding:9px 2px;font-size:11px}.presets button.selected{background:#75836c22;color:#334a35}.slider{display:grid;grid-template-columns:1fr auto;font-size:11px;margin-bottom:16px;gap:10px}.slider output{font-size:10px;font-variant-numeric:tabular-nums;opacity:.6}.slider input{grid-column:1/-1;width:100%;height:2px;accent-color:#63775c;margin:2px 0 5px;cursor:pointer}.motion{font-size:11px;display:flex;align-items:center;gap:8px}.motion input{accent-color:#65775f}.panel-note{font-size:10px;line-height:1.8;opacity:.58;margin:18px 0}.save-actions{display:flex;align-items:center;gap:8px}.save-actions button,.save-actions .import{font-size:11px;padding:9px 10px;border:1px solid #75816f40;cursor:pointer}#save{background:#5d7057;color:#fff;border-color:#5d7057}.import input{display:none}.text-button{font-size:10px;opacity:.65;padding:15px 0 0}#save-status{font-size:10px;line-height:1.6;margin:10px 0 0;color:#536c4e}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f2f3ed;font-size:12px;letter-spacing:0;gap:12px}#loading a{text-decoration:underline;font-size:11px}.loading-dot{width:6px;height:6px;border-radius:100%;background:#8f9d85;animation:breathe 1.6s ease-in-out infinite}#loading.failed .loading-dot{animation:none;background:#a07868}@keyframes breathe{50%{opacity:.25;transform:scale(.7)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:600px){header,footer{left:22px;right:22px}header{top:18px}.actions{gap:17px}footer{bottom:24px}.signature h1{font-size:23px}.gesture{bottom:72px;font-size:9px;opacity:.5}#controls{right:16px;top:61px;width:min(294px,calc(100% - 32px));max-height:calc(100% - 85px)}}@media(prefers-reduced-motion:reduce){.loading-dot{animation:none}}

/* Quiet controls; the small position line becomes visible only while moving. */
footer{height:24px;align-items:center;justify-content:flex-end}.track{position:absolute;left:50%;transform:translateX(-50%);margin:0;opacity:.28;transition:opacity .55s ease}.track i{transition:none}body:has(#mist-viewport[data-moving="true"]) .track{opacity:.85}#reset-view{font-size:21px;opacity:.35;padding:6px}#reset-view:hover{opacity:.8}.save-actions{margin-top:23px}.range-ends{grid-column:1/-1;display:flex;justify-content:space-between;font-size:9px;opacity:.5;margin-top:-3px}.panel-head h2{font-family:inherit;font-size:13px;letter-spacing:0;margin-bottom:22px}.panel-head button{margin-top:-8px}@media(prefers-reduced-motion:reduce){.track{transition:none}}

/* A small, solid point with subtle hover feedback. */
#plant-caption{position:absolute;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:0;white-space:nowrap;color:#4d614b;text-shadow:none;pointer-events:none}
#specimen-labels:focus-within{clip:auto;width:auto;height:auto;left:30px;bottom:70px;z-index:5;margin:0;overflow:visible;background:#f3f4eee8;padding:12px;display:flex;gap:12px;flex-wrap:wrap;max-width:calc(100% - 60px)}
#specimen-labels button{font-size:11px;padding:5px}
#specimen-labels button::after{content:attr(aria-label)}

/* Clear original art lives above the entire glass pass on hover. */
#plant-foreground{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.plant-sizes{border-block:1px solid #74857026;padding:16px 0 2px;margin:0 0 22px}.size-heading{display:flex;align-items:center;justify-content:space-between}.size-heading h3{font-size:12px;font-weight:400;letter-spacing:0;margin:0}.size-heading button,.size-reset{font-size:10px;opacity:.6;padding:3px 0}.plant-sizes>p{font-size:10px;opacity:.55;line-height:1.7;margin:7px 0 17px}.plant-sizes .slider{grid-template-columns:1fr auto auto;column-gap:10px}.plant-sizes .slider input{grid-row:2}.size-reset{grid-column:3;grid-row:1}.plant-sizes .slider output{align-self:center}
.panel-tools{display:flex;gap:16px}.panel-head #move-controls{font-size:16px;margin-top:-3px;margin-right:0}#controls.on-left{right:auto;left:28px}@media(max-width:600px){#controls.on-left{left:16px}}

.home-header{justify-content:flex-end}.backup-links{border-top:1px solid #74857026;margin-top:18px;padding-top:14px;font-size:10px;opacity:.65}.backup-links a{display:inline-block;padding:4px 0}

.scene-composition,.home-background{border-bottom:1px solid #74857026;padding-bottom:7px;margin-bottom:22px}.scene-composition>p{font-size:10px;opacity:.55;line-height:1.7;margin:8px 0 20px}.scene-composition .slider{margin-bottom:16px}#background-palette{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:14px 0 17px}#background-palette button{display:flex;align-items:center;gap:7px;padding:5px 0;font-size:10px;opacity:.6;text-align:left}#background-palette i{width:12px;height:12px;border-radius:50%;flex:none;border:1px solid #72826715}#background-palette button[aria-pressed=true]{opacity:1;color:#293d2b}#background-palette button[aria-pressed=true] i{outline:1px solid #65775a;outline-offset:3px}.custom-background{display:flex;align-items:center;gap:9px;margin-bottom:21px}.custom-color-label{font-size:10px;opacity:.7;flex:1}#background-color{width:28px;height:25px;padding:0;border:1px solid #7f8e7338;cursor:pointer;background:transparent}#background-color.active{outline:1px solid #65775a;outline-offset:2px}#background-hex{width:77px;background:transparent;border:0;border-bottom:1px solid #7f8e7338;border-radius:0;padding:5px 0;font-size:10px;color:#52604b;font-variant-numeric:tabular-nums}.home-background .slider{margin-bottom:17px}.slider input:disabled{opacity:.35;cursor:default}

/* Arrangement comparisons keep all optical and size controls independent. */
.arrangement-picker{position:relative;pointer-events:auto}.actions #arrangement-toggle{opacity:.8;white-space:nowrap}
.arrangement-options{position:absolute;right:0;top:40px;width:328px;padding:20px;background:rgba(250,250,245,.96);border:1px solid #ffffffa6;box-shadow:0 10px 45px #273c2715;backdrop-filter:blur(16px);border-radius:3px;z-index:12;letter-spacing:0}
.arrangement-heading{margin:0 0 12px;font-size:11px;letter-spacing:0;opacity:.5}
.actions .arrangement-options button{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:14px 9px;border-bottom:1px solid #66735b14;opacity:1;border-radius:2px}
.arrangement-options button[aria-pressed=true]{background:#71836313;color:#2e4930}.arrangement-number{font-size:9px;opacity:.45;padding-top:3px;min-width:17px;font-variant-numeric:tabular-nums}.arrangement-options strong{display:block;font-weight:400;font-size:12px;letter-spacing:0;margin-bottom:7px}.arrangement-options small{display:block;font-size:10px;line-height:1.8;opacity:.62;letter-spacing:0}.arrangement-footnote{font-size:9px;opacity:.48;margin:17px 9px 2px;line-height:1.7}
@media(max-width:600px){.home-header .actions{gap:13px;font-size:10px}.arrangement-options{position:fixed;top:63px;right:16px;width:min(328px,calc(100vw - 32px));max-height:calc(100dvh - 88px);overflow:auto}}

.detail-load-status{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font:11px Arial,"PingFang SC",sans-serif;color:#4b5746;background:#f0f0e3d9;padding:4px 12px 4px 18px;z-index:60;border-radius:2px}.detail-load-status button{font-size:18px;padding:4px 6px}

/* The sound chooser stays separate from plant captions. */
#home-sound{white-space:nowrap}#home-sound[aria-pressed=false]{opacity:.55}
.home-sound-picker{display:flex;align-items:center;position:relative;gap:2px}
.actions #hover-sound-toggle{padding:5px 3px;font-size:13px}
#hover-sound-options{position:absolute;right:0;top:36px;width:230px;padding:18px;background:#f8f8f0f5;border:1px solid #fff9;box-shadow:0 12px 35px #293d2517;border-radius:3px;letter-spacing:0;z-index:20;text-align:left}
#hover-sound-options p{font-size:10px;opacity:.55;margin:0 0 12px}
.actions #hover-sound-options button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 8px;font-size:11px;opacity:1;text-align:left;border-radius:2px}
#hover-sound-options button[aria-pressed=true]{background:#7387661a;color:#365537}
#hover-sound-options small{font-size:9px;opacity:.5}
#hover-sound-options a{display:block;font-size:10px;margin:14px 8px 0;text-underline-offset:4px;opacity:.65}
@media(max-width:600px){#hover-sound-options{position:fixed;top:58px;right:18px}}

.creative-entry{white-space:nowrap;opacity:.85;font-size:11px;padding:7px 0;border-bottom:1px solid #62705245}@media(max-width:600px){.home-header .actions{gap:10px;flex-wrap:wrap;justify-content:flex-end}.creative-entry{font-size:10px}}

/* Quiet text navigation; tuning controls are available only with ?tools=1. */
body[data-home] .home-header{z-index:4}
body[data-home] .home-header .actions{gap:20px;flex-wrap:nowrap;font-size:12px}
body[data-home] .creative-entry{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;font-size:12px;letter-spacing:0;border:0;opacity:1;color:#515b50;background:none}
body[data-home] .creative-entry::after{content:'';position:absolute;left:2px;right:2px;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;opacity:.45;transition:transform .2s ease}
body[data-home] .creative-entry svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
body[data-home] .creative-entry:hover,body[data-home] .creative-entry:focus-visible{color:#30482f}
body[data-home] .creative-entry:hover::after,body[data-home] .creative-entry:focus-visible::after{transform:scaleX(1)}
body[data-home] .creative-entry:hover svg{transform:translate(1px,-1px)}
.home-header .actions .home-icon-button{display:grid;place-items:center;width:44px;height:44px;padding:11px;border-radius:50%;opacity:.8}
.home-icon-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.home-icon-button svg circle{fill:currentColor;stroke:none}
.home-header .actions .home-icon-button:hover,.home-icon-button[aria-expanded=true]{color:#30482f;opacity:1}
#home-sound[aria-pressed=true] .sound-muted,#home-sound[aria-pressed=false] .sound-waves{display:none}
.home-more{position:relative;pointer-events:auto}
#home-options{position:absolute;right:0;top:52px;width:260px;max-height:calc(100dvh - 118px);overflow:auto;padding:10px;background:#f6f6eef5;border:1px solid #ffffff9c;border-radius:14px;box-shadow:0 12px 40px #273c2714;backdrop-filter:blur(18px);letter-spacing:0}
.actions #home-options>div>button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:12px;font-size:12px;text-align:left;opacity:1;border-radius:6px}
#home-options>div>button:hover{background:#71836313}
#home-options #arrangement-toggle::after{content:'⌄'}
#home-options .home-sound-picker{display:block}
#home-options .home-secondary-actions{border-top:1px solid #74857026;margin-top:6px;padding-top:6px}
#home-options .arrangement-options,#home-options #hover-sound-options{position:static;width:100%;max-height:none;padding:2px 5px 8px;border:0;border-radius:6px;box-shadow:none;background:#71836309;backdrop-filter:none}
#home-options .arrangement-heading,#home-options .arrangement-footnote,#home-options .arrangement-options small,#home-options #hover-sound-options p,#home-options #hover-sound-options small,#home-options #hover-sound-options a{display:none}
#home-options .arrangement-options strong{margin:0;font-size:11px;line-height:1.5}
#home-options .arrangement-options button,#home-options #hover-sound-options button{min-height:42px;padding:12px 10px;border:0}
#home-options .arrangement-number{padding-top:1px}
body[data-home] #controls{z-index:5}
@media(max-width:600px){body[data-home] .home-header{top:max(14px,env(safe-area-inset-top));left:16px;right:16px}body[data-home] .home-header .actions{gap:16px}#home-options{max-height:calc(100dvh - 90px)}body[data-home] #controls{top:70px;max-height:calc(100dvh - 90px)}}

@media(prefers-reduced-motion:reduce){body[data-home] .creative-entry::after,body[data-home] .creative-entry svg{transition:none}}

/* A quiet name for the garden, aligned with the existing text navigation. */
body[data-home] .home-header{justify-content:space-between}
.home-name{font-size:12px;font-weight:400;line-height:44px;letter-spacing:0;color:#515b50;white-space:nowrap}
@media(max-width:600px){.home-name{font-size:11px;letter-spacing:0}}

/* Match the detail page: one UI family, neutral tracking and light headings. */
body[data-home]{font-synthesis:none}body[data-home] .signature h1{font-size:18px;font-weight:300}