/* Three live visual choices share the same controls and original40 images. */
.app-shell{--wash:#f5f2e8;--surface:rgba(255,253,246,.68);--surface-solid:#fcfaf2;--ink:#404a3b;--muted:#6b725e;--accent:#657553;--edge:rgba(122,135,103,.25);--leaf-opacity:.12;--gallery-width:clamp(140px,46vw,190px);background:transparent;color:var(--ink)}
.app-shell[data-look=rose]{--wash:#f5eeeb;--surface:rgba(255,248,245,.67);--surface-solid:#fff7f2;--ink:#604c48;--muted:#80675f;--accent:#a37362;--edge:rgba(152,111,96,.25);--leaf-opacity:.09}
.app-shell[data-look=night]{--wash:#25322e;--surface:rgba(54,69,61,.64);--surface-solid:#34433b;--ink:#eee6ce;--muted:#c3c7ad;--accent:#dbc38f;--edge:rgba(223,213,173,.22);--leaf-opacity:.06}
html,body{background:#e7e6df}.app-shell:before{background:var(--wash);z-index:-2}.app-shell:after{content:'';position:fixed;inset:0;max-width:480px;margin:auto;pointer-events:none;z-index:-1;background:linear-gradient(180deg,var(--wash) 3%,transparent 43%,var(--wash) 94%),var(--oil-bg) center/cover;opacity:var(--leaf-opacity);mask-image:linear-gradient(90deg,#000,transparent 65%,#000)}
.app-header{height:112px;padding:48px 25px 12px;background:transparent;align-items:center}.brand{font-size:27px;letter-spacing:.12em;color:var(--ink)}.brand>span{display:none}.app-header .icon-button{border-color:var(--edge);color:var(--muted);background:transparent;width:36px;height:36px;min-height:36px;padding:7px}.look-picker{display:flex;justify-content:center;gap:7px;padding:2px 16px 0}.look-picker button{font-size:10px;min-height:32px;padding:6px 9px;display:flex;gap:5px;align-items:center;border:1px solid transparent;color:var(--muted);background:transparent;border-radius:15px;white-space:nowrap}.look-picker button[aria-pressed=true]{border-color:var(--edge);background:var(--surface);color:var(--ink)}.look-dot{width:7px;height:7px;border-radius:50%;background:#879677}.look-picker button[data-look=rose] .look-dot{background:#b88675}.look-picker button[data-look=night] .look-dot{background:#40584c}.summer-preview-note{background:transparent;font-size:8px;line-height:18px;color:var(--muted);position:relative;z-index:1;margin-top:0}
main{padding:0 0 220px}.chat-welcome{padding:14px 0 5px;min-height:0;display:flex;justify-content:center;gap:0}.chat-welcome .collection-heading{text-align:center;margin:0 0 6px}.collection-heading h2{font:500 22px/1.5 var(--serif);letter-spacing:.1em;margin:0;color:var(--ink)}.collection-heading p{font-size:10px;letter-spacing:.12em;color:var(--muted);margin:7px 0 0}.collection-track{width:100%;display:flex;align-items:center;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:22px calc((100% - var(--gallery-width))/2) 22px;position:relative;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-behavior:smooth;min-height:calc(var(--gallery-width)*12/7 + 44px)}.collection-track::-webkit-scrollbar{display:none}.collection-card{flex:0 0 var(--gallery-width);width:var(--gallery-width);margin:0;scroll-snap-align:center;position:relative;opacity:.42;scale:.89;transition:opacity 240ms,scale 300ms cubic-bezier(.16,1,.3,1)}.collection-card.is-current{opacity:1;scale:1}.collection-card img{display:block;width:100%;height:auto;aspect-ratio:7/12;object-fit:contain;border-radius:7px;box-shadow:0 12px 23px #38291121;user-select:none;-webkit-user-drag:none}.collection-controls{display:flex;align-items:center;justify-content:center;gap:29px;margin-top:-1px}.collection-controls button{border:0;background:transparent;color:var(--muted);width:38px;height:38px;display:grid;place-items:center;border-radius:50%}.collection-controls button:disabled{opacity:.25;cursor:default}.collection-controls svg{width:17px;height:17px}.collection-count{font-size:12px;letter-spacing:.15em;color:var(--ink);font-variant-numeric:tabular-nums;margin:0}.collection-count span{color:var(--muted);font-size:10px}
#screen-draw{min-height:0;padding-bottom:0}.chat-is-home .chat-thread{display:none}.chat-is-home .chat-welcome[hidden]{display:flex!important}.chat-is-home .chat-welcome{display:flex}.chat-composer{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom,0px));width:calc(100% - 44px);max-width:436px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;z-index:11}.chat-composer:focus-within{box-shadow:none;border:0}.chat-composer>.reading-modes{margin:0 0 12px;padding:0 4px;justify-content:center;gap:16px}.reading-modes button{flex:1;gap:7px;color:var(--muted)!important;background:none!important;padding:0 0 3px;min-height:64px;font-size:10px;font-weight:400;letter-spacing:.04em;opacity:.73;border-radius:0}.reading-modes button svg{width:39px;height:39px;padding:8px;border-radius:13px;border:1px solid var(--edge);background:var(--surface);box-shadow:inset 0 1px 0 #ffffff50;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.reading-modes button .icon-tint{fill-opacity:.07}.reading-modes button[aria-pressed=true]{color:var(--ink)!important;opacity:1}.reading-modes button[aria-pressed=true] svg{border-color:var(--accent);color:var(--accent);background:var(--surface);box-shadow:inset 0 1px 0 #ffffff80,0 3px 10px #313b2110}.composer-launch{width:100%;min-height:55px;text-align:left;border:1px solid var(--edge);border-radius:20px;padding:14px 18px;background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:space-between;gap:10px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:14px;box-shadow:0 8px 20px #24322305}.composer-launch svg{width:19px;height:19px;color:var(--accent)}.chat-composer>.question-box,.chat-composer>.composer-footer,.composer-close{display:none}.chat-composer.is-editing{bottom:calc(79px + var(--keyboard-lift,0px));padding:25px 17px 15px;background:var(--surface-solid);border:1px solid var(--edge);border-radius:25px;box-shadow:0 -7px 42px #2632201c}.chat-composer.is-editing .composer-launch{display:none}.chat-composer.is-editing>.question-box{display:block}.chat-composer.is-editing>.composer-footer{display:flex;justify-content:flex-end;padding-top:8px}.chat-composer.is-editing>.reading-modes{margin-top:4px;margin-bottom:17px}.chat-composer.is-editing .composer-close{display:grid;place-items:center;position:absolute;right:10px;top:3px;width:30px;height:25px;border:0;background:none;color:var(--muted);padding:4px}.composer-close svg{width:19px;height:19px}#reading-question{color:var(--ink);min-height:83px;background:none}#reading-question::placeholder{color:var(--muted)}#question-count{color:var(--muted)!important}.draw-controls .primary,#single-draw{background-color:var(--accent)}.app-shell[data-look=night] .draw-controls .primary,.app-shell[data-look=night] #single-draw{background-color:#697e65}.composer-note{display:none}.summer-service{margin:20px 22px;color:var(--muted);font-size:10px}.chat-is-home .summer-service{display:none}.chat-thread{padding:20px 24px 0}.chat-question{background:var(--surface-solid);border-color:var(--edge);color:var(--ink)}.corner-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(19px + env(safe-area-inset-bottom,0px));width:calc(100% - 44px);max-width:436px;display:flex;justify-content:space-between;pointer-events:none;z-index:13}.corner-dock button{width:43px;height:43px;border:1px solid var(--edge);border-radius:15px;background:var(--surface);color:var(--ink);display:grid;place-items:center;pointer-events:auto;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 #ffffff45}.corner-dock svg{width:21px;height:21px}#app-menu{inset:0 auto 0 0;margin:0;width:min(310px,84vw);height:100dvh;max-height:100dvh;border:0;border-radius:0 25px 25px 0;padding:55px 22px 25px;background:#faf7ed;color:#424b37}#app-menu::backdrop{background:#25312765;backdrop-filter:blur(4px)}.menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:40px}.menu-top h2{font:500 21px/1.5 var(--serif);margin:0}.menu-close{border:0;background:none;width:38px;height:38px;color:#667354;padding:9px}.menu-close svg{width:20px;height:20px}#app-menu .bottom-nav{position:static;transform:none;max-width:none;width:100%;height:auto;display:flex;flex-direction:column;gap:10px;border:0;background:none;box-shadow:none;padding:0}#app-menu .bottom-nav button{display:flex;flex-direction:row;justify-content:flex-start;gap:14px;padding:10px 12px;min-height:57px;font-size:14px;border-radius:15px}#app-menu .bottom-nav button.active{background:#e8ecdc}#app-menu .bottom-nav button>span{background:none}.chat-is-home #screen-draw{display:block}#screen-deck,#screen-diary,#screen-history{padding:20px 24px}#screen-deck h1,#screen-diary h1,#screen-history h1{color:var(--ink)}.app-shell[data-look=night] .single-reading{color:var(--ink)}.app-shell[data-look=night] .single-answer-context,.app-shell[data-look=night] .single-meaning,.app-shell[data-look=night] .single-reading h2{color:var(--ink)}.app-shell[data-look=night] .reading-limit,.app-shell[data-look=night] .small-note{color:var(--muted)}.app-shell[data-look=night] .connection-note>h3{color:var(--ink)}
@supports(padding:env(safe-area-inset-top)){.app-header{padding-top:calc(48px + env(safe-area-inset-top));height:calc(112px + env(safe-area-inset-top))}}
@media(max-height:780px){.app-header{height:94px;padding-top:34px}.chat-welcome{padding-top:8px}.collection-heading h2{font-size:20px}.app-shell{--gallery-width:clamp(130px,40vw,168px)}.collection-track{padding-block:15px;min-height:calc(var(--gallery-width)*12/7 + 30px)}.collection-heading p{margin-top:4px}.chat-composer>.reading-modes{margin-bottom:8px}.reading-modes button{min-height:58px}.corner-dock{bottom:14px}.chat-composer{bottom:70px}}
@media(prefers-reduced-motion:reduce){.collection-track{scroll-behavior:auto}.collection-card{transition:none}}

/* Safe-area-aware gallery keeps controls clear on a notched iPhone. */
.app-shell{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--gallery-width:clamp(120px,min(46vw,calc((100svh - 520px - var(--safe-top) - var(--safe-bottom))*7/12)),190px)}
.app-header{padding-top:calc(48px + var(--safe-top));height:calc(112px + var(--safe-top))}
.reading-modes button{opacity:1}
@media(max-height:780px){.app-header{height:calc(94px + var(--safe-top));padding-top:calc(34px + var(--safe-top))}.app-shell{--gallery-width:clamp(120px,min(40vw,calc((100svh - 500px - var(--safe-top) - var(--safe-bottom))*7/12)),168px)}}

.chat-composer{bottom:calc(80px + var(--safe-bottom))}.corner-dock{bottom:calc(19px + var(--safe-bottom))}
.chat-composer.is-editing{bottom:calc(79px + var(--safe-bottom) + var(--keyboard-lift,0px))}
.chat-composer.is-editing.keyboard-open{bottom:calc(12px + var(--keyboard-lift,0px))}
.app-shell{--gallery-width:clamp(120px,min(46vw,calc((100svh - 544px - var(--safe-top) - var(--safe-bottom))*7/12)),190px)}
@media(max-height:780px){.corner-dock{bottom:calc(14px + var(--safe-bottom))}.chat-composer:not(.is-editing){bottom:calc(70px + var(--safe-bottom))}.app-shell{--gallery-width:clamp(96px,min(40vw,calc((100svh - 520px - var(--safe-top) - var(--safe-bottom))*7/12)),168px)}}

/* Warm rose family: larger originals, handwriting, and a continuous bottom surface. */
@font-face{font-family:MiluHand;src:url('assets/summer/chenyu-handwriting.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
.app-shell{--wash:#f5e9e3;--surface:rgba(255,248,241,.37);--surface-solid:#fff5ee;--ink:#674d45;--muted:#806256;--accent:#a47761;--edge:rgba(157,115,95,.23);--leaf-opacity:.055;--base-tint:rgba(246,224,212,.74);--hand:MiluHand,'PingFang TC',sans-serif}
.app-shell[data-look=cream]{--wash:#f8eee2;--surface:rgba(255,253,245,.43);--surface-solid:#fff8ed;--ink:#6a5146;--muted:#7c6254;--accent:#b18a6b;--edge:rgba(168,132,102,.23);--leaf-opacity:.045;--base-tint:rgba(251,234,216,.84)}
.app-shell[data-look=glow]{--wash:#f6e8e2;--surface:rgba(255,249,246,.25);--surface-solid:#fff5f0;--ink:#71514b;--muted:#836157;--accent:#b77f6d;--edge:rgba(183,137,121,.22);--leaf-opacity:.035;--base-tint:rgba(249,226,218,.62)}
.app-shell:after{opacity:var(--leaf-opacity);mask-image:linear-gradient(90deg,#000,transparent 58%,#000)}
.brand{font-family:var(--hand);font-weight:400;font-size:38px;letter-spacing:.09em}.collection-heading h2{font-family:var(--hand);font-size:27px;font-weight:400;line-height:1.1;letter-spacing:.08em}.collection-heading p{font-family:var(--hand);font-size:15px;line-height:1.3;letter-spacing:.06em;margin-top:5px}.chat-welcome{padding-top:9px}.chat-welcome .collection-heading{margin-bottom:0}.look-picker{gap:8px}.look-picker button{font-family:var(--hand);font-size:16px;padding:5px 10px;min-height:32px;gap:4px}.look-dot{background:#b78671;width:5px;height:5px}.look-picker button[data-look=cream] .look-dot{background:#bea07c}.look-picker button[data-look=glow] .look-dot{background:#c6968b}.look-picker button[aria-pressed=true]{background:var(--surface);border-color:var(--edge);box-shadow:inset 0 1px 0 #ffffff70;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.app-shell{--gallery-width:clamp(125px,min(54vw,calc((100svh - 490px - var(--safe-top) - var(--safe-bottom))*7/12)),220px)}
.collection-track{gap:22px;padding-block:19px;min-height:calc(var(--gallery-width)*12/7 + 38px)}.collection-card img{border-radius:6% / 3.5%;object-fit:contain;box-shadow:0 12px 25px #68483417}.collection-controls{gap:23px}.collection-count{font-family:var(--hand);font-size:18px;letter-spacing:.1em}.collection-count span{font-size:14px}.collection-controls button{height:31px;min-height:31px}.collection-controls svg{width:15px;height:15px}
.chat-composer>.reading-modes{margin:0 0 14px;padding:0 2px;gap:9px}.reading-modes button{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;min-height:36px;gap:0;padding:5px 7px;border:1px solid var(--edge);border-radius:18px!important;background:var(--surface)!important;color:var(--muted)!important;font-family:var(--hand);font-weight:400;font-size:18px;letter-spacing:.02em;opacity:1;line-height:1.3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 #ffffff50}
.reading-modes button svg{display:none}.reading-modes button[aria-pressed=true]{border-color:var(--accent);color:var(--ink)!important;background:var(--surface)!important;box-shadow:inset 0 1px 0 #ffffffa0,0 2px 7px #885d4410}.reading-modes button span{white-space:nowrap}.composer-launch{font-family:var(--hand);font-size:21px;letter-spacing:.03em;border-color:var(--edge);background:var(--surface);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 1px 0 #ffffff60,0 4px 16px #78554005}.composer-launch svg{width:17px;height:17px}#reading-question{font-family:var(--hand);font-size:22px;line-height:1.6}#reading-question::placeholder{font-size:21px}.chat-composer.is-editing>.reading-modes{margin-bottom:15px;margin-top:6px}.bottom-foundation{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;height:calc(144px + var(--safe-bottom));background:linear-gradient(180deg,var(--surface),var(--base-tint));border-top:1px solid #ffffff6b;border-radius:28px 28px 0 0;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);pointer-events:none;z-index:10;box-shadow:0 -7px 22px #9b6e4b04}.corner-dock button{background:var(--surface);border-color:var(--edge);box-shadow:inset 0 1px 0 #ffffff75}.app-shell[data-look=cream] .bottom-foundation{border-radius:32px 32px 0 0}.app-shell[data-look=glow] .bottom-foundation{background:linear-gradient(180deg,rgba(255,250,247,.28),var(--base-tint));border-top-color:#ffffffbd}.app-shell[data-look=glow] .composer-launch,.app-shell[data-look=glow] .reading-modes button{box-shadow:inset 0 1px 0 #ffffffb0,0 4px 15px #9c716007}.menu-top h2{font-family:var(--hand);font-size:28px}.chat-is-home .chat-thread{display:none}
@media(max-height:780px){.app-shell{--gallery-width:clamp(112px,min(52vw,calc((100svh - 465px - var(--safe-top) - var(--safe-bottom))*7/12)),190px)}.collection-heading h2{font-size:25px}.collection-heading p{font-size:14px}.collection-track{padding-block:15px;min-height:calc(var(--gallery-width)*12/7 + 30px)}.chat-composer>.reading-modes{margin-bottom:12px}.reading-modes button{font-size:16px;min-height:33px;padding:5px 4px}.bottom-foundation{height:calc(134px + var(--safe-bottom))}.brand{font-size:34px}}
/* Side cards and arrow controls explain the gallery; keep the heading quiet. */
.collection-heading p{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.chat-welcome .collection-heading{margin-bottom:6px}
.collection-track{padding-block:14px;min-height:calc(var(--gallery-width)*12/7 + 28px)}
.app-shell{--gallery-width:clamp(125px,min(54vw,calc((100svh - 498px - var(--safe-top) - var(--safe-bottom))*7/12)),220px)}
@media(max-height:780px){.collection-track{padding-block:12px;min-height:calc(var(--gallery-width)*12/7 + 24px)}.app-shell{--gallery-width:clamp(112px,min(52vw,calc((100svh - 465px - var(--safe-top) - var(--safe-bottom))*7/12)),190px)}}

/* Review variants live at separate URLs; the app itself has no theme picker. */
.app-shell{--gallery-width:clamp(140px,min(60vw,calc((100svh - 465px - var(--safe-top) - var(--safe-bottom))*7/12)),244px)}
.corner-dock{width:100%;max-width:480px;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:0;height:calc(66px + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:var(--surface);border-top:1px solid var(--edge);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.corner-dock button{width:100%;height:66px;min-height:66px;border:0;border-radius:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0;background:transparent;box-shadow:none;backdrop-filter:none;font-family:var(--hand);font-size:21px;letter-spacing:.06em}
.corner-dock .corner-menu{border-right:1px solid var(--edge)}.corner-dock svg{width:21px;height:21px}.corner-dock button:hover{background:var(--surface)}
@media(max-height:780px){.app-shell{--gallery-width:clamp(125px,min(60vw,calc((100svh - 425px - var(--safe-top) - var(--safe-bottom))*7/12)),210px)}.corner-dock{bottom:0}}
/* Spend the spare gap beneath the collection on the card itself. */
.app-shell{--gallery-width:clamp(135px,min(66vw,calc((100svh - 440px - var(--safe-top) - var(--safe-bottom))*7/12)),294px)}
@media(max-height:780px){.app-shell{--gallery-width:clamp(125px,min(66vw,calc((100svh - 400px - var(--safe-top) - var(--safe-bottom))*7/12)),240px)}}

/* B from the real-font comparison: Jason Handwriting 2, original file unchanged. */
@font-face{font-family:MiluJason;src:url('assets/summer/jason2-handwriting.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.app-shell{--hand:MiluJason,'PingFang TC',sans-serif}
.reading-modes button{font-size:16px}
@media(max-height:780px){.reading-modes button{font-size:14px}}
/* The top-right help affordance is removed from the current design. */
.app-header #help{display:none}

/* Keep typing focused; restore the chosen mode controls when the keyboard closes. */
.chat-composer.is-editing.keyboard-open > .reading-modes{display:none}

/* One explicit action: send the question and start the selected card draw. */
.chat-composer .draw-controls .primary,.chat-composer #single-draw{background-image:none;color:#fffaf2;width:88px;min-width:88px;height:44px;min-height:44px;border-radius:22px;padding:0 16px;font:400 24px/1 var(--hand);font-size:24px!important;letter-spacing:.05em;white-space:nowrap}

/* 2026-10-22: approved app-wide JasonHandwriting2, including reading prose. */
body{--hand:MiluJason,'PingFang TC',sans-serif;--serif:var(--hand)}
body,body *{font-family:MiluJason,'PingFang TC',sans-serif!important}