/* MU full UI foundation — D home / B app shell. Artwork slots remain in art.js. */
:root{--ink:#302e40;--muted:#726b80;--line:#e8e2ee;--lavender:#eee6fc;--pink:#ffe5ed;--lime:#c7ec96;--surface:#fff;--shadow:0 12px 35px #51426209}
body{background:#faf9fd;color:var(--ink)}
button,textarea{font-family:inherit}button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #7d58b1;outline-offset:4px}
.app-sidebar{background:#f0eaf8;border-right:1px solid #e7dfef;padding-top:35px}
.sidebar-brand .brand{color:#383143}.brand i{color:#df819f}.brand-caption{color:#766780}
.app-sidebar nav button{color:#766781;transition:background .18s,color .18s}
.app-sidebar nav button[aria-current=page]{background:#fff;color:#56406e;box-shadow:0 4px 14px #765a9010}
.sidebar-note{border-top:0;background:#e8e0f2;border-radius:25px;padding:20px 17px}.sidebar-note p{color:#776584}.sidebar-note small{color:#796c83}
.quiet-home{column-gap:7%;max-width:1180px}.home-question h1{color:#373043;font-size:clamp(32px,3.6vw,49px)}
.home-question h1 em{color:#a66c91}.home-question .section-label{color:#81708c}.home-invitation{color:#776e83}.home-reassurance{background:#edf5e4;color:#596c46}
.home-emblem{background:linear-gradient(140deg,#ffe5e9,#e9e2ff);box-shadow:0 12px 25px #9c77b019;border-radius:36px}
.home-choices{gap:12px}.choice-caption{color:#7e6e88;font-size:12px}.home-choice{border-color:var(--line);min-height:84px;padding:17px 20px;border-radius:25px;box-shadow:0 3px 0 #eee8f4;color:#483b58}
.home-choice:hover{background:#fff;border-color:#bda7d2;box-shadow:0 6px 18px #79599514;transform:translateX(4px)}.home-choice:active{transform:translateY(2px);box-shadow:none}
.home-choice-icon{width:47px;height:47px;border-radius:17px;color:#685080}.home-choice strong{font-size:16px}.home-choice small{color:#81728c;font-size:11px}.choice-arrow{color:#887497;background:#f5f0fa;border-radius:50%;height:29px;width:29px;display:grid;place-items:center}
.home-explore{color:#807287;font-size:11px}.home-explore span{color:#6c4e87}.home-footnote{color:#867b90}
.page-heading h1,.full-layout h1{color:#383044}.page-heading p,.intro,.small,.below-art,.quiet-copy,.download-note{color:var(--muted)}
.primary{background:var(--lime);color:#314323;box-shadow:0 4px 0 #a7cb78;min-height:53px;border-radius:18px;gap:20px}.primary:hover{background:#d1f1aa}.secondary{border-color:#dcd2e6;color:#655174;border-radius:18px}.quiet{color:#766086}.pill{background:#f5ecd8;color:#79603a}
.path-card{border-color:var(--line);border-radius:29px;padding:12px;box-shadow:var(--shadow)}.path-art{height:205px;border-radius:21px}.path-art svg{height:190px;width:190px}.card-body{padding:18px 12px 9px}.card-body h2{color:#46364f}.card-body p{color:#796c83}.card-body .source-caption{color:#82748b}.tradition{background:#f2edf8;color:#776184}.card-body .primary{border-radius:16px}
.path-scene{border:5px solid white;box-shadow:var(--shadow);background:linear-gradient(145deg,var(--tone),#f5edfc);border-radius:36px}.scene-label span{box-shadow:0 3px 10px #69527b0b;color:#685375}
.progress{color:#8b8096;gap:9px}.progress b{background:#eee8f5}.progress [aria-current=step]{color:#62447f;font-weight:600}.progress [aria-current=step] b{background:#dfcef1;color:#65447f}.progress i{background:#e2d9eb}
.prepare-v2 textarea{border:1px solid #dcd1e6;background:#fff;border-radius:22px;min-height:130px;color:#4a3c57;padding:18px;line-height:1.9}.prepare-v2 textarea:focus{border-color:#a789c2}.prepare-v2 textarea::placeholder{color:#96899f}
.option{border-color:#e2d8eb;color:#7b688b;border-radius:14px}.option[aria-pressed=true]{background:#eadef8;border-color:#b79ace;color:#61417c}.content-note{background:#f0ebf7;color:#796786;border-radius:20px}.field-label{color:#584665}.choice-list button{border-color:var(--line);border-radius:20px}.choice-list button:hover{background:#f4effa}
.flower-tray{border:1px solid #e6dced;background:#fff;border-radius:27px;box-shadow:0 8px 0 #ede6f5;padding:13px;gap:8px}.flower-choice{border-radius:19px;min-height:90px}.flower-choice[aria-pressed=true]{background:#f1e6fc;border-color:#b69aca}.flower-choice:hover .motif{transform:translateY(-3px) rotate(5deg)}.flower-choice .motif{transition:transform .18s}.flower-choice span{color:#75607f}.flower-bed{border-color:#c9b8df;background:#f1eafb;box-shadow:0 8px 0 #e3d8f0}.flower-bed.drag-over{background:#e9f3de;border-color:#94b971}.bed-hint{color:#857293}.ritual-status{color:#796184}
.result-card{box-shadow:0 20px 45px #73548d17;border-width:7px;border-radius:34px}.result-quote{color:#695272}.output-options button{border-color:#e1d5eb;border-radius:17px;color:#786083}.output-options button[aria-pressed=true]{background:#eadcf8;border-color:#b498ce;color:#63437c}.discovery{border-color:var(--line);box-shadow:var(--shadow)}dialog{background:#fdfbff;border-color:#e5d9ef;box-shadow:0 24px 90px #49365f29}dialog::backdrop{background:#32243c66;backdrop-filter:blur(7px)}
body>footer{color:#8b8094;border-top-color:#eee7f4;font-size:10px}.notices{color:#81738a}.source-list a{color:#715388}
@media(min-width:761px){.full-layout{max-width:1200px;margin:auto;padding-top:47px;padding-bottom:47px}.page{max-width:1200px}.home-footnote{margin-top:45px}.ritual-v2 .visual{padding:17px;background:#f1ecf8;border-radius:38px}.ritual-v2 .path-scene{box-shadow:none}.focus-v2{min-height:calc(100dvh - 90px)}}
@media(max-width:760px){.app-sidebar{background:transparent;padding-top:18px}.app-sidebar nav{background:#fffc;border-color:#e8dfee;box-shadow:0 8px 28px #57446c22}.app-sidebar nav button[aria-current=page]{background:#eadef8;box-shadow:none}.quiet-home{padding-top:19px}.home-question h1{font-size:32px}.home-invitation{font-size:13px}.home-emblem{border-radius:24px}.home-choice{min-height:64px;border-radius:25px;padding:11px 15px}.home-choice-icon{width:35px;height:35px;border-radius:13px}.home-choice strong{font-size:14px}.choice-arrow{width:25px;height:25px;font-size:15px}.home-choices{gap:11px;margin-top:25px}.home-explore{font-size:10px}.home-footnote{margin-top:17px}.path-art{height:175px}.path-art svg{height:165px;width:165px}.flower-tray{padding:8px;gap:4px}.flower-choice{min-height:73px;min-width:0;flex:1;padding:6px}.flower-choice span{font-size:10px}.primary{min-height:51px}.path-scene{border-width:4px}.home-question .section-label{font-size:11px}.full-layout{padding-bottom:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
.experience-entry{grid-column:1/-1;width:100%;margin:24px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px}.experience-entry>div{grid-column:1/-1}.experience-entry.single{grid-template-columns:1fr}.experience-entry h2{font-size:20px;margin:3px 0 8px}.experience-entry>button{position:relative;background:#fff;border:1px solid #e4dbea;border-radius:24px;padding:20px;text-align:left;color:#584569;display:grid;grid-template-columns:43px 1fr;gap:6px 13px}.experience-entry>button>span{grid-row:span 2;width:43px;height:43px;display:grid;place-items:center;border-radius:15px;background:#eee3fa;font-size:27px}.experience-entry>button:last-child>span{background:#e0f1f1}.experience-entry strong{font-weight:600;font-size:14px}.experience-entry small{color:#85738f;font-size:11px}.experience-entry b{position:absolute;right:15px;top:12px}.experience-entry>button:hover{border-color:#b79bce;background:#fdfaff}.quiet-home{padding-top:40px;padding-bottom:20px}.experience-page{max-width:1180px;margin:auto;padding:24px 6% 50px}.experience-heading h1{font-size:32px;margin:0 0 9px}.experience-heading p{color:#796a84;font-size:14px}.experience-heading .hero-label{margin:15px 0 10px}.experience-steps{display:flex;gap:20px;flex-wrap:wrap;margin:25px 0;color:#96859f;font-size:12px}.experience-steps [aria-current=step]{color:#6b4b84;font-weight:600}.experience-workspace{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:start}.experience-preview{width:100%;max-width:460px;justify-self:center}.composition-image{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;border-radius:22px;background:#eee7f6}.composition-image:not([src]){visibility:hidden}#composition-board,.composition-display{display:block;position:relative;width:100%;padding:0;border:5px solid white;border-radius:27px;box-shadow:0 15px 35px #69528017;background:#eee7f6;overflow:hidden}#composition-board{cursor:crosshair;touch-action:manipulation}.composition-cursor{display:none;position:absolute;left:13.33%;top:25%;border:2px dashed #72508a;width:23px;height:23px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}#composition-board:focus-visible .composition-cursor{display:block}.experience-preview>p{font-size:11px;text-align:center;color:#85738f;margin:12px 0}.experience-controls label{display:block;color:#6f5b7e;font-size:13px;margin-bottom:15px}.experience-controls select{display:block;width:100%;margin-top:7px;padding:11px 30px 11px 12px;background:white;color:#554361;border:1px solid #ddcfe9;border-radius:14px;font:inherit;min-height:45px;max-width:100%}.editor-pair{display:flex;gap:13px}.editor-pair>*{flex:1;min-width:0}.experience-controls .flower-tray button{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;background:transparent;border:2px solid transparent;border-radius:16px;padding:8px;cursor:grab;font-size:11px;color:#80648c}.experience-controls .flower-tray button[aria-pressed=true]{border-color:#b59bcd;background:#f1e9f9}.experience-controls .flower-tray .motif{width:51px;height:51px}.experience-controls .flower-tray{margin-bottom:18px}.tray-heading{font-size:15px;margin:22px 0 12px}.experience-context{padding:13px 15px;border-radius:18px;background:#efeaf5;font-size:12px;margin-bottom:18px;color:#786387}.experience-context summary{cursor:pointer}.experience-context p{margin:12px 0}.experience-context a{font-size:11px}.experience-controls .candle-control{display:flex;align-items:center;gap:10px;padding:12px;background:white;border-radius:15px}.candle-control input{width:20px;height:20px;accent-color:#9274b3}.experience-controls h2{font-size:24px}.experience-controls .tray-heading{font-size:15px}.experience-controls>.quiet{display:block}.experience-controls .secondary{margin-top:20px}.experience-controls>.small{font-size:11px}.is-floating .composition-display{animation:none}@keyframes river-float{from{transform:translateY(0) scale(1)}to{transform:translateY(-25px) scale(.82);opacity:.75}}@media(max-width:760px){.experience-entry{grid-template-columns:1fr;gap:10px;margin-top:24px}.experience-entry h2{font-size:18px}.experience-entry>button{padding:17px}.experience-page{padding:18px 6% 35px}.experience-heading h1{font-size:27px}.experience-workspace{grid-template-columns:1fr;gap:25px}.experience-preview{max-width:320px}.experience-steps{font-size:10px;gap:13px;margin:15px 0 20px}.experience-heading p{font-size:12px}.experience-controls select{font-size:12px}.experience-entry small{font-size:10px}.quiet-home{padding-top:19px}}@media(prefers-reduced-motion:reduce){.is-floating .composition-display{animation:none}}
/* Float the composed krathong itself; keep its surrounding river stationary. */
.is-floating .composition-display{animation:none;transform:none;opacity:1}.composition-display>svg{display:block;width:100%;height:auto}.is-floating .river-boat{transform-box:view-box;transform-origin:300px 510px;animation:krathong-drift 4.5s ease-in-out forwards}@keyframes krathong-drift{to{transform:translateY(-140px) scale(.66);opacity:.8}}@media(prefers-reduced-motion:reduce){.is-floating .river-boat{animation:none}}
/* Direct manipulation: flowers remain independent elements until export. */
#composition-board,.flower-bed{position:relative;touch-action:pan-y}.movable-layer{position:absolute;inset:0;pointer-events:none;z-index:6}.movable-flower{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;padding:0;border:0;background:none;border-radius:50%;pointer-events:auto;touch-action:none;cursor:grab;transition:filter .15s;min-width:28px;z-index:1}.movable-flower svg,.movable-flower .motif{width:100%;height:100%;margin:0;pointer-events:none;filter:drop-shadow(0 3px 2px #69507826)}.movable-flower:hover{filter:drop-shadow(0 4px 3px #6e538133);z-index:2}.movable-flower:focus-visible{outline:2px dashed #956ab4;outline-offset:3px;z-index:3}.movable-flower.is-picked{opacity:.12}.flower-tray button{touch-action:none;user-select:none;-webkit-user-select:none}.flower-tray button.is-picked{background:#eee3f8;opacity:.65}.lifted-flower{position:fixed;left:0;top:0;aspect-ratio:1;pointer-events:none;z-index:9999;will-change:transform;filter:drop-shadow(0 16px 8px #59426940)}.lifted-flower svg,.lifted-flower .motif{width:100%;height:100%;margin:0}.lifted-flower.invalid-drop{opacity:.72}.placing-flower,.placing-flower *{cursor:grabbing!important}.drop-marker{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border:2px dashed #b29ac6;background:#e9dcf277;border-radius:50%;pointer-events:none;z-index:5}.drop-marker[hidden]{display:none}#composition-board.drag-over{border-color:#c6afdd}.composition-cursor{display:none!important}.movable-flower{animation:flower-settle .16s ease-out}@keyframes flower-settle{from{scale:1.1}to{scale:1}}@media(prefers-reduced-motion:reduce){.movable-flower{animation:none;transition:none}}
.composition-image{-webkit-user-drag:none;user-select:none;pointer-events:none}.movable-flower svg{-webkit-user-drag:none;user-select:none}
/* Approved isometric artwork B: preserve complete silhouettes. */
.home-garden{width:280px;max-width:100%;margin:0 0 12px}.home-garden img,.completion-garden img{width:100%;height:auto;display:block;object-fit:contain}.completion-garden{width:260px;max-width:80%;margin:0 auto 15px}.path-art svg{width:240px;height:210px;max-width:100%}.path-scene>svg{width:85%;height:320px}.flower-choice .motif{width:72px;height:72px}.experience-controls .flower-tray .motif{width:65px;height:65px}@media(max-width:760px){.home-garden{width:190px;margin:0 auto 8px}.path-art svg{width:200px;height:175px}.flower-choice .motif{width:55px;height:55px}.completion-garden{width:220px}}
/* The full PNG is square; this surface shows its middle half with matching coordinates. */
.ritual-v2 .flower-bed.artwork-tray{width:100%;height:auto;aspect-ratio:2/1;min-height:0;margin:-5px auto 10px;background:none;border:0;border-radius:0;box-shadow:none;isolation:isolate}.tray-surface{position:absolute;width:100%;height:200%;top:-50%;left:0;object-fit:contain;pointer-events:none;z-index:-1}.artwork-tray .bed-hint{bottom:0;text-align:center;font-size:11px}.artwork-tray.drag-over{filter:drop-shadow(0 3px 6px #b9a7cc55)}.artwork-tray .movable-layer{z-index:3}
.artwork-tray:focus-visible{outline:2px dashed #ad8fc8;outline-offset:4px;border-radius:18px}.ritual-v2 .flower-bed.artwork-tray{margin-bottom:30px}.artwork-tray .bed-hint{bottom:-19px}

/* B4: keep scene, portrait, tray and pointer coordinates in one square. */
.deity-stage{position:relative;width:100%;max-width:600px;aspect-ratio:1;margin:auto;overflow:hidden;border-radius:28px;background:#fff8ec;isolation:isolate}
.deity-stage>.stage-art{display:block;width:100%;height:100%}
.ritual-v2 .deity-stage .flower-bed.artwork-tray{position:absolute;left:24%;top:66%;width:52%;height:26%;aspect-ratio:2/1;margin:0;min-height:0;background:none;border:0;box-shadow:none}
.deity-stage .bed-hint{display:none}.deity-caption{text-align:center;font-size:12px;line-height:1.7;margin:12px 0 22px;color:#796184}
.home-choice-icon img{display:block;width:100%;height:100%;object-fit:contain}.experience-entry button>span:has(img){width:88px;height:88px;background:transparent}.experience-entry button>span img{display:block;width:100%;height:100%;object-fit:contain}
.ritual-v2 .copy{min-width:0}.ritual-v2 h1{line-height:1.5;margin-bottom:22px}.ritual-v2 .intro{line-height:1.95;margin-bottom:24px}
.ritual-actions{display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:24px}.ritual-actions>p,.ritual-actions>button{margin:0}.ritual-actions .primary{height:auto;white-space:normal;line-height:1.7;padding:15px 20px;margin-bottom:8px}.ritual-actions .small{line-height:1.9;font-size:12px}.ritual-actions .btn-inline{display:inline-block;line-height:1.85;margin-top:8px;text-align:left}.ritual-status{min-height:0;line-height:1.8}.ritual-v2 .tray-note{line-height:1.9;margin:22px 4px 4px;text-align:center}.ritual-v2 .visual{min-width:0}
@media(min-width:761px) and (max-width:1150px){.full-layout.ritual-v2{grid-template-columns:1fr;max-width:680px;gap:28px}.ritual-v2 .copy{display:contents}.ritual-v2 .copy>h1,.ritual-v2 .copy>.intro{margin:0}.ritual-v2 .visual{grid-row:5}.ritual-v2 .ritual-actions{grid-row:6;margin-top:0}.ritual-v2 h1 br{display:none}.ritual-v2 h1 em{margin-left:.3em}}
@media(max-width:760px){.deity-stage{border-radius:22px}.ritual-v2 .ritual-actions{gap:18px;margin-top:24px}.ritual-v2 .copy>.intro{margin-bottom:20px}.ritual-v2 .deity-caption{margin-bottom:18px}.ritual-v2 .visual{width:100%}.experience-entry button>span:has(img){width:64px;height:64px}}

/* Keep the visible flower identical to export, with a larger invisible hit area. */
.deity-stage .movable-flower{min-width:0}.deity-stage .movable-flower::before{content:"";position:absolute;inset:-8px;border-radius:50%}
/* Short viewports: cap the square stage by height so the figure, tray and picker fit on one screen. Placement is percentage-based, so export is unaffected. */
.ritual-v2 .deity-stage{max-width:min(600px,max(300px,calc(100svh - 270px)));margin-inline:auto}
/* Activity cards with a picture: the first column must match the picture, or the text runs over it. */
.experience-entry>button:has(>span>img){grid-template-columns:88px 1fr;align-items:center}
@media(max-width:760px){.experience-entry>button:has(>span>img){grid-template-columns:64px 1fr}}
/* B-4 category icons reach their PNG edges; inset them inside the tinted tile so the rounded corners do not clip the art. */
.home-choice-icon:has(img){box-sizing:border-box;padding:5px;overflow:visible}
@media(max-width:760px){.home-choice-icon:has(img){padding:4px}}
/* Shrine row: deity · offering table · picker. Each column is label + panel; columns stretch to one height so tops, labels and bottoms line up. */
.shrine-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;align-items:stretch}
/* From 1151 px every panel is exactly the deity square tall (--deity), so the picker cannot stretch the row. */
.shrine-col{display:grid;grid-template-rows:auto 1fr;gap:8px;min-width:0}
.shrine-label{margin:0;font-size:12px;line-height:1.5;font-weight:600;color:#796184;text-align:center}
.shrine-deity .deity-stage{width:100%;max-width:none;margin:0}
.offering-surface{box-sizing:border-box;height:100%;display:flex;align-items:center;justify-content:center;padding:12px;border-radius:22px;background:linear-gradient(180deg,#fffaf3,#f5e9dd);box-shadow:inset 0 0 0 1px #eadccf}
.offering-tray{position:relative;width:100%}
.tray-art{display:block;width:100%;height:auto;pointer-events:none}
.offering-tray .flower-bed.artwork-tray{position:absolute;margin:0;aspect-ratio:auto;min-height:0;background:none;border:0;border-radius:0;box-shadow:none}
.offering-tray .bed-hint{display:none}
.offering-tray .movable-flower{min-width:0}.offering-tray .movable-flower::before{content:"";position:absolute;inset:-8px;border-radius:50%}
.shrine-picker{grid-column:1/-1}.shrine-picker .flower-tray{margin:0}
.ritual-v2 .visual>.tray-note{margin:14px 0 0}
@media(max-width:760px){.shrine-row{grid-template-columns:1fr;gap:16px}.shrine-deity .deity-stage{max-width:240px;margin:0 auto}}
/* Page frame for the offering step from 761 px: heading above, shrine row, then one action row. */
@media(min-width:761px){
 .ritual-v2 .ritual-actions{display:grid;grid-template-columns:1fr auto minmax(240px,auto);align-items:center;gap:10px 16px;margin-top:0}
 .ritual-v2 .ritual-actions>.primary{margin:0}
 .ritual-v2 .ritual-actions>:not(.ritual-status):not(#undo):not(.primary){grid-column:1/-1}
}
@media(min-width:1151px){
 .full-layout.ritual-v2{grid-template-columns:1fr;max-width:1120px;gap:12px;align-items:start;padding-top:22px;padding-bottom:28px}
 .ritual-v2 .copy{display:contents}.ritual-v2 .copy>.back-button{justify-self:start;margin:0}.ritual-v2 .copy>.progress,.ritual-v2 .copy>h1,.ritual-v2 .copy>.intro{margin:0}
 .ritual-v2 h1 br{display:none}.ritual-v2 h1 em{margin-left:.3em}
 .ritual-v2 .visual{grid-row:5}.ritual-v2 .ritual-actions{grid-row:6}
 /* The deity column is a square sized by viewport height, so the row (and the action row below) fits one screen. */
 .shrine-row{--deity:min(340px,max(260px,calc(100svh - 410px)));grid-template-columns:var(--deity) minmax(0,1fr) 132px;gap:16px}
 .shrine-col{grid-template-rows:auto var(--deity)}
 .shrine-picker{grid-column:auto}
 .shrine-picker .flower-tray{box-sizing:border-box;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;gap:6px}
 .shrine-picker .flower-choice{flex:0 1 auto;width:100%;min-width:0;min-height:0;padding:4px 6px}
 .shrine-picker .flower-choice .motif{width:min(60px,calc(var(--deity)/5));height:min(60px,calc(var(--deity)/5))}
}
/* Offering table and picker sit directly on the shrine panel: no frame, fill or shadow. */
.offering-surface{background:none;box-shadow:none;border:0}
.shrine-picker .flower-tray{background:none;border:0;box-shadow:none}
/* Download preview: the generated file itself, fitted to the column without cropping. */
.output-preview{margin:0;display:grid;place-items:center;min-height:240px;padding:14px;border-radius:24px;background:#f3eef9}
.output-preview img{display:block;max-width:100%;max-height:min(68vh,620px);width:auto;height:auto;border-radius:14px;box-shadow:0 10px 28px #5b3f6324}
.output-preview[data-format=wallet] img{width:100%;max-height:none}