:root{--text:#665b60;--text-soft:#9a8e93;--text-strong:#271b21;--bg:#fffaf4;--surface:#fff;--border:#53424a1f;--accent:#de5b8c;--accent-strong:#a93f70;--teal:#1f9d97;--sun:#e4aa3c;--lilac:#8c79df;--shadow-soft:0 12px 30px #48323c17;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--heading:"Quicksand", var(--sans);color:var(--text);background-color:var(--bg);font:16px/1.5 var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:linear-gradient(#de5b8c0f 1px,#0000 1px),linear-gradient(90deg,#1f9d970d 1px,#0000 1px),linear-gradient(#fffaf4 0%,#fbfff8 58%,#f8f5ff 100%);background-size:28px 28px,28px 28px,auto}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{min-width:320px;min-height:100svh;margin:0}button,input{-webkit-tap-highlight-color:transparent}p,h1,h2{overflow-wrap:anywhere}#root{min-height:100svh}.app-shell{width:min(1240px,100% - 32px);margin:0 auto;padding:28px 0 116px}.app-header{background:linear-gradient(135deg,#ffffffd1,#fff6fa70),linear-gradient(115deg,#de5b8c29,#0000 45%),linear-gradient(295deg,#1f9d9729,#0000 45%);border-radius:8px;grid-template-columns:minmax(0,1fr) minmax(340px,430px);align-items:stretch;gap:36px;min-height:460px;margin-bottom:28px;padding:46px;display:grid;position:relative;overflow:hidden}.app-header:before{content:"";pointer-events:none;border:1px solid #ffffffbd;border-radius:8px;position:absolute;inset:18px}.hero-copy{z-index:1;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;display:flex;position:relative}.hero-nav{color:var(--text-strong);align-items:center;gap:10px;margin-bottom:44px;font-size:.88rem;font-weight:900;display:inline-flex}.brand-mark{color:#fff;background:linear-gradient(135deg, var(--accent), var(--teal));border-radius:8px;place-items:center;width:36px;height:36px;font-size:.8rem;display:inline-grid}.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin:0 0 8px;font-size:.78rem;font-weight:900}.app-header h1{color:var(--text-strong);font-family:var(--heading);max-width:870px;margin:0;font-size:clamp(3rem,7vw,6.4rem);line-height:.92}.header-copy{color:var(--text);max-width:620px;margin:22px 0 0;font-size:1.08rem}.hero-actions{flex-wrap:wrap;gap:10px;margin-top:28px;display:flex}.primary-action,.secondary-action{border-radius:8px;justify-content:center;align-items:center;min-height:46px;padding:0 18px;font-size:.94rem;font-weight:900;text-decoration:none;display:inline-flex}.primary-action{color:#fff;background:linear-gradient(135deg, var(--accent), var(--lilac));box-shadow:0 14px 28px #de5b8c3d}.secondary-action{color:var(--text-strong);background:#ffffffb8;border:1px solid #49384024}.primary-action:focus-visible,.secondary-action:focus-visible{outline-offset:2px;outline:3px solid #de5b8c4d}.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(520px,100%);margin-top:30px;display:grid}.hero-stats div{background:#ffffffa8;border:1px solid #4938401a;border-radius:8px;min-width:0;padding:13px}.hero-stats strong,.hero-stats span{display:block}.hero-stats strong{color:var(--text-strong);font-size:1.48rem;line-height:1}.hero-stats span{color:var(--text);margin-top:6px;font-size:.78rem;font-weight:800}.hero-visual{z-index:1;min-height:360px;position:relative}.hero-poster{background:#f8edf3;border:6px solid #ffffffb8;border-radius:8px;position:absolute;overflow:hidden;box-shadow:0 24px 46px #34262d33}.hero-poster img{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.hero-poster:before{content:"";border:1px solid #ffffff7a;border-radius:8px;position:absolute;inset:14px}.hero-poster:after{content:"";background:linear-gradient(#0000,#24181e57);height:48%;position:absolute;inset:auto 0 0}.hero-poster span{z-index:1;color:#fff;font-size:1rem;font-weight:900;position:absolute;bottom:14px;left:16px}.poster-main{aspect-ratio:2/3;width:210px;top:10px;right:72px;transform:rotate(4deg)}.poster-side{aspect-ratio:2/3;width:154px;top:72px;left:24px;transform:rotate(-7deg)}.poster-small{aspect-ratio:2/3;width:124px;bottom:26px;right:18px;transform:rotate(9deg)}.progress-card{background:#ffffffe6;border:1px solid #1f9d9733;border-radius:8px;min-width:142px;padding:16px;display:grid;position:absolute;bottom:12px;left:12px;box-shadow:0 18px 34px #48323c24}.progress-card span{color:var(--teal);font-size:2.55rem;font-weight:900;line-height:1}.progress-card small{color:var(--text);margin-top:4px;font-weight:800}.comic-grid{grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:18px;scroll-margin-top:24px;display:grid}.comic-card{border:1px solid var(--border);min-width:0;box-shadow:var(--shadow-soft);background:#fffffff0;border-radius:8px;flex-direction:column;transition:border-color .16s,box-shadow .16s,transform .16s;display:flex;overflow:hidden}.comic-card:hover{border-color:#de5b8c5c;transform:translateY(-2px);box-shadow:0 18px 38px #48323c21}.comic-cover{aspect-ratio:2/3;background:#f8edf3;justify-content:flex-start;align-items:end;width:100%;padding:14px;display:flex;position:relative;overflow:hidden}.comic-cover img{object-fit:cover;object-position:center;width:100%;height:100%;position:absolute;inset:0}.comic-cover:before{content:"";background:linear-gradient(135deg,#0000 0 42%,#ffffff38 42% 44%,#0000 44%),linear-gradient(#ffffff2e,#0000 48%);border:1px solid #ffffff8a;border-radius:8px;position:absolute;inset:12px}.comic-cover:after{content:"";background:linear-gradient(#0000,#261a203d);height:42%;position:absolute;inset:auto 0 0}.cover-index{z-index:1;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#261a2038;border:1px solid #ffffff85;border-radius:999px;align-items:center;min-height:34px;padding:0 10px;font-size:.88rem;font-weight:900;display:inline-flex;position:relative}.tone-sakura{background:linear-gradient(145deg,#ffffff47,#0000 42%),linear-gradient(135deg,#ff87ab,#9d7af0 72%,#70c8bf)}.tone-mint{background:linear-gradient(145deg,#ffffff52,#0000 46%),linear-gradient(135deg,#62d6bb,#f094b7 70%,#f2c56b)}.tone-lavender{background:linear-gradient(145deg,#ffffff4d,#0000 44%),linear-gradient(135deg,#a88cf2,#ef91bd 68%,#88d5c9)}.tone-peach{background:linear-gradient(145deg,#ffffff52,#0000 42%),linear-gradient(135deg,#ffad7a,#e77aa9 68%,#77c9da)}.tone-bluebell{background:linear-gradient(145deg,#ffffff4d,#0000 44%),linear-gradient(135deg,#79aee9,#d984cc 70%,#f0c363)}.tone-rose{background:linear-gradient(145deg,#ffffff4d,#0000 44%),linear-gradient(135deg,#ee668e,#f4ad66 68%,#7bd1b9)}.tone-violet{background:linear-gradient(145deg,#ffffff47,#0000 44%),linear-gradient(135deg,#7d68df,#e982b5 70%,#7cc9de)}.tone-butter{background:linear-gradient(145deg,#ffffff57,#0000 46%),linear-gradient(135deg,#eec459,#f18ba6 70%,#87d3bb)}.tone-leaf{background:linear-gradient(145deg,#ffffff4d,#0000 44%),linear-gradient(135deg,#70c978,#69c4d8 68%,#db91ce)}.comic-content{flex-direction:column;flex:1;gap:13px;padding:15px;display:flex}.comic-heading{align-content:start;gap:5px;min-height:78px;display:grid}.comic-group{color:#788581;margin:0;font-size:.78rem;font-weight:700}.comic-card h2{min-height:2.56em;color:var(--text-strong);font-family:var(--heading);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0;font-size:1.1rem;line-height:1.28;display:-webkit-box;overflow:hidden}.read-link{min-height:38px;color:var(--accent-strong);background:#fff4f7;border:1px solid #de5b8c3d;border-radius:8px;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-size:.88rem;font-weight:900;text-decoration:none;transition:background .16s,border-color .16s,transform .16s;display:inline-flex}.read-link:hover{border-color:var(--accent);background:#fff;transform:translateY(-1px)}.rating-panel{border-top:1px solid #49384014;gap:8px;margin-top:auto;padding-top:12px;display:grid}.rating-label{justify-content:space-between;align-items:center;gap:12px;display:flex}.rating-label span{color:var(--text);font-size:.84rem;font-weight:900}.rating-label strong{min-height:28px;color:var(--accent-strong);background:#ffe8ef;border-radius:999px;justify-content:center;align-items:center;padding:0 10px;font-size:.82rem;display:inline-flex}.rating-slider{width:100%;height:24px;accent-color:var(--accent);cursor:pointer;margin:0}.rating-slider.is-empty{opacity:.56}.rating-slider:focus-visible,.read-link:focus-visible,.submit-bar button:focus-visible,.thank-you-modal button:focus-visible{outline-offset:2px;outline:3px solid #de5b8c4d}.rating-scale{color:var(--text-soft);justify-content:space-between;font-size:.72rem;font-weight:800;display:flex}.submit-bar{z-index:10;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fffffff0;border:1px solid #4938401a;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;width:min(800px,100% - 32px);padding:14px 16px;display:flex;position:fixed;bottom:18px;left:50%;transform:translate(-50%);box-shadow:0 18px 42px #48323c29}.submit-bar div{gap:3px;min-width:0;display:grid}.submit-bar strong{color:var(--text-strong);font-size:.95rem}.submit-bar span{color:var(--text);font-size:.82rem}.submit-progress{background:#f0e8ea;border-radius:999px;width:min(300px,100%);height:6px;overflow:hidden}.submit-progress span{border-radius:inherit;background:linear-gradient(90deg, var(--teal), var(--accent));height:100%;transition:width .18s;display:block}.submit-bar button,.thank-you-modal button{color:#fff;min-height:44px;font:900 .95rem/1 var(--sans);white-space:nowrap;background:linear-gradient(135deg, var(--accent), var(--lilac));cursor:pointer;border:0;border-radius:8px;padding:0 18px;box-shadow:0 12px 22px #de5b8c3d}.submit-bar button:disabled{color:#9b8c91;box-shadow:none;cursor:not-allowed;background:#ebe2e5}.modal-backdrop{z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#2b222657;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.thank-you-modal{text-align:center;border:1px solid var(--border);background:#fff;border-radius:8px;width:min(430px,100%);padding:28px;box-shadow:0 24px 60px #2b222642}.modal-mark{color:#fff;background:linear-gradient(135deg, var(--accent), var(--teal));border-radius:50%;place-items:center;width:58px;height:58px;font-size:1.7rem;display:inline-grid}.thank-you-modal h2{color:var(--text-strong);font-family:var(--heading);margin:8px 0 12px;font-size:1.8rem;line-height:1.1}.thank-you-modal p:not(.eyebrow){color:var(--text);margin:0 0 22px}@media (width<=760px){.app-shell{width:min(100% - 24px,520px);padding-top:12px;padding-bottom:162px}.app-header{grid-template-columns:1fr;gap:18px;min-height:auto;margin-bottom:18px;padding:20px}.app-header:before{inset:10px}.hero-nav{margin-bottom:26px}.app-header h1{font-size:2.48rem}.header-copy{margin-top:14px;font-size:.96rem}.hero-actions{width:100%;margin-top:20px}.primary-action,.secondary-action{flex:150px}.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:18px}.hero-stats div{padding:10px}.hero-stats strong{font-size:1.18rem}.hero-stats span{font-size:.7rem}.hero-visual{min-height:190px}.poster-main{width:124px;top:0;right:72px}.poster-side{width:96px;top:32px;left:8px}.poster-small{width:78px;bottom:10px;right:6px}.progress-card{grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:7px;min-width:120px;padding:12px;bottom:0;left:auto;right:94px}.progress-card span{font-size:2.15rem}.comic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.comic-card{width:100%}.comic-content{gap:10px;padding:10px}.comic-heading{gap:4px;min-height:74px}.comic-group{font-size:.7rem}.comic-card h2{font-size:.92rem}.read-link{min-height:34px;padding:0 8px;font-size:.78rem}.rating-panel{gap:6px;padding-top:9px}.rating-label{flex-direction:column;align-items:flex-start;gap:5px}.rating-label span{font-size:.76rem}.rating-label strong{min-height:24px;padding:0 8px;font-size:.72rem}.submit-bar{flex-direction:column;align-items:stretch;bottom:12px}.submit-bar button{width:100%}}