@font-face{font-family:'Noto Serif SC';src:url('assets/serif-sc.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Zpix;src:url('assets/zpix.woff2') format('woff2');font-display:swap}
:root{--paper:#faf9f4;--ink:#203e30;--green:#617f67;--line:#b2c0ad;--peach:#f2d8c9;--soft:#eef2e8;--serif:'Noto Serif SC','Songti SC',SimSun,serif}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-tap-highlight-color:transparent}body{margin:0;min-width:280px}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:5px}button{border:none;background:none}button:active:not(:disabled){transform:scale(.98)}
#app{min-height:100svh}.page{width:min(100%,520px);min-height:100svh;margin:auto;padding: max(30px,env(safe-area-inset-top)) 26px max(28px,env(safe-area-inset-bottom));position:relative;display:flex;flex-direction:column;animation:arrive .4s ease both}.page:before{content:'';position:absolute;inset:12px;border:1px solid var(--line);border-radius:8px;pointer-events:none;z-index:-1}.page-header{display:flex;align-items:center;gap:15px;font-size:13px;letter-spacing:.12em;margin:4px 5px 24px}.header-rule{height:1px;background:var(--line);flex:1}.header-count{font-size:11px;color:#7b897c}.pill{background:var(--green);color:#fffdf7;border-radius:50px;padding:15px 27px;min-height:52px;letter-spacing:.14em;transition:opacity .2s,background .2s,transform .15s;display:flex;justify-content:center;align-items:center;gap:25px}.pill:disabled{opacity:.35}.arrow{font-family:serif;font-size:24px;font-weight:400;line-height:1}.page-footer{margin-top:auto;padding:30px 8px 10px}.page-footer .pill{width:100%}.home{justify-content:center;text-align:center}.home-content{margin:auto 0;padding:70px 9px 35px}.home h1{font-size:clamp(32px,9vw,46px);font-weight:600;line-height:1.5;letter-spacing:.08em;margin:20px 0 30px}.home p{font-size:14px;line-height:2.25;color:#647062;margin:0 auto;max-width:350px}.tiny-rule{width:34px;height:1px;background:var(--line);margin:28px auto}.home .page-footer{margin:0 18px 35px}.identity{text-align:center}.identity h1{font-size:26px;font-weight:600;letter-spacing:.06em;margin:15svh 0 12svh}.identity-cards{display:grid;grid-template-columns:1fr 1fr;gap:13px}.identity-card{border:1px solid #bfc6bb;border-radius:15px;padding:34px 12px 25px;min-height:260px;display:flex;flex-direction:column;align-items:center;transition:background .25s,border .25s}.identity-card.selected{background:var(--soft);border-color:var(--green)}.identity-card strong{font-size:28px;font-weight:600;white-space:nowrap}.identity-card p{font-size:12px;line-height:1.9;min-height:70px;margin:22px 0}.radio{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--green);margin-top:auto;padding:3px}.selected .radio:after{content:'';display:block;width:100%;height:100%;background:var(--green);border-radius:50%}.identity .page-footer{padding-top:40px;padding-bottom:7svh}
.question{font-size:18px;font-weight:500;line-height:1.95;letter-spacing:.03em;text-align:center;margin:28px 4px 34px;min-height:80px;display:flex;justify-content:center;align-items:center}.question span{display:inline}.options{display:flex;flex-direction:column;gap:13px;position:relative}.option{position:relative;border:1px solid #bdc5b8;border-radius:13px;min-height:96px;padding:22px 19px;display:flex;align-items:center;gap:14px;text-align:left;background:var(--paper);transition:border-color .2s,background .2s,box-shadow .2s;user-select:none;-webkit-user-select:none}.option.selected{border-color:var(--green);background:var(--soft);box-shadow:inset 0 0 0 .5px var(--green)}.option-letter{font-size:20px;align-self:flex-start;line-height:1.8}.option-copy{font-size:14px;line-height:1.9;flex:1}.option.movable{touch-action:pan-x}.option.dragging{z-index:5;transition:none;box-shadow:0 8px 25px #263e3010}.merge-message{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper);z-index:10;font-size:23px;font-weight:700;letter-spacing:.19em;text-align:center;animation:arrive .5s}.options.merging>.option{opacity:0}.invalid{animation:deny .4s ease;border-color:#b85b59!important;box-shadow:0 0 0 1px #b85b5940!important}.mosaic{display:inline-block;width:1.15em;height:1.15em;vertical-align:middle;color:transparent;background:conic-gradient(#9b9b91 25%,#dddcd0 0 50%,#6d7166 0 75%,#bdbeb1 0) 0 0/8px 8px}.memo-link{color:#b86780;text-decoration:underline;text-underline-offset:4px;cursor:pointer}.willing-text{font-size:22px;font-weight:700;letter-spacing:.16em;text-align:center;display:block;width:100%;animation:arrive 1.1s both}.options.willing>.option:not(.selected){opacity:.22}.options.willing .selected{border-color:transparent;background:none;min-height:100px}.options.willing .selected .option-letter{display:none}.options.willing .selected .option-copy{width:100%}.flicker-word{animation:wordglitch .16s steps(2) infinite}.working{position:fixed;inset:0;background:#faf9f4ef;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;font-size:16px}.workbar{width:60%;max-width:300px;height:7px;border-radius:20px;background:#e2e4dc;overflow:hidden}.workbar:after{content:'';display:block;height:100%;background:var(--green);animation:working .65s ease forwards}
.crash{position:fixed;inset:0;background:#020302;z-index:200;color:#a8b0a9;overflow:hidden;font-family:monospace;pointer-events:auto}.crash-code{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-around;padding:12px 0;overflow:hidden}.code-line{white-space:nowrap;font-size:clamp(11px,2.7vw,16px);letter-spacing:.09em;opacity:.55;animation:codeflicker .48s steps(2) infinite;transform:translateX(-12px)}.code-line:nth-child(3n){color:#739579;animation-delay:-.17s}.code-line:nth-child(4n){opacity:.22;animation-delay:-.3s}.code-line b{color:#eee;font-weight:400}.crash-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(78%,360px);border:1px solid #bdc0ba;background:#090b0a;box-shadow:3px 4px #3338;font-family:var(--serif)}.crash-title{height:23px;background:#a8aaa6;color:#171917;font-family:monospace;font-size:12px;padding:3px 7px;display:flex;justify-content:space-between}.crash-dialog p{text-align:center;font-size:28px;letter-spacing:.15em;padding:25px 0;color:#eee;margin:0}.warning{text-align:center;color:#ddd;font-size:26px;margin-top:18px}.ball{position:fixed;left:0;top:0;width:37px;height:37px;z-index:30;padding:0;border-radius:50%;touch-action:manipulation;will-change:transform}.ball svg{width:100%;height:100%;fill:none;stroke:#636c61;stroke-width:1.3;opacity:.67}.new-option{animation:arrive .9s ease both}.tears-wrap{position:relative;flex:1;min-height:45px}.tears-wrap .option-copy{display:block;filter:blur(3.5px);opacity:.35}.scratch-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:2;cursor:grab;border-radius:8px}.tears-wrap.revealed .option-copy{filter:none;opacity:1;transition:filter .6s,opacity .6s}.tears-wrap.revealed canvas{pointer-events:none;opacity:0;transition:opacity .4s}
.people-area{position:relative;margin-top:60px;min-height:240px;overflow:hidden;touch-action:pan-y;margin-left:-13px;margin-right:-13px}.people-track{display:flex;width:200%;height:210px;will-change:transform;touch-action:pan-y;user-select:none}.people-group{width:50%;flex:none;display:flex;align-items:flex-end;justify-content:space-around;padding:0 4px}.person{padding:4px 0;position:relative;flex:1;min-width:0;color:#365b43;border-radius:10px;transition:color .2s,background .2s}.person svg{width:100%;height:auto;display:block;overflow:visible}.person.selected{background:#e9eedd;box-shadow:inset 0 0 0 1px #82977a}.person.self{color:#d8a18a;filter:drop-shadow(0 0 4px #ecbca0b0)}.people-group.hidden-group{padding:0 20px;gap:4px}.hidden-group .person{max-width:60px}.floor-hint{height:2px;width:17px;background:#262923;position:absolute;left:0;top:209px}.person .turn-head,.person .scratch-arm{opacity:0}.person.looking .front-head,.person.looking .rest-arm{opacity:0}.person.looking .turn-head,.person.looking .scratch-arm{opacity:1}.person.looking .scratch-arm{transform-origin:30px 53px;animation:headscratch .4s ease-in-out 3}.person.happy{animation:bouncehappy .6s ease 3}.heart{position:absolute;color:#d68a9a;left:50%;top:15%;font-family:serif;font-size:22px;pointer-events:none;animation:heartfloat 1.8s ease-out infinite}.heart:nth-of-type(2){animation-delay:.5s;margin-left:-18px}.heart:nth-of-type(3){animation-delay:1s;margin-left:14px}.toast-backdrop{position:fixed;inset:0;background:#20302535;z-index:150;display:grid;place-items:center;padding:30px}.toast-box{padding:29px 30px;background:var(--paper);border:1px solid var(--line);border-radius:10px;text-align:center;min-width:230px;box-shadow:0 12px 60px #20302518}.toast-box button{display:block;margin:25px auto 0;color:var(--green);font-size:13px;padding:8px 20px}
.memo-overlay{position:fixed;inset:0;background:#dfb5c9;z-index:120;overflow-y:auto;overscroll-behavior:contain;padding:14px 12px max(30px,env(safe-area-inset-bottom));font-family:Zpix,monospace;color:#683d48;image-rendering:pixelated;animation:arrive .35s}.memo-sheet{position:relative;margin:0 auto;width:min(100%,500px);background:radial-gradient(#fff9 1px,transparent 1px) 0 0/9px 9px,#f7d8df;border:3px solid #9d6479;box-shadow:4px 4px #b57c92;min-height:1100px;padding:0 22px 110px}.memo-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 -22px;padding:13px 13px;background:#eab0c8;border-bottom:3px solid #9d6479;font-size:17px}.memo-close{border:2px solid #8f536b;background:#fff1f0;font-family:monospace;font-size:24px;line-height:25px;min-width:32px;min-height:32px;padding:0;position:sticky;top:5px}.memo-decor{text-align:center;padding:24px 0 20px;font-size:26px;letter-spacing:9px;color:#be6482;white-space:nowrap}.memo-list{margin:0;padding:0;list-style:none;background:#fff8edb3}.memo-row{border-bottom:2px dotted #dfa4b8;font-size:13px;line-height:2.2;padding:10px 6px;position:relative;overflow-wrap:anywhere}.memo-number{margin-right:7px}.secret-slot{display:inline-block;width:60px;height:27px;vertical-align:middle;position:relative;line-height:27px}.secret-under{position:absolute;inset:0;letter-spacing:3px;font-size:15px}.secret-cover{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.eraser{position:absolute;width:69px;height:37px;right:22px;bottom:80px;background:linear-gradient(90deg,#fff0db 0 22%,#dd8aaf 22% 85%,#e6a8c0 85%);border:2px solid #9c5876;box-shadow:3px 3px #99566b55;transform:rotate(-13deg);cursor:grab;touch-action:none;z-index:5;display:flex;align-items:center;justify-content:center;font:10px Zpix,monospace;color:#fff}.eraser:active{cursor:grabbing}.memo-pencil{position:absolute;bottom:35px;left:30px;width:150px;height:14px;background:linear-gradient(#f0a6c1 50%,#bd719a 50%);border:2px solid #996477;transform:rotate(-7deg);pointer-events:none}.memo-pencil:after{content:'';position:absolute;left:-20px;top:-2px;border-right:20px solid #d2b284;border-top:7px solid transparent;border-bottom:7px solid transparent}.paperclip{position:absolute;right:26px;bottom:25px;width:20px;height:52px;border:3px solid #a86794;border-radius:12px;transform:rotate(25deg);pointer-events:none}.paperclip:after{content:'';position:absolute;inset:5px;border:2px solid #a86794;border-bottom:none;border-radius:6px}.strawberry{position:absolute;color:#c25f82;font-size:30px;pointer-events:none;bottom:50px;left:48%}
.result{justify-content:center;text-align:center;border:0}.result:before,.special-page:before{display:none}.result-content{margin:auto 0;padding:75px 10px 30px}.result-label{font-size:14px;font-weight:400;letter-spacing:.1em}.result-name{font-size:34px;font-weight:500;letter-spacing:.13em;margin:34px 0}.result-text{font-size:14px;line-height:2.3;text-align:left;margin:25px auto 0;max-width:360px}.result .page-footer{margin:0 35px 25px}.special-page{min-height:100svh;background:radial-gradient(ellipse at center,#f9f9f8 20%,#eceef0 100%);color:#111;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:35px;text-align:center;animation:arrive 1s both}.special-page .result-name{font-size:36px;margin:25px 0}.special-page .result-text{text-align:center;font-size:16px;margin-top:30px;letter-spacing:.1em}.special-page .result-label{font-size:13px}.cinema-line{font-size:clamp(18px,4.8vw,25px);line-height:2;letter-spacing:.1em;font-weight:400;max-width:600px;animation:cinemafade 4.4s both}.cinema-line.long{font-size:clamp(17px,4.4vw,23px)}.memory-screen{position:fixed;inset:0;background:#030303;z-index:50;color:#ececea;display:flex;align-items:center;justify-content:center;padding:35px;text-align:center}.memory-line{font-size:21px;letter-spacing:.08em;line-height:2}.replay-page{gap:35px}.replay-page button{font-size:17px;letter-spacing:.17em;border-bottom:1px solid #b5b7b5;padding:12px 20px}.fade-out{opacity:0;transition:opacity .5s}.fade-in{animation:arrive 1s both}
@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes deny{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}@keyframes working{from{width:0}to{width:68%}}@keyframes codeflicker{0%,100%{opacity:.5;transform:translateX(-12px)}25%{opacity:.15}50%{opacity:.8;transform:translateX(-8px)}75%{opacity:.3}}@keyframes wordglitch{0%{text-shadow:2px 0 #bdaab7;transform:translateX(1px)}100%{text-shadow:-2px 0 #a8beb3;transform:translateX(-1px)}}@keyframes headscratch{50%{transform:rotate(-6deg)}}@keyframes bouncehappy{50%{transform:translateY(-6px)}}@keyframes heartfloat{0%{opacity:0;transform:translate(0,0) scale(.5)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-60px) scale(1.2)}}@keyframes cinemafade{0%{opacity:0;transform:translateY(3px)}20%,78%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@media(min-width:600px){body{background:#eeeee7}.page{margin:20px auto;min-height:min(900px,calc(100svh - 40px));background:var(--paper);box-shadow:0 15px 65px #26392b0b}.special-page{min-height:100svh}.question{margin-top:35px}.identity h1{margin-top:110px;margin-bottom:95px}}
@media(max-width:360px){.page{padding-left:22px;padding-right:22px}.question{font-size:16px;margin-bottom:24px}.option{padding:17px 13px;gap:10px}.option-copy{font-size:13px}.identity-card{padding-left:8px;padding-right:8px}.identity-card strong{font-size:25px}.identity-card p{font-size:11px}.memo-sheet{padding-left:12px;padding-right:12px}.memo-title{margin-left:-12px;margin-right:-12px}.memo-row{font-size:12px}.person{padding:4px 0}}
.memo-sheet{background:#fff1e7 url('assets/memo-paper.png') center top/100% auto repeat-y;padding-left:10%;padding-right:10%}.memo-title{position:sticky;top:-14px;z-index:6;margin-left:-11%;margin-right:-11%;font-size:16px}.memo-decor{height:95px;font-size:0}.memo-list{background:#fff1e7}.memo-row{font-size:12px;line-height:2.2;padding:11px 3px}.memo-pencil{bottom:45px}.memo-overlay .memo-sheet{padding-bottom:135px}.memo-overlay .secret-under{font-size:12px;visibility:hidden}.memo-overlay .secret-slot.ready .secret-under{visibility:visible}.memo-overlay .eraser{right:4%;font-size:10px}.memo-overlay .memo-close{font-family:monospace}
.people-track{width:calc(200% + 70px);gap:70px}.people-group{width:calc((100% - 70px)/2);justify-content:center;padding:0;gap:0}.original-group .person{flex:0 0 11.8%}.people-group.hidden-group{padding:0;gap:0}.hidden-group .person{flex:0 0 13%;max-width:none}
@media(prefers-reduced-motion:reduce){.page,.new-option{animation-duration:.01s}.code-line{animation:none}.flicker-word{animation:none}.heart{animation-duration:3s}}