:root{--ink:#2f241c;--red:#a7462d;--paper:#f1e4c8;--line:rgba(61,43,31,.24)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#cbb896;color:var(--ink)}body{font-family:"Noto Serif SC","Songti SC","STSong",serif;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit}
.site-shell{position:relative;min-height:100svh;overflow:hidden;background-image:var(--poster);background-size:cover;background-position:center;transition:background-image .45s ease}
.site-shell::before{content:"";position:fixed;inset:0;background:rgba(250,244,228,.16);pointer-events:none}.paper-grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.22;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(50,35,24,.04) 3px 4px);mix-blend-mode:multiply}
.panel{position:relative;z-index:3;width:min(100%,470px);min-height:100svh;margin:auto;padding:max(22px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;animation:arrive .5s ease both}.panel.hidden{display:none}
.eyebrow-row{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line);font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em}.eyebrow-row button{padding:0;border:0;background:none;cursor:pointer;font:inherit;letter-spacing:inherit}
.cover-title{margin-top:clamp(52px,9svh,92px)}.cover-title>p:first-child,.custom-copy>span,.section-heading>span{font:700 10px/1.3 ui-monospace,monospace;letter-spacing:.14em;color:var(--red)}h1{margin:16px 0 0;font-size:clamp(39px,10vw,54px);line-height:1.15;letter-spacing:-.04em}h1 em{font-style:normal;color:var(--red)}.red-thread{width:74px;height:2px;margin:22px 0;background:var(--red);transform:rotate(-2deg)}.cover-note{margin:0;font-size:13px;line-height:1.8;color:#6f5b49}.cover-cup{width:178px;height:178px;object-fit:contain;margin:auto auto 10px;filter:drop-shadow(12px 18px 14px rgba(65,38,22,.16))}.poster-button{min-height:54px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--ink);background:rgba(245,235,213,.58);cursor:pointer}.poster-button b{font-size:24px;color:var(--red)}
.section-heading{padding:38px 0 22px}.section-heading h2,.custom-copy h2{margin:10px 0 0;font-size:clamp(31px,8vw,42px);line-height:1.2;letter-spacing:-.035em}.flavor-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}.flavor-card{position:relative;min-height:188px;padding:12px;overflow:hidden;text-align:left;background-size:cover;background-position:center;border:1px solid var(--line);cursor:pointer}.flavor-card:nth-child(5){grid-column:1/-1;min-height:118px}.flavor-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(242,230,203,.92),transparent 62%)}.flavor-card img{position:absolute;z-index:1;width:98px;height:98px;object-fit:contain;left:50%;top:28px;transform:translateX(-50%);filter:drop-shadow(7px 9px 7px rgba(50,30,18,.12))}.flavor-card:nth-child(5) img{left:27%;top:10px}.flavor-index{position:relative;z-index:2;font:700 9px ui-monospace,monospace;color:var(--red)}.flavor-caption{position:absolute;z-index:2;left:12px;right:12px;bottom:12px}.flavor-caption strong,.flavor-caption small{display:block}.flavor-caption strong{font-size:16px}.flavor-caption small{margin-top:4px;font-size:10px;line-height:1.4;color:#685544}
.custom-panel{justify-content:space-between}.custom-copy{padding-top:clamp(56px,11svh,105px)}.floating-cup{display:block;width:230px;height:230px;object-fit:contain;margin:auto;filter:drop-shadow(14px 20px 16px rgba(52,31,18,.18))}.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-row button{min-height:138px;padding:20px 16px;text-align:left;font-size:25px;border:1px solid var(--line);background:rgba(245,235,213,.62);cursor:pointer}.choice-row small{display:block;margin-top:18px;font-size:10px;line-height:1.5;color:#75604c}.vertical-choices{display:grid;gap:8px;margin:auto 0 0}.vertical-choices button{min-height:62px;padding:0 15px;display:grid;grid-template-columns:40px 1fr auto;align-items:center;text-align:left;border:1px solid var(--line);background:rgba(245,235,213,.62);cursor:pointer}.vertical-choices span{font:700 9px ui-monospace,monospace;color:var(--red)}.vertical-choices b{font-size:17px}.vertical-choices i{font-size:10px;font-style:normal;color:#806a55}
.result-panel{justify-content:space-between;background:linear-gradient(rgba(245,237,216,.05),rgba(245,237,216,.12))}.result-layout{position:relative;flex:1;padding-top:clamp(24px,4svh,40px)}.result-en{font:700 10px ui-monospace,monospace;letter-spacing:.12em;color:var(--red)}.result-layout h2{margin:8px 0 0;font-size:clamp(38px,10vw,52px);line-height:1}.drink-config{margin:11px 0 0;font:700 10px ui-monospace,monospace;letter-spacing:.1em;color:#735441}.result-cup{display:block;width:min(78vw,300px);height:min(78vw,300px);object-fit:contain;margin:clamp(8px,2svh,18px) auto -4px;filter:drop-shadow(18px 24px 18px rgba(55,31,18,.18))}.poster-prose{position:relative;margin-left:auto;width:86%;padding:16px 0 0 18px;border-top:1px solid var(--ink)}.poster-prose::before{content:"";position:absolute;left:0;top:16px;bottom:3px;width:2px;background:var(--red)}.poster-prose span{font:700 9px ui-monospace,monospace;letter-spacing:.1em;color:var(--red)}.poster-prose p{margin:8px 0 0;font-size:14px;line-height:1.8;letter-spacing:.02em}.edition{position:absolute;left:0;bottom:8px;margin:0;writing-mode:vertical-rl;font:700 8px ui-monospace,monospace;letter-spacing:.12em}.result-actions{display:grid;grid-template-columns:.65fr 1.35fr;gap:9px;margin-top:18px}.result-actions button{min-height:48px;border:1px solid var(--ink);background:rgba(245,235,213,.7);cursor:pointer;font-size:12px}.result-actions button:last-child{color:#fff8e9;background:var(--red);border-color:var(--red)}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:600px){.site-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background-size:auto 100%;background-repeat:repeat-x}.panel{min-height:min(820px,calc(100vh - 48px));border:1px solid rgba(61,43,31,.2);box-shadow:0 26px 70px rgba(55,36,23,.22);background-image:var(--poster);background-size:cover;background-position:center}}
@media(max-height:700px){.cover-title{margin-top:30px}h1{font-size:38px}.cover-cup{width:135px;height:135px}.section-heading{padding:22px 0 14px}.flavor-card{min-height:150px}.flavor-card img{width:76px;height:76px;top:24px}.custom-copy{padding-top:28px}.floating-cup{width:175px;height:175px}.choice-row button{min-height:108px}.vertical-choices button{min-height:50px}.result-layout{padding-top:18px}.result-cup{width:190px;height:190px;margin:4px auto -2px}.poster-prose{padding-top:10px}.poster-prose::before{top:10px}.poster-prose p{font-size:12px;line-height:1.55}.result-actions{margin-top:8px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important}}
.cover-cup,.flavor-card img,.result-cup{display:none}
.poster-button{margin-top:auto}
.poster-prose{margin-top:clamp(34px,7svh,66px)}