/* v28 — short comic scenes, one continuous mobile reading experience */
:root{--green:#22291f;--ink:#252b22;--paper:#faf8eb;--muted:#838574;--orange:#ef7950;--line:#dfdfcd}
body{background:#eeeebc}.app{background:var(--paper)}header{height:65px;padding:16px 22px;border-bottom:1px solid #262a2012}.brand{font-size:23px}.brand small{font-size:8px}.nav-button{font-size:11px;border-color:#292e2440;background:#fffaf0}.screen{animation:turn-page .24s ease}.club-label{display:flex;justify-content:space-between;font-size:10px;font-weight:800;letter-spacing:1px;padding:0 24px;color:#5f674c}
.home28{padding-top:27px;overflow:hidden}.home28 h1{font-size:44px;line-height:1.2;letter-spacing:-2px;margin:24px 24px 12px;font-weight:950}.dots-title{color:var(--orange);letter-spacing:5px}.home-lead{font-size:15px;line-height:1.7;margin:0 24px}.home-lead span{background:#dfe995;box-shadow:3px 0 #dfe995,-2px 0 #dfe995}.cast-stage{height:304px;position:relative;margin-top:5px}.cast-main{position:absolute;z-index:3;width:255px;left:50%;top:15px;margin-left:-127px;mix-blend-mode:multiply;animation:mascot-wobble 5s ease-in-out infinite}.cast-side{position:absolute;width:140px;mix-blend-mode:multiply;z-index:2}.cast-left{left:-18px;top:123px;transform:rotate(-14deg)}.cast-right{right:-17px;top:127px;transform:rotate(12deg)}.orbit{position:absolute;left:50%;top:25px;margin-left:-126px;width:252px;height:252px;background:#e5eda3;border-radius:50%}.orbit-two{width:292px;height:174px;margin-left:-146px;top:92px;background:transparent;border:1px dashed #9eaa78;transform:rotate(-18deg)}.scrawl{position:absolute;z-index:4;background:#fffdf1;border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:7px 10px;font-size:12px;font-weight:800}.s1{left:17px;top:29px;transform:rotate(-8deg)}.s2{right:16px;top:76px;transform:rotate(8deg)}.starburst{position:absolute;right:32px;top:7px;background:#c4dbe8;width:77px;height:77px;display:grid;place-content:center;text-align:center;font-size:12px;font-weight:850;line-height:1.4;transform:rotate(12deg);clip-path:polygon(50% 0,61% 15%,80% 6%,83% 26%,100% 30%,91% 49%,100% 67%,81% 73%,79% 94%,60% 88%,49% 100%,38% 86%,20% 94%,18% 75%,0 68%,10% 49%,0 30%,19% 25%,22% 6%,40% 15%)}.stage-caption{position:absolute;bottom:4px;left:50%;transform:translateX(-50%) rotate(-2deg);background:#22291f;color:#fffde9;font-size:12px;padding:8px 13px;white-space:nowrap;z-index:5}.home-bottom{padding:15px 24px 8px;text-align:center}.home-facts{display:flex;justify-content:center;gap:17px;font-size:10px;color:#7a8068;margin:2px 0 16px}.comic-primary{background:#dce878;border:2px solid var(--ink);border-radius:14px;color:var(--ink);box-shadow:4px 5px 0 var(--ink);justify-content:space-between;font-size:15px;min-height:51px;padding:12px 17px}.comic-primary b{font-size:22px;line-height:1}.comic-primary:active:not(:disabled){box-shadow:1px 2px 0 var(--ink);transform:translate(2px,2px)}.home-bottom .micro{margin:17px 0 5px;font-size:10px}
.story-page{padding:17px 21px 25px;--scene:#e4ead4}.story-progress{display:flex;gap:4px;height:4px}.story-progress i{height:4px;flex:1;background:#e0e3d4;border-radius:2px}.story-progress i.done{background:#a5b66c}.story-progress i.current{background:#263529}.story-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;margin:15px 0 12px;font-weight:700;color:#7c836e}.story-meta em{font-style:normal;color:#9ca18f}.story-title{font-size:29px;line-height:1.2;letter-spacing:-1.3px;margin:0 0 17px}.scene{height:179px;border-radius:16px;position:relative;overflow:hidden;background:var(--scene);border:1.5px solid #252b2233}.mock-top{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid #252b2217;font-size:10px;color:#717861}.mock-top b{font-size:15px}.scene-chat{background:#e9eddd}.scene-avatar{width:31px;height:31px;border-radius:8px;background:#fffdf2;object-fit:cover}.chat-line{display:flex;gap:9px;align-items:flex-start;margin:11px 13px}.chat-line small{font-size:9px;color:#818871;display:block;margin:0 0 5px 2px}.speech{font-size:13px;line-height:1.5;padding:9px 12px;background:white;border-radius:0 11px 11px 11px;position:relative;max-width:240px}.chat-line.own{justify-content:flex-end;margin-top:5px}.own .speech{background:#cbdc8c;border-radius:11px 0 11px 11px}.own small{text-align:right}.typing{display:flex;gap:4px;padding:14px 18px}.typing i{width:4px;height:4px;background:#617341;border-radius:50%;animation:blink-dot 1.4s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.scene-video{background:#273428;color:#fffce7}.video-top{display:flex;justify-content:space-between;padding:11px 15px;font-size:10px;opacity:.7}.video-clock{position:absolute;left:16px;top:38px;display:flex;align-items:center;gap:13px;font-size:13px}.video-clock strong{font-size:36px;font-weight:900;letter-spacing:-1px;color:#dfe885}.video-clock b{font-size:20px;color:#929e7f}.play-circle{position:absolute;right:22px;top:40px;width:43px;height:43px;border:1px solid #b7cba4;border-radius:50%;display:grid;place-content:center;font-size:17px;padding-left:3px;color:#dfe885}.video-track{position:absolute;top:97px;left:17px;right:17px;height:2px;background:#58664d}.video-track i{display:block;height:2px;width:78%;background:#c6dc8a}.video-caption{position:absolute;left:17px;bottom:14px;font-size:16px;font-weight:800}.video-caption small{display:block;font-size:10px;color:#bdc9ac;font-weight:400;margin-top:5px}
.scene-photo{background:#dfdfed;display:flex;align-items:center;justify-content:center}.polaroid{width:165px;height:161px;transform:rotate(-7deg);background:#fffdf2;box-shadow:3px 5px 0 #33333b22;padding:6px;position:relative;top:10px}.polaroid img{width:153px;height:123px;object-fit:cover;object-position:50% 34%}.polaroid span{display:block;text-align:center;font-size:9px;margin-top:6px}.photo-note{position:absolute;right:13px;bottom:23px;background:#f3be9a;border:1px solid #33342b;padding:8px 10px;font-size:12px;font-weight:800;transform:rotate(9deg)}.camera-corner{position:absolute;left:12px;top:12px;font-size:9px;font-weight:800;color:#656579}
.scene-table{background:#e4dfce;text-align:center}.table-label{font-size:12px;display:inline-block;background:#fffdf0;padding:8px 16px;border-radius:0 0 13px 13px}.table-avatars{display:flex;justify-content:center;gap:10px;margin-top:12px}.table-avatars img{width:70px;height:70px;border-radius:50%;background:#fffdf1;border:2px solid #ffffef;object-fit:cover}.table-avatars img:nth-child(2){transform:translateY(8px)}.table-speech{position:absolute;right:22px;top:40px;background:#fffdf0;border-radius:50%;width:40px;font-size:23px}.scene-table p{font-size:10px;color:#7a715c;margin-top:17px}
.scene-shop{background:#dbdfeb}.shop-ticket{position:absolute;left:32px;top:12px;width:207px;background:#fffdf1;padding:13px 17px 10px;transform:rotate(-3deg);box-shadow:3px 4px 0 #272f3920}.shop-ticket small{font-size:9px;color:#8c8c7a}.shop-ticket strong{display:block;font-size:25px;letter-spacing:-1px;margin-top:3px}.receipt-rule{border-top:1px dashed #babdad;margin:9px 0}.shop-ticket p{display:flex;justify-content:space-between;font-size:9px;margin:6px 0}.barcode{height:12px;width:110px;background:repeating-linear-gradient(90deg,#485143 0 2px,transparent 2px 4px,#485143 4px 5px,transparent 5px 8px);margin-top:8px}.ticket-note{position:absolute;right:14px;top:56px;font-size:17px;font-weight:850;line-height:1.5;transform:rotate(7deg);background:#ddeb92;padding:10px;border:1px solid #738147}
.scene-receipt{background:#f0dcc4}.day-note{width:250px;position:absolute;left:50%;top:14px;margin-left:-125px;background:#fffdf1;box-shadow:3px 4px 0 #57473322;transform:rotate(2deg);padding:12px 20px}.day-note small{font-size:9px;color:#93917d}.day-note strong{display:block;font-size:29px;margin:4px 0 0;letter-spacing:-1px}.day-note p{font-size:10px;margin:6px 0;color:#888373}.approved{position:absolute;right:12px;top:20px;font-size:17px;color:#df7753;border:2px solid #df7753;padding:7px;transform:rotate(-13deg);font-weight:850}.notebook-lines{height:27px;background:repeating-linear-gradient(180deg,transparent 0 12px,#d9decf 12px 13px)}
.scene-steps{background:#d8e6e5}.steps-top{display:flex;justify-content:space-between;padding:12px 15px;font-size:10px;color:#667f7e}.step-ring{width:110px;height:110px;position:absolute;left:50%;top:24px;margin-left:-55px;border:8px solid #bad0cc;border-top-color:#eb9970;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:5px;transform:rotate(-10deg)}.step-ring strong{font-size:48px;line-height:1;letter-spacing:-3px}.step-ring small{font-size:11px;margin-top:27px}.steps-roast{position:absolute;bottom:11px;left:50%;transform:translateX(-50%) rotate(2deg);white-space:nowrap;background:#fffcef;border:1px solid #708680;padding:6px 12px;font-size:12px;font-weight:750}
.scene-group{background:#e7e7d5}.unread{background:#ed7955;color:white;font-size:11px!important;border-radius:20px;padding:2px 5px}.group-stack{position:relative;height:86px;margin:8px 14px}.group-stack span{position:absolute;font-size:12px;background:white;border-radius:8px;padding:7px 10px;box-shadow:2px 2px 0 #252b2209}.group-stack span:nth-child(1){left:0;top:0;transform:rotate(-4deg)}.group-stack span:nth-child(2){right:14px;top:5px;transform:rotate(4deg);background:#cbdc8c}.group-stack span:nth-child(3){left:70px;top:40px;transform:rotate(-2deg)}.group-stack span:nth-child(4){right:0;top:48px;transform:rotate(7deg)}.group-search{font-size:11px;border-radius:7px;margin:0 13px;padding:7px 11px;background:#fafbee;color:#808b70}
.scene-objects{background:#e4dce9}.scene-objects img{height:170px;position:absolute;left:50%;bottom:-12px;transform:translateX(-50%);mix-blend-mode:multiply}.object-bubble{position:absolute;font-size:11px;font-weight:750;background:#fffdf0;border:1px solid #484651;padding:8px;z-index:2}.ob-one{left:13px;top:17px;transform:rotate(-7deg)}.ob-two{right:9px;top:44px;transform:rotate(5deg)}.object-label{position:absolute;bottom:11px;left:14px;font-size:10px;background:#262a22;color:#fafae8;padding:5px 7px;transform:rotate(-3deg)}
.reply-prompt{font-size:14px;line-height:1.4;margin:20px 1px 12px;font-weight:800}.story-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.story-options .option{border:1.5px solid #bcc4af;background:#fffdf4;border-radius:13px;min-height:88px;padding:12px 13px 21px;position:relative;font-size:13px;line-height:1.6;align-items:flex-start;color:#3b4535;transition:background .15s,transform .15s,box-shadow .15s}.story-options .option.selected{background:#e7eeae;border-color:#2d3828;box-shadow:2px 3px 0 #2d3828;transform:translate(-1px,-1px)}.pick-tick{position:absolute;right:9px;bottom:3px;font-style:normal;font-size:12px;color:#a1ac8d}.selected .pick-tick{color:#263727;font-weight:900}.chat-options{grid-template-columns:1fr}.chat-options .option{min-height:44px;border-radius:12px 12px 2px 12px;padding:11px 30px 11px 14px}.chat-options .pick-tick{bottom:12px}.story-reaction{display:flex;align-items:center;gap:9px;min-height:45px;margin:12px 0 7px;font-size:11px;line-height:1.7;color:#979a86}.story-reaction.answered{color:#626e50}.reaction-face{display:grid;place-content:center;width:24px;height:24px;background:#e8ebda;border-radius:50%;font-size:11px;font-weight:800;flex-shrink:0}.answered .reaction-face{background:#efc7a1;color:#6c583d;transform:rotate(-8deg)}.story-actions{display:flex;gap:14px;align-items:center;margin:8px 0 0}.story-actions>.text-button{width:34px;font-size:24px;flex-shrink:0}.story-actions .primary{font-size:14px;min-height:47px;padding:9px 17px}
.result-hero{background:radial-gradient(ellipse at 50% 43%,#e8edaa,var(--paper) 75%);padding-top:24px}.result-hero h1{font-size:37px;transform:rotate(-2deg);margin:10px 0}.result-code{font-size:13px}.pill{border:1px solid #a3ad82;background:#edf0cf}.result-hero .animal{width:92%;margin:0 auto -3px}.golden{font-size:22px;line-height:1.5;border:2px solid #2b3628;background:#fffdf1;border-radius:16px;box-shadow:4px 4px 0 #d7dfab;padding:14px 15px;transform:rotate(-1deg)}.quote-mark{display:none}.tags{margin-top:19px}.tag{background:#e3e8c5;border-radius:4px}.paper-card{border:1.5px solid #d4dac2;box-shadow:3px 4px 0 #e8ebda}.paper-card.sketch{background:#fffdf3}.paper-card.sketch h2{font-size:21px;line-height:1.6}.paper-card.sketch p{font-size:14px;line-height:1.85}.result-actions .primary{background:#dce878;color:#253123;border:1.5px solid #263727}.gallery-card{border:1.5px solid #cdd6b5;box-shadow:2px 3px #e2e8ce}.gallery-card:nth-of-type(3n+1){transform:rotate(-1deg)}.gallery-card:nth-of-type(3n+2){transform:rotate(1deg)}
@keyframes turn-page{from{opacity:0;transform:translateX(9px)}to{opacity:1;transform:none}}@keyframes mascot-wobble{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-3deg)}93%{transform:rotate(3deg)}}@keyframes blink-dot{50%{opacity:.3}}
@media(min-width:950px){body{background:radial-gradient(circle at 12% 10%,#f6f4cf,transparent 50%),#e3e6bd}.desktop-note h2{font-size:47px}.desktop-note em{color:#ca704d}.desktop-note p{color:#73805a}.edition{color:#8a936c}.app{box-shadow:9px 10px 0 #b9c396,0 20px 60px #40562d1a;border:1.5px solid #b8c192}.wordmark{transform:rotate(-3deg);display:inline-block}}
@media(max-width:370px){header{height:60px;padding:13px 18px}.home28 h1{font-size:39px}.cast-stage{height:275px}.cast-main{width:232px;margin-left:-116px}.cast-side{width:122px}.cast-right{right:-22px}.cast-left{left:-22px}.club-label{padding:0 20px;font-size:9px}.s2{right:8px;font-size:10px}.story-page{padding:13px 17px 22px}.story-title{font-size:26px}.scene{height:161px}.story-options .option{font-size:12px;min-height:86px;padding-left:11px;padding-right:11px}.chat-options .option{min-height:43px;padding:10px 26px 10px 12px}.chat-line{margin-top:7px;margin-bottom:7px}.speech{font-size:12px;padding:8px 10px}.reply-prompt{margin-top:17px}.scene-photo .polaroid{height:144px;width:145px}.polaroid img{width:133px;height:106px}.shop-ticket{left:22px;width:188px}.ticket-note{right:10px;font-size:14px}.day-note{top:10px}.steps-roast{font-size:11px}.step-ring{width:96px;height:96px;top:23px;margin-left:-48px}.step-ring strong{font-size:42px}.group-stack{height:72px}.group-stack span{font-size:10px}.story-reaction{font-size:10px;min-height:43px}.photo-note{font-size:10px}.table-avatars img{width:60px;height:60px}.scene-table p{margin-top:16px}.ob-two{font-size:9px;right:6px}.result-hero h1{font-size:32px}.golden{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}