:root{--paper:#fffdf8;--bg:#f2ead8;--ink:#191410;--red:#d11;--red-dark:#700;--yellow:#ffd23f;--blue:#7ec8e3;--green:#8fd694;--pink:#ff90b3;--orange:#ff9f5a;--purple:#c4a1ff;--border:3px solid var(--ink);--shadow:5px 5px 0 var(--ink);--shadow-lg:8px 8px 0 var(--ink);--radius:.5rem;--font:"Noto Sans JP", "Segoe UI", Arial, sans-serif;--max-width:60rem}*{box-sizing:border-box}html{font-family:var(--font);color:var(--ink);text-rendering:optimizelegibility}body{background:repeating-linear-gradient(0deg, #00000009 0, #00000009 1px, transparent 1px, transparent 4px), var(--bg);min-width:320px;min-height:100vh;margin:0}button,input,textarea{font:inherit;color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:-.5px;line-height:1.1}p{line-height:1.5}img{max-width:100%;display:block}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.site-header{max-width:var(--max-width);justify-content:space-between;align-items:center;gap:1rem;margin:0 auto;padding:1.2rem 1.5rem 0;display:flex}.logo{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--red);padding:.3rem .7rem;font-size:1.3rem;font-weight:900;text-decoration:none;transform:rotate(-2deg)}.nav{flex-wrap:wrap;gap:.6rem;display:flex}.page{max-width:var(--max-width);flex-direction:column;gap:2rem;margin:0 auto;padding:2rem 1.5rem 3rem;display:flex}.grid{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.5rem;display:grid}.grid-activities{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}.split{grid-template-columns:1fr auto;align-items:start;gap:1.5rem;display:grid}@media (width<=700px){.split{grid-template-columns:1fr}}.card{background:var(--paper);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;transition:transform .2s,box-shadow .2s;position:relative}.card:hover{box-shadow:var(--shadow-lg);transform:translate(-2px,-2px)}.card h2{margin-bottom:.6rem;font-size:1.2rem}.card-yellow{background:var(--yellow);transform:rotate(-1deg)}.card-blue{background:var(--blue);transform:rotate(.8deg)}.card-green{background:var(--green);transform:rotate(-.6deg)}.card-pink{background:var(--pink);transform:rotate(.5deg)}.card-orange{background:var(--orange);transform:rotate(-.8deg)}.card-purple{background:var(--purple);transform:rotate(1deg)}.card-yellow:hover,.card-blue:hover,.card-green:hover,.card-pink:hover,.card-orange:hover,.card-purple:hover{transform:rotate(0)translate(-2px,-2px)}.hero{text-align:center;padding:3rem 2rem;overflow:hidden}.hero:after{content:"";opacity:.25;pointer-events:none;background:repeating-linear-gradient(0deg,#0000000d 0 1px,#0000 2px);position:absolute;inset:0}.hero h1{text-transform:uppercase;text-shadow:4px 4px 0 var(--yellow);font-size:clamp(2.5rem,8vw,4.5rem);font-weight:900}.hero-sub{max-width:28rem;margin:1rem auto 0;font-size:1.1rem}.hero-actions{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.8rem;display:flex}.sticker{z-index:1;border:var(--border);border-radius:999px;padding:.4rem .7rem;font-weight:900;animation:2.5s ease-in-out infinite wobble;position:absolute;top:1rem;right:1rem;transform:rotate(12deg)}.sticker-pink{background:var(--pink);box-shadow:3px 3px 0 var(--ink)}.badge{border:2px solid var(--ink);background:var(--paper);border-radius:999px;margin-bottom:.75rem;padding:.25rem .55rem;font-size:.75rem;font-weight:900;display:inline-block}.badge-soon{background:var(--ink);color:var(--paper)}.badge-ready{background:var(--green)}.btn{background:var(--paper);border:var(--border);box-shadow:4px 4px 0 var(--ink);cursor:pointer;border-radius:.4rem;justify-content:center;align-items:center;gap:.4rem;padding:.6rem 1.2rem;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .1s,background-color .2s;display:inline-flex}.btn:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}.btn:disabled,.btn.is-disabled{opacity:.55;cursor:not-allowed;box-shadow:3px 3px 0 var(--ink);transform:none}.btn-sm{box-shadow:3px 3px 0 var(--ink);padding:.35rem .8rem}.btn-red{background:var(--red);color:var(--paper);text-shadow:1px 1px 0 var(--red-dark)}.btn-yellow{background:var(--yellow)}.btn-green{background:var(--green);color:var(--ink);text-shadow:none}.btn-wide{width:100%;margin-top:.5rem}.form-card{flex-direction:column;gap:1rem;display:flex}.field{flex-direction:column;gap:.3rem;font-weight:700;display:flex}.field input,.field textarea{background:var(--paper);border:var(--border);border-radius:.4rem;padding:.55rem .8rem;box-shadow:inset 3px 3px #00000014}.field input:focus,.field textarea:focus{box-shadow:inset 3px 3px 0 #00000014, 4px 4px 0 var(--ink);background:#fff8dc;outline:none}.checkbox{cursor:pointer;align-items:center;gap:.7rem;font-weight:600;display:flex}.checkbox input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.checkbox-box{background:var(--paper);border:var(--border);width:1.5rem;height:1.5rem;box-shadow:2px 2px 0 var(--ink);color:#0000;border-radius:.3rem;flex:none;place-items:center;transition:background-color .15s,color .15s;display:grid}.checkbox input:checked+.checkbox-box{background:var(--yellow);color:var(--ink)}.checkbox input:focus-visible+.checkbox-box{outline:3px solid var(--red);outline-offset:2px}.activity-card{flex-direction:column;gap:.75rem;min-height:12rem;display:flex}.activity-card .emoji{font-size:2rem;line-height:1}.activity-card p{flex:1}.activity-card .btn{align-self:flex-start;margin-top:auto}.section-title{margin-bottom:.25rem;font-size:1.6rem}.section-sub{opacity:.75;margin-bottom:.5rem}.radio-group{isolation:isolate;background:var(--paper);border:var(--border);border-radius:var(--radius);width:min(90vw,15rem);box-shadow:var(--shadow);flex-direction:column;gap:1rem;padding:1.5rem;transition:transform .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden}.radio-group:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.radio-title{margin-bottom:.2rem;font-size:1.1rem}.radio-group:before,.radio-group:after{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.radio-group:before{background:repeating-linear-gradient(0deg,#0000 0 2px,#00000008 2px 3px);animation:2s linear infinite scanline}.radio-group:after{opacity:.25;background:repeating-linear-gradient(0deg,#0000000d 0 1px,#0000 2px)}.radio{z-index:1;cursor:pointer;border-radius:.3rem;align-items:center;gap:.8rem;padding:.3rem;transition:background-color .2s,transform .2s;display:flex;position:relative}.radio:hover{background-color:#d111111a;transform:translate(2px)}.radio input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.radio-visual{background:#fdfaf4;border:2px solid #111;border-radius:50%;flex:none;justify-content:center;align-items:center;width:1.6rem;height:1.6rem;transition:transform .25s,background-color .2s;display:flex;box-shadow:inset -2px -2px #111,2px 2px #111}.radio:hover .radio-visual{transform:rotate(5deg)}.radio-dot{background:var(--red);width:60%;height:60%;box-shadow:inset 1px 1px 0 var(--red-dark), 2px 2px 0 #000;border-radius:50%;transition:transform .2s ease-out;transform:scale(0)}.radio input:checked+.radio-visual{border-color:var(--red);box-shadow:inset -2px -2px 0 var(--red), 2px 2px 0 #111;background:#ffe0e0}.radio input:checked+.radio-visual .radio-dot{animation:.4s ease-out bounce;transform:scale(1)}.radio input:focus-visible+.radio-visual{outline-offset:3px;outline:3px solid #2864dc}.radio-label{transition:color .2s,text-shadow .2s}.radio:hover .radio-label{color:var(--red);animation:.3s infinite alternate jitter}.radio input:checked~.radio-label{color:var(--red);text-shadow:1px 1px 0 var(--red-dark)}.marquee{border-top:var(--border);background:var(--ink);color:var(--paper);white-space:nowrap;padding:.6rem 0;font-weight:900;overflow:hidden}.marquee-track{will-change:transform;width:max-content;animation:24s linear infinite marquee;display:flex}.marquee-track span{flex:none;display:block}.activity-page{max-width:52rem}.activity-back{align-self:flex-start}.activity-shell,.activity-shell:hover{min-height:34rem;transform:none}.activity-heading{border-bottom:3px dashed var(--ink);align-items:center;gap:1rem;padding-bottom:1.25rem;display:flex}.activity-heading h1{margin-bottom:.35rem;font-size:clamp(1.8rem,5vw,2.8rem)}.activity-emoji{background:var(--paper);border:var(--border);width:4rem;height:4rem;box-shadow:3px 3px 0 var(--ink);border-radius:50%;flex:none;place-items:center;font-size:2.25rem;display:grid}.activity-root{min-height:22rem;padding-top:1.5rem}.activity-center{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;min-height:21rem;display:flex}.activity-prompt{font-size:1.25rem;font-weight:900}.activity-hint{opacity:.75;font-size:.9rem}.choice-grid{grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.8rem;width:100%;display:grid}.choice-btn{background:var(--paper);border:var(--border);border-radius:var(--radius);min-height:6rem;box-shadow:4px 4px 0 var(--ink);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:.75rem;font-weight:800;transition:transform .12s,box-shadow .12s;display:flex}.choice-btn span{font-size:2rem}.choice-btn:hover,.choice-btn.is-selected{box-shadow:6px 6px 0 var(--ink);background:var(--yellow);transform:translate(-2px,-2px)rotate(-1deg)}.choice-btn:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)}.choice-btn:focus-visible,.cookie-button:focus-visible,.color-swatch:focus-visible{outline:3px solid var(--red);outline-offset:3px}.result-note{background:var(--paper);border:2px dashed var(--ink);width:min(100%,34rem);min-height:4.5rem;padding:1rem;transform:rotate(-.5deg)}.cookie-button{appearance:none;cursor:pointer;filter:drop-shadow(5px 5px #19141059);background:0 0;border:0;padding:.25rem;font-size:7rem;line-height:1;transition:transform .2s}.cookie-button:hover{transform:rotate(5deg)scale(1.06)}.cookie-button.is-cracked{animation:.45s cookie-crack}.fortune-paper{background:var(--paper);border:2px solid var(--ink);width:min(100%,30rem);min-height:5rem;box-shadow:3px 3px 0 var(--ink);place-items:center;margin:0;padding:1.1rem 1.5rem;font-family:Georgia,serif;font-size:1.1rem;display:grid}.fortune-paper.is-revealed{animation:.4s both paper-reveal}.round-count{background:var(--ink);color:var(--paper);padding:.25rem .65rem;font-weight:900;transform:rotate(-2deg)}.versus-grid{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;width:min(100%,38rem);display:grid}.choice-large{min-height:10rem;font-size:1.1rem}.choice-large span{font-size:3rem}.versus{background:var(--red);width:3rem;height:3rem;color:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:50%;place-items:center;font-weight:900;display:grid;transform:rotate(-8deg)}.choice-summary:empty{display:none}.pick-list{flex-wrap:wrap;justify-content:center;gap:.4rem;margin:.8rem 0 1rem;display:flex}.pick-list span{background:var(--blue);border:2px solid var(--ink);border-radius:999px;padding:.25rem .55rem;font-weight:700}.breathing-circle{background:var(--paper);border:var(--border);width:12rem;height:12rem;box-shadow:6px 6px 0 var(--ink);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;transition:transform 4s ease-in-out,background-color .5s;display:flex}.breathing-circle.is-inhaling{background:var(--blue);transform:scale(1.25)}.breathing-circle.is-holding{background:var(--yellow);transform:scale(1.25)}.breathing-circle.is-exhaling{background:var(--green);transform:scale(.85)}.breathing-label{font-weight:900}.breathing-count{font-size:2.5rem}.doodle-tools{flex-wrap:wrap;align-items:center;gap:.65rem;margin-bottom:1rem;display:flex}.color-swatch{background:var(--swatch);border:2px solid var(--ink);width:2.4rem;height:2.4rem;box-shadow:2px 2px 0 var(--ink);cursor:pointer;border-radius:50%;padding:0}.color-swatch.is-selected{outline:3px solid var(--paper);box-shadow:0 0 0 5px var(--ink), 3px 3px 0 5px var(--ink)}.doodle-canvas{background:linear-gradient(#2864dc1f 1px, transparent 1px), var(--paper);border:var(--border);border-radius:var(--radius);cursor:crosshair;touch-action:none;background-size:100% 24px;width:100%;height:24rem;display:block;box-shadow:inset 4px 4px #00000014}.doodle-pad .activity-hint{text-align:center;margin-top:.75rem}.compliment-ticket{background:var(--paper);border:var(--border);width:min(100%,32rem);min-height:12rem;box-shadow:6px 6px 0 var(--ink);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:2rem;font-family:Georgia,serif;font-size:1.3rem;font-weight:700;display:flex;position:relative;transform:rotate(-1deg)}.compliment-ticket:before,.compliment-ticket:after{content:"";background:var(--purple);border:2px solid var(--ink);border-radius:50%;width:1.2rem;height:1.2rem;position:absolute;top:50%;transform:translateY(-50%)}.compliment-ticket:before{left:-.75rem}.compliment-ticket:after{right:-.75rem}.compliment-ticket.is-stamped{animation:.35s ticket-stamp}.compliment-emoji{font-size:3rem;line-height:1}@keyframes cookie-crack{25%{transform:rotate(-12deg)scale(1.1)}55%{transform:rotate(12deg)scale(.9)}to{transform:rotate(0)scale(1)}}@keyframes paper-reveal{0%{opacity:0;transform:scaleX(.15)rotate(3deg)}to{opacity:1;transform:scaleX(1)rotate(-.5deg)}}@keyframes ticket-stamp{0%{opacity:0;transform:rotate(-1deg)scale(1.35)}70%{opacity:1;transform:rotate(1deg)scale(.96)}to{transform:rotate(-1deg)scale(1)}}@media (width<=600px){.activity-shell{padding:1rem}.activity-heading{align-items:flex-start}.activity-emoji{width:3.25rem;height:3.25rem;font-size:1.75rem}.mood-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.versus-grid{grid-template-columns:1fr}.versus{margin:-.4rem auto}.choice-large{min-height:6.5rem}.doodle-canvas{height:20rem}}@keyframes wobble{0%,to{transform:rotate(12deg)scale(1)}50%{transform:rotate(6deg)scale(1.08)}}@keyframes bounce{0%{transform:scale(.3)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes jitter{0%{transform:rotate(-1deg)translate(-1px)}to{transform:rotate(1deg)translate(1px)}}@keyframes scanline{to{transform:translateY(-3px)}}@keyframes marquee{0%{transform:translate(0,0)}to{transform:translate(-50%)}}