:root{--ink:#10100e;--cream:#f8f4e8;--orange:#ff641d;--pink:#d7b5d8}*{box-sizing:border-box}html{background:#d7b5d8}body{color:var(--ink);background:var(--pink);margin:0;font-family:Songti SC,Noto Serif SC,serif}button,input{font:inherit}.app{background-color:#d7b5d8;background-image:radial-gradient(#0003 .6px,#0000 .8px);background-size:4px 4px;min-height:100vh;padding:16px 12px 42px}.grain{pointer-events:none;z-index:20;opacity:.15;mix-blend-mode:multiply;background-image:radial-gradient(#000 .5px,#0000 .7px),radial-gradient(#000 .4px,#0000 .7px);background-position:0 0,5px 7px;background-size:8px 9px,11px 13px;position:fixed;inset:0}.phone-page{width:min(100%,460px);margin:auto}header{letter-spacing:.12em;justify-content:space-between;align-items:center;height:54px;font:700 11px Arial,sans-serif;display:flex}header span:first-child{border:1px solid;border-radius:99px;padding:7px 10px}.black-frame{clip-path:polygon(2% 0,92% 1%,98% 0,100% 5%,99% 97%,95% 100%,3% 99%,0 95%,1% 4%);background:#121212;padding:14px;box-shadow:0 20px 34px #30253038}.paper{background:#faf9f2 radial-gradient(#0002 .5px,#0000 .7px) 0 0/5px 5px;padding:24px 20px;position:relative;overflow:hidden}.orange-sticker{background:var(--orange);color:#fff;clip-path:polygon(5% 0,95% 3%,100% 91%,88% 100%,2% 96%,0 8%);padding:7px 8px;font:900 12px/1.05 Kaiti SC,cursive;display:inline-block;transform:rotate(-5deg)}.eyebrow{letter-spacing:.16em;margin:14px 0 6px;font:800 9px Arial,sans-serif}.cover h1,.intro h2,.diagnosis h2,.question-card h2{letter-spacing:-.08em;font-family:Kaiti SC,STKaiti,cursive;font-weight:900}.cover h1{margin:9px 0 0;font-size:clamp(3.4rem,16vw,5.1rem);line-height:.82;transform:rotate(-2deg)}em{font-style:normal}.cover h1 em{color:var(--orange);text-shadow:2px 2px 0 var(--ink);font-size:1.13em;display:inline-block;transform:rotate(3deg)}.cover-animals{height:270px;margin:-8px -18px 0;position:relative}.animal{--animal-pos:0 0;--animal-color:#999;background-image:url(/animals.png);background-repeat:no-repeat;background-size:400% 200%;background-position:var(--animal-pos);filter:drop-shadow(5px 7px 0 color-mix(in srgb,var(--animal-color),transparent 74%));flex:none}.animal-sm{width:72px;height:72px}.animal-md{width:116px;height:116px}.animal-xl{width:250px;height:250px}.cover-animals .animal-xl{position:absolute;top:6px;right:13px;transform:rotate(7deg)scale(1.22,1.05)}.cover-animals .animal-md{position:absolute;bottom:20px;left:-18px;transform:rotate(-11deg)scale(.8,1.25)}.cover-animals .animal-sm{position:absolute;top:15px;left:82px;transform:rotate(8deg)scale(.75,1.35)}.cover-copy{clip-path:polygon(2% 0,100% 4%,97% 100%,0 96%);background:#e4d9c0;margin:-7px 0 20px;padding:14px;font-size:14px;font-weight:800;line-height:1.65}.code-card{background:#e6c4d8;border:2px solid;padding:16px}.code-card label{margin-bottom:10px;font-size:14px;font-weight:900;display:block}.code-card>div{grid-template-columns:1fr auto;gap:7px;display:grid}.code-card input{text-transform:uppercase;letter-spacing:.07em;background:#fff8e8;border:2px solid;width:100%;min-width:0;padding:13px 10px;font-family:Arial;font-weight:800}.code-card button,.primary,.share-card button{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--orange);cursor:pointer;border:2px solid;padding:12px 14px;font-weight:900}.code-card small,.intro small{opacity:.65;margin-top:10px;line-height:1.4;display:block}.legal{text-align:center;opacity:.6;margin:15px auto;font-size:10px}.intro .paper{padding-top:30px}.intro h2{margin:19px 0;font-size:3.8rem;line-height:.89}.intro h2 em{color:var(--orange);text-decoration:underline;text-decoration-thickness:6px}.quote{background:#e9ddc5;padding:15px;font-weight:800;line-height:1.7;transform:rotate(-1deg)}.animal-grid{grid-template-columns:repeat(2,1fr);gap:9px;margin:24px 0;display:grid}.animal-grid>div{background:#fff;border:2px solid;grid-template-rows:1fr 1fr;grid-template-columns:76px 1fr;align-items:end;min-height:84px;padding:5px;display:grid;position:relative;overflow:hidden}.animal-grid .animal{grid-row:1/3;align-self:center;width:72px;height:72px}.animal-grid>div:nth-child(odd) .animal{transform:scale(.82,1.18)rotate(-4deg)}.animal-grid>div:nth-child(2n) .animal{transform:scale(1.12,.88)rotate(5deg)}.animal-grid b{font:900 19px Kaiti SC,cursive}.animal-grid span{align-self:start;font-size:10px}.primary{width:100%;padding:16px}.intro small{text-align:center}.progress{background:#fff;border:2px solid;height:9px;margin:2px 0 16px}.progress i{background:var(--orange);height:100%;transition:width .2s;display:block}.question-card{border:11px solid var(--ink);clip-path:polygon(1% 0,97% 1%,100% 5%,99% 98%,3% 100%,0 96%);background:#f9f5e9;min-height:650px;padding:28px 18px 20px}.scene{background:var(--orange);color:#fff;padding:7px 11px;font-weight:900;display:inline-block;transform:rotate(-3deg)}.question-card h2{margin:24px 0 30px;font-size:2.7rem;line-height:1.02}.choices{gap:11px;display:grid}.choices button{text-align:left;cursor:pointer;background:#fff;border:2px solid;grid-template-columns:38px 1fr 16px;align-items:center;gap:10px;width:100%;min-height:78px;padding:10px;display:grid;box-shadow:4px 4px #0002}.choices button:active{transform:translate(3px,3px);box-shadow:1px 1px}.choices button>b{background:var(--ink);color:#fff;border-radius:50%;place-items:center;width:34px;height:34px;font-family:Arial;display:grid}.choices button span{font-weight:800;line-height:1.45}.choices button i{font-style:normal}.back{background:0 0;border:0;margin-top:20px;font-weight:800}.back:disabled{opacity:.25}.result{--accent:#ef6928}.result-frame{padding-bottom:14px}.diagnosis{min-height:760px}.diagnosed{margin:17px 0 0;font:900 2rem Kaiti SC,cursive}.diagnosis h2{z-index:2;margin:0;font-size:4.25rem;line-height:.78;position:relative;transform:rotate(-2deg)}.diagnosis h2 em{color:var(--accent);text-shadow:1px 1px var(--ink);font-size:.72em}.result-animal{height:300px;margin-top:-8px;position:relative}.result-animal .animal{position:absolute;top:4px;right:-8px;transform:scale(1.18,1.08)rotate(6deg)}.intensity{z-index:2;width:150px;position:absolute;bottom:36px;left:3px}.intensity small{font-weight:800}.intensity b{font:900 3.5rem Kaiti SC,cursive;display:block}.scene-note{writing-mode:vertical-rl;border-left:3px solid var(--accent);padding-left:5px;font-size:10px;position:absolute;top:390px;right:10px}.diagnosis blockquote{clip-path:polygon(4% 0,100% 5%,97% 100%,0 96%);background:#e9daba;margin:-8px 0 0;padding:17px 13px 14px 38px;font-size:17px;font-weight:900;line-height:1.55;position:relative}.diagnosis blockquote:before{content:"“";color:var(--orange);font:900 4rem Georgia;position:absolute;top:-8px;left:7px}.truth{font-size:13px;font-weight:700;line-height:1.75}.down{text-align:center;font-size:38px;line-height:.7}.chart{margin-top:14px;padding:22px 18px}.chart h3{margin:0 0 17px;font:900 24px Kaiti SC,cursive}.chart h3 span{float:right;text-decoration:underline;-webkit-text-decoration-color:var(--orange);text-decoration-color:var(--orange);text-decoration-thickness:5px}.bar{grid-template-columns:55px 1fr 20px;align-items:center;gap:7px;margin:9px 0;font-size:11px;font-weight:800;display:grid}.bar i{background:repeating-linear-gradient(90deg,#eee 0 24%,#bbb 25%);border:1px solid;height:11px}.bar i b{height:100%;display:block}.bar strong{font-family:Arial}.result-block,.share-card{clip-path:polygon(1% 0,98% 1%,100% 96%,95% 100%,2% 98%,0 4%);background:#f9f5e9;border:3px solid;margin:17px 0;padding:26px 22px;box-shadow:7px 8px #0002}.result-block>span{letter-spacing:.13em;font:800 10px Arial}.result-block h3,.share-card h3{margin:14px 0;font:900 2.15rem/1.03 Kaiti SC,cursive}.result-block p{font-weight:700;line-height:1.75}.trap{color:#fff7e8;box-shadow:7px 8px 0 var(--accent);background:#1b1b18}.lever{background:color-mix(in srgb,var(--accent),white 60%)}.formula{background:#fff;border:2px solid;padding:8px 10px;display:inline-block;transform:rotate(-2deg)}.actions{background:#e8c45d}.actions p{border-top:1px solid;grid-template-columns:48px 1fr;margin:0;padding:14px 0;display:grid}.actions p b{font-family:Arial;font-size:20px}.share-card{text-align:center;background:#f9f5e9}.share-card>p{letter-spacing:.15em;font-size:11px}.share-card blockquote{font-weight:900;line-height:1.6}.share-card button{width:100%;margin-top:9px}.share-card .ghost{color:var(--ink);box-shadow:none;background:0 0}.admin-shell{background:#d7b5d8 radial-gradient(#0003 .6px,#0000 .8px) 0 0/5px 5px;place-items:center;min-height:100vh;padding:20px;display:grid}.admin-card{background:#f8f4e8;border:12px solid;width:min(100%,520px);padding:36px;box-shadow:12px 12px #0003}.admin-card>p{letter-spacing:.2em;font:800 10px Arial}.admin-card h1{margin:8px 0 25px;font:900 3.6rem Kaiti SC,cursive}.admin-card label{gap:7px;margin:15px 0;font-weight:900;display:grid}.admin-card input{background:#fff;border:2px solid;padding:13px}.admin-card button{color:#fff;width:100%;box-shadow:5px 5px 0 var(--orange);background:#111;border:2px solid;padding:15px;font-weight:900}.admin-card small{margin-top:18px;line-height:1.6;display:block}@media (min-width:700px){.phone-page{width:min(100%,540px)}.black-frame{padding:17px}.paper{padding:31px}.cover h1{font-size:5.7rem}.cover-animals{height:330px}.animal-xl{width:300px;height:300px}.result-animal{height:350px}.question-card{padding:40px 32px}.question-card h2{font-size:3.3rem}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
