@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/dm-sans-latin.woff2?v=70420843f6c2ef89') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500 600;font-display:swap;src:url('assets/fonts/playfair-display-latin.woff2?v=70420843f6c2ef89') format('woff2')}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/bungee-regular.ttf?v=70420843f6c2ef89') format('truetype')}
.canvas-loading p{margin:0}.canvas-loading.failed{flex-direction:column;gap:12px;text-align:center;padding:24px}.canvas-loading.failed>span{display:none}.canvas-loading .button{pointer-events:auto;background:#fffcf4;min-width:112px}
:root{font-family:'DM Sans',sans-serif;color:#263e31;background:#e2ded4;font-synthesis:none;--cream:#f7f3e9;--green:#184d37;--text:#263e31;--muted:#887e6d;--line:#e0d8c9;--canvas-surround:#e2ded4}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,input,select{font:inherit}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.46}button,input,select{ -webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #c19b55;outline-offset:3px}button{touch-action:manipulation}.icon{width:22px;height:22px;display:block;flex:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.editor{height:100vh;height:100dvh;display:grid;grid-template-columns:88px minmax(0,1fr) 304px;grid-template-rows:minmax(0,1fr)}
.category-rail{grid-column:1;grid-row:1;min-height:0;background:var(--cream);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:3}.brand{height:92px;flex:none;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:12px 3px;border-bottom:1px solid var(--line);font:500 11px/1.2 'Playfair Display',Georgia,serif;text-align:center}.brand .icon{width:26px;height:26px}.category-rail nav{display:flex;flex-direction:column;gap:3px;padding:10px 7px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d5caba transparent}.tab{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;flex:none;min-height:66px;padding:10px 2px;border:0;border-radius:12px;background:transparent;font-size:10px;font-weight:500;color:#716c60;transition:background .15s,color .15s}.tab .icon{width:24px;height:24px;stroke-width:1.5}.tab:hover{background:#eae5d9}.tab.active{background:var(--green);color:#fffaf0}
.stage{grid-column:2;grid-row:1;position:relative;display:flex;justify-content:center;align-items:center;min-width:0;min-height:0;padding:16px;background:var(--canvas-surround)}.scene-wrap{height:100%;aspect-ratio:4 / 5;max-width:100%;max-height:100%;position:relative;overflow:hidden;border-radius:15px;background:#b89b78;box-shadow:0 3px 18px #34271818;isolation:isolate}.scene-wrap canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px}.canvas-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;background:#e4ddcf;color:#6f6a5e;font-size:12px;pointer-events:none;z-index:1}.canvas-loading[hidden]{display:none}.canvas-loading span{width:15px;height:15px;border:1.5px solid #b6b1a5;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}.actions{position:absolute;display:flex;gap:8px;right:18px;top:18px;z-index:2}.circle-button{border:1px solid #fff6;background:#fbf8efd9;backdrop-filter:blur(12px);border-radius:50%;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px #30201116;position:relative;flex:none;transition:background .15s,transform .15s}.circle-button .icon{width:20px;height:20px}.circle-button:hover:not(:disabled){background:#fffaf0;transform:translateY(-1px)}.primary{background:var(--green)!important;color:#fffdf5!important;border-color:var(--green)!important}.circle-button.primary:hover{background:#246047!important}.circle-button[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#243b2ff2;color:#fffaf0;font-size:10px;font-weight:500;padding:6px 8px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .12s}.circle-button[data-tip]:hover::after,.circle-button[data-tip]:focus-visible::after{opacity:1}.focus-button{position:absolute;bottom:18px;right:18px;width:36px;height:36px;z-index:2}.focus-button .icon{width:17px;height:17px}.focus-button[data-tip]::after{top:auto;bottom:calc(100% + 8px);left:auto;right:0;transform:none}.hint,.selection{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);border:1px solid #ffffff5c;background:#fff9e8de;backdrop-filter:blur(10px);border-radius:30px;color:#44513e;box-shadow:0 2px 9px #231e1810;z-index:2}.hint{font-size:11px;line-height:1.4;padding:9px 15px;margin:0;max-width:calc(100% - 110px);text-align:center;white-space:nowrap;pointer-events:none}.selection{display:flex;align-items:center;gap:16px;padding:5px 5px 5px 16px;max-width:calc(100% - 100px)}.selection span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selection .circle-button{width:32px;height:32px;border:0;background:#eaded1;box-shadow:none}.selection .icon{width:17px;height:17px}[hidden]{display:none!important}
.inspector{grid-column:3;grid-row:1;background:var(--cream);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;padding:26px 20px 17px;z-index:3}.inspector-heading{margin-bottom:22px;flex:none}.inspector-heading h1{font:500 28px/1.2 'Playfair Display',Georgia,serif;margin:0 0 7px;letter-spacing:-.02em}.inspector-heading p{font-size:11px;line-height:1.5;color:var(--muted);margin:0}.panel-content{display:flex;flex-direction:column;flex:1;min-height:0;gap:16px}.control-row{display:contents}#extra{display:flex;flex-direction:column;gap:12px;order:0;flex:none}#extra:empty{display:none}.field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:11px;color:#625f51}.field select,.field input,.message-input{width:100%;height:40px;appearance:none;border:1px solid #d6cdbd;border-radius:8px;padding:9px 30px 9px 11px;background:transparent;color:#304733;font-size:12px;outline-offset:2px}.select-wrap{position:relative}.select-wrap>.icon{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:17px;height:17px;pointer-events:none;color:#77796b}.field input[type=color]{padding:4px;width:100%;cursor:pointer}.field input[type=text]{padding-right:10px}.field-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.options{order:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#d3c9b7 transparent;padding:2px 2px 4px}.option{position:relative;min-width:0;border:1px solid #dfd6c7;background:transparent;border-radius:10px;padding:5px;text-align:left;color:#354b3b;transition:border-color .15s,background .15s}.option:hover{background:#eee7d9;border-color:#b8b39f}.option.active{border-color:var(--green);box-shadow:0 0 0 1px var(--green);background:#fffcf4}.option .visual{height:92px;border-radius:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#e9e1d3;position:relative;isolation:isolate}.option .label{display:block;font-size:11px;font-weight:500;line-height:1.25;margin:8px 3px 5px;min-height:27px}.option.active::after{content:'';position:absolute;right:9px;top:9px;width:7px;height:7px;background:var(--green);border:2px solid #fffcf4;border-radius:50%;z-index:1}.sprite{display:block;background-image:url('assets/ornaments.png');background-size:400% 300%;background-position:var(--sprite-x) var(--sprite-y);background-repeat:no-repeat;filter:var(--sprite-filter);flex:none;width:65px;height:78px}.set-preview{background:radial-gradient(ellipse at 50% 10%,#f5ebd7,#e5d7bf)!important}.set-preview .sprite{position:absolute;width:57px;height:68px;bottom:8px}.set-preview .sprite:nth-child(1){left:0;bottom:8px;transform:rotate(-8deg)}.set-preview .sprite:nth-child(2){left:calc(50% - 27px);bottom:23px;transform:scale(.88)}.set-preview .sprite:nth-child(3){right:0;bottom:5px;transform:rotate(8deg)}.set-preview .sprite::before{content:'';position:absolute;top:-30px;left:50%;height:33px;border-left:1px solid #aa824e9e}.tree-thumb,.room-thumb{display:block;width:100%;height:100%;background-size:cover;background-position:center}.tree-thumb{background-size:auto 108%;background-position:center 40%;background-repeat:no-repeat}.color-tile{width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px #0001,0 3px 7px #281d1420}.light-preview{display:flex;gap:9px}.light-preview i{display:block;width:12px;height:12px;border-radius:50%;background:var(--bulb);box-shadow:0 0 10px 3px var(--bulb)}.light-preview.off i{box-shadow:none;background:#bdb9ad}.garland-preview{width:75%;height:30px;border-bottom:5px solid var(--strand,#d0b366);border-radius:0 0 50% 50%;transform:rotate(-13deg)}.none-preview{width:30px;height:30px;border:1px solid #b9b3a4;border-radius:50%;position:relative}.none-preview::after{content:'';position:absolute;top:14px;left:3px;right:3px;border-top:1px solid #b9b3a4;transform:rotate(-45deg)}.message-preview{font:italic 28px Georgia;color:#8b6a3d}.color-choices{display:flex;flex-wrap:wrap;gap:8px}.swatch{width:26px;height:26px;border:3px solid var(--cream);outline:1px solid #d7d1c3;background:var(--swatch);border-radius:50%;padding:0}.swatch[aria-pressed=true]{outline:2px solid var(--green)}#panel-actions{order:2;display:flex;gap:8px;flex:none;border-top:1px solid var(--line);padding-top:16px}#panel-actions:empty{display:none}.button{border:1px solid #d0c6b4;border-radius:8px;background:transparent;min-height:42px;padding:10px 13px;display:inline-flex;justify-content:center;align-items:center;gap:7px;font-size:12px;font-weight:500;white-space:nowrap}.button .icon{width:17px;height:17px}.button:hover{background:#eee8da}.button.primary:hover{background:#235d43!important}#panel-actions .button{flex:1;padding-left:8px;padding-right:8px}.panel-note{font-size:10px;line-height:1.5;color:#918671;margin:12px 0 0;text-align:center;flex:none}.focused.editor{grid-template-columns:0 minmax(0,1fr) 0}.focused .category-rail,.focused .inspector{visibility:hidden;overflow:hidden;padding:0;border:0}.focused .stage{grid-column:2}
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:#1c4936f2;color:#fff9ec;padding:11px 18px;border-radius:22px;font-size:12px;line-height:1.4;opacity:0;pointer-events:none;z-index:10;box-shadow:0 5px 20px #17251e22;transition:opacity .18s,transform .18s;max-width:calc(100% - 32px);text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}dialog{border:1px solid #ded3c2;border-radius:18px;background:var(--cream);color:var(--text);padding:32px;width:min(90vw,380px);box-shadow:0 18px 80px #15251a4d}dialog::backdrop{background:#112a208c;backdrop-filter:blur(3px)}dialog .close{position:absolute;right:12px;top:12px;width:32px;height:32px;box-shadow:none;border:0;background:transparent}dialog .close .icon{width:18px;height:18px}.dialog-mark{color:#a28144;margin-bottom:18px}.dialog-mark .icon{width:33px;height:33px}dialog h2{font:500 27px/1.2 'Playfair Display',Georgia,serif;margin:0 0 10px}dialog p{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 24px}dialog .button{width:100%;margin-bottom:10px}dialog .fine{font-size:10px;line-height:1.6;margin:12px 0 0}.download-ready{font-size:12px;text-align:center}
@media(min-width:1450px){.editor{grid-template-columns:96px minmax(0,1fr) 320px}.inspector{padding:30px 22px 20px}.category-rail nav{padding-top:16px;gap:6px}.tab{min-height:72px}.option .visual{height:103px}}
@media(max-height:710px) and (min-width:761px){.brand{height:70px}.category-rail nav{gap:1px;padding-top:6px}.tab{min-height:59px;padding:6px 2px;gap:5px}.inspector{padding-top:20px}.inspector-heading{margin-bottom:14px}.option .visual{height:76px}}
@media(max-width:1000px) and (min-width:761px){.editor{grid-template-columns:74px minmax(0,1fr) 272px}.inspector{padding:23px 15px 16px}.stage{padding:12px}.option .visual{height:80px}.tab{font-size:9px}.actions{gap:6px;right:12px;top:12px}.circle-button{width:40px;height:40px}}
@media(max-width:760px){
  .editor{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 54px 152px;padding-bottom:env(safe-area-inset-bottom);background:var(--cream)}
  .stage{grid-column:1;grid-row:1;padding:0;background:#c7b295}.scene-wrap{width:100%;height:100%;aspect-ratio:auto;max-width:none;border-radius:0;box-shadow:none}.actions{top:max(16px,env(safe-area-inset-top));right:16px;gap:8px}.circle-button{width:42px;height:42px}.circle-button[data-tip]::after{display:none}.focus-button{bottom:14px;right:14px;width:32px;height:32px}.hint{bottom:14px;padding:8px 12px;font-size:10px;max-width:calc(100% - 100px)}.selection{bottom:12px;gap:9px;padding-left:13px}.selection span{font-size:11px}
  .category-rail{grid-column:1;grid-row:2;border:0;border-radius:18px 18px 0 0;margin-top:-12px;padding-top:8px;box-shadow:0 -3px 12px #2b20110d;overflow:hidden}.brand{display:none}.category-rail nav{flex-direction:row;align-items:center;gap:2px;overflow-x:auto;overflow-y:hidden;padding:0 9px 3px;scrollbar-width:none;min-height:0}.tab{flex-direction:row;gap:5px;min-height:40px;padding:8px 10px;font-size:10px;border-radius:20px}.tab .icon{width:17px;height:17px;stroke-width:1.7}.tab.active{background:var(--green)}
  .inspector{grid-column:1;grid-row:3;border:0;padding:0 12px 10px;min-height:0}.inspector-heading,.panel-note{display:none}.panel-content{gap:8px}.control-row{display:flex;gap:8px;align-items:center;min-height:34px;flex:none}.control-row:has(#extra:empty):has(#panel-actions:empty){display:none}#extra{flex:1;min-width:0;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none}#extra:empty{display:none}.field{gap:0;flex:none}.field>span:first-child{display:none}.field.browse-field{width:100%}.field select,.field input{height:34px;font-size:11px;padding:7px 28px 7px 9px;border-radius:7px}.field:not(.browse-field) select{max-width:130px}.field input[type=color]{width:40px;padding:3px}.field input[type=text]{width:180px}.field-pair{display:contents}.select-wrap{width:100%}.select-wrap>.icon{width:15px;height:15px}.color-choices{flex:none;flex-wrap:nowrap;gap:5px}.swatch{width:23px;height:23px}
  #panel-actions{order:0;gap:5px;padding:0;border:0}#panel-actions .button{min-height:34px;gap:4px;font-size:10px;padding:7px 9px;border-radius:18px}#panel-actions .button .icon{width:14px;height:14px}.options{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;align-items:stretch;padding:2px 2px 3px;scrollbar-width:none;flex:1}.option{flex:0 0 100px;padding:4px;border-radius:8px;height:98px;min-height:0}.option .visual{height:60px;border-radius:5px}.option .label{font-size:10px;line-height:1.15;margin:6px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}.option.active::after{width:5px;height:5px;border-width:1.5px;right:6px;top:6px}.sprite{width:49px;height:57px}.set-preview .sprite{width:46px;height:55px;bottom:1px}.set-preview .sprite:nth-child(1){left:-1px;bottom:0}.set-preview .sprite:nth-child(2){left:calc(50% - 22px);bottom:12px}.set-preview .sprite:nth-child(3){right:-1px;bottom:0}.light-preview{gap:7px}.light-preview i{width:9px;height:9px}.none-preview{width:25px;height:25px}.none-preview::after{top:11px}.garland-preview{height:23px;border-bottom-width:4px}.message-preview{font-size:23px}
  .focused.editor{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 0 0;padding-bottom:0}.focused .stage{grid-column:1;grid-row:1}.focused .category-rail,.focused .inspector{visibility:hidden;margin:0;box-shadow:none;padding:0}.focused .category-rail{grid-column:1;grid-row:2}.focused .inspector{grid-column:1;grid-row:3}#toast{bottom:220px;font-size:11px;padding:9px 14px}.focused #toast{bottom:22px}
}
@media(max-width:360px){.actions{right:12px;top:12px;gap:6px}.circle-button{width:40px;height:40px}.tab{padding-left:9px;padding-right:9px}#panel-actions .button{padding:7px}.inspector{padding-left:9px;padding-right:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@keyframes spin{to{transform:rotate(360deg)}}
.mobile-label{display:none}
@media(max-width:760px){.button:has(.mobile-label) .desktop-label{display:none}.mobile-label{display:inline}.is-focused #toast{bottom:22px}}
@media(min-width:761px) and (max-height:800px){.inspector-heading{margin-bottom:16px}.panel-content{gap:12px}.option .visual{height:78px}.options[data-category=ornaments] .option .label{min-height:14px}.set-preview .sprite{width:50px;height:60px}.set-preview .sprite:nth-child(2){bottom:16px}.set-preview .sprite:nth-child(1),.set-preview .sprite:nth-child(3){bottom:2px}}
@media(max-width:760px){.tab{font-size:11px}.hint{white-space:normal;max-width:calc(100% - 108px)}}
@media(max-width:760px){.editor{grid-template-rows:minmax(0,1fr) 54px 160px}.control-row{min-height:40px}.field select,.field input{height:40px}#panel-actions .button{min-height:40px}.is-focused .editor{grid-template-rows:minmax(0,1fr) 0 0}}
@media(max-width:760px){.option{height:96px}}
/* Tree controls: shapes first, direct adjustments beneath. */
.tree-model-browser { display:contents; }
.tree-model-navigation,.tree-model-scroll-track { display:none; }
.inspector[data-panel=tree] .panel-content { overflow-y:auto; scrollbar-width:thin; padding:2px; gap:20px; }
.inspector[data-panel=tree] .options { order:0; flex:none; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; gap:8px; }
.inspector[data-panel=tree] .option .visual { height:68px; }
.inspector[data-panel=tree] .option .label { font-size:10px; min-height:25px; margin:7px 2px 4px; }
.inspector[data-panel=tree] #extra { order:1; overflow:visible; }
.inspector[data-panel=tree] #panel-actions { order:2; }
.saved-tree .icon { width:28px; height:28px; color:#7f8c6b; }
.inspector,.panel-content { min-width:0; }
.inspector { position:relative; }
.background-scroll-track { display:none; }
.background-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; }
.background-count { display:flex; flex-direction:column; gap:3px; min-width:0; }
.background-count strong { font-size:12px; font-weight:600; }
.background-hint { font-size:10px; color:var(--muted); }
.touch-hint { display:none; }
.background-navigation { display:flex; gap:6px; flex:none; }
.background-navigation button { width:34px; height:34px; padding:8px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:#fffbf3; }
.background-navigation button:hover:not(:disabled) { background:#e8e4d8; border-color:#abae96; }
.background-navigation button:disabled { opacity:.3; }
.background-navigation .icon { width:17px; height:17px; }
.browse-previous .icon { transform:rotate(180deg); }
.options[data-category=background] { position:relative; min-width:0; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#b4aa94 #eee7da; scroll-padding:3px; }
.options[data-category=background]::-webkit-scrollbar { width:5px; height:5px; }
.options[data-category=background]::-webkit-scrollbar-track { background:#eee7da; border-radius:8px; }
.options[data-category=background]::-webkit-scrollbar-thumb { background:#b4aa94; border-radius:8px; }
.options[data-category=background] .option .visual { height:136px; }
img.room-thumb { object-fit:cover; object-position:50% 58%; user-select:none; -webkit-user-drag:none; }
.plain-room-thumb { position:relative; overflow:hidden; background:radial-gradient(ellipse at 23% 28%,#fffaf33b,transparent 70%),linear-gradient(125deg,var(--wall-top),var(--wall-bottom)); }
.plain-room-thumb::before { content:''; position:absolute; bottom:0; left:0; right:0; height:26%; border-top:2px solid #f9f6ed66; background:linear-gradient(var(--floor-top),var(--floor-bottom)); box-shadow:0 -1px 0 #39422c10; }
.plain-room-thumb::after { content:''; position:absolute; top:0; right:0; width:12%; height:74%; background:linear-gradient(90deg,#26352606,#26352617); border-left:1px solid #40503b0a; }
.plain-room-thumb i { position:absolute; bottom:0; left:0; right:0; height:26%; background:radial-gradient(ellipse at 20% 90%,#fffaf333,transparent 80%); }
@media(max-width:760px) {
  .inspector[data-panel=background] .panel-content { gap:4px; }
  .inspector[data-panel=background] .control-row { min-height:36px; flex:0 0 36px; }
  .inspector[data-panel=background] #extra { overflow:visible; }
  .background-count { gap:2px; }
  .background-count strong { font-size:11px; }
  .background-hint { font-size:9px; }
  .touch-hint { display:inline; }
  .scroll-hint { display:none; }
  .background-navigation { gap:5px; }
  .background-navigation button { width:36px; height:36px; padding:9px; }
  .browse-previous .icon { transform:rotate(90deg); }
  .browse-next .icon { transform:rotate(-90deg); }
  .options[data-category=background] { flex:1; min-height:0; scroll-snap-type:x proximity; scroll-padding-inline:2px; padding-bottom:8px; touch-action:pan-x pinch-zoom; cursor:grab; scrollbar-width:none; }
  .options[data-category=background]::-webkit-scrollbar { display:none; height:0; }
  .options[data-category=background] .option { flex:0 0 86px; height:100px; scroll-snap-align:start; user-select:none; }
  .options[data-category=background] .option .visual { height:64px; }
  .options[data-category=background] .option .label { white-space:normal; min-height:22px; margin:4px 1px 0; font-size:9px; line-height:1.2; }
  .options[data-category=background].is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel=background] .background-scroll-track { display:block; position:absolute; left:14px; right:14px; bottom:8px; height:3px; background:#e5ddcd; border-radius:4px; overflow:hidden; pointer-events:none; }
  .background-scroll-track span { position:absolute; top:0; bottom:0; background:#7d927a; border-radius:4px; }
}
.tree-controls { display:flex; flex-direction:column; gap:20px; width:100%; }
.direct-control { display:flex; flex-direction:column; gap:8px; min-width:0; }
.control-label { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#5c6252; font-size:11px; font-weight:500; line-height:14px; }
.control-value { color:#8d8372; font-size:10px; font-weight:400; }
.segments { display:flex; gap:3px; padding:3px; background:#ebe5d9; border:1px solid #e1d8c7; border-radius:9px; }
.segments button { flex:1; min-width:0; min-height:33px; padding:7px 4px; border:0; border-radius:6px; color:#7c786b; background:transparent; font-size:11px; line-height:1.1; transition:background .15s,color .15s; }
.segments button:hover { color:var(--green); background:#f7f2e7; }
.segments button[aria-checked=true] { background:var(--green); color:#fffdf4; box-shadow:0 1px 4px #1c422724; }
.compact-word { display:none; }
.tree-colors .color-choices { gap:5px; }
.tree-swatch { position:relative; display:flex; align-items:center; justify-content:center; width:28px; height:28px; flex:none; border:3px solid var(--cream); outline:1px solid #d7d1c3; border-radius:50%; padding:0; background:var(--swatch); color:#fffaf0; cursor:pointer; }
.tree-swatch .icon { width:13px; height:13px; stroke-width:2; }
.tree-swatch[aria-pressed=true],.tree-swatch.active { outline:2px solid var(--green); }
.tree-swatch.light-swatch { color:var(--green); }
.custom-color { background:conic-gradient(#cc7197,#c7ad6b,#8ca97a,#72a1b5,#a185b0,#cc7197); color:#fff; }
.custom-color input { position:absolute; inset:0; width:100%; height:100%; padding:0; opacity:0; cursor:pointer; }
.custom-color:focus-within { outline:2px solid #c19b55; outline-offset:3px; }
.inspector[aria-busy=true] .tree-thumb { opacity:.7; }
.inspector[data-panel="base & rug"] .control-label { display:none; }
.inspector[data-panel="base & rug"] .direct-control { width:100%; }
@media(max-width:760px) {
  .editor[data-panel=tree] { grid-template-rows:minmax(0,1fr) 54px 222px; }
  .inspector[data-panel=tree] .panel-content { padding:0; gap:10px; overflow:visible; }
  .inspector[data-panel=tree] .control-row { display:contents; }
  .tree-model-browser { display:block; position:relative; flex:0 0 80px; min-width:0; width:100%; order:0; }
  .inspector[data-panel=tree] .options { display:flex; overflow-x:auto; overflow-y:hidden; height:80px; width:100%; padding:2px 2px 6px; gap:8px; scroll-snap-type:x proximity; scroll-padding-inline:2px; overscroll-behavior-x:contain; touch-action:pan-x pinch-zoom; cursor:grab; }
  .inspector[data-panel=tree] .options.is-dragging { cursor:grabbing; scroll-snap-type:none; }
  .inspector[data-panel=tree] .option { flex-basis:90px; height:72px; scroll-snap-align:start; user-select:none; }
  .tree-model-navigation { display:block; position:absolute; inset:0; pointer-events:none; z-index:2; }
  .tree-model-navigation button { position:absolute; top:19px; width:36px; height:36px; padding:8px; display:grid; place-items:center; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); pointer-events:auto; }
  .tree-model-navigation .browse-previous { left:0; }
  .tree-model-navigation .browse-next { right:0; }
  .tree-model-navigation .icon { width:18px; height:18px; }
  .tree-model-navigation button:disabled { opacity:0; pointer-events:none; }
  .tree-model-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; overflow:hidden; border-radius:4px; background:#e5ddcd; pointer-events:none; }
  .tree-model-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
  .inspector[data-panel=tree] .option .visual { height:44px; }
  .inspector[data-panel=tree] .option .label { min-height:0; margin:5px 1px 1px; font-size:9px; white-space:nowrap; }
  .inspector[data-panel=tree] #extra { display:block; flex:none; }
  .tree-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.16fr); gap:11px 12px; }
  .tree-controls [data-setting=fullness] { grid-column:1; grid-row:1; }
  .tree-controls [data-setting=flocking] { grid-column:2; grid-row:1; }
  .tree-controls [data-setting=color] { grid-column:1 / -1; grid-row:2; }
  .direct-control { gap:6px; }
  .control-label { font-size:10px; line-height:12px; }
  .segments { padding:2px; gap:2px; border-radius:8px; }
  .segments button { min-height:31px; padding:7px 3px; font-size:10px; border-radius:5px; }
  .desktop-word { display:none; }.compact-word { display:inline; }
  .tree-colors .color-choices { flex-wrap:nowrap; gap:8px; }
  .tree-swatch { width:30px; height:30px; }
  .saved-tree .icon { width:22px; height:22px; }
  .is-focused .editor[data-panel=tree] { grid-template-rows:minmax(0,1fr) 0 0; }
  .inspector[data-panel="base & rug"] .segments button { min-height:31px; }
}
@media(max-width:360px) { .tree-colors .color-choices { gap:6px; }.tree-swatch { width:28px; height:28px; } }
/* Height joins the existing direct tree adjustments. */
@media(max-width:760px) {
  .editor[data-panel=tree] { grid-template-rows:minmax(0,1fr) 54px 250px; }
  .tree-controls [data-setting=height] { grid-column:1; grid-row:2; }
  .tree-controls [data-setting=color] { grid-column:2; grid-row:2; }
  .tree-controls .tree-colors .color-choices { display:grid; grid-template-columns:repeat(4,30px); gap:6px 8px; }
}
@media(max-width:360px) { .tree-controls .tree-colors .color-choices { grid-template-columns:repeat(4,28px); gap:6px; } }

/* The ornament tray keeps editing controls together and the artwork in view. */
.sprite { background-image:none; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.ornament-browser { display:contents; }
.ornament-navigation,.ornament-scroll-track { display:none; }
.ornament-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; gap:12px; }
.ornament-toolbar .direct-control { gap:0; }
.ornament-toolbar .control-label { display:none; }
.ornament-toolbar .segments button { min-height:34px; }
.ornament-coverage { display:flex; flex-direction:column; gap:6px; font-size:10px; color:#756e60; }
.ornament-coverage>span { display:flex; justify-content:space-between; gap:4px; }
.ornament-coverage strong { font-weight:500; color:var(--green); }
.ornament-coverage input { width:100%; margin:0; height:16px; accent-color:var(--green); cursor:pointer; }
.ornament-search { min-width:0; width:100%; height:39px; padding:8px 10px; border:1px solid #d6cdbd; border-radius:8px; background:#fffcf4; color:var(--text); font-size:11px; }
.inspector[data-panel=ornaments] #panel-actions { order:0; padding:0; border:0; gap:6px; align-items:center; }
.inspector[data-panel=ornaments] #panel-actions .button { min-height:36px; padding:7px 8px; font-size:11px; gap:5px; }
.inspector[data-panel=ornaments] #panel-actions .pick-set-button { flex:0 0 34px; width:34px; padding:6px; }
.pick-set-button .desktop-label { display:none; }
.inspector[data-panel=ornaments] .ornament-collection { flex:1; }
.ornament-collection>.field-caption { display:none; }
.ornament-collection select { height:36px; padding-block:7px; font-size:11px; }
.ornament-count { flex:none; min-width:35px; display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.15; color:#887f6e; }
.ornament-count strong { font-size:14px; font-weight:600; color:var(--green); }
.ornament-count span { font-size:8px; white-space:nowrap; }
.ornament-waiting { border:0; border-radius:6px; padding:6px; font-size:9px; background:#eae1cd; }
.options[data-category=ornaments][data-mode=pick] { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.options[data-category=ornaments][data-mode=pick] .visual { height:74px; }
.options[data-category=ornaments][data-mode=pick] .sprite { width:55px; height:67px; }
.options[data-category=ornaments][data-mode=pick] .label { font-size:9px; margin:7px 1px 3px; min-height:24px; }
.catalog-empty { grid-column:1 / -1; color:#887e6d; font-size:12px; padding:8px; }
@media(min-width:761px) and (max-width:1000px) {
  .inspector[data-panel=ornaments] #panel-actions .button { padding-inline:6px; gap:4px; font-size:10px; }
  .inspector[data-panel=ornaments] #panel-actions .button .icon { width:14px; height:14px; }
}
@media(max-width:760px) {
  .editor[data-panel=ornaments] { grid-template-rows:minmax(0,1fr) 54px 200px; }
  .inspector[data-panel=ornaments] .panel-content { gap:6px; overflow:visible; }
  .inspector[data-panel=ornaments] .control-row { display:flex; flex-direction:column; flex:none; gap:6px; align-items:stretch; overflow:visible; }
  .inspector[data-panel=ornaments] #extra { display:block; flex:none; overflow:visible; }
  .ornament-toolbar { grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr); gap:12px; height:36px; }
  .ornament-toolbar .segments button { min-height:30px; }
  .ornament-coverage { gap:2px; }
  .ornament-search { height:34px; }
  .inspector[data-panel=ornaments] #panel-actions { display:flex; flex:0 0 32px; width:100%; height:32px; }
  .inspector[data-panel=ornaments] #panel-actions .button { min-height:32px; height:32px; font-size:10px; padding:6px 10px; }
  .inspector[data-panel=ornaments] .ornament-collection select { height:32px; max-width:none; }
  .ornament-browser { display:block; position:relative; flex:1; min-height:0; min-width:0; width:100%; order:1; }
  .inspector[data-panel=ornaments] .options { display:flex; height:100%; width:100%; overflow-x:auto; overflow-y:hidden; padding:2px 2px 9px; gap:8px; scroll-snap-type:x proximity; scroll-padding-inline:2px; scrollbar-width:none; overscroll-behavior-x:contain; touch-action:pan-x pinch-zoom; cursor:grab; }
  .inspector[data-panel=ornaments] .options::-webkit-scrollbar { display:none; }
  .inspector[data-panel=ornaments] .options.is-dragging { cursor:grabbing; scroll-snap-type:none; }
  .options[data-category=ornaments] .option { flex:0 0 100px; height:100px; scroll-snap-align:start; user-select:none; }
  .options[data-category=ornaments][data-mode=pick] .option { flex-basis:88px; }
  .options[data-category=ornaments] .option .visual,.options[data-category=ornaments][data-mode=pick] .visual { height:64px; }
  .options[data-category=ornaments] .option .label,.options[data-category=ornaments][data-mode=pick] .label { white-space:normal; min-height:22px; margin:4px 1px 0; font-size:9px; line-height:1.2; }
  .options[data-category=ornaments] .sprite { height:57px; width:49px; }
  .options[data-category=ornaments] .set-preview .sprite { bottom:3px; }
  .options[data-category=ornaments] .set-preview .sprite:nth-child(2) { bottom:13px; }
  .ornament-navigation { display:block; position:absolute; inset:0; pointer-events:none; z-index:2; }
  .ornament-navigation button { position:absolute; top:23px; width:34px; height:34px; padding:8px; display:grid; place-items:center; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); pointer-events:auto; }
  .ornament-navigation .browse-previous { left:0; }.ornament-navigation .browse-next { right:0; }
  .ornament-navigation .icon { width:17px; height:17px; }
  .ornament-navigation button:disabled { opacity:0; pointer-events:none; }
  .ornament-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; overflow:hidden; border-radius:4px; background:#e5ddcd; pointer-events:none; }
  .ornament-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
}

/* A compact lighting bench, with a real strand in each palette preview. */
.light-controls { display:flex; flex-direction:column; gap:14px; }
.light-palette-browser { display:contents; }
.light-navigation,.light-scroll-track { display:none; }
.light-summary { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 8px; padding:0 1px 2px; }
.light-summary strong { font-size:14px; font-weight:600; color:var(--green); }
.light-summary span { font-size:9px; color:#8b806d; }
.light-live-dot { display:inline-block; width:5px; height:5px; margin-right:5px; border-radius:50%; background:#b98b3c; box-shadow:0 0 5px #d2ae56; animation:live-twinkle 2.8s ease-in-out infinite alternate; }
@keyframes live-twinkle { from { opacity:.2; } to { opacity:1; } }
.light-behavior-note { font-size:10px; line-height:1.5; color:#7d735f; margin:-4px 0 0; }
.light-custom-colors { display:flex; align-items:center; gap:8px; min-width:0; }
.light-custom-colors>span { margin-right:auto; font-size:11px; color:#625f51; }
.light-color-slot { position:relative; display:flex; align-items:center; justify-content:center; gap:5px; min-width:47px; min-height:37px; padding:4px 7px; border:1px solid #d6cdbd; border-radius:20px; background:#fffcf3; cursor:pointer; }
.light-color-slot i { width:22px; height:22px; border-radius:50%; background:var(--color); box-shadow:inset 0 0 0 1px #0002; }
.light-color-slot span { font-size:9px; color:#7d735f; }
.light-color-slot input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.light-color-slot:focus-within { outline:2px solid var(--green); outline-offset:2px; }
.inspector[data-panel=lights] .options { gap:8px; }
.inspector[data-panel=lights] .option .visual { height:50px; }
.inspector[data-panel=lights] .option .label { min-height:14px; margin:6px 3px 4px; font-size:10px; }
.light-preview { position:relative; display:flex; align-items:flex-start; justify-content:space-between; width:88px; height:26px; gap:0; padding-top:6px; }
.light-preview::before { content:''; position:absolute; left:1px; right:1px; top:4px; height:8px; border-top:1px solid #4f6651; border-radius:50%; }
.light-preview i { position:relative; display:block; width:7px; height:13px; flex:none; border-radius:45% 45% 42% 42%; background:radial-gradient(ellipse at 33% 30%,#fffbea 0 7%,transparent 27%),linear-gradient(90deg,#263c3b,var(--bulb) 30%,#fffbe6 44%,var(--bulb) 65%,#354636); box-shadow:0 0 5px 1px var(--bulb),0 0 13px 2px color-mix(in srgb,var(--bulb) 35%,transparent); transform:rotate(-8deg); }
.light-preview i:nth-child(even) { transform:rotate(10deg); }
.light-preview i::before { content:''; position:absolute; top:-2px; left:1.3px; width:4.4px; height:3px; border-radius:1px; background:linear-gradient(90deg,#1b3828,#7c8b68,#183323); }
.light-preview.off i { background:linear-gradient(90deg,#858c7c,#d5dac9 42%,#a8ad9e); box-shadow:none; opacity:.8; }
@media(max-width:1000px) and (min-width:761px) { .light-preview { width:78px; } }
@media(max-width:760px) {
  .editor[data-panel=lights] { grid-template-rows:minmax(0,1fr) 54px 200px; }
  .editor[data-panel=lights][data-light-palette=custom] { grid-template-rows:minmax(0,1fr) 54px 244px; }
  .inspector[data-panel=lights] .panel-content { gap:6px; }
  .inspector[data-panel=lights] .control-row { display:contents; }
  .inspector[data-panel=lights] #extra { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto 35px; gap:6px 12px; overflow:visible; flex:none; }
  .light-controls { display:contents; }
  .light-controls [data-setting="bulb size"] { grid-column:1; grid-row:1; }
  .light-controls [data-setting=quantity] { grid-column:2; grid-row:1; }
  .light-controls [data-setting=behavior] { grid-column:2; grid-row:2; justify-content:center; }
  .light-controls [data-setting=behavior] .control-label { display:none; }
  .light-behavior-note { display:none; }
  .light-custom-colors { grid-column:1 / -1; grid-row:3; height:38px; gap:9px; }
  .light-summary { grid-column:1; grid-row:2; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:2px; padding:0 1px; }
  .light-summary strong { font-size:12px; }
  .light-summary span { font-size:8px; }
  .inspector[data-panel=lights] .options { min-height:0; padding-bottom:3px; }
  .light-palette-browser { display:block; position:relative; flex:1; min-width:0; min-height:0; width:100%; order:1; }
  .inspector[data-panel=lights] .options { width:100%; height:100%; padding-bottom:8px; scroll-snap-type:x proximity; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; }
  .inspector[data-panel=lights] .options.is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel=lights] .option { flex-basis:108px; height:82px; }
  .inspector[data-panel=lights] .option { scroll-snap-align:start; user-select:none; }
  .inspector[data-panel=lights] .option .visual { height:45px; }
  .inspector[data-panel=lights] .option .label { white-space:normal; min-height:22px; margin:5px 2px 1px; font-size:9px; }
  .light-preview { width:80px; }
  .light-navigation { display:block; position:absolute; inset:0; pointer-events:none; z-index:2; }
  .light-navigation button { position:absolute; top:16px; width:32px; height:32px; padding:7px; display:grid; place-items:center; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); pointer-events:auto; }
  .light-navigation .browse-previous { left:0; }.light-navigation .browse-next { right:0; }
  .light-navigation .icon { width:16px; height:16px; }
  .light-navigation button:disabled { opacity:0; pointer-events:none; }
  .light-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; overflow:hidden; border-radius:4px; background:#e5ddcd; pointer-events:none; }
  .light-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
}

/* Material previews use the same renderer as the fitted strand. */
.garland-controls { display:flex; flex-direction:column; gap:14px; }
.garland-material-browser { display:contents; }
.garland-navigation,.garland-scroll-track { display:none; }
.garland-summary { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 8px; padding:0 1px 2px; }
.garland-summary strong { color:var(--green); font-size:14px; font-weight:600; }
.garland-summary span { font-size:9px; color:#8b806d; }
.garland-thumb { display:block; width:100%; height:100%; object-fit:contain; }
.inspector[data-panel=garland] .options { gap:8px; }
.inspector[data-panel=garland] .option .visual { height:64px; }
.inspector[data-panel=garland] .option .label { min-height:26px; font-size:10px; margin:5px 3px 3px; }
@media(max-width:760px) {
  .editor[data-panel=garland] { grid-template-rows:minmax(0,1fr) 54px 200px; }
  .inspector[data-panel=garland] .panel-content { gap:6px; }
  .inspector[data-panel=garland] .control-row { display:contents; }
  .inspector[data-panel=garland] #extra { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:auto 35px; gap:6px 12px; overflow:visible; flex:none; }
  .garland-controls { display:contents; }
  .garland-controls [data-setting=density] { grid-column:2; grid-row:1; }
  .garland-controls [data-setting="wrap style"] { grid-column:1 / -1; grid-row:2; }
  .garland-controls [data-setting="wrap style"] .control-label { display:none; }
  .garland-summary { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; }
  .garland-summary strong { font-size:12px; }.garland-summary span { font-size:8px; }
  .garland-material-browser { display:block; position:relative; flex:1; min-width:0; min-height:0; width:100%; order:1; }
  .inspector[data-panel=garland] .options { width:100%; height:100%; min-height:0; padding-bottom:8px; scroll-snap-type:x proximity; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; }
  .inspector[data-panel=garland] .options.is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel=garland] .option { flex-basis:110px; height:82px; scroll-snap-align:start; user-select:none; }
  .inspector[data-panel=garland] .option .visual { height:45px; }
  .inspector[data-panel=garland] .option .label { min-height:22px; margin:5px 2px 1px; white-space:normal; font-size:9px; }
  .garland-navigation { display:block; position:absolute; inset:0; pointer-events:none; z-index:2; }
  .garland-navigation button { position:absolute; top:16px; width:32px; height:32px; padding:7px; display:grid; place-items:center; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); pointer-events:auto; }
  .garland-navigation .browse-previous { left:0; }.garland-navigation .browse-next { right:0; }
  .garland-navigation .icon { width:16px; height:16px; }
  .garland-navigation button:disabled { opacity:0; pointer-events:none; }
  .garland-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; overflow:hidden; border-radius:4px; background:#e5ddcd; pointer-events:none; }
  .garland-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
}

/* Dedicated topper artwork sits in a quiet gallery; the mobile bench stays compact. */
.topper-browser { display:contents; }
.topper-navigation,.topper-scroll-track { display:none; }
.topper-collections { display:flex; flex-wrap:wrap; gap:5px; padding:2px 1px; }
.topper-collections button { flex:none; min-height:29px; border:1px solid #ded6c5; border-radius:18px; background:transparent; padding:6px 10px; color:#7b7566; font-size:10px; }
.topper-collections button:hover { background:#eee7da; color:var(--green); }
.topper-collections button[aria-pressed=true] { background:var(--green); border-color:var(--green); color:#fffaf0; }
.topper-controls { display:flex; gap:10px; }
.topper-controls .direct-control { flex:1; }
.topper-controls .direct-control[data-setting="topper light"] { flex:.65; }
.inspector[data-panel=topper] .options { gap:9px; }
.inspector[data-panel=topper] .topper-visual { height:106px; background:radial-gradient(ellipse at 48% 30%,#f6efe2,#e8dfd0); }
.topper-thumb { width:100%; height:100%; display:block; object-fit:contain; padding:5px; user-select:none; -webkit-user-drag:none; }
.topper-lit-badge { position:absolute; left:5px; bottom:5px; color:#806333; background:#fffbefdd; border:1px solid #cdbc925c; border-radius:7px; padding:2px 5px; font-size:8px; line-height:1; letter-spacing:.02em; }
.topper-lit-badge::before { content:''; display:inline-block; width:4px; height:4px; margin-right:3px; vertical-align:1px; border-radius:50%; background:#e2ac4e; box-shadow:0 0 4px #e2ac4e; }
.inspector[data-panel=topper] .option .label { font-size:10px; margin:6px 3px 4px; min-height:25px; }
@media(max-width:760px) {
  .editor[data-panel=topper] { grid-template-rows:minmax(0,1fr) 54px 200px; }
  .inspector[data-panel=topper] .panel-content { gap:6px; }
  .inspector[data-panel=topper] .control-row { display:contents; }
  .inspector[data-panel=topper] #extra { display:flex; flex-direction:column; align-items:stretch; gap:7px; overflow:visible; flex:none; }
  .topper-collections { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; gap:5px; padding-block:2px; }
  .topper-collections::-webkit-scrollbar { display:none; }
  .topper-collections button { min-height:27px; padding:5px 10px; font-size:10px; }
  .topper-controls { gap:12px; }
  .topper-controls .direct-control { gap:4px; }
  .topper-controls .control-label { font-size:9px; line-height:11px; }
  .topper-controls .segments button { min-height:29px; padding:6px 4px; }
  .topper-browser { display:block; position:relative; flex:1; min-width:0; min-height:0; width:100%; order:1; }
  .inspector[data-panel=topper] .options { width:100%; height:100%; min-height:0; padding-bottom:8px; scroll-snap-type:x proximity; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; }
  .inspector[data-panel=topper] .options.is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel=topper] .option { flex-basis:101px; height:94px; scroll-snap-align:start; user-select:none; }
  .inspector[data-panel=topper] .topper-visual { height:57px; }
  .topper-thumb { padding:2px; }
  .inspector[data-panel=topper] .option .label { min-height:22px; margin:5px 2px 1px; white-space:normal; font-size:9px; line-height:1.2; }
  .topper-lit-badge { left:3px; bottom:3px; font-size:7px; padding:2px 4px; }
  .topper-navigation { display:block; position:absolute; inset:0; pointer-events:none; z-index:2; }
  .topper-navigation button { position:absolute; top:17px; width:32px; height:32px; padding:7px; display:grid; place-items:center; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); pointer-events:auto; }
  .topper-navigation .browse-previous { left:0; }.topper-navigation .browse-next { right:0; }
  .topper-navigation .icon { width:16px; height:16px; }
  .topper-navigation button:disabled { opacity:0; pointer-events:none; }
  .topper-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; overflow:hidden; border-radius:4px; background:#e5ddcd; pointer-events:none; }
  .topper-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
}

/* Keep the center clear when Tall trees and their toppers reach the top edge. */
@media(max-width:760px) {
  .actions { left:16px; pointer-events:none; }
  .actions .circle-button { pointer-events:auto; }
  .actions #undo { margin-right:auto; }
}
@media(max-width:360px) {
  .actions { left:12px; }
}

/* Independent, editable floor layers with the same browsing gestures as art. */
.floor-controls { display:flex; flex-direction:column; gap:14px; }
.floor-controls [data-setting="rug size"] .control-label { display:block!important; }
.floor-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; border-top:1px solid var(--line); padding-top:10px; }
.floor-summary>span { display:flex; flex-direction:column; min-width:0; gap:3px; }
.floor-summary small { font-size:9px; color:var(--muted); }
.floor-summary strong { font-size:11px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.floor-browser { display:contents; }
.floor-navigation,.floor-scroll-track { display:none; }
.floor-thumb { display:block; width:100%; height:100%; object-fit:contain; padding:3px; }
.inspector[data-panel="base & rug"] .floor-visual { height:96px; background:linear-gradient(145deg,#efe8da,#e5ddce); }
@media(max-width:760px) {
  .editor[data-panel="base & rug"] { grid-template-rows:minmax(0,1fr) 54px 210px; }
  .inspector[data-panel="base & rug"] .panel-content { gap:7px; }
  .inspector[data-panel="base & rug"] .control-row { display:contents; }
  .inspector[data-panel="base & rug"] #extra { display:flex; flex-direction:column; align-items:stretch; overflow:visible; flex:none; gap:7px; }
  .floor-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); align-items:end; gap:10px; }
  .floor-controls [data-setting=layer]:last-child { grid-column:1 / -1; }
  .floor-controls .segments button { min-height:30px!important; padding:6px 3px; font-size:10px; }
  .floor-controls [data-setting="rug size"] { gap:4px; }
  .floor-controls [data-setting="rug size"] .control-label { font-size:9px; line-height:11px; }
  .floor-summary { padding-top:6px; gap:12px; }
  .floor-summary>span { flex-direction:row; gap:7px; align-items:baseline; }
  .floor-summary strong { font-size:10px; }
  .floor-browser { display:block; position:relative; flex:1; min-width:0; min-height:0; width:100%; order:1; }
  .inspector[data-panel="base & rug"] .options { display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; gap:8px; padding:2px 2px 8px; scroll-snap-type:x proximity; scrollbar-width:none; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; }
  .inspector[data-panel="base & rug"] .options::-webkit-scrollbar { display:none; }
  .inspector[data-panel="base & rug"] .options.is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel="base & rug"] .option { flex:0 0 106px; height:100%; min-height:90px; max-height:108px; scroll-snap-align:start; user-select:none; }
  .inspector[data-panel="base & rug"] .floor-visual { height:calc(100% - 29px); min-height:50px; }
  .inspector[data-panel="base & rug"] .option .label { font-size:9px; line-height:1.2; min-height:20px; margin:5px 2px 1px; white-space:normal; }
  .floor-navigation { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; }
  .floor-navigation button { position:absolute; top:calc(50% - 23px); display:grid; place-items:center; width:32px; height:32px; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); padding:7px; pointer-events:auto; }
  .floor-navigation .browse-previous { left:0; }.floor-navigation .browse-next { right:0; }
  .floor-navigation .icon { width:16px; height:16px; }
  .floor-navigation button:disabled { opacity:0; pointer-events:none; }
  .floor-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; border-radius:4px; background:#e5ddcd; overflow:hidden; pointer-events:none; }
  .floor-scroll-track span { position:absolute; top:0; bottom:0; background:#7d927a; border-radius:4px; }
  .focused.editor[data-panel="base & rug"] { grid-template-rows:minmax(0,1fr) 0 0; }
}

/* Presents keep physical proportions; paper and box shape stay independent. */
.present-controls { display:flex; flex-direction:column; gap:13px; }
.present-summary { margin:0; font-size:10px; line-height:1.4; color:var(--muted); }
.inspector[data-panel=presents] #extra { gap:10px; }
.inspector[data-panel=presents] #panel-actions { order:0; border:0; padding:0; gap:6px; }
.inspector[data-panel=presents] #panel-actions .button { font-size:11px; gap:5px; padding-inline:6px; }
.inspector[data-panel=presents] #panel-actions .icon { width:15px; height:15px; }
.present-arrange[aria-pressed=true] { border-color:var(--green); background:#e2e9dc; }
.present-layer-badge { position:absolute; bottom:3px; left:3px; border:1px solid #c9c6b580; border-radius:5px; background:#fff9eceb; padding:2px 4px; color:#4c5d43; font-size:8px; line-height:1.1; }
.inspector[data-panel=presents] #panel-actions .present-remove { flex:0 0 36px; width:36px; padding:0; }
.present-remove .desktop-label,.present-remove .mobile-label { display:none; }
.inspector[data-panel=presents] .present-visual { height:100px; background:radial-gradient(ellipse at 48% 28%,#f6efe3,#e7dfd1); }
.present-thumb { width:100%; height:100%; object-fit:contain; padding:5px 8px; display:block; user-select:none; -webkit-user-drag:none; }
.inspector[data-panel=presents] .option .label { font-size:10px; min-height:25px; margin:6px 3px 4px; }
.present-browser { display:contents; }
.present-navigation,.present-scroll-track { display:none; }
@media(max-width:760px) {
  .editor[data-panel=presents] { grid-template-rows:minmax(0,1fr) 54px 210px; }
  .inspector[data-panel=presents] .panel-content { gap:6px; }
  .inspector[data-panel=presents] .control-row { display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .inspector[data-panel=presents] #extra { display:flex; flex-direction:column; align-items:stretch; overflow:visible; flex:none; gap:4px; }
  .present-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.18fr); gap:10px; }
  .present-controls .direct-control { gap:4px; }
  .present-controls .direct-control:only-child { grid-column:1 / -1; }
  .present-controls .control-label { font-size:9px; line-height:11px; display:block; }
  .present-controls .segments button { min-height:30px; font-size:10px; padding:6px 3px; }
  .present-summary { font-size:9px; line-height:12px; }
  .inspector[data-panel=presents] #panel-actions { display:flex; width:100%; height:32px; flex:0 0 32px; gap:6px; }
  .inspector[data-panel=presents] #panel-actions .button { min-height:32px; height:32px; padding:6px 10px; font-size:10px; }
  .inspector[data-panel=presents] #panel-actions .icon { width:13px; height:13px; }
  .present-browser { display:block; position:relative; flex:1; min-width:0; min-height:0; width:100%; order:1; }
  .inspector[data-panel=presents] .options { display:flex; width:100%; height:100%; gap:8px; padding:2px 2px 8px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:none; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; }
  .inspector[data-panel=presents] .options::-webkit-scrollbar { display:none; }
  .inspector[data-panel=presents] .options.is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel=presents] .option { flex:0 0 105px; height:100%; min-height:84px; max-height:106px; scroll-snap-align:start; user-select:none; }
  .inspector[data-panel=presents] .present-visual { height:calc(100% - 28px); min-height:48px; }
  .inspector[data-panel=presents] .option .label { font-size:9px; line-height:1.2; min-height:20px; margin:5px 2px 1px; white-space:normal; }
  .present-thumb { padding:2px 5px; }
  .present-navigation { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; }
  .present-navigation button { position:absolute; top:calc(50% - 23px); display:grid; place-items:center; width:32px; height:32px; padding:7px; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #2337262b; color:var(--green); pointer-events:auto; }
  .present-navigation .browse-previous { left:0; }.present-navigation .browse-next { right:0; }
  .present-navigation .icon { width:16px; height:16px; }
  .present-navigation button:disabled { opacity:0; pointer-events:none; }
  .present-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; border-radius:4px; background:#e5ddcd; overflow:hidden; pointer-events:none; }
  .present-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
  .focused.editor[data-panel=presents] { grid-template-rows:minmax(0,1fr) 0 0; }
}

/* A small writing bench and text-only wishes, rather than artwork tiles. */
.inspector[data-panel=message] #extra { gap:12px; }
.message-caption { display:flex; align-items:center; gap:10px; margin-bottom:6px; min-height:12px; color:#7b7466; font-size:10px; line-height:1.2; }
.message-caption label { margin-right:auto; }
.message-move-hint { font-size:9px; color:#918775; }
.message-count { font-size:9px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.message-input-row { display:flex; align-items:center; gap:8px; }
.message-input-field { position:relative; flex:1; min-width:0; }
.message-size { display:flex; flex:none; align-items:center; height:40px; border:1px solid #d6cdbd; border-radius:8px; overflow:hidden; background:#fffbf466; }
.message-size button { display:grid; place-items:center; width:30px; height:100%; border:0; padding:0; background:transparent; color:var(--green); font-size:18px; }
.message-size button:hover:not(:disabled) { background:#eae3d6; }
.message-size button:focus-visible { outline-offset:-3px; }
.message-size output { min-width:35px; text-align:center; font-size:10px; color:#625f51; font-variant-numeric:tabular-nums; white-space:nowrap; }
#message-text { display:block; width:100%; min-width:0; height:40px; border:1px solid #d6cdbd; border-radius:8px; padding:9px 38px 9px 11px; background:#fffbf466; color:#304733; font-size:13px; }
#message-text::placeholder { color:#a09785; font-size:11px; }
.message-clear { position:absolute; right:4px; top:4px; width:30px; height:32px; display:grid; place-items:center; padding:6px; border:0; border-radius:6px; background:transparent; color:#837b6c; }
.message-clear:hover:not(:disabled) { background:#eae3d6; }
.message-clear:disabled { opacity:.25; }
.message-clear .icon { width:16px; height:16px; }
.message-controls { display:flex; align-items:end; gap:8px; }
.message-controls .direct-control { flex:1; min-width:0; }
.message-controls .segments [data-control="Type style:Serif"] { font-family:Georgia,serif; font-style:italic; }
.message-controls .segments [data-control="Type style:Sans"] { font-family:'DM Sans',sans-serif; }
.message-controls .segments [data-control="Type style:Block"] { font-family:'Bungee',Impact,sans-serif; font-weight:400; font-size:11px; }
.message-color { display:flex; flex-direction:column; flex:none; gap:7px; }
.message-color input { width:36px; height:40px; padding:4px; border:1px solid #d6cdbd; border-radius:8px; background:transparent; cursor:pointer; }
.message-browser { display:contents; }
.message-navigation,.message-scroll-track { display:none; }
.inspector[data-panel=message] .options { grid-template-columns:1fr; gap:6px; padding:2px 3px 5px; }
.inspector[data-panel=message] .message-saying { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; height:auto; padding:10px 12px; border-radius:7px; font-size:12px; line-height:1.35; }
.message-saying-text { display:block; min-width:0; flex:1; }
.message-saying-check { display:block; flex:none; opacity:0; color:var(--green); }
.message-saying-check .icon { width:14px; height:14px; }
.message-saying.active .message-saying-check { opacity:1; }
.message-saying.active::after { display:none; }
@media(max-width:760px) {
  .editor[data-panel=message] { grid-template-rows:minmax(0,1fr) 54px 220px; }
  .inspector[data-panel=message] .panel-content { gap:6px; }
  .inspector[data-panel=message] .control-row { display:contents; }
  .inspector[data-panel=message] #extra { display:flex; flex-direction:column; align-items:stretch; overflow:visible; gap:7px; flex:none; }
  .message-caption { margin-bottom:4px; font-size:9px; line-height:11px; min-height:11px; }
  .message-move-hint,.message-count { font-size:8px; }
  #message-text { height:36px; padding:8px 36px 8px 10px; font-size:12px; }
  .message-size { height:36px; }
  .message-clear { height:28px; width:28px; }
  .message-controls { gap:12px; }
  .message-controls .direct-control { gap:4px; }
  .message-controls .control-label { font-size:9px; line-height:11px; display:block; }
  .message-controls .segments button { min-height:29px; padding:6px 4px; font-size:11px; }
  .message-controls .segments [data-control="Type style:Block"] { font-size:10px; }
  .message-color { gap:4px; }
  .message-color input { height:35px; width:42px; padding:3px; }
  .message-browser { display:block; position:relative; flex:1; width:100%; min-height:0; min-width:0; order:1; }
  .inspector[data-panel=message] .options { display:grid; width:100%; height:100%; grid-auto-flow:column; grid-template-columns:none; grid-template-rows:repeat(2,minmax(34px,1fr)); grid-auto-columns:166px; gap:6px 8px; padding:2px 2px 7px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximity; touch-action:pan-x pinch-zoom; overscroll-behavior-x:contain; }
  .inspector[data-panel=message] .options::-webkit-scrollbar { display:none; }
  .inspector[data-panel=message] .options.is-dragging { scroll-snap-type:none; cursor:grabbing; }
  .inspector[data-panel=message] .message-saying { height:100%; min-height:34px; max-height:none; padding:6px 9px; gap:6px; font-size:10px; line-height:1.2; scroll-snap-align:start; user-select:none; }
  .message-saying-check .icon { width:12px; height:12px; }
  .message-navigation { display:block; position:absolute; inset:0; z-index:2; pointer-events:none; }
  .message-navigation button { position:absolute; top:calc(50% - 17px); display:grid; place-items:center; width:30px; height:30px; padding:6px; border:1px solid #d4d6c7; border-radius:50%; background:#fffcf3f2; box-shadow:0 2px 9px #23372620; color:var(--green); pointer-events:auto; }
  .message-navigation .browse-previous { left:0; }.message-navigation .browse-next { right:0; }
  .message-navigation .icon { width:15px; height:15px; }
  .message-navigation button:disabled { opacity:0; pointer-events:none; }
  .message-scroll-track { display:block; position:absolute; bottom:0; left:2px; right:2px; height:3px; border-radius:4px; background:#e5ddcd; overflow:hidden; pointer-events:none; }
  .message-scroll-track span { position:absolute; top:0; bottom:0; border-radius:4px; background:#7d927a; }
  .focused.editor[data-panel=message] { grid-template-rows:minmax(0,1fr) 0 0; }
}

.message-backdrop-control { display:flex; flex:none; flex-direction:column; gap:7px; }
.message-backdrop-toggle { display:grid; place-items:center; width:36px; height:40px; padding:6px; border:1px solid #d6cdbd; border-radius:8px; color:var(--green); background:#e6e3d7; }
.message-backdrop-toggle .message-backdrop-swatch { display:block; width:21px; height:14px; border:1px solid #b6a47f; border-radius:4px; background:#fff8e7; box-shadow:0 0 5px 3px #fff8e7cc,inset 0 0 4px #fff; }
.message-backdrop-toggle[aria-expanded=true] { border-color:var(--green); background:#dce4d5; }
.message-controls .segments button { padding-inline:4px; }
.inspector[data-panel=message] .options[data-mode=backdrop] { display:flex; flex-direction:column; overflow:visible; scroll-snap-type:none; touch-action:auto; }
.message-backdrop-editor { display:flex; flex-direction:column; gap:14px; padding:8px 2px; width:100%; }
.message-opacity .segments button { font-variant-numeric:tabular-nums; }
.message-opacity .segments button:disabled { opacity:.4; cursor:default; }
.message-browser.editing-backdrop .message-navigation,.message-browser.editing-backdrop .message-scroll-track { display:none; }
@media(max-width:760px) {
  .message-controls { gap:8px; }
  .message-color input { width:36px; }
  .message-backdrop-control { gap:4px; }
  .message-backdrop-toggle { height:35px; }
  .message-backdrop-editor { gap:6px; padding:2px; }
  .message-backdrop-editor .direct-control { display:grid; grid-template-columns:63px minmax(0,1fr); align-items:center; gap:6px; }
  .message-backdrop-editor .segments { padding:2px; }
  .message-backdrop-editor .segments button { min-height:36px; padding:8px 4px; }
  .message-backdrop-editor .control-label { font-size:9px; line-height:11px; margin:0; }
}

/* The welcome and the studio share a palette, but have separate scroll areas. */
.welcome[hidden],.editor[hidden] { display:none!important; }
.welcome { height:100vh; height:100dvh; overflow-y:auto; overflow-x:hidden; background:var(--cream); color:var(--green); overscroll-behavior-y:contain; }
.welcome-shell { max-width:1328px; padding:0 24px; margin:0 auto; }
.welcome-header { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #c9c0ae; }
.welcome-wordmark { display:flex; align-items:center; gap:12px; font:500 32px/1.15 'Playfair Display',Georgia,serif; letter-spacing:-.035em; white-space:nowrap; }
.welcome-wordmark .icon { width:36px; height:40px; stroke-width:1.7; }
.welcome-header nav { display:flex; align-items:center; gap:32px; }
.welcome-header a { font-size:17px; color:var(--text); text-decoration:none; text-underline-offset:5px; }
.welcome-header a:hover { text-decoration:underline; }
.welcome-studio,.welcome-start { display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--green); background:var(--green); color:#fffdf5; font-weight:600; transition:background .15s,transform .15s; }
.welcome-studio:hover,.welcome-start:hover { background:#246047; transform:translateY(-1px); }
.welcome-studio { min-height:44px; padding:9px 24px; border-radius:13px; font-size:17px; white-space:nowrap; }
.welcome-hero { display:grid; grid-template-columns:1.12fr 1fr; gap:48px; align-items:center; padding:24px 16px 20px; }
.welcome-copy { min-width:0; padding-bottom:8px; }
.welcome-copy h1 { font:500 clamp(44px,5.8vw,84px)/1.12 'Playfair Display',Georgia,serif; letter-spacing:-.045em; margin:0 0 30px; }
.welcome-copy h1 span,.welcome-copy h1 em { display:block; white-space:nowrap; }
.welcome-copy h1 em { font-family:Georgia,serif; font-weight:400; color:#aa843c; letter-spacing:-.045em; }
.welcome-intro { font-size:clamp(17px,1.8vw,25px); line-height:1.5; color:var(--text); max-width:550px; margin:0 0 36px; }
.welcome-start { gap:32px; min-width:360px; min-height:70px; padding:16px 36px; border-radius:40px; font-size:26px; }
.welcome-start > span[aria-hidden] { font-size:32px; line-height:1; font-weight:400; }
.welcome-free { margin:15px 3px 0; font-size:19px; line-height:1.5; color:#586450; }
.welcome-picture { position:relative; min-width:0; width:100%; aspect-ratio:1; margin:0; background:#a88d69; border-radius:16px; overflow:hidden; box-shadow:0 4px 12px #35251924; }
.welcome-picture canvas { display:block; width:100%; height:100%; }
.welcome-guide { border-top:1px solid #c9c0ae; padding:20px 16px 18px; scroll-margin-top:20px; }
.welcome-guide h2 { font:500 38px/1.25 'Playfair Display',Georgia,serif; letter-spacing:-.025em; margin:0 0 20px; }
.welcome-steps { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:42px; padding:0; margin:0; }
.welcome-number { display:block; font:italic 34px/1.1 Georgia,serif; color:#aa843c; margin-bottom:5px; }
.welcome-steps h3 { margin:0 0 10px; font:500 28px/1.25 'Playfair Display',Georgia,serif; letter-spacing:-.02em; }
.welcome-steps p { margin:0; color:var(--text); font-size:18px; line-height:1.5; }
.welcome-tip { margin:22px 0 0; font-size:17px; font-style:italic; line-height:1.5; color:#445343; }
.welcome-footer { border-top:1px solid #c9c0ae; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 6px 14px; font:500 23px/1.3 'Playfair Display',Georgia,serif; }
.welcome-footer p { margin:0; font:italic 20px/1.4 Georgia,serif; }
.welcome-no-script { margin:0; padding:12px; color:var(--green); }
.welcome a:focus-visible { outline:2px solid #c19b55; outline-offset:5px; border-radius:2px; }
body[data-view=welcome] #toast { display:none; }
.brand { width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--green); padding:8px 2px; gap:3px; }
.brand:hover { background:#eae5d9; }
.brand .brand-guide { font:400 8px/1.3 'DM Sans',sans-serif; color:#7a735f; }
.brand:focus-visible { outline-offset:-4px; }
.mobile-guide { display:none; }
@media(max-width:1000px) and (min-width:761px) {
  .welcome-shell { padding:0 28px; }
  .welcome-hero { gap:28px; padding:28px 0; }
  .welcome-copy h1 { font-size:clamp(38px,5.2vw,52px); }
  .welcome-start { min-width:0; min-height:52px; font-size:18px; padding:11px 22px; gap:16px; }
  .welcome-free { font-size:13px; }
  .welcome-guide { padding-inline:0; }
  .welcome-steps { gap:26px; }
  .welcome-steps h3 { font-size:23px; }
  .welcome-steps p { font-size:15px; }
}
@media(max-width:760px) {
  .welcome-shell { padding:0 24px; }
  .welcome-header { position:sticky; top:0; z-index:2; background:var(--cream); min-height:68px; gap:16px; }
  .welcome-wordmark { font-size:21px; gap:7px; }
  .welcome-wordmark .icon { width:26px; height:30px; }
  .welcome-header nav { gap:0; flex:none; }
  .welcome-header a { font-size:11px; padding:12px 0 12px 8px; }
  .welcome-studio { display:inline-flex; min-height:36px; padding:8px 10px; border-radius:9px; font-size:11px; }
  .welcome-header #welcome-how { display:none; }
  .welcome-hero { grid-template-columns:minmax(0,1fr); gap:28px; padding:30px 0 26px; }
  .welcome-copy { padding:0; }
  .welcome-copy h1 { font-size:clamp(32px,10vw,48px); margin-bottom:18px; letter-spacing:-.035em; }
  .welcome-intro { font-size:16px; line-height:1.6; margin-bottom:22px; }
  .welcome-desktop-break { display:none; }
  .welcome-start { width:100%; min-width:0; min-height:50px; padding:11px 23px; gap:18px; font-size:17px; }
  .welcome-start > span[aria-hidden] { font-size:26px; }
  .welcome-free { text-align:center; margin-top:10px; font-size:12px; }
  .welcome-picture { aspect-ratio:4/5; border-radius:13px; }
  .welcome-guide { padding:23px 0; scroll-margin-top:20px; }
  .welcome-guide h2 { max-width:310px; font-size:28px; line-height:1.3; margin-bottom:24px; }
  #welcome-guide-title { scroll-margin-top:88px; }
  .welcome-steps { grid-template-columns:minmax(0,1fr); gap:25px; }
  .welcome-steps li { display:grid; grid-template-columns:33px minmax(0,1fr); gap:11px; }
  .welcome-number { font-size:25px; margin:0; padding-top:2px; }
  .welcome-steps h3 { font-size:23px; margin-bottom:7px; }
  .welcome-steps p { font-size:14px; line-height:1.6; }
  .welcome-tip { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; font-size:13px; line-height:1.7; }
  .welcome-footer { align-items:start; flex-direction:column; gap:8px; padding:20px 0 24px; font-size:19px; }
  .welcome-footer p { font-size:14px; }
  .category-rail { flex-direction:row; align-items:stretch; }
  .category-rail nav { flex:1; min-width:0; }
  .mobile-guide { display:flex; flex:none; flex-direction:column; align-items:center; justify-content:center; gap:1px; width:46px; min-height:40px; padding:1px 3px 4px 6px; border:0; border-right:1px solid var(--line); background:var(--cream); color:var(--green); font-size:8px; }
  .mobile-guide .icon { width:20px; height:20px; stroke-width:1.5; }
}
@media(max-width:360px) {
  .welcome-shell { padding:0 19px; }
  .welcome-wordmark { font-size:18px; gap:5px; }
  .welcome-wordmark .icon { width:23px; }
  .welcome-header a { font-size:10px; padding-left:4px; }
  .welcome-wordmark { font-size:17px; }
  .welcome-header { gap:8px; }
  .welcome-hero { padding-top:24px; }
}

/* Category-specific trays must not reserve rows after controls are hidden. */
@media(max-width:760px) {
  .editor.focused[data-panel] { grid-template-rows:minmax(0,1fr) 0 0; }
}

/* Keep New / Undo apart from the adjacent Save / Load / Share actions. */
.actions { left:18px; pointer-events:none; }
.actions .circle-button { pointer-events:auto; }
.actions #undo { margin-right:auto; }
.actions .labeled-action { flex-direction:column; gap:2px; }
.actions .labeled-action .icon { width:17px; height:17px; }
.action-caption { font-size:8px; line-height:9px; font-weight:600; white-space:nowrap; }
#tree-actions-help { top:0; left:0; margin:0; }
@media(max-width:1000px) and (min-width:761px) { .actions { left:12px; } }
@media(max-width:760px) { .actions { left:16px; } }
@media(max-width:360px) { .actions { left:12px; } }

/* Share feedback belongs in the dialog, above its backdrop. */
#share-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; }
#share-dialog .close { width:44px; height:44px; right:8px; top:8px; }
#share-dialog .button { min-height:44px; }
#share-dialog .share-status { font-size:12px; line-height:1.5; color:var(--green); background:#e7eddf; border-radius:9px; padding:11px 12px; margin:10px 0 0; }
.share-link-fallback { min-width:0; margin-top:12px; }
.share-link-fallback label { display:block; color:var(--muted); font-size:11px; margin-bottom:6px; }
#share-link { display:block; width:100%; min-width:0; height:44px; border:1px solid #cfc6b4; border-radius:8px; background:#fffcf4; color:var(--text); font-size:16px; padding:8px 10px; }
#share-dialog { width:min(92vw,420px); max-height:calc(100dvh - 24px); padding:26px; overflow-y:auto; overscroll-behavior:contain; }
#share-dialog .dialog-mark { margin-bottom:12px; }
#share-dialog .share-preview { display:block; max-width:100%; width:auto; height:auto; max-height:min(28dvh,220px); margin:0 auto 18px; border-radius:8px; -webkit-touch-callout:default; }
#share-dialog #share-save-note { margin:0 0 14px; font-size:12px; line-height:1.5; }
.share-editable-options { border-top:1px solid var(--line); margin-top:18px; padding-top:14px; }
.share-editable-options summary { cursor:pointer; font-size:12px; line-height:1.5; color:var(--green); }
.share-editable-options summary:focus-visible { outline:2px solid #c19b55; outline-offset:3px; }
.share-editable-options .button { margin:10px 0 0; }
@media(max-width:760px) {
  /* Keep Safari from zooming the entire studio when the keyboard opens. */
  .ornament-search, #message-text { font-size:16px; }
  #message-text { padding-top:6px; padding-bottom:6px; }
  .ornament-search { padding-top:5px; padding-bottom:5px; }
  .welcome-header { padding-top:env(safe-area-inset-top); min-height:calc(68px + env(safe-area-inset-top)); }
  .welcome-footer { padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  .welcome-studio { min-height:44px; }
}

/* Small phones in landscape need the canvas height, with a compact studio
   beside it. The width guard avoids changing layout for a portrait keyboard. */
@media(min-width:560px) and (max-width:760px) and (max-height:500px) {
  .editor[data-panel] { grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:54px minmax(0,1fr); }
  .stage { grid-column:1; grid-row:1 / -1; background:var(--canvas-surround); }
  .category-rail { grid-column:2; grid-row:1; margin:0; padding:0; border-radius:0; border-left:1px solid var(--line); box-shadow:none; }
  .inspector { grid-column:2; grid-row:2; border-left:1px solid var(--line); overflow-y:auto; overscroll-behavior:contain; }
  .inspector[data-panel=message] .options:not([data-mode=backdrop]) { grid-template-rows:repeat(4,minmax(34px,1fr)); grid-auto-columns:236px; }
  .editor.focused[data-panel] { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .editor.focused .stage { grid-column:1; grid-row:1; }
  .editor.focused .category-rail,.editor.focused .inspector { display:none; }
}
@media(max-width:1000px) and (max-height:500px) {
  .editor { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
  .welcome-shell { padding-left:max(24px,env(safe-area-inset-left)); padding-right:max(24px,env(safe-area-inset-right)); }
}