:root{color:#30433f;font-synthesis:none;--sky:#a0ecff;--leaf:#c9ffa0;--ink:#30433f;--muted:#71817d;--paper:#fffefb;--line:#dce9e3;background:#f8faf5;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Noto Sans CJK SC,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:#f6f9f4}button,textarea,select{font:inherit}button{cursor:pointer}.app{width:min(100%,680px);min-height:100dvh;padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);background:radial-gradient(circle at 12% 12%,#a0ecff59 0,#0000 32%),radial-gradient(circle at 92% 35%,#c9ffa059 0,#0000 31%),linear-gradient(160deg,#f6fbf7,#fbfaf4 72%);margin:auto;position:relative;overflow:hidden;box-shadow:0 0 70px #51736d16}.topbar{z-index:10;justify-content:space-between;align-items:center;height:62px;display:flex;position:relative}.brand,.menu-button,.text-back,.reader-back,.quiet-action{color:var(--ink);background:0 0;border:0}.brand{align-items:center;gap:9px;padding:6px 0;font-size:16px;display:flex}.brand-mark{background:linear-gradient(135deg,var(--sky),var(--leaf));color:#3e655d;border-radius:11px;place-items:center;width:30px;height:30px;font-family:Georgia,serif;font-size:18px;display:grid;box-shadow:0 4px 13px #69a59d23}.menu-button{border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;display:flex}.menu-button span{background:#55706a;border-radius:2px;width:20px;height:2px}.screen{height:calc(100dvh - 62px - env(safe-area-inset-top) - env(safe-area-inset-bottom));scrollbar-width:none;padding:8px 2px 18px;overflow:auto}.screen::-webkit-scrollbar{display:none}.mascot{aspect-ratio:1;filter:drop-shadow(0 14px 14px #98755220);background:url(/mascot/quokka-states-v1.png) 0 0/300% 100% no-repeat;width:min(46vw,178px)}.mascot-welcome{background-position:0 0}.mascot-working{background-position:50% 0}.mascot-heart{background-position:100% 0}.home-screen{flex-direction:column;justify-content:center;gap:12px;padding-bottom:20px;display:flex}.home-intro{text-align:center}.home-intro .mascot{margin:-12px auto -8px}.home-intro h1{letter-spacing:-.045em;color:#324a45;margin:0;font-size:clamp(28px,8vw,38px);line-height:1.15}.home-intro p{color:var(--muted);margin:9px 0 5px;font-size:14px}.composer{width:100%;max-width:520px;margin:0 auto}.upload-card{background:#ffffffc9;border:1.5px dashed #7ebfc1;border-radius:22px;align-items:center;gap:14px;min-height:86px;padding:14px 16px;display:flex;box-shadow:0 12px 30px #70928a12}.upload-card input{opacity:0;width:1px;height:1px;position:absolute}.upload-card>span:nth-child(2){flex-direction:column;gap:4px;display:flex}.upload-card strong{font-size:15px}.upload-card small{color:var(--muted);font-size:12px}.upload-icon{color:#4f8077;background:linear-gradient(145deg,#b8eff8,#d7f2b8);border-radius:17px;flex:none;place-items:center;width:48px;height:48px;font-size:28px;display:grid}.thumbs{gap:7px;margin-top:8px;display:flex;overflow:auto}.thumbs img{object-fit:cover;border-radius:12px;flex:none;width:54px;height:54px}.or{color:#8a9995;align-items:center;margin:11px 0 8px;font-size:11px;display:flex}.or:before,.or:after{content:"";background:#dbe7e1;flex:1;height:1px}.or span{padding:0 10px}textarea{resize:none;width:100%;max-height:120px;color:var(--ink);background:#fffefc;border:1px solid #d7e4de;border-radius:18px;outline:none;padding:13px 15px;line-height:1.55;display:block}textarea:focus{border-color:#84cbd0;box-shadow:0 0 0 3px #a0ecff40}.primary{color:#254a44;background:linear-gradient(100deg,#82cfd9,#acd990);border:0;border-radius:18px;width:100%;margin-top:11px;padding:15px;font-weight:750;box-shadow:0 10px 24px #79aaa036}.primary:disabled{opacity:.38;box-shadow:none}.primary.warm{background:linear-gradient(100deg,#f2d2b5,#d6e8ad)}.local-note{text-align:center;color:#8b9995;margin:8px 0 0;font-size:11px}.processing-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;display:flex}.processing-visual{position:relative}.processing-visual .mascot{animation:2.2s ease-in-out infinite bob}.working-shadow{background:#6d8c7e17;border-radius:50%;width:105px;height:13px;margin:-16px auto 15px;animation:2.2s ease-in-out infinite shadow;display:block}@keyframes bob{50%{transform:translateY(-6px)}}@keyframes shadow{50%{opacity:.65;transform:scale(.86)}}.eyebrow{color:#65958b;letter-spacing:.16em;margin:0;font-size:12px;font-weight:750}.processing-screen h1{letter-spacing:-.035em;margin:10px 0;font-size:27px;line-height:1.25}.progress-message{min-height:22px;color:var(--muted);margin:0 0 24px;font-size:14px}.steps{text-align:left;width:min(100%,340px);margin:0;padding:0;list-style:none}.steps li{color:#99a39f;align-items:center;gap:12px;padding:9px 0;display:flex}.steps i{background:#e8eeea;border-radius:50%;place-items:center;width:27px;height:27px;font-size:12px;font-style:normal;display:grid}.steps li.active{color:#3e615a}.steps li.active i{background:linear-gradient(135deg,var(--sky),var(--leaf));font-weight:750}.patience-note{color:#95a29e;margin-top:22px;font-size:11px}.text-back{color:#6d7e79;padding:9px 0;font-size:14px}.result-screen{flex-direction:column;align-items:stretch;display:flex}.result-hero{text-align:center}.result-hero .mascot{margin:-8px auto -12px}.result-pill{color:#4e7551;background:#e4f4da;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:750;display:inline-block}.warning .result-pill{color:#906348;background:#fae7d8}.result-hero h1{letter-spacing:-.045em;max-width:440px;margin:12px auto 10px;font-size:clamp(27px,8vw,37px);line-height:1.22}.result-hero>p{max-width:410px;color:var(--muted);margin:0 auto 18px;font-size:14px;line-height:1.65}.reason-details,.timings{color:#75827e;border-top:1px solid #dce5df;width:100%;max-width:480px;margin:0 auto 12px}.reason-details summary,.timings summary{width:max-content;margin:auto;padding:10px 4px;font-size:11px;list-style:none}.reason-details summary::-webkit-details-marker,.timings summary::-webkit-details-marker{display:none}.reason-details summary:after,.timings summary:after{content:"  ·";color:#b0bab6}.reason-details p{color:#5c6d68;background:#ffffffa6;border-radius:14px;margin:0 0 12px;padding:12px 15px;font-size:13px;line-height:1.65}.notice{color:#806f50;background:#fff8e7;border-radius:13px;width:100%;max-width:480px;margin:0 auto 12px;padding:10px 13px;font-size:12px}.result-screen>.primary,.result-screen>.quiet-action,.result-screen>.timings{max-width:480px}.quiet-action{color:#7f8d89;margin:10px auto 2px;padding:8px;font-size:13px}.timings{margin-top:12px}.timings div{background:#fff9;border-radius:14px;padding:10px 14px}.timings p{justify-content:space-between;gap:10px;margin:7px 0;font-size:12px;display:flex}.reader-screen{padding-top:0}.reader-heading{grid-template-columns:44px 1fr 44px;align-items:center;height:52px;display:grid}.reader-heading h1{text-align:center;margin:0;font-size:17px}.reader-back{text-align:left;padding:0;font-size:30px}.segment{background:#e8efea;border-radius:14px;grid-template-columns:1fr 1fr;margin:4px 0 14px;padding:4px;display:grid}.segment button{color:#71827d;background:0 0;border:0;border-radius:11px;padding:9px;font-size:13px}.segment button.on{color:#3b6d64;background:#fff;box-shadow:0 2px 8px #43534d14}.reading-wrap{max-width:560px;margin:auto}.ai-note{color:#71807c;margin:0 3px 8px;font-size:11px;line-height:1.45}.ai-note span{color:#9aa5a1}.reader-screen article{white-space:pre-wrap;background:var(--paper);color:#32423e;border-radius:22px;min-height:calc(100dvh - 190px);padding:21px;font-family:Songti SC,STSong,serif;font-size:17px;line-height:1.95;box-shadow:0 10px 30px #637c7412}.original-images img{border-radius:12px;width:100%;height:auto;margin-bottom:12px;display:block}.feedback{color:#657570;max-width:560px;margin:13px auto 0;padding:14px 2px;font-size:12px}.feedback>div{gap:8px;margin-top:9px;display:flex}.feedback button{color:#53726b;background:#fff;border:1px solid #d5e2dc;border-radius:11px;padding:8px 12px;font-size:12px}.drawer-layer{z-index:50;justify-content:center;display:flex;position:fixed;inset:0}.drawer-scrim{backdrop-filter:blur(3px);background:#2f443e52;border:0;position:absolute;inset:0}.drawer{width:min(90vw,390px);height:100dvh;padding:calc(18px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));background:#fafbf7;animation:.2s ease-out slide;position:absolute;top:0;right:max(50vw - 340px,0px);overflow:auto;box-shadow:-20px 0 50px #22352f20}@keyframes slide{0%{opacity:.5;transform:translate(30px)}}.drawer-head{justify-content:space-between;align-items:center;display:flex}.drawer-head h2{margin:4px 0;font-size:22px}.drawer-head button{color:#60726d;background:#edf2ed;border:0;border-radius:50%;width:35px;height:35px;font-size:23px}.drawer h3{color:#536762;margin:26px 0 9px;font-size:14px}.empty,.privacy{color:#7c8b87;font-size:13px;line-height:1.6}.history-row{background:#fff;border-bottom:1px solid #edf1ed;display:flex}.history-row:first-child{border-radius:15px 15px 0 0}.history-row:last-child{border-bottom:0;border-radius:0 0 15px 15px}.history-row button{text-align:left;color:#3f5953;background:0 0;border:0;padding:12px}.history-row button:first-child{flex:1}.history-row b,.history-row span,.history-row small{display:block}.history-row span,.history-row small{color:#84908d;margin-top:3px;font-size:11px}.danger{color:#ad665d;background:0 0;border:0;padding:10px 0}.setting-row{background:#fff;border-bottom:1px solid #edf1ed;justify-content:space-between;align-items:center;padding:14px;font-size:13px;display:flex}.setting-row:first-of-type{border-radius:15px 15px 0 0}.setting-row:last-of-type{border-radius:0 0 15px 15px}.setting-row select{color:#4e776e;background:0 0;border:0}.setting-row input{accent-color:#79b9a9;width:21px;height:21px}.privacy{background:#edf5ef;border-radius:13px;padding:12px}.app-reader{background:#f6f7f2}@media (height<=700px){.home-intro .mascot{width:118px}.home-intro h1{font-size:26px}.home-intro p{margin:6px 0}.home-screen{justify-content:flex-start}.upload-card{min-height:74px}.processing-screen .mascot,.result-hero .mascot{width:132px}.result-hero h1{font-size:25px}}@media (width>=700px){.app{box-shadow:0 0 80px #567b761c}}.brand-mark{background-image:url(/mascot/quokka-logo-warning-v1.png),linear-gradient(135deg,#a0ecff,#c9ffa0);background-position:0,50%;background-repeat:no-repeat;background-size:200% 100%,100% 100%;border-radius:11px}.mascot-warning{background-image:url(/mascot/quokka-logo-warning-v1.png);background-position:100%;background-size:200% 100%}.home-screen{justify-content:space-between;padding-top:clamp(4px,2.5vh,24px)}.home-intro{flex-direction:column;flex:1;justify-content:center;min-height:215px;display:flex}.home-intro .mascot{width:min(57vw,220px);margin:-12px auto -8px}.composer{flex:none;padding-bottom:clamp(4px,1.8vh,18px)}.upload-card.disabled{opacity:.46;pointer-events:none}.thumbs{padding:3px 2px 4px}.thumb{flex:none;position:relative}.thumbs .thumb img{display:block}.thumb button{color:#fff;background:#526b65;border:2px solid #fff;border-radius:50%;width:20px;height:20px;padding:0;font-size:14px;line-height:15px;position:absolute;top:-5px;right:-4px;box-shadow:0 2px 7px #243e3840}textarea:disabled{color:#88938f;opacity:.8;background:#eff3ef}.processing-screen h1{margin-bottom:10px}.steps{margin-bottom:6px}.result-screen{justify-content:space-between;padding-top:0;position:relative}.text-back{z-index:2;text-align:left;color:#647772;width:44px;height:44px;padding:0;font-size:31px;line-height:1;position:absolute;top:1px;left:0}.result-hero{flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:315px;padding-top:18px;display:flex}.result-hero .mascot{width:min(59vw,226px);margin:-12px auto -16px}.result-hero h1{margin:12px auto 6px}.result-actions{width:100%;max-width:480px;margin:0 auto}.secondary{color:#5e716c;background:#ffffff80;border:1px solid #cddbd4;border-radius:18px;width:100%;margin-top:9px;padding:14px;font-weight:650}.result-details{border-top:1px solid #dce5df;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:480px;margin:12px auto 0;display:grid;position:relative}.result-details>.reason-details,.result-details>.timings{border:0;width:100%;min-width:0;margin:0}.result-details summary{white-space:nowrap}.result-details details[open]{grid-column:1/-1}.result-details details[open] summary{margin:auto}.result-details .reason-details p,.result-details .timings div{z-index:5;background:#fffefb;border:1px solid #dce7e1;position:absolute;bottom:48px;left:2px;right:2px;box-shadow:0 10px 34px #344c4440}.result-details .timings div{border-radius:14px;padding:12px 15px}.result-details .timings p{margin:7px 0}.notice{flex:none}.result-screen.safe .result-actions{padding-bottom:57px}@media (height<=700px){.home-intro{min-height:150px}.home-intro .mascot{width:130px}.result-hero{min-height:245px}.result-hero .mascot{width:145px}.result-screen.safe .result-actions{padding-bottom:20px}}.brand-mark{background-position:0 100%,50%;background-size:250% 125%,100% 100%;overflow:hidden}.result-details{grid-template-columns:1fr 1fr;align-items:start;display:grid}.detail-panel{color:#75827e;min-width:0}.detail-panel>button{color:#75827e;white-space:nowrap;background:0 0;border:0;width:100%;padding:11px 2px;font-size:11px;display:block}.detail-panel>button:after{content:" ·";color:#b0bab6}.detail-panel.open{grid-column:1/-1}.detail-panel.open>button{width:max-content;margin:auto}.detail-panel>p,.detail-panel>div{color:#5c6d68;border:1px solid #dce7e1;border-radius:14px;margin:0 0 10px;padding:12px 15px;font-size:13px;line-height:1.65;box-shadow:none!important;background:#fffefb!important;position:static!important;bottom:auto!important;left:auto!important;right:auto!important}.detail-panel.timings p{justify-content:space-between;gap:10px;margin:7px 0;display:flex}.result-details:has(.detail-panel.open){grid-template-columns:1fr}.drawer h3{margin-bottom:10px}.danger{margin-top:10px;display:block}.reader-screen .feedback{display:none}.steps li{color:#99a39f}.steps li i{color:#8c9995;background:#e8eeea}.steps li.done{color:#61736e}.steps li.done i{color:#4f755b;background:#dceede;font-weight:750}.steps li.current{color:#355c54;font-weight:650}.steps li.current i{background:linear-gradient(135deg,var(--sky),var(--leaf));color:#355c54;font-weight:800;animation:1.3s ease-in-out infinite stepPulse;box-shadow:0 0 0 5px #a0ecff26}.steps li.upcoming{color:#a4ada9}@keyframes stepPulse{50%{box-shadow:0 0 0 8px #a0ecff0d}}.result-details{display:block}.detail-tabs{grid-template-columns:1fr 1fr;gap:14px;display:grid}.detail-tabs button{color:#75827e;white-space:nowrap;background:0 0;border:0;width:100%;padding:11px 2px;font-size:11px;display:block}.detail-tabs button:after{content:" ·";color:#b0bab6}.detail-tabs button.on{color:#3e6c63;font-weight:700}.detail-tabs button.on:after{content:" ×";color:#88a099}.detail-content{color:#5c6d68;background:#fffefb;border:1px solid #dce7e1;border-radius:14px;margin:0 0 10px;padding:12px 15px;font-size:13px;line-height:1.65}.detail-content>p{margin:0}.timing-content p{justify-content:space-between;gap:10px;margin:7px 0;display:flex}.result-details>.detail-panel{display:none}.brand-mark{background-image:url(/mascot/quokka-logo-user-v1.webp);background-position:50%;background-repeat:no-repeat;background-size:cover}