:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ink:#fffaf0;--muted:#fffaf0b8;--navy:#071023;--coral:#ff5f6d;--cyan:#26d9ff;--yellow:#ffe45f;--green:#43f7b3;--line:#ffffff2e;font-family:Hiragino Sans,Yu Gothic UI,Meiryo,system-ui,sans-serif}*{box-sizing:border-box}html,body{background:var(--navy);min-height:100%;margin:0;overflow-x:hidden}button{font:inherit}.stage{min-height:100svh;color:var(--ink);isolation:isolate;place-items:center;padding:22px 22px 58px;display:grid;position:relative;overflow-x:hidden}.heroImage{z-index:-3;background:linear-gradient(90deg,#071023d9 0%,#07102359 45%,#071023bd 100%),url(/images/summer-surprise.jpg) 50%/cover;transition:transform 1.1s;position:absolute;inset:0;transform:scale(1.08)}.stage.is-opened .heroImage{transform:scale(1)}.stage:before,.stage:after{z-index:-2;content:"";pointer-events:none;position:absolute;inset:-20%}.stage:before{filter:blur(8px);background:radial-gradient(circle at 15% 20%,#ffe45f61,#0000 22%),radial-gradient(circle at 84% 14%,#26d9ff57,#0000 24%),radial-gradient(circle at 72% 80%,#ff5f6d5c,#0000 26%);animation:10s linear infinite drift}.stage:after{opacity:.35;background-image:linear-gradient(#ffffff29 1px,#0000 1px),linear-gradient(90deg,#ffffff1f 1px,#0000 1px);background-size:42px 42px;-webkit-mask-image:linear-gradient(#0000,#000 20% 70%,#0000);mask-image:linear-gradient(#0000,#000 20% 70%,#0000)}.gate,.messageWrap{width:min(960px,100%)}.gate{text-align:center;justify-items:center;gap:22px;display:grid}.scanText{color:var(--muted);margin:0;font-size:15px;font-weight:800}.openButton{color:#071023;background:linear-gradient(135deg, var(--yellow), #fff 45%, var(--cyan));letter-spacing:0;cursor:pointer;border:2px solid #ffffff73;border-radius:8px;width:min(520px,88vw);min-height:132px;font-size:clamp(36px,11vw,82px);font-weight:1000;animation:1.7s ease-in-out infinite pulse;box-shadow:0 24px 90px #26d9ff59,inset 0 0 28px #ffffffc7}.tinyNote{color:var(--muted);margin:0;font-size:13px}.helpNote{color:#fffaf0db;margin:-8px 0 0;font-size:clamp(14px,4vw,17px);font-weight:900;line-height:1.65}.messageWrap{align-content:center;gap:14px;min-height:calc(100svh - 44px);animation:.88s cubic-bezier(.2,.8,.2,1) both reveal;display:grid}.ochanIcon{aspect-ratio:1;width:clamp(82px,18vw,132px);box-shadow:0 18px 54px #0000005c, 10px 10px 0 var(--cyan);object-fit:cover;background:#fff;border:4px solid #ffffffe6;border-radius:24px;animation:.76s both pop}h1{color:#fff;letter-spacing:0;text-shadow:0 5px #071023b3,0 0 34px #ff5f6db3,0 0 54px #26d9ff85;max-width:820px;margin:0;font-size:clamp(54px,13vw,112px);line-height:.94}h1 span{white-space:nowrap;display:block}.from{width:fit-content;color:var(--navy);box-shadow:10px 10px 0 var(--coral);background:#fff;border-radius:8px;margin:0;padding:8px 12px;font-size:clamp(23px,5.8vw,42px);font-weight:1000}.musicButton{color:#071023;background:var(--yellow);border:1px solid #ffffff6b;border-radius:8px;width:fit-content;min-height:42px;padding:8px 14px;font-size:15px;font-weight:1000;box-shadow:7px 7px #26d9ffb8}.trackButtons{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(420px,100%);display:grid}.trackButtons button{color:#fffaf0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#071023b8;border:1px solid #ffffff47;border-radius:8px;min-height:44px;padding:8px 10px;font-size:14px;font-weight:1000;box-shadow:0 10px 26px #0000003d}.countBurst{gap:8px;display:flex;position:absolute;top:24px;right:18px}.countBurst span{aspect-ratio:1;width:clamp(46px,12vw,76px);color:var(--navy);background:var(--yellow);border-radius:50%;place-items:center;font-size:clamp(24px,6vw,42px);font-weight:1000;animation:.98s both pop;display:grid;box-shadow:0 0 28px #ffe45fb3}.countBurst span:nth-child(2){background:var(--cyan);animation-delay:.13s}.countBurst span:nth-child(3){background:var(--coral);animation-delay:.26s}.slideDeck{width:min(520px,100%);min-height:152px;position:relative}.slide{border:1px solid var(--line);opacity:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#071023b8;border-radius:8px;align-content:center;gap:7px;padding:18px;transition:opacity .45s,transform .45s;display:grid;position:absolute;inset:0;transform:translateY(18px)rotate(-1deg);box-shadow:0 16px 50px #00000047}.slideTone1,.slideTone2,.slideTone3,.slideTone4{color:var(--navy);border-color:#ffffffb8}.slideTone1{background:#fffaf0f5;box-shadow:8px 8px #ff5f6dd9,0 16px 50px #00000047}.slideTone2{background:#e8ffebf5;box-shadow:8px 8px #43f7b3d1,0 16px 50px #00000047}.slideTone3{background:#e2f8fff5;box-shadow:8px 8px #26d9ffd1,0 16px 50px #00000047}.slideTone4{background:#f8eefff5;box-shadow:8px 8px #ffe45fe6,0 16px 50px #00000047}.slide.is-active{opacity:1;transform:translateY(0)rotate(0)}.slide span{aspect-ratio:1;width:32px;color:var(--navy);background:var(--yellow);border-radius:50%;place-items:center;font-weight:1000;display:grid}.slide strong{white-space:pre-line;color:inherit;font-size:clamp(22px,5vw,32px)}.slide p{color:#071023c7;white-space:pre-line;margin:0;font-size:15px;line-height:1.7}.imageSlide{grid-template-columns:minmax(96px,.56fr) minmax(0,1fr);align-content:center;align-items:center;column-gap:14px}.imageSlide span{grid-column:1/-1}.imageSlide img{object-fit:cover;background:#ffffff24;border-radius:8px;grid-row:2/4;width:100%;height:112px}.containImageSlide img{object-fit:contain;background:#fff}.imageSlide strong{align-self:center;line-height:1.18}.noTextSlide img,.noTextSlide strong{grid-row:2/4;align-self:center}.imageSlide p{font-weight:900;line-height:1.48}.slideTone1 span{background:var(--coral)}.slideTone2 span{background:var(--green)}.slideTone3 span{background:var(--cyan)}.slideTone4 span{background:var(--yellow)}.bookmarkSlide img{height:112px}.sparkLayer{z-index:-1;pointer-events:none;position:absolute;inset:0;overflow:hidden}.sparkLayer span{left:calc((var(--i) * 37) % 100 * 1%);top:calc((var(--i) * 23) % 100 * 1%);aspect-ratio:1;background:hsl(calc(var(--i) * 36), 95%, 66%);width:7px;animation:sparkle 3.4s calc(var(--i) * -.13s) ease-in-out infinite;border-radius:50%;position:absolute;box-shadow:0 0 18px}.creatorFooter{z-index:5;pointer-events:none;justify-content:center;display:flex;position:fixed;bottom:8px;left:10px;right:10px}.creatorFooter a,.creatorFooter span{color:#ffffffb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:auto;background:#0710237a;border:1px solid #ffffff29;border-radius:8px;max-width:100%;padding:7px 10px;font-size:12px;font-weight:800;text-decoration:none}.creatorFooter a{cursor:pointer;transition:background .18s,color .18s,transform .18s}.creatorFooter a:focus-visible,.creatorFooter a:hover{color:#071023;background:var(--yellow);transform:translateY(-1px)}.demoStage{min-height:100svh;color:var(--ink);isolation:isolate;background:linear-gradient(135deg,#071023db,#0710237a),url(/images/summer-surprise.jpg) 50%/cover;place-items:center;padding:22px;display:grid;position:relative;overflow:hidden}.demoStage:before{z-index:-1;content:"";filter:blur(10px);background:radial-gradient(circle at 18% 24%,#ffe45f7a,#0000 24%),radial-gradient(circle at 84% 18%,#26d9ff6b,#0000 26%),radial-gradient(circle at 70% 82%,#ff5f6d73,#0000 28%);position:absolute;inset:-20%}.demoCard{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#071023c7;border:2px solid #ffffff94;border-radius:8px;justify-items:center;gap:16px;width:min(560px,100%);padding:clamp(20px,6vw,38px);display:grid;box-shadow:12px 12px #ff5f6ddb,0 28px 80px #00000061}.demoBadge{color:var(--navy);background:var(--yellow);border-radius:999px;padding:7px 12px;font-size:14px;font-weight:1000}.demoCard img{aspect-ratio:1;object-fit:cover;width:clamp(98px,28vw,148px);box-shadow:10px 10px 0 var(--cyan);background:#fff;border:4px solid #ffffffeb;border-radius:28px}.demoCard h1{max-width:none;font-size:clamp(44px,13vw,88px);line-height:1.02}.demoLead{color:var(--navy);background:var(--green);border-radius:8px;margin:0;padding:10px 14px;font-size:clamp(24px,7vw,42px);font-weight:1000}.demoText{color:#fffaf0d1;margin:0;font-size:clamp(16px,4.4vw,22px);font-weight:900;line-height:1.7}@keyframes pulse{0%,to{transform:scale(1)rotate(-1deg)}50%{transform:scale(1.035)rotate(1deg)}}@keyframes reveal{0%{opacity:0;filter:blur(8px);transform:scale(.94)translateY(34px)}to{opacity:1;filter:blur();transform:scale(1)translateY(0)}}@keyframes pop{0%{opacity:0;transform:scale(0)rotate(-18deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes drift{to{transform:rotate(360deg)}}@keyframes sparkle{0%,to{opacity:.15;transform:translate(0,0)scale(.65)}50%{opacity:1;transform:translate(12px,-18px)scale(1.3)}}@media (max-width:640px){html,body{height:100%}.stage{align-items:center;height:100svh;padding:14px 14px 58px;overflow:hidden}.stage.is-opened{align-items:start}.messageWrap{gap:8px;min-height:auto;padding-top:64px}.countBurst{left:16px;right:auto}.slideDeck{width:100%;min-height:158px}.slide{padding:11px}h1{font-size:clamp(36px,10.2vw,48px);line-height:1.02}.from{padding:7px 10px;font-size:clamp(22px,6.4vw,30px)}.musicButton{min-height:36px;padding:6px 10px;font-size:13px}.trackButtons{width:100%}.trackButtons button{min-height:38px;font-size:12px}.imageSlide{grid-template-columns:minmax(96px,.58fr) minmax(0,1fr);column-gap:10px;min-height:158px;padding:11px}.imageSlide img{height:96px}.imageSlide strong{font-size:clamp(18px,5vw,23px)}.imageSlide p{font-size:clamp(12px,3.45vw,15px);line-height:1.42}.bookmarkSlide img{height:104px}.creatorFooter a,.creatorFooter span{font-size:11px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
