@font-face{font-family:'Monsieur La Doulaise';src:url('assets/fonts/monsieur-la-doulaise.ttf') format('truetype');font-display:swap}
:root{--font-ui:'Manrope',Arial,sans-serif;--font-display:'Instrument Serif',Georgia,serif;--ink:#292a24;--wine:#b5222b;--paper:#f8f3e9;--cream:#f1e1bd;--muted:#b8beae;--header-height:144px;--footer-height:64px}
*{box-sizing:border-box}body{margin:0;color:var(--cream);font:400 13px/24px var(--font-ui);background:radial-gradient(ellipse at 32% 58%,#214332 0,#102e23 40%,#071e18 90%);min-height:100svh}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:none}[hidden]{display:none!important}svg{display:block;width:24px;height:24px;flex:none}button{color:inherit}button,a{transition:background .2s,border-color .2s}
.tree-header{position:relative;z-index:2;min-height:var(--header-height);padding:var(--space-32) var(--page-gutter);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-24)}.brand{--logo-unit:.65px;position:relative;display:block;width:calc(228 * var(--logo-unit));height:calc(105 * var(--logo-unit));flex:none;color:var(--cream);text-decoration:none}.brand span{position:absolute;display:block;white-space:nowrap;line-height:1}.brand-kicker{font:500 calc(77 * var(--logo-unit))/1 'Bodoni Moda',Didot,serif;letter-spacing:calc(-4 * var(--logo-unit));right:0;top:calc(-8 * var(--logo-unit));transform:scaleX(.86);transform-origin:right center}.brand-base{font:400 calc(82 * var(--logo-unit))/1 'Monsieur La Doulaise',cursive;left:0;top:calc(26 * var(--logo-unit));transform:rotate(-3deg)}.tree-navigation{display:flex;align-items:center;gap:var(--space-32)}.back-link{display:inline-flex;align-items:center;gap:var(--space-8);font-size:11px;text-decoration:none;color:#c0c6b7;min-height:48px}.back-link svg{width:16px;height:16px}.back-link:hover{color:var(--cream)}.primary,.quiet-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--control-height);border-radius:var(--radius-pill);padding:var(--space-12) var(--space-24);font:500 12px/24px var(--font-ui);text-decoration:none;border:1px solid transparent;white-space:nowrap}.primary{background:var(--wine);color:#fff8ec}.primary:hover{background:#ca3039}.primary svg{width:16px;height:16px}.quiet-button{background:none;border-color:#cbbca7;color:var(--wine)}.quiet-button:hover{background:#e9dfce}
.fir-image{position:absolute;width:100%;height:100%;inset:0;object-fit:contain;pointer-events:none}.tree-aura{position:absolute;inset:20% -24% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#c0a7650e,transparent 65%)}.tree-lights{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.light-wire{fill:none;stroke:#a9945366;stroke-width:1}.light-bulb{fill:var(--bulb,#f9d58a);filter:drop-shadow(0 0 4px var(--bulb,#f9d58a)) drop-shadow(0 0 8px var(--bulb,#f9d58a))}.twinkle .light-bulb{animation:little-twinkle 3.2s ease-in-out infinite;animation-delay:var(--delay,0s)}@keyframes little-twinkle{0%,100%{opacity:1}50%{opacity:.5}}.tree-topper{position:absolute;left:50%;top:1.5%;width:12%;aspect-ratio:1;transform:translateX(-50%);filter:drop-shadow(0 0 10px #f2cf7855);pointer-events:none}.tree-topper svg{width:100%;height:100%}.bow-topper{display:none}.tree-art[data-topper="bow"] .bow-topper{display:block}.tree-art[data-topper="bow"] .star-topper{display:none}.tree-art[data-topper="none"] .tree-topper{display:none}.tree-ornaments{position:absolute;inset:0;pointer-events:none}.tree-ornament{position:absolute;width:14%;height:14%;padding:0;border:0;background:transparent;transform:translate(-50%,-24%);pointer-events:auto;touch-action:none;cursor:grab;z-index:2;border-radius:40%}.tree-ornament img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px #0008);pointer-events:none}.tree-ornament:hover img,.tree-ornament.is-selected img{filter:drop-shadow(0 0 6px #f1dfb877) drop-shadow(0 3px 4px #0008)}.tree-ornament.is-dragging{cursor:grabbing;z-index:5}.tree-ornament:focus-visible{outline-color:#efdcac}.is-guest .tree-ornament{cursor:pointer;touch-action:manipulation}.tree-hint{font:400 10px/16px var(--font-ui);color:#b7bcae;margin:var(--space-8) 0 0;text-align:center}.selected-ornament{font:400 12px/16px var(--font-display);color:var(--cream);min-height:16px;margin:var(--space-4) 0 0;text-align:center}
.tree-sidebar{grid-column:1;grid-row:1;justify-self:end;width:320px;align-self:start;padding:var(--space-24);background:#244438;color:#f1e1bd;border:1px solid #ffffff1c;border-radius:var(--radius-panel);max-height:calc(100svh - var(--header-height) - var(--footer-height) - var(--space-24));overflow-y:auto;scrollbar-width:thin}.sidebar-heading{margin-bottom:var(--space-24)}.tree-sidebar .eyebrow{font-size:8px;color:var(--wine);letter-spacing:1.6px}.tree-sidebar h2,dialog h2,.tree-error h2{font:400 40px/48px var(--font-display);margin:0}.field-label,fieldset legend{font:500 11px/16px var(--font-ui);display:block;margin-bottom:var(--space-8)}#tree-name,#tree-share-url{border:1px solid #cbbca7;border-radius:var(--radius-small);background:#fffcf5;color:var(--ink);height:48px;padding:var(--space-12);width:100%;font:400 16px/24px var(--font-ui)}fieldset{min-width:0;border:0;padding:0;margin:var(--space-24) 0 0}.colour-options{display:flex;gap:var(--space-8)}.colour-options button{display:grid;place-items:center;width:40px;height:40px;padding:4px;border-radius:50%;border:1px solid #d1c8b9;background:none}.colour-options button>span{display:block;width:24px;height:24px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 1px 3px #0002}.colour-options .multicolour>span{background:conic-gradient(#e05252,#e8c163,#61aa73,#7db2e8,#e05252)}.colour-options button[aria-pressed="true"]{border:2px solid var(--wine)}.colour-options button[aria-pressed="true"]>span:first-child::after{content:'✓';display:grid;place-items:center;color:#163725;font-size:12px;line-height:24px}#colour-name{font:400 10px/16px var(--font-ui);color:#756b60;margin:var(--space-8) 0 var(--space-8)}.switch-label{display:flex;align-items:center;gap:var(--space-8);font:400 11px/24px var(--font-ui);position:relative;cursor:pointer}.switch-label>span:first-child{flex:1}.switch-label input{position:absolute;right:0;width:40px;height:24px;opacity:0;margin:0;cursor:pointer}.switch-track{display:block;width:40px;height:24px;background:#bcb7ac;border-radius:var(--radius-pill);padding:4px;pointer-events:none}.switch-track:before{content:'';display:block;width:16px;height:16px;background:#fffaf1;border-radius:50%;transition:transform .18s}.switch-label input:checked+.switch-track{background:#315b3d}.switch-label input:checked+.switch-track:before{transform:translateX(16px)}.switch-label input:focus-visible+.switch-track{outline:none}.segmented{display:flex;gap:var(--space-4);padding:4px;background:#eae3d6;border-radius:var(--radius-pill)}.segmented button{flex:1;min-height:32px;padding:4px 8px;font:400 11px/24px var(--font-ui);background:none;border:0;border-radius:var(--radius-pill);color:#756b60}.segmented button[aria-pressed="true"]{background:#fffaf1;color:var(--wine);box-shadow:0 1px 4px #0001}.ornament-collection{margin-top:var(--space-24);padding-top:var(--space-24);border-top:1px solid #d6ccbb}.collection-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8)}.collection-heading h3{font:400 24px/32px var(--font-display);margin:0}.collection-heading>span{font:500 10px/16px var(--font-ui);color:#786c5f}#collection-description{font:400 10px/16px var(--font-ui);color:#786c5f;margin:var(--space-4) 0 var(--space-8)}.ornament-tray{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8);max-height:112px;overflow:auto;margin:var(--space-8) 0}.tray-ornament{display:grid;place-items:center;text-decoration:none;position:relative;aspect-ratio:1;padding:4px;border:1px solid #d6ccbb;border-radius:var(--radius-small);background:#e9e1d155;min-width:0}.tray-ornament img{width:100%;height:100%;object-fit:contain;pointer-events:none}.tray-ornament[aria-pressed="true"]{border-color:#9b733a;background:#ede3cf}.tray-ornament[aria-pressed="true"]:after{content:'✓';position:absolute;bottom:0;right:4px;font-size:9px;color:#315b3d}.tray-ornament.is-locked{border-style:dashed;color:#9e9383;font:400 20px/24px var(--font-display)}.tray-ornament.is-locked svg{width:12px;height:12px;position:absolute;bottom:4px;right:4px}.text-button{border:0;padding:var(--space-4) 0;background:none;color:var(--wine);font:500 10px/24px var(--font-ui);text-decoration:underline;text-underline-offset:4px}.text-button:hover{color:#8e1720}#tree-save-state{font:400 9px/16px var(--font-ui);color:#756b60}.guest-sidebar{margin-top:var(--space-48)}.guest-sidebar h2{margin-bottom:var(--space-16)}#guest-collection-count{font:400 12px/24px var(--font-ui);color:#756b60}.guest-sidebar>#return-editor{display:block;margin:var(--space-16) auto 0}.tree-error{grid-column:1/-1;max-width:480px;margin:var(--space-64) auto;text-align:center}.tree-error a{display:block;margin-top:var(--space-24)}.tree-error h2{color:var(--cream)}
.tree-footer{position:relative;z-index:2;min-height:var(--footer-height);padding:0 var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);color:#b8beae;font:400 10px/16px var(--font-ui)}.tree-footer .footer-note{font:400 32px/40px 'Monsieur La Doulaise',cursive}.tree-footer #snow-toggle{min-height:32px;padding:0;background:none;border:0;color:inherit;font:400 10px/16px var(--font-ui)}#snowfall{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:var(--space-32);border:1px solid #cbbca7;border-radius:var(--radius-panel);background:var(--paper) url('assets/calendar-paper.svg');color:var(--ink);box-shadow:0 32px 96px #0007}dialog::backdrop{background:#06171099;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:var(--space-16);top:var(--space-16);width:32px;height:32px;padding:0;background:none;border:0;color:var(--wine);font-size:28px;line-height:32px}dialog .eyebrow{color:var(--wine);padding-right:24px}#share-description{font:400 12px/24px var(--font-ui);color:#756b60;margin:var(--space-16) 0 var(--space-24)}#tree-share-url{font-size:13px}.share-actions{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-16)}.share-actions>*{padding-inline:var(--space-16)}#share-status{font:400 11px/16px var(--font-ui);color:#756b60;margin:var(--space-16) 0 0}#tree-toast{position:fixed;z-index:30;left:50%;bottom:calc(var(--footer-height) + 16px);max-width:calc(100vw - 32px);transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;color:#f8efdb;background:#31523b;padding:12px 24px;border:1px solid #607154;border-radius:var(--radius-pill);font:400 11px/16px var(--font-ui);text-align:center}#tree-toast.show{opacity:1;transform:translate(-50%,0)}
/* Tonal green controls keep the tree as the centre of the composition. */
.tree-sidebar{--panel-muted:#bfcebf;--panel-line:#ffffff26;scrollbar-color:#69836c #244438}
.tree-sidebar .eyebrow,.tree-sidebar .text-button{color:#f1dfb6}
.tree-sidebar #colour-name,.tree-sidebar .collection-heading>span,.tree-sidebar #collection-description,.tree-sidebar #tree-save-state,.tree-sidebar .tree-extra,.tree-sidebar #guest-collection-count{color:var(--panel-muted)}
.tree-sidebar .ornament-collection,.tree-sidebar .tree-extra{border-color:var(--panel-line)}
.tree-sidebar .colour-options button{border-color:#98b09a66}
.tree-sidebar .colour-options button[aria-pressed="true"]{border-color:#f1dfb6}
.tree-sidebar .switch-track{background:#496655}
.tree-sidebar .switch-label input:checked+.switch-track{background:#c8d6b0}
.tree-sidebar .switch-label input:checked+.switch-track:before{background:#173729}
.tree-sidebar .segmented{background:#19372d}
.tree-sidebar .segmented button{color:var(--panel-muted)}
.tree-sidebar .segmented button[aria-pressed="true"]{background:#46644d;color:#fff1d4;box-shadow:none}
.tree-sidebar #tree-name{background:#19372d;border-color:#69836c;color:#f1e1bd;caret-color:#f1e1bd}
.tree-sidebar .tray-ornament{background:#18372c66;border-color:#91aa9166}
.tree-sidebar .tray-ornament[aria-pressed="true"]{background:#3b5b43;border-color:#dcc692}
.tree-sidebar .tray-ornament[aria-pressed="true"]:after{color:#f1dfb6}
.tree-sidebar .tray-ornament.is-locked{color:#bfcebf}
.tree-sidebar .text-button:hover{color:#fff6df}
.tree-sidebar ::selection{background:#d8c390;color:#153527}


/* Product-led composition: the tree is fixed, options orbit around it. */
:root{--header-height:120px;--footer-height:64px}
/* The forest backdrop belongs to the viewport, independently of page height. */
body.tree-page{background:#091f19;isolation:isolate}
body.tree-page::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 66%,#224533 0,#102e23 48%,#091f19 100%)}
.tree-header{min-height:var(--header-height);padding:24px var(--page-gutter);align-items:center}
.tree-header .brand{--logo-unit:.6px}
.tree-navigation{width:100%;justify-content:space-between;gap:32px}
.tree-navigation .primary{min-height:40px;padding:8px 24px}
.tree-layout{position:relative;z-index:2;width:100%;max-width:1440px;height:calc(100svh - var(--header-height) - var(--footer-height));min-height:520px;margin:0 auto;padding:0 var(--page-gutter)}
.tree-gallery{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:80px 0 48px;min-width:0}
.tree-heading-block{position:absolute;top:0;left:50%;transform:translateX(-50%);text-align:center;width:min(480px,90%)}
.tree-heading-block .eyebrow{display:none}
h1{font:400 44px/56px var(--font-display);margin:0;color:var(--cream);overflow-wrap:anywhere}
h1 em{font:400 72px/56px 'Monsieur La Doulaise',cursive}
#tree-subtitle{margin:0;color:var(--muted);font:400 11px/24px var(--font-ui)}
.tree-art{position:relative;isolation:isolate;width:min(34vw,calc(66.667svh - 245.334px),480px);aspect-ratio:2/3;flex:none;user-select:none}
.tree-art:before{content:'';position:absolute;z-index:-1;left:18%;right:18%;bottom:1.5%;height:5%;border-radius:50%;background:#06170fc9;filter:blur(10px);transform:translateY(35%);pointer-events:none}
.tree-art:after{content:'';position:absolute;z-index:-1;left:36%;right:36%;bottom:2%;height:1.5%;border-radius:50%;background:#04130edd;filter:blur(3px);pointer-events:none}
.tree-hint{font:400 10px/16px var(--font-ui);color:#b7bcae;margin:8px 0 0;text-align:center}
.selected-ornament{font:400 12px/16px var(--font-display);color:var(--cream);min-height:16px;margin:4px 0 0;text-align:center}
.tree-mode-nav{position:absolute;left:calc(50% - 520px);top:50%;width:240px;height:432px;transform:translateY(-50%)}
.mode-arc{position:absolute;inset:0;width:240px;height:432px;pointer-events:none;fill:none;stroke:#a7b7a54d;stroke-width:1}
.mode-tab{position:absolute;left:0;width:204px;height:64px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0;border:0;background:none;color:#acbdad;font:400 12px/24px var(--font-ui);border-radius:999px}
.mode-tab:nth-child(1){top:32px}.mode-tab:nth-child(2){top:128px;left:-28px}.mode-tab:nth-child(3){top:224px;left:-28px}.mode-tab:nth-child(4){top:320px}
.mode-label{text-align:right;flex:1}
.mode-icon{position:relative;isolation:isolate;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:none;color:#c4d0b7;flex:none;transition:color .2s}
.mode-icon:before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:40px;height:40px;border:1px solid #a7b7a54d;border-radius:50%;background:#244333;transform:translate(-50%,-50%);transition:background .2s,width .2s,height .2s}
.mode-icon svg{width:16px;height:16px}
.mode-tab:hover{color:#fff0cb}.mode-tab:not([aria-selected="true"]):hover .mode-icon:before{background:#3a5940}
.mode-tab[aria-selected="true"]{color:#f6e6bc}
.mode-tab[aria-selected="true"] .mode-icon{color:#173726}
.mode-tab[aria-selected="true"] .mode-icon:before{width:48px;height:48px;background:#efdfb7;border-color:#efdfb7}
.tree-sidebar{position:absolute;left:calc(50% + 288px);top:50%;transform:translateY(-50%);width:256px;max-height:calc(100% - 112px);margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--cream);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#69836c transparent}
.options-arc{display:none;position:absolute;left:12px;top:44px;width:88px;height:368px;fill:none;stroke:#a7b7a54d;stroke-width:1;pointer-events:none}
.tree-sidebar[data-mode="lights"]{overflow:visible}
.tree-sidebar[data-mode="lights"] .options-arc{display:block}
.editor-panel{position:relative;min-width:0;margin:0;padding:0;border:0;background:none}
.editor-panel>legend,.editor-panel h2{font:400 32px/40px var(--font-display);padding:0;margin:0 0 24px;color:var(--cream)}
.light-settings .colour-options{display:flex;flex-direction:column;gap:8px;position:relative;margin-top:0}
.colour-options button{display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:64px;width:100%;height:64px;padding:0;border:0;border-radius:0;background:none;font:400 10px/16px var(--font-ui);color:#bac9b7}
.colour-options button:nth-child(2),.colour-options button:nth-child(4){padding-left:24px}
.colour-options button:nth-child(3){padding-left:32px}
.colour-options button>span:first-child{width:40px;height:40px;flex:none;border-radius:50%;background:var(--swatch);box-shadow:inset 0 1px 4px #0003;border:1px solid #ffffff29}
.colour-options .multicolour>span:first-child{background:conic-gradient(#e05252,#e8c163,#61aa73,#7db2e8,#e05252)}
.colour-options button>.option-label{background:none;border:0;box-shadow:none;width:auto;height:auto;text-align:left}
.colour-options button[aria-pressed="true"]{border:0;color:#f6e6bc}
.colour-options button[aria-pressed="true"]>span:first-child{width:56px;height:56px;outline:1px solid #f1dfb6;outline-offset:4px}
.colour-options button[aria-pressed="true"]>span:first-child:after{line-height:56px;font-size:16px}
#colour-name{display:none}
.light-settings .switch-label{margin-top:24px;max-width:216px;color:#c5d0bd}
#owner-controls .switch-track{background:#496655}
#owner-controls .switch-label input:checked+.switch-track{background:#c8d6b0}
#owner-controls .switch-label input:checked+.switch-track:before{background:#173729}
#collection-controls{margin:0;padding:0;border:0}
.collection-heading{align-items:baseline}
.collection-heading h3{font:400 32px/40px var(--font-display);margin:0}
.collection-heading>span{color:#c5d0bd;font:400 10px/16px var(--font-ui)}
#collection-description{font:400 10px/16px var(--font-ui);color:#b9c8b5;margin:8px 0 24px;min-height:32px}
.ornament-tray{grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;overflow:visible;gap:8px;margin:0 0 16px}
.tray-ornament{border:1px solid #9db1933b;border-radius:8px;background:#a5bc9708;padding:4px}
.tray-ornament.is-locked{border-style:solid;color:#b4c4aa;font-size:20px;line-height:24px}
.tray-ornament.is-locked svg{width:8px;height:8px;opacity:.6}
.tray-ornament[aria-pressed="true"]{background:#506d3833;border-color:#d9c68b}
.tray-ornament[aria-pressed="true"]:after{color:#eddeb7}
.tray-ornament:not(.is-locked):before{content:attr(data-day);position:absolute;top:0;left:4px;font:400 9px/16px var(--font-ui);color:#e8d6ae;z-index:1}
.tray-ornament img{filter:drop-shadow(0 2px 2px #0006)}
.tree-sidebar .text-button{color:#d9c9a4}
.name-settings .field-label{color:#b9c8b5;margin-bottom:8px}
#tree-name{background:#274633;border-color:#8da08166;color:#f1e1bd;font-size:16px;caret-color:#efdfb7}
#tree-save-state{font:400 9px/16px var(--font-ui);color:#91a88f}
.guest-sidebar{max-height:calc(100% - 64px)}
.guest-sidebar h2{font-size:32px;line-height:40px}
#guest-collection-count{color:#b9c8b5}
.tree-error{position:absolute;inset:80px 16px auto;text-align:center;margin:0 auto;max-width:480px}
.tree-error h2{font:400 40px/48px var(--font-display);color:var(--cream)}
.tree-error a{display:block;margin-top:24px}
.tree-footer{min-height:64px;font-size:10px}
.tree-footer .footer-note{font-size:28px}
::selection{background:#d8c390;color:#153527}
@media(max-width:1100px) and (min-width:1025px){.tree-mode-nav{left:calc(50% - 488px)}.tree-sidebar{left:calc(50% + 240px);width:240px}}
@media(max-width:1024px){
.tree-layout{display:grid;grid-template-columns:minmax(0,1fr);height:auto;min-height:0;max-width:640px;padding:0 24px}
.tree-gallery{grid-column:1;grid-row:1;height:auto;padding:80px 0 24px}
.tree-art{width:min(100%,360px)}
.tree-heading-block{top:0}
.tree-mode-nav{grid-row:2;position:static;transform:none;width:100%;height:auto;margin:0 0 32px}
.mode-arc,.options-arc{display:none!important}
.tree-mode-nav [role="tablist"]{display:flex;justify-content:center;gap:16px}
.mode-tab,.mode-tab:nth-child(n){position:static;display:flex;flex-direction:column-reverse;width:64px;height:auto;gap:8px;left:auto;top:auto;font-size:10px;line-height:16px;border-radius:8px}
.mode-label{flex:none;text-align:center}
.tree-sidebar{grid-row:3;position:relative;left:auto;top:auto;transform:none;width:100%;max-height:none;overflow:visible;margin:0 auto 32px;max-width:352px}
.tree-sidebar[data-mode="lights"]{min-height:0}
.light-settings .colour-options{gap:4px}
.colour-options button:nth-child(n){padding-left:0;min-height:64px}
#collection-description{min-height:0;margin-bottom:16px}
.ornament-tray{grid-template-columns:repeat(6,minmax(0,1fr))}
.guest-sidebar{grid-row:2}
.tree-footer{flex-wrap:wrap;padding-block:16px;gap:8px 24px;justify-content:center}
.tree-footer .footer-note{display:none}
.tree-footer .music-caption{max-width:136px}
.tree-footer #snow-toggle{margin:0}
.tree-header .brand{--logo-unit:.52px}
.back-link span{display:inline}.back-link{min-width:32px;justify-content:center}
.tree-navigation{gap:8px}
}
@media(max-width:600px){
:root{--header-height:112px}
.tree-header{padding:24px;gap:8px}
.tree-navigation .primary{padding:8px 16px;font-size:11px}
h1{font-size:36px;line-height:48px}h1 em{font-size:60px;line-height:48px}
#tree-subtitle{font-size:10px;line-height:24px}
.tree-gallery{padding-top:72px}
.tree-art{width:min(100%,320px)}
.tree-aura{inset-inline:0}
.tree-hint{max-width:280px}
.ornament-tray{grid-template-columns:repeat(4,minmax(0,1fr))}
.tree-footer{min-height:96px;font-size:9px}
.tree-footer .music-controls{height:40px;grid-area:auto}
.tree-footer #snow-toggle{width:100%;min-height:24px}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.twinkle .light-bulb{opacity:1}}

.mode-tab[aria-selected="true"] .mode-icon{width:48px;height:48px}
.mode-tab[aria-selected="true"] .mode-icon svg{width:20px;height:20px}
@media(min-width:1025px) and (max-height:800px){
.ornament-tray{grid-template-columns:repeat(6,minmax(0,1fr))}
#collection-description{margin-bottom:16px;min-height:16px}
.light-settings .colour-options{gap:8px}
.colour-options button{height:48px;min-height:48px}
.colour-options button>span:first-child{width:32px;height:32px}
.colour-options button[aria-pressed="true"]>span:first-child{width:40px;height:40px}
.colour-options button[aria-pressed="true"]>span:first-child:after{line-height:40px}
.options-arc{height:288px}
.light-settings .switch-label{margin-top:16px}
}

/* Regular glass baubles complement the earned film ornaments. */
.tree-baubles{position:absolute;inset:0;z-index:1;pointer-events:none}
.tree-lights{z-index:2}.tree-ornaments,.tree-topper{z-index:3}
.bauble{display:block;position:relative;flex:none;border-radius:50%;background:radial-gradient(ellipse at 28% 20%,#ffffffbb 0,transparent 20%),radial-gradient(circle at 35% 30%,var(--glint),var(--bauble) 48%,var(--shade) 96%);box-shadow:inset -2px -3px 4px #0004,0 2px 3px #06140c88}
.bauble:before{content:'';position:absolute;top:-12%;left:33%;width:34%;height:15%;border-radius:2px 2px 0 0;background:#b7a377;border:1px solid #d2bd8c;box-sizing:border-box}
.bauble:after{content:'';position:absolute;bottom:110%;left:50%;width:1px;height:24%;background:#d6c18b88}
.tree-bauble{position:absolute;width:4.8%;aspect-ratio:1;transform:translate(-50%,-12%)}
.decoration-settings h2{margin-bottom:8px}
.set-description{font:400 11px/24px var(--font-ui);color:#b9c8b5;margin:0 0 24px;max-width:28ch}
.decoration-options{display:flex;flex-direction:column;gap:8px}
.decoration-options button{display:flex;align-items:center;gap:16px;min-height:80px;width:100%;padding:12px 0;border:0;border-bottom:1px solid #9db19326;border-radius:0;background:none;text-align:left;color:#b9c8b5}
.decoration-options button:hover{color:#fff0cc}
.decoration-options button[aria-pressed="true"]{color:#efdfb7}
.set-preview{display:flex;align-items:center;justify-content:center;width:72px;height:40px;flex:none}
.set-preview .bauble{width:24px;height:24px;margin-left:-4px}
.set-preview .bauble:nth-child(2){width:28px;height:28px;z-index:1;margin-top:8px}
.set-preview[data-palette="none"]:before{content:'';display:block;width:24px;height:24px;border:1px solid #9db19380;border-radius:50%;background:linear-gradient(135deg,transparent 47%,#9db19380 48%,#9db19380 52%,transparent 53%)}
.set-copy{flex:1;min-width:0}.set-copy strong{display:block;font:500 12px/24px var(--font-ui)}.set-copy small{display:block;font:400 9px/16px var(--font-ui);color:#b9c8b5}
.set-check{width:16px;height:16px;visibility:hidden;flex:none}
[aria-pressed="true"]>.set-check{visibility:visible}
.mode-tab:nth-child(1){top:0;left:0}.mode-tab:nth-child(2){top:88px;left:-24px}.mode-tab:nth-child(3){top:176px;left:-32px}.mode-tab:nth-child(4){top:264px;left:-24px}.mode-tab:nth-child(5){top:352px;left:0}
@media(max-width:1024px){.tree-mode-nav [role="tablist"]{gap:8px;justify-content:space-between}.mode-tab:nth-child(n){position:static;top:auto;left:auto;width:auto;flex:1;min-width:0}.mode-label{font-size:9px}}
@media(min-width:1025px) and (max-height:800px){.decoration-options button{min-height:64px;padding-block:8px}.set-description{margin-bottom:16px}}

/* Filled icons share Calendar's short, on-demand motion language. */
.mode-icon svg,.mode-tab[aria-selected="true"] .mode-icon svg{width:24px;height:24px;overflow:visible}
.mode-icon g{transform-box:fill-box;transform-origin:center}
.mode-tab:active .mode-icon{transform:scale(.92)}
.mode-tab:is(:hover,:focus-visible) .glyph-light{animation:nav-light-flash .7s ease-out both}
.mode-tab:is(:hover,:focus-visible) .glyph-spark{animation:nav-spark-flash .7s .1s ease-out both}
.mode-tab:is(:hover,:focus-visible) .glyph-star{animation:nav-star-turn .7s cubic-bezier(.22,1,.36,1) both}
.mode-tab:is(:hover,:focus-visible) .glyph-bauble{animation:nav-bauble-sway .7s ease-out both;transform-origin:50% 0}
.mode-tab:is(:hover,:focus-visible) .glyph-bauble-two{animation-delay:.08s}
.mode-tab:is(:hover,:focus-visible) .glyph-bauble-three{animation-delay:.16s}
.mode-tab:is(:hover,:focus-visible) .glyph-movie{animation:nav-movie-sway .8s ease-out both;transform-origin:50% 0}
.mode-tab:is(:hover,:focus-visible) .glyph-pen{animation:nav-pen-write .65s ease-out both}
@keyframes nav-light-flash{0%,100%{opacity:1;transform:scale(1)}25%{opacity:.35;transform:scale(.8)}55%{opacity:1;transform:scale(1.12)}}
@keyframes nav-spark-flash{0%{opacity:0;transform:scale(.5)}45%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes nav-star-turn{0%{transform:rotate(-24deg) scale(.85)}60%{transform:rotate(8deg) scale(1.08)}100%{transform:rotate(0) scale(1)}}
@keyframes nav-bauble-sway{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}}
@keyframes nav-movie-sway{0%,100%{transform:rotate(0)}22%{transform:rotate(16deg)}52%{transform:rotate(-10deg)}78%{transform:rotate(4deg)}}
@keyframes nav-pen-write{0%,100%{transform:translate(0,0)}30%{transform:translate(2px,-2px)}65%{transform:translate(-1px,1px)}}
@media(prefers-reduced-motion:reduce){.mode-tab .mode-icon g{animation:none!important}.mode-tab:active .mode-icon{transform:none}}

/* A share card has one subject, one title and one action. */
#tree-share-dialog{width:min(384px,calc(100vw - 32px));padding:16px;border-radius:16px;overflow:auto}
#share-title{font:400 32px/40px var(--font-display);margin:0 32px 16px 0}
.share-preview-card{position:relative;container-type:inline-size;isolation:isolate;aspect-ratio:4/5;width:100%;margin:0;overflow:hidden;border-radius:8px;background:transparent;color:#f1e1bd}
.share-preview-card *{animation:none!important;transition:none!important}
.share-preview-card .share-card-tree{position:absolute;left:25%;top:19%;width:50%;height:auto;aspect-ratio:2/3;margin:0;pointer-events:none}
.share-card-copy{position:absolute;left:8%;right:8%;top:6%;text-align:center}
.share-card-title{font:400 9.6cqw/1.05 var(--font-display);margin:0;overflow-wrap:anywhere;text-wrap:balance;color:#f1e1bd}
.share-card-title em{font:400 14cqw/1 'Monsieur La Doulaise',cursive}
.share-card-meaning{position:absolute;left:6%;right:6%;top:84%;margin:0;text-align:center;font:400 3.2cqw/1.5 var(--font-ui);color:#d6d9c4}
.share-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
#tree-share-dialog #share-description{font:400 11px/16px var(--font-ui);color:#756b60;max-width:20ch;margin:0}
#share-link-controls{flex:none}
#copy-tree-link{min-height:48px}
#tree-share-url:not([hidden]){margin-bottom:16px}
#share-link-controls:has(#tree-share-url:not([hidden])){flex:1}
.share-footer:has(#tree-share-url:not([hidden])){flex-direction:column;align-items:stretch}
#share-status:empty{display:none}
#share-status{line-height:16px}
@media(max-width:600px){}
@media(max-width:340px){.share-footer{align-items:stretch;flex-direction:column;gap:12px}#tree-share-dialog #share-description{max-width:none}#copy-tree-link{width:100%}}

/* The card is the surface; dismissal lives below it. */
#tree-share-dialog{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--cream);scrollbar-width:thin;scrollbar-color:#738677 transparent}
#tree-share-dialog #share-title{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.share-panel{border:1px solid #748b6e66;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 27% 66%,#37563b,#153528 50%,#0b251d)}
#tree-share-dialog .share-preview-card{border-radius:0}
#tree-share-dialog .share-footer{display:block;margin:0;padding:0 16px 16px}
#tree-share-dialog #copy-tree-link{width:100%}
#tree-share-dialog #share-status{margin:0;padding:0 16px 16px;text-align:center;color:#d2d8c6}
#tree-share-dialog .dialog-close{position:static;display:grid;place-items:center;width:48px;height:48px;margin:16px auto 0;padding:12px;border:1px solid #82927d66;border-radius:50%;background:#163127;color:#f1e1bd}
#tree-share-dialog .dialog-close svg{width:24px;height:24px}
#tree-share-dialog .dialog-close:hover{background:#254335}
@media(max-width:600px){#tree-share-dialog{inset:auto 0 16px;margin:0 auto;max-height:calc(100svh - 32px)}}

.share-card-meaning span{display:block}

#tree-share-dialog #share-link-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#tree-share-dialog #share-link-controls>.primary{min-width:0;width:100%;min-height:48px;padding:8px 12px;font:500 12px/24px var(--font-ui)}
#tree-share-url:not([hidden]){grid-column:1/-1;margin:0}

/* Save state stays announced without a developer utility row. */
.tree-save-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Shared trees lead back to the advent, where movie memories begin. */
.guest-sidebar #guest-collection-count{font:400 14px/24px var(--font-ui);margin:0 0 24px;color:#b9c8b5}
.guest-invitation{font:400 16px/24px var(--font-ui);color:#d2ddca;margin:0 0 24px}
.guest-sidebar .advent-link{width:100%;min-height:48px;gap:8px;padding:12px 16px;font:500 14px/24px var(--font-ui);text-align:center}
.guest-sidebar .advent-link svg{width:24px;height:24px;flex:none}

/* A shared tree and its invitation form one centred, modal-like surface. */
.is-guest{display:grid;grid-template-rows:80px minmax(0,1fr) auto;min-height:100svh}
.is-guest .tree-header{min-height:80px;padding-block:16px}
.is-guest .tree-layout{align-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;width:calc(100% - 64px);max-width:960px;height:auto;min-height:0;max-height:calc(100svh - 200px);margin:24px auto;padding:40px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#738677 transparent;background:#183c2d;border-radius:16px;box-shadow:0 24px 80px #020e0a66}
.is-guest .tree-gallery{position:relative;grid-column:1;grid-row:1;height:auto;padding:0;gap:16px}
.is-guest .tree-heading-block{display:none}
.is-guest #tree-subtitle,.is-guest #tree-hint{display:none}
.is-guest .tree-art{width:min(100%,280px);aspect-ratio:2/3}
.is-guest .selected-ornament{min-height:0;margin:0;font-size:14px;line-height:24px}
.is-guest .selected-ornament:empty{display:none}
.is-guest .guest-sidebar{position:static;grid-column:2;grid-row:1;align-self:center;justify-self:stretch;transform:none;width:auto;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:visible}
.is-guest #guest-title{font:400 48px/48px var(--font-display);letter-spacing:-.015em;margin:0 0 24px;color:#f1e1bd;text-wrap:balance}
.is-guest .guest-invitation{margin-bottom:24px}
.is-guest .tree-layout:has(#tree-error:not([hidden])){display:block;min-height:320px}
@media(max-width:700px){
 .is-guest{grid-template-rows:64px minmax(0,1fr) auto}
 .is-guest .tree-header{min-height:64px;padding:8px 24px}
 .is-guest .tree-layout{grid-template-columns:minmax(0,1fr);width:calc(100% - 32px);max-width:448px;max-height:calc(100svh - 240px);margin:16px auto;padding:24px;gap:24px}
 .is-guest .tree-gallery{grid-column:1;grid-row:1;gap:8px}
 .is-guest .tree-art{width:128px}
 .is-guest .guest-sidebar{grid-column:1;grid-row:2;text-align:center}
 .is-guest #guest-title{font-size:32px;line-height:40px;letter-spacing:0;margin-bottom:16px}
 .is-guest .guest-sidebar #guest-collection-count{display:none}
 .is-guest .guest-invitation{font-size:16px;line-height:24px;margin-bottom:16px}
 .is-guest .guest-sidebar .advent-link{font-size:14px}
}

.topper-options .topper-miniature{display:block;width:48px;height:40px}

/* The mobile editor opens with the complete tree and all five settings in view. */
@media(max-width:600px){
 body.tree-page:not(.is-guest){--header-height:72px}
 .tree-page:not(.is-guest) .tree-header{height:72px;min-height:72px;padding:16px 24px}
 .tree-header .back-link{width:40px;height:40px;min-height:40px;padding:10px;border:1px solid #f1e1bd55;border-radius:50%;flex:none}
 .tree-header .back-link svg{width:20px;height:20px}
 .tree-header .back-link span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .tree-page:not(.is-guest) .tree-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:calc(100svh - 176px) 104px auto;min-height:0;height:auto;padding:0 24px;max-width:none}
 .tree-page:not(.is-guest) .tree-gallery{height:100%;min-height:0;padding:8px 0;gap:8px;justify-content:center}
 .tree-page:not(.is-guest) .tree-heading-block{position:static;transform:none;width:100%;flex:none}
 .tree-page:not(.is-guest) #tree-heading{font-size:32px;line-height:40px;letter-spacing:-.02em}
 .tree-page:not(.is-guest) #tree-heading em{font-size:48px;line-height:40px}
 .tree-page:not(.is-guest) #tree-subtitle{font-size:11px;line-height:16px;margin-top:4px;text-wrap:balance}
 .tree-page:not(.is-guest) .tree-gallery>.tree-art{width:min(100%,calc((100svh - 320px)*.666667),360px);height:auto;aspect-ratio:2/3}
 .tree-page:not(.is-guest) .tree-hint{font-size:11px;line-height:16px;margin:0;max-width:32ch;text-wrap:balance;flex:none}
 .tree-page:not(.is-guest) .selected-ornament:empty{display:none}
 .tree-page:not(.is-guest) .selected-ornament:not(:empty){position:absolute;bottom:8px;left:0;right:0;margin:0;font-size:12px;line-height:16px}
 .tree-page:not(.is-guest) .tree-mode-nav{height:104px;margin:0;padding:8px 0 16px;align-self:start}
 .tree-page:not(.is-guest) .tree-mode-nav [role="tablist"]{gap:4px;align-items:flex-start}
 .tree-page:not(.is-guest) .mode-tab:nth-child(n){min-height:80px;gap:8px;justify-content:flex-end}
 .tree-page:not(.is-guest) .mode-label{font-size:10px;line-height:16px;max-width:100%;overflow-wrap:normal}
 .tree-page:not(.is-guest) .mode-icon{width:48px;height:48px}
 .tree-page:not(.is-guest) .tree-sidebar{grid-row:3;padding-top:24px;border-top:1px solid #a7b7a533;margin:0 auto 32px;scroll-margin-top:16px}
}
@media(max-width:360px){
 .tree-page:not(.is-guest) .tree-header{padding-inline:16px}
 .tree-page:not(.is-guest) .tree-layout{padding-inline:16px}
 .tree-page:not(.is-guest) #tree-heading{font-size:28px;line-height:32px}
 .tree-page:not(.is-guest) #tree-heading em{font-size:40px;line-height:32px}
}

/* Settings rise from the bottom while the tree stays in its original position. */
body.tree-settings-open{position:fixed;inset-inline:0;top:var(--tree-settings-scroll,0px);width:100%;overflow:hidden}
#tree-settings-dialog{inset:auto 0 8px;margin:0 auto;width:min(480px,calc(100vw - 16px));max-height:64svh;padding:32px 24px 24px;border:1px solid #7c997655;border-radius:24px;background:#214633;color:#f1e1bd;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#738677 transparent}
#tree-settings-dialog::backdrop{background:#00000033;backdrop-filter:blur(3px)}
#tree-settings-dialog[open]{animation:tree-settings-enter .22s cubic-bezier(.22,1,.36,1) both}
#tree-settings-dialog .dialog-close{top:8px;right:8px;width:40px;height:40px;padding:8px;color:#f1e1bd;z-index:2}
#tree-settings-dialog .tree-sidebar{position:static;transform:none;width:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:none;overflow:visible}
#tree-settings-dialog .editor-panel>legend,#tree-settings-dialog .editor-panel h2,#tree-settings-dialog .collection-heading{padding-right:32px}
#tree-settings-dialog .options-arc{display:none}
#tree-settings-dialog .colour-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px}
#tree-settings-dialog .colour-options button:nth-child(n){display:flex;flex-direction:column;justify-content:center;gap:8px;height:88px;min-height:88px;padding:0}
#tree-settings-dialog .colour-options button>span:first-child{width:40px;height:40px}
#tree-settings-dialog .colour-options button[aria-pressed="true"]>span:first-child:after{line-height:40px}
#tree-settings-dialog .switch-label{max-width:none}
@keyframes tree-settings-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.tree-page:not(.is-guest) .tree-layout>#owner-controls{display:none}}

/* Feedback 2026-11-10: fewer small captions, and a larger tree that fills its stage. */
#tree-kicker[hidden],#tree-subtitle[hidden],#collection-count[hidden]{display:none!important}
.tree-gallery{padding:72px 0 16px}
.tree-art{width:min(38vw,calc((100svh - var(--header-height) - var(--footer-height) - 112px)*.666667),560px)}
@media(max-width:1024px){.tree-page:not(.is-guest) .tree-gallery>.tree-art{width:min(100%,calc((100svh - 272px)*.666667),400px)}}
.ornament-collection .collection-heading{margin-bottom:var(--space-16)}
#arrange-tree{display:inline-flex;align-items:center;min-height:40px;background:transparent;box-shadow:none;margin-top:var(--space-16);padding:8px 16px;border:1px solid #f1e1bd59;border-radius:9999px;color:#f1e1bd;font:500 13px/24px var(--font-ui);text-decoration:none}
#arrange-tree:hover{border-color:#f1e1bd;color:#fff6df;background:#f1e1bd14}
#arrange-tree:focus-visible{outline:2px solid #f1e1bd;outline-offset:3px}
/* Feedback 2026-11-10: one round close button where people reach for it, like the dialogs. */
.tree-navigation{margin-left:auto;justify-content:flex-end!important;gap:var(--space-16)!important}
.tree-header .tree-close{display:grid;place-items:center;width:48px;height:48px;min-height:48px;padding:0;border:1px solid #f1e1bd59;border-radius:50%;color:#f1e1bd;flex:none}
.tree-header .tree-close:hover{border-color:#f1e1bd;background:#f1e1bd14}
.tree-header .tree-close svg{width:20px;height:20px}
.tree-header .tree-close span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:600px){.tree-header .tree-close{width:40px;height:40px;min-height:40px}.tree-navigation{gap:var(--space-8)!important}}

/* Feedback 2026-11-10: the tree is the hero, as large as the house; the interface sits around it. */
@media(min-width:1025px){
 .tree-page:not(.is-guest) .tree-gallery{position:absolute;left:0;right:0;top:calc(88px - var(--header-height));bottom:calc(12px - var(--footer-height));height:auto;padding:0;justify-content:flex-start;gap:4px;pointer-events:none;z-index:1}
 .tree-page:not(.is-guest) .tree-gallery>*{pointer-events:auto}
 .tree-page:not(.is-guest) .tree-heading-block{position:static;transform:none;flex:none}
 .tree-page:not(.is-guest) .tree-art{width:min(40vw,calc((100svh - 88px - 12px - 64px)*.666667),720px)}
}
.tree-ornament{width:16%;height:16%}

.tree-page:not(.is-guest) .tree-header{justify-content:flex-end}.tree-page:not(.is-guest) .tree-navigation{width:auto!important;margin-left:auto}

/* 3D tree (tree3d-scene.js). The canvas replaces the photo, lights, topper and
   baubles; ornament buttons stay as invisible hit areas that follow the 3D ornaments. */
#tree-canvas{display:none}
.has-3d-tree #tree-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;touch-action:none;cursor:grab}
.has-3d-tree #tree-canvas.is-turning{cursor:grabbing}
.has-3d-tree .tree-art>.fir-image,.has-3d-tree #tree-lights,.has-3d-tree .tree-topper,.has-3d-tree #tree-baubles{display:none!important}
.has-3d-tree .tree-art:before,.has-3d-tree .tree-art:after{display:none}
.has-3d-tree .tree-ornaments{z-index:2;pointer-events:none}
.has-3d-tree .tree-ornament{transform:translate(-50%,-8%);border-radius:40%}
.has-3d-tree .tree-ornament img{opacity:0}
.has-3d-tree .tree-ornament.is-selected,.has-3d-tree .tree-ornament:hover{box-shadow:0 0 0 2px #f1e1bd66;background:#f1e1bd0d}
.has-3d-tree .tree-ornament.is-behind{visibility:hidden;pointer-events:none}
.has-3d-tree .share-card-3d{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.shape-settings legend{font:400 24px/32px var(--font-display);margin-bottom:8px;padding:0}
.shape-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:6px 0;font:400 13px/20px var(--font-ui);color:#d9d3c1}
.shape-row output{font-variant-numeric:tabular-nums;color:#f1e1bd}
.shape-row input[type=range]{grid-column:1/-1;width:100%;accent-color:#e9c77d}
.shape-row.shape-colour input{width:44px;height:28px;padding:0;border:1px solid #ffffff33;border-radius:8px;background:none}
#reset-shape{margin-top:12px;min-height:40px;padding:8px 16px;border:1px solid #f1e1bd59;border-radius:9999px;background:transparent;color:#f1e1bd;font:500 13px/24px var(--font-ui);box-shadow:none}
#reset-shape:hover{border-color:#f1e1bd;background:#f1e1bd14}
.mode-tab[hidden]{display:none!important}
/* Six tabs on the desktop arc once "Shape" is available. */
@media(min-width:1025px){
 .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(1){top:0;left:0}
 .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(2){top:70px;left:-20px}
 .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(3){top:141px;left:-31px}
 .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(4){top:211px;left:-31px}
 .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(5){top:282px;left:-20px}
 .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(6){top:352px;left:0}
 .has-3d-tree .tree-sidebar{max-height:calc(100svh - var(--header-height) - var(--footer-height) - 48px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5f7a6a transparent}
}
.has-3d-tree #selected-ornament{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Feedback 2026-11-10: the title sits on the header row, level with the buttons, so the tree gets the height. */
@media(min-width:1025px){
 .tree-page:not(.is-guest) .tree-heading-block{position:fixed;z-index:3;top:32px;left:var(--page-gutter);right:auto;transform:none;width:auto;height:56px;display:flex;align-items:center;text-align:left;pointer-events:none}
 .tree-page:not(.is-guest) #tree-heading{margin:0;white-space:nowrap}
 .tree-page:not(.is-guest) .tree-gallery{top:calc(24px - var(--header-height))}
 .tree-page:not(.is-guest) .tree-art{width:min(40vw,calc((100svh - 24px - 12px - 64px)*.666667),760px)}
}
/* Feedback 2026-11-10 (2): back chevron on the left, title centred on the header row. */
@media(min-width:1025px){
 .tree-page:not(.is-guest) .tree-heading-block{left:50%;transform:translateX(-50%);justify-content:center;text-align:center}
}
/* Below 1600px the share button shows its icon only, so the centred title has room. */
@media(min-width:1025px) and (max-width:1599px){
 .tree-page:not(.is-guest) #share-tree{width:48px;min-width:48px;padding:0;justify-content:center}
 .tree-page:not(.is-guest) #share-tree span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Feedback 2026-11-10 (3): room around the settings so selection rings are never cut,
   and a little air between the title and the top of the tree. */
@media(min-width:1025px){
 .tree-page:not(.is-guest) #owner-controls{box-sizing:content-box;padding-inline:16px;margin-inline:-16px}
 .tree-page:not(.is-guest) .tree-gallery{padding-top:32px}
 .tree-page:not(.is-guest) .tree-art{width:min(38vw,calc((100svh - var(--header-height) - var(--footer-height) - 64px)*.666667),600px)}
}
/* 3D tree: the same air under the title; the settings column keeps room for selection rings while it scrolls. */
@media(min-width:1025px){
 .tree-page:not(.is-guest) .tree-gallery{top:calc(56px - var(--header-height));padding-top:0}
 .tree-page:not(.is-guest) .tree-art{width:min(40vw,calc((100svh - 56px - 12px - 64px)*.666667),760px)}
}
/* Feedback 2026-11-10: a twinkle you can actually see; each bulb keeps its own rhythm (--delay). */
.twinkle .light-bulb{animation:visible-twinkle 2.2s ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes visible-twinkle{0%,100%{opacity:1}45%{opacity:.18}60%{opacity:.25}}

/* Feedback 2026-11-10: very fine dark-only grain (no light specks). */
body.tree-page::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.9 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23b)'/%3E%3C/svg%3E");background-size:160px 160px}
@media(max-width:600px){body.tree-page::after{background-size:80px 80px}}

/* Phones and tablets: each settings tab is as wide as its label, the spare room goes between them,
   and two-word labels always sit on two lines, so neighbours never touch. */
@media(max-width:1024px){
 .tree-page:not(.is-guest) .tree-mode-nav [role="tablist"]{justify-content:space-between;gap:4px}
 .tree-page:not(.is-guest) .mode-tab:nth-child(n){flex:0 0 auto;width:auto;min-width:48px}
 .tree-page:not(.is-guest) .mode-label{width:min-content;min-width:100%;max-width:none}
}
/* Six tabs (with "Shape") on phones: slightly smaller circles leave clear room between labels;
   on the narrowest phones the row scrolls instead of squeezing. */
@media(max-width:600px){
 .tree-page:not(.is-guest) .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-icon{width:44px;height:44px}
 .tree-page:not(.is-guest) .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])) .mode-tab:nth-child(n){min-width:44px}
}
@media(max-width:359px){
 .tree-page:not(.is-guest) .tree-mode-nav [role="tablist"]:has(#tab-shape:not([hidden])){overflow-x:auto;scrollbar-width:none;padding-top:8px;margin-top:-8px}
}
/* Feedback 2026-11-10 (2): an unmistakable twinkle — bulbs go almost dark, then flare brighter, each on its own beat. */
.twinkle .light-bulb{animation:bold-twinkle 1.6s ease-in-out infinite;animation-delay:var(--delay,0s);transform-box:fill-box;transform-origin:center}
@keyframes bold-twinkle{0%,100%{opacity:1;transform:scale(1.35);filter:drop-shadow(0 0 5px var(--bulb,#f9d58a)) drop-shadow(0 0 12px var(--bulb,#f9d58a))}40%{opacity:.06;transform:scale(.8);filter:none}55%{opacity:.08;transform:scale(.8);filter:none}}
/* Feedback 2026-11-10: snowflake topper, no divider under the last option,
   one-line set description; the phone settings sheet closes by tapping outside it or with Escape. */
.snowflake-topper{display:none}
.tree-art[data-topper="snowflake"] .snowflake-topper{display:block}
.tree-art[data-topper="snowflake"] .star-topper,.tree-art[data-topper="snowflake"] .bow-topper{display:none}
.tree-art[data-topper="snowflake"] .tree-topper{filter:drop-shadow(0 0 10px #cfe9ff88)}
.tree-art[data-topper="bow"] .tree-topper{width:15%;filter:drop-shadow(0 3px 4px #0007)}
.decoration-options button:last-child{border-bottom:0}
.set-description{white-space:nowrap}
#tree-settings-dialog .dialog-close{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;border:0!important}
/* "Shape" tab icon: a filled fir like the other glyphs; on hover it sways from its trunk and settles. */
.glyph-tree{transform-box:fill-box;transform-origin:50% 100%}
.mode-tab:is(:hover,:focus-visible) .glyph-tree{animation:nav-tree-sway .75s cubic-bezier(.22,1,.36,1) both}
@keyframes nav-tree-sway{0%{transform:rotate(0) scale(1)}25%{transform:rotate(-9deg) scale(1.05,.96)}55%{transform:rotate(6deg) scale(.98,1.04)}80%{transform:rotate(-2deg)}100%{transform:rotate(0) scale(1)}}

/* ---------- "Shape" tab, redesigned (feedback 2026-11-10) ---------- */
.shape-settings{display:block}
.shape-title{margin:0 0 16px;font:400 var(--type-h2,32px)/var(--type-h2-lh,40px) var(--font-display);color:#f1e1bd}
.shape-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:24px}
.shape-style{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:88px;padding:12px 4px 10px;border:1px solid #f1e1bd26;border-radius:16px;background:#ffffff08;color:#c9d2c0;font:500 12px/16px var(--font-ui);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.shape-style svg{width:32px;height:40px;color:#7fa07a}
.shape-style:hover{border-color:#f1e1bd66;color:#f1e1bd}
.shape-style[aria-pressed="true"]{border-color:#e9c77d;background:#e9c77d1a;color:#f1e1bd}
.shape-style[aria-pressed="true"] svg{color:#a9c79f}
.shape-slider{display:grid;gap:6px;margin-bottom:20px}
.shape-slider-name{padding:0;font:500 14px/24px var(--font-ui);color:#f1e1bd}
.shape-slider-ends{display:flex;justify-content:space-between;font:400 12px/16px var(--font-ui);color:#9fae9a}
.shape-slider input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;--fill:50%}
.shape-slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(to right,#e9c77d var(--fill),#ffffff26 var(--fill))}
.shape-slider input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:#ffffff26}
.shape-slider input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:#e9c77d}
.shape-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border:0;border-radius:50%;background:#f6ead0;box-shadow:0 2px 6px #0006,0 0 0 4px #e9c77d26}
.shape-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#f6ead0;box-shadow:0 2px 6px #0006}
.shape-slider input[type=range]:focus-visible{outline:none}
.shape-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #f1e1bd}
.shape-tints{margin:4px 0 20px;padding:0;border:0}
.shape-tint-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.shape-tint{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0;border:0;background:none;color:#c9d2c0;font:400 12px/16px var(--font-ui);cursor:pointer}
.shape-tint-dot{width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff55,transparent 45%),var(--tint);box-shadow:inset 0 0 0 1px #0003}
.shape-tint[aria-pressed="true"]{color:#f1e1bd}
.shape-tint[aria-pressed="true"] .shape-tint-dot{box-shadow:0 0 0 2px #1f4231,0 0 0 4px #e9c77d}
.shape-shuffle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border:1px solid #f1e1bd59;border-radius:9999px;background:transparent;color:#f1e1bd;font:500 14px/24px var(--font-ui);cursor:pointer}
.shape-shuffle svg{width:18px;height:18px}
.shape-shuffle:hover{border-color:#f1e1bd;background:#f1e1bd14}
@media(prefers-reduced-motion:reduce){.shape-style{transition:none}}

/* Phones: the settings sheet is shorter and leaves the tree sharp above it, so changes are visible live. */
@media(max-width:600px){
 #tree-settings-dialog{max-height:min(56svh,520px);padding:24px 20px 20px}
 #tree-settings-dialog::backdrop{background:#00000014;backdrop-filter:none}
 #tree-settings-dialog .shape-styles{gap:6px}
 #tree-settings-dialog .shape-style{min-height:80px}
}
.shape-tints legend.shape-slider-name{font:500 14px/24px var(--font-ui)!important;color:#f1e1bd;margin:0}
/* Phones: while a settings sheet is open the tree shrinks into the space above it, so changes show live. */
@media(max-width:600px){
 .tree-page:not(.is-guest) .tree-gallery>.tree-art{transition:transform .35s cubic-bezier(.22,1,.36,1);transform-origin:50% 0}
 body.tree-settings-open .tree-gallery>.tree-art{transform:translateY(calc(76px - var(--tree-art-top,164px))) scale(var(--tree-art-scale,.55))}
 body.tree-settings-open .tree-heading-block{opacity:0;transition:opacity .2s}
}
@media(max-width:600px) and (prefers-reduced-motion:reduce){.tree-page:not(.is-guest) .tree-gallery>.tree-art{transition:none}}
/* Shape tab, pass 2: one 8px rhythm, title row with the shuffle chip, sliders grouped on one card. */
.shape-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.shape-head .shape-title{margin:0}
.shape-shuffle{min-height:36px;padding:6px 14px 6px 12px;gap:6px;font-size:var(--type-caption,12px)!important;line-height:16px!important;border-color:#f1e1bd40;background:#f1e1bd0d;white-space:nowrap}
.shape-shuffle svg{width:16px;height:16px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.shape-shuffle:active svg{transform:rotate(180deg)}
.shape-styles{gap:8px;margin-bottom:16px}
.shape-style{min-height:0;padding:12px 4px 8px;gap:4px;border-radius:14px}
.shape-style svg{width:28px;height:34px;color:#6f8f6b;transition:transform .25s,color .2s}
.shape-style:hover svg{transform:translateY(-1px)}
.shape-style[aria-pressed="true"] svg{color:#e9c77d}
.shape-sliders{display:grid;gap:12px;margin-bottom:16px;padding:12px 16px 8px;border-radius:16px;background:#00000024;box-shadow:inset 0 0 0 1px #f1e1bd14}
.shape-slider{gap:0;margin:0}
.shape-slider input[type=range]{height:24px}
.shape-slider-ends{margin-top:-2px;color:#8fa08b}
.shape-tints{margin:0;padding:0}
.shape-tint-row{margin-top:4px}
.shape-tint-dot{width:32px;height:32px;transition:transform .2s}
.shape-tint:hover .shape-tint-dot{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.shape-shuffle svg,.shape-style svg,.shape-tint-dot{transition:none}}
/* Shape tab, pass 3 (feedback: no plates). Plain icons and text on the panel, like the other tabs. */
.shape-sliders{padding:0;background:none;box-shadow:none;border-radius:0;gap:16px;margin-bottom:24px}
.shape-styles{margin-bottom:24px}
.shape-style,.shape-style:hover,.shape-style[aria-pressed="true"]{border:0;background:none;padding:4px 0;border-radius:0}
.shape-style{color:#9fae9a}
.shape-style:hover{color:#f1e1bd}
.shape-style[aria-pressed="true"]{color:#f1e1bd}
.shape-style span{position:relative;padding-bottom:6px}
.shape-style[aria-pressed="true"] span::after{content:'';position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#e9c77d}
.shape-style svg{width:32px;height:40px}
.shape-style:focus-visible{outline:2px solid #f1e1bd;outline-offset:2px;border-radius:8px}
.shape-shuffle,.shape-shuffle:hover{border:0;background:none;padding:6px 0;min-height:36px;color:#c9d2c0}
.shape-shuffle:hover{color:#f1e1bd}
.tree-header{z-index:5}
/* Phone grid of garland colours: circles on one line, names centred under them (two-line names too). */
@media(max-width:1024px){
 #tree-settings-dialog .colour-options button:nth-child(n),.colour-options button:nth-child(n){align-items:center;justify-content:flex-start;height:auto;min-height:88px;padding-top:8px}
 .colour-options button>.option-label{text-align:center;text-wrap:balance;line-height:18px!important}
 .colour-options{align-items:start}
}
/* Until the 3D tree and its pictures are ready the tree area stays empty, then fades in:
   no photo tree first, no bare cone, no blank ornament squares. */
.tree-page .tree-gallery>.tree-art{transition:opacity .45s ease}
body.tree-page:not(.no-3d-tree):not(.tree3d-loaded) .tree-gallery>.tree-art{opacity:0}
@media(max-width:600px){.tree-page:not(.is-guest) .tree-gallery>.tree-art{transition:opacity .45s ease,transform .35s cubic-bezier(.22,1,.36,1)}}
@media(prefers-reduced-motion:reduce){.tree-page .tree-gallery>.tree-art{transition:none!important}}
/* "Link copied" lives in the button; the status line is kept for screen readers only. */
#tree-share-dialog #share-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
#copy-tree-link.is-copied{background:#2f6b4a;border-color:#2f6b4a}
#copy-tree-link{transition:background .2s,border-color .2s}
#copy-tree-link [hidden]{display:none}
/* Every ornament tile is the same square, whatever the picture inside. */
.ornament-tray .tray-ornament{aspect-ratio:1;height:auto;min-height:0;display:grid;place-items:center;overflow:hidden}
.ornament-tray .tray-ornament img{width:86%;height:86%;object-fit:contain;max-width:none;max-height:none}
/* Share card, tighter: a larger tree that reaches down to the text, text 14px on a phone card. */
.share-preview-card .share-card-tree{left:21%;top:15%;width:58%}
.share-card-meaning{top:auto;bottom:3%;font-size:4cqw;line-height:1.5}
/* The share card's copy of the tree keeps its own box at every screen size: desktop rules for the
   page's tree (fixed pixel widths) must not resize it. */
#tree-share-dialog .share-preview-card .share-card-tree{position:absolute!important;inset:auto!important;left:21%!important;top:15%!important;width:58%!important;height:auto!important;max-width:none!important;max-height:none!important;min-width:0!important;aspect-ratio:2/3!important;margin:0!important;transform:none!important}
#tree-share-dialog .share-preview-card .share-card-3d{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important}