:root{--paper:#f6f3df;--ink:#294c36;--muted:#63745b;--orange:#ee9141;--line:#6b824442;--card:#fffcf0;--soft:#e8edcf;--deep:#34593d}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:ui-rounded,'Trebuchet MS',Arial,sans-serif;color:var(--ink);background:var(--paper);transition:background .5s,color .5s}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button{touch-action:manipulation}button:disabled{cursor:default}::selection{background:#f9bd74;color:#294c36}
.app{position:relative;isolation:isolate;height:100dvh;width:100%;overflow:hidden;padding:clamp(16px,3vw,44px);display:flex;flex-direction:column;background:radial-gradient(ellipse at 51% 49%,#dbe8b778,transparent 52%),linear-gradient(90deg,#8da95908 1px,transparent 1px),linear-gradient(#8da95908 1px,transparent 1px);background-size:auto,36px 36px,36px 36px}
.app:before{content:'';position:absolute;inset:12px;border:1px solid var(--line);border-radius:24px;pointer-events:none;z-index:-1}.app:after{content:'✦';position:absolute;right:-70px;top:22%;font-size:440px;line-height:1;color:#9bb35c0b;pointer-events:none;z-index:-1}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}header{height:40px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;letter-spacing:.03em}.brand-icon{color:var(--orange);font-size:28px}.header-note{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.tools{display:flex;gap:8px}.tool{width:40px;height:40px;border:1px solid var(--line);background:transparent;border-radius:50%;font-size:18px;transition:.2s}.tool:hover{background:var(--soft);transform:rotate(-8deg)}
main{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1.38fr 1fr;align-items:center;gap:16px;max-width:1550px;width:100%;margin:auto}
.intro{z-index:2;align-self:center;padding-bottom:30px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';width:25px;height:2px;background:var(--orange)}h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.065em;font-size:clamp(50px,6.3vw,98px);line-height:.96;margin:25px 0 20px}h1 span{display:block;color:var(--orange);font-style:italic;margin-left:22px}.japanese{font-size:14px;letter-spacing:.22em;margin-bottom:24px}.intro-copy{font-size:16px;line-height:1.8;max-width:255px;margin:0;color:var(--muted)}.tags{display:flex;gap:7px;margin-top:22px;flex-wrap:wrap}.tag{border:1px solid var(--line);padding:7px 12px;border-radius:30px;font-size:12px}.signature{margin-top:35px;font-family:Georgia,serif;font-style:italic;font-size:19px;transform:rotate(-5deg);display:inline-block}.signature span{color:var(--orange)}
.stage{height:100%;max-height:760px;position:relative;display:flex;align-items:center;justify-content:center;min-width:0;z-index:1}.halo{position:absolute;width:115%;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle,#d8e6af55 0 49%,transparent 50%);pointer-events:none;transform:rotate(-15deg)}.halo:before,.halo:after{content:'';position:absolute;border-radius:50%;inset:8%;border:1px dashed var(--line)}.halo:after{inset:-4%;border:1px solid #8da9591a}.rune{position:absolute;font-family:Georgia,serif;font-size:28px;color:var(--orange)}.rune.a{top:12%;left:6%;transform:rotate(-18deg)}.rune.b{right:-2%;top:32%;font-size:40px}.rune.c{left:7%;bottom:17%;font-size:22px}.char-button{height:90%;width:126%;max-height:660px;flex-shrink:0;border:0;background:none;padding:0;position:relative;filter:drop-shadow(0 18px 12px #44632c18);transition:filter .3s;animation:float 5s ease-in-out infinite}.char-button:hover{filter:drop-shadow(0 20px 15px #44632c30)}.character{width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.char-button:focus-visible{outline-offset:-22px;border-radius:42%}.char-button.bounce{animation:happy .55s ease}.stage-caption{position:absolute;bottom:9%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;letter-spacing:.08em;color:var(--muted);padding:8px 14px;border-radius:30px;background:var(--paper);border:1px solid var(--line)}.speech{position:absolute;top:8%;left:22%;border:1px solid var(--line);border-radius:18px 18px 18px 3px;background:var(--card);padding:13px 18px;max-width:230px;box-shadow:0 8px 0 #50753c06;font-size:14px;line-height:1.45;transform:rotate(-5deg);z-index:3;pointer-events:none}.speech strong{color:#b25d21}.orbit-label{position:absolute;right:-2%;bottom:18%;font-size:12px;letter-spacing:.2em;writing-mode:vertical-rl;color:var(--muted)}
.book{position:relative;z-index:4;max-width:360px;width:100%;justify-self:end;transform:rotate(2deg)}.book:before{content:'';position:absolute;inset:8px -7px -7px 9px;border:1px solid var(--line);border-radius:7px 24px 24px 7px;background:var(--soft);z-index:-1;transform:rotate(1deg)}.book-inner{background:var(--card);border:1px solid var(--line);border-radius:7px 24px 24px 7px;padding:27px 25px 18px;box-shadow:0 20px 55px #3550220a}.book-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;font-size:12px;letter-spacing:.15em;text-transform:uppercase}.stamp{color:var(--orange);font-size:25px;line-height:1}.tablist{display:flex;gap:5px;position:relative;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:10px}.tab{flex:1;font-size:14px;white-space:nowrap;border:0;border-radius:7px;padding:9px 3px;background:transparent;color:var(--muted)}.tab[aria-selected=true]{background:var(--deep);color:#fff9e8}.tab:hover:not([aria-selected=true]){background:var(--soft)}.panel{min-height:232px;animation:appear .3s ease}.panel[hidden]{display:none}h2{font-family:Georgia,serif;font-weight:400;font-size:28px;letter-spacing:-.025em;line-height:1.15;margin:0 0 18px}.details{margin:0;display:grid;gap:0}.details div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14px}.details dt{color:var(--muted)}.details dd{margin:0;text-align:right;font-weight:700}.panel p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 15px}.likes{display:grid;grid-template-columns:1fr 1fr;gap:9px}.like{padding:11px 7px;background:var(--soft);border-radius:9px;font-size:13px;display:flex;gap:6px;align-items:center}.secret{padding:13px;border-left:2px solid var(--orange);background:var(--soft);border-radius:0 8px 8px 0}.secret b{font-size:14px}.secret p{margin:6px 0 0;font-size:14px}.book-bottom{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:17px;font-size:12px;color:var(--muted)}.pages{letter-spacing:.13em}.tiny-star{color:var(--orange);font-size:16px}
footer{height:42px;font-size:12px;color:var(--muted)}.footer-left{letter-spacing:.08em}.foot-middle{display:flex;gap:7px;align-items:center}.foot-middle span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange)}.greet{border:1px solid var(--line);background:var(--card);padding:10px 17px;border-radius:22px;font-size:13px;transition:.2s}.greet:hover{background:var(--soft);transform:translateY(-2px)}.spark{position:fixed;pointer-events:none;z-index:20;color:var(--orange);font-size:22px;animation:spark .9s ease-out forwards}.night{--paper:#192e26;--ink:#e5edce;--muted:#b4c2a6;--line:#9cbf714a;--card:#243c2e;--soft:#344a32;--deep:#527344}.night .app{background:radial-gradient(ellipse at 51% 49%,#60774945,transparent 56%),linear-gradient(90deg,#b8cf8708 1px,transparent 1px),linear-gradient(#b8cf8708 1px,transparent 1px);background-size:auto,36px 36px,36px 36px}.night .speech strong{color:#ffb974}
@keyframes float{50%{transform:translateY(-12px) rotate(1deg)}}@keyframes happy{25%{transform:translateY(-20px) rotate(-4deg)}65%{transform:translateY(-8px) rotate(3deg)}}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes spark{to{transform:translate(var(--dx),-100px) rotate(90deg);opacity:0}}
@media(min-width:1400px){main{gap:35px}.book{max-width:390px}.book-inner{padding:32px}.panel{min-height:250px}}
@media(max-width:1000px) and (min-width:761px){main{grid-template-columns:.9fr 1.1fr 1fr;gap:8px}.book-inner{padding:20px 16px}.intro-copy{font-size:14px}.speech{left:0;max-width:180px}.book{transform:rotate(1deg)}h1{font-size:clamp(44px,6vw,65px)}.tag{padding:6px 9px}.header-note{display:none}.stage-caption{bottom:14%}.signature{font-size:16px}}
@media(max-width:760px) and (orientation:portrait){.app{padding:16px 22px 12px}.app:before{inset:8px;border-radius:18px}header{height:34px}.brand{font-size:13px;gap:7px}.brand-icon{font-size:23px}.header-note{display:none}.tool{height:33px;width:33px;font-size:16px}main{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(90px,1fr) auto;gap:0;padding-top:18px}.intro{padding:0;text-align:center}.eyebrow{font-size:10px;letter-spacing:.18em;justify-content:center}.eyebrow:before{width:16px}h1{font-size:clamp(32px,9.5vw,52px);line-height:1.1;margin:7px 0}h1 span{display:inline;margin-left:7px}.japanese{font-size:10px;letter-spacing:.15em;margin:0}.intro-copy,.tags,.signature{display:none}.stage{min-height:0;max-height:none;width:100%}.halo{width:min(78%,300px);max-height:94%}.char-button{height:112%;width:100%;max-width:390px;max-height:none}.speech{font-size:12px;top:12%;left:-4px;padding:9px 10px;max-width:130px;border-radius:13px 13px 3px 13px;transform:rotate(-6deg)}.stage-caption{left:auto;right:0;bottom:15%;font-size:10px;transform:rotate(5deg);padding:5px 8px}.orbit-label{display:none}.rune.a{left:12%;top:15%}.rune.b{right:11%;top:28%;font-size:28px}.rune.c{left:14%;bottom:17%}.book{max-width:480px;justify-self:center;transform:none;margin-bottom:5px}.book-inner{padding:15px 19px 12px;border-radius:9px 18px 18px 9px}.book:before{inset:5px -4px -5px 6px;border-radius:9px 18px 18px 9px}.book-top{display:none}.tablist{margin-bottom:12px;padding-bottom:8px}.tab{font-size:13px;padding:7px}.panel{min-height:125px}h2{font-size:23px;margin:0 0 8px}.details{grid-template-columns:1fr 1fr;column-gap:22px}.details div{font-size:12px;padding:9px 0;gap:5px}.panel p{font-size:13px;line-height:1.5;margin-bottom:9px}.likes{gap:6px}.like{font-size:12px;padding:7px 9px}.secret{padding:9px}.secret p{font-size:12px;margin:4px 0 0}.secret b{font-size:12px}.book-bottom{margin-top:9px;padding-top:9px;font-size:10px}.tiny-star{font-size:12px}footer{height:38px;padding-top:6px;font-size:10px}.foot-middle{display:none}.greet{font-size:11px;padding:7px 12px}}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){.app{padding:12px 20px 9px}main{padding-top:10px}h1{font-size:32px}.japanese{display:none}.book-inner{padding:10px 15px 8px}.tablist{margin-bottom:8px;padding-bottom:6px}.panel{min-height:113px}.details div{padding:8px 0}.book-bottom{padding-top:6px;margin-top:7px}.speech{top:4%;font-size:11px;max-width:112px}.stage-caption{bottom:4%}h2{font-size:21px}.like{padding:6px}.panel p{font-size:12px}.eyebrow{font-size:9px}footer{height:31px}.book{margin-bottom:3px}}
@media(orientation:landscape) and (max-height:600px){.app{padding:15px 24px}header{height:30px}.brand{font-size:12px}.header-note{display:none}.tool{width:30px;height:30px;font-size:15px}main{grid-template-columns:.85fr 1.05fr 1fr;gap:12px}.intro{padding-bottom:0}h1{font-size:clamp(36px,6vw,64px);margin:10px 0}.eyebrow{font-size:9px}.japanese{font-size:10px;margin-bottom:10px}.intro-copy{font-size:12px;line-height:1.5}.tags{margin-top:12px;gap:4px}.tag{font-size:10px;padding:5px 8px}.signature{display:none}.book-inner{padding:13px 16px 10px}.book-top{display:none}.tablist{padding-bottom:6px;margin-bottom:9px}.tab{font-size:12px;padding:6px 2px}h2{font-size:23px;margin-bottom:9px}.panel{min-height:150px}.details div{font-size:12px;padding:8px 0}.panel p{font-size:12px;line-height:1.4}.like{font-size:11px;padding:7px 5px}.secret{padding:9px}.secret b,.secret p{font-size:12px}.book-bottom{font-size:10px;margin-top:9px;padding-top:8px}.char-button{height:100%;width:124%}.speech{top:0;left:9%;font-size:11px;padding:8px 11px;max-width:170px}.stage-caption{bottom:1%;font-size:10px;padding:5px 8px}.orbit-label{display:none}footer{height:30px;font-size:10px}.greet{font-size:11px;padding:6px 12px}.foot-middle{display:none}}
@media(orientation:landscape) and (max-height:380px){.app{padding:10px 20px}header,footer{height:26px}.intro-copy,.tags{display:none}.panel{min-height:128px}.book-inner{padding:10px 12px 8px}.details div{padding:6px 0;font-size:11px}.tab{font-size:11px;padding:5px 0}.book-bottom{padding-top:6px;margin-top:6px}.panel h2{font-size:20px}.panel p{font-size:11px}.speech{font-size:10px;max-width:135px}.stage-caption{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Balon sapaan berada di sisi kanan wajah. */
.speech{left:auto;right:-1%;top:10%;max-width:180px;transform:rotate(4deg);border-radius:18px 18px 3px 18px}
@media(max-width:1000px) and (min-width:761px){.speech{left:auto;right:-2%;max-width:155px}}
@media(max-width:760px) and (orientation:portrait){.speech{left:auto;right:0;top:8%;max-width:126px;transform:rotate(4deg);border-radius:13px 13px 3px 13px}}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){.speech{left:auto;right:0;top:4%;max-width:112px}}
@media(orientation:landscape) and (max-height:600px){.speech{left:auto;right:0;top:4%;max-width:155px}}
/* Fokus tetap satu layar; ikon kartu memakai potret Kaira sendiri. */
html,body{overscroll-behavior:none}.app{max-height:100dvh}
.stamp{width:48px;height:48px;display:block;flex:none}.stamp img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 35%;border:2px solid var(--orange);background:var(--soft)}
.char-button{height:98%;width:137%;max-height:720px}
.speech{opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease,transform .22s ease}.speech.show{opacity:1;visibility:visible}
.like span{min-width:22px;text-align:center;color:var(--orange);font-size:18px;font-weight:800;line-height:1}
@media(max-width:760px) and (orientation:portrait){.char-button{height:118%;width:110%;max-width:440px;max-height:none}}
@media(orientation:landscape) and (max-height:600px){.char-button{height:106%;width:130%;max-height:none}}
@media(orientation:landscape) and (max-height:380px){.char-button{height:110%}}

/* Potret kecil dan tag tetap terlihat di layar ponsel. */
@media(max-width:760px) and (orientation:portrait){.tags{display:flex;justify-content:center;gap:5px;margin-top:7px}.tag{font-size:11px;padding:4px 9px}.book-top{display:flex;position:absolute;right:12px;top:-12px;z-index:5;margin:0}.book-top>span:first-child{display:none}.stamp{width:32px;height:32px}}
@media(orientation:landscape) and (max-height:600px){.book-top{display:flex;position:absolute;right:6px;top:-10px;z-index:5;margin:0}.book-top>span:first-child{display:none}.stamp{width:28px;height:28px}}
/* Identitas dua baris, ilustrasi lebih dominan, dan gestur berbeda tiap sapaan. */
header{height:48px}.header-note{display:flex!important;flex-direction:column;align-items:flex-start;gap:0;text-transform:none;line-height:1.3}.header-note span{font-size:10px;letter-spacing:.13em;font-weight:600}.header-note strong{font-size:14px;letter-spacing:.12em;color:var(--ink)}
.char-button{height:104%;width:144%;max-height:750px}

@keyframes wiggle{0%,100%{transform:translate(0,0) rotate(0)}24%{transform:translate(var(--wx1),var(--wy1)) rotate(var(--wr1))}52%{transform:translate(var(--wx2),var(--wy2)) rotate(var(--wr2))}78%{transform:translate(var(--wx3),var(--wy3)) rotate(var(--wr3))}}
@media(max-width:760px) and (orientation:portrait){header{height:44px}.header-note span{font-size:9px}.header-note strong{font-size:12px}.char-button{height:125%;width:116%;max-width:470px;max-height:none}}
@media(orientation:landscape) and (max-height:600px){header{height:36px}.header-note span{font-size:9px}.header-note strong{font-size:11px}.char-button{height:112%;width:137%;max-height:none}}
@media(orientation:landscape) and (max-height:380px){header{height:30px}.header-note span{font-size:8px}.header-note strong{font-size:10px}.char-button{height:114%}}
/* Perataan isi dan kartu ringkas di semua tinggi layar. */
main{margin:0 auto;align-items:center}.intro{padding-bottom:0}.book{align-self:center}
.book-inner{padding:20px 21px 14px}.book-top{margin-bottom:14px}.tablist{margin-bottom:14px;padding-bottom:8px}.panel{min-height:200px}h2{margin-bottom:12px}.details div{padding:9px 0}.book-bottom{margin-top:10px;padding-top:10px}
.char-button.wiggle .character{transform-origin:50% 58%;animation:gentleWiggle var(--wiggle-duration,1s) ease-in-out both}
@keyframes gentleWiggle{0%,100%{transform:translate(0,0) rotate(0)}24%{transform:translate(var(--wx1),var(--wy1)) rotate(var(--wr1))}52%{transform:translate(var(--wx2),var(--wy2)) rotate(var(--wr2))}78%{transform:translate(var(--wx3),var(--wy3)) rotate(var(--wr3))}}
.spark{font-size:15px;opacity:.62;animation:gentleSpark 1.25s ease-out forwards}@keyframes gentleSpark{to{transform:translate(var(--dx),-45px) rotate(30deg);opacity:0}}
@media(max-width:760px) and (orientation:portrait){main{grid-template-rows:auto minmax(110px,min(43dvh,410px)) auto;align-content:center;padding-top:0}.book-inner{padding:12px 16px 10px}.tablist{margin-bottom:8px;padding-bottom:6px}.panel{min-height:112px}h2{margin-bottom:8px}.details div{padding:7px 0}.book-bottom{margin-top:7px;padding-top:7px}}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){main{grid-template-rows:auto minmax(80px,1fr) auto;align-content:stretch}.book-inner{padding:9px 14px 7px}.panel{min-height:100px}.details div{padding:5px 0}}
@media(orientation:landscape) and (max-height:600px){.book-inner{padding:10px 13px 8px}.tablist{margin-bottom:6px;padding-bottom:5px}.panel{min-height:132px}.details div{padding:6px 0}.book-bottom{margin-top:6px;padding-top:6px}}
@media(orientation:landscape) and (max-height:380px){.panel{min-height:115px}.book-inner{padding:7px 11px 5px}.details div{padding:4px 0}}

/* Tinggi baris grid harus mengikuti ruang layar, bukan tinggi intrinsik gambar. */
@media(min-width:761px), (orientation:landscape){main{grid-template-rows:minmax(0,1fr);height:100%;min-height:0}.stage{height:100%;min-height:0}.char-button{max-height:100%}}

/* Jarak aman dari bingkai dan kartu lebih ringkas. */
.app{padding:clamp(28px,4.6vw,64px)}.app:before{inset:10px}.book{width:94%;max-width:340px}.book-inner{padding:18px 19px 13px}.book-top{margin-bottom:10px}.stamp{width:40px;height:40px}.tablist{margin-bottom:10px;padding-bottom:6px}.panel{min-height:174px}h2{font-size:24px;margin-bottom:10px}.details div{padding:8px 0}.book-bottom{margin-top:8px;padding-top:8px}
.language-picker{display:flex;align-items:center}.language-picker select{appearance:none;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:8px 28px 8px 12px;font:700 12px ui-rounded,'Trebuchet MS',Arial,sans-serif;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.language-picker select:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1000px) and (min-width:761px){.app{padding:clamp(30px,4vw,43px)}.book{width:94%;max-width:320px}.book-inner{padding:15px 17px 11px}.panel{min-height:164px}h2{font-size:22px}.details div{padding:7px 0}}
@media(max-width:760px) and (orientation:portrait){.app{padding:20px 27px 18px}.book{width:100%;max-width:430px}.book-inner{padding:12px 17px 10px}.panel{min-height:105px}.stamp{width:32px;height:32px}h2{font-size:21px}.details div{padding:6px 0}.language-picker select{width:80px;padding:6px 18px 6px 7px;font-size:10px;background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px,4px 4px}}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){.app{padding:15px 24px 12px}.book-inner{padding:9px 14px 7px}.panel{min-height:88px}.details div{padding:5px 0}}
@media(orientation:landscape) and (max-height:600px){.app{padding:18px 31px}.book{width:94%}.book-inner{padding:10px 15px 8px}.panel{min-height:120px}h2{font-size:21px}.details div{padding:5px 0}.language-picker select{padding:5px 24px 5px 10px;font-size:11px}}
@media(orientation:landscape) and (max-height:380px){.app{padding:12px 25px}.book-inner{padding:7px 12px 5px}.panel{min-height:105px}.details div{padding:4px 0}}

/* Pose berubah segera dan kembali ke pose melayang. */
.char-button .character{transition:none}.char-button .character.normal{position:relative}.char-button .character.surprise{position:absolute;inset:0;opacity:0}.char-button.surprised .character.normal{opacity:0}.char-button.surprised .character.surprise{opacity:1}
.char-button.wiggle .character{animation:quickWiggle var(--wiggle-duration,.66s) ease-out both}
@keyframes quickWiggle{0%{transform:translate(var(--wx1),var(--wy1)) rotate(var(--wr1))}36%{transform:translate(var(--wx2),var(--wy2)) rotate(var(--wr2))}68%{transform:translate(var(--wx3),var(--wy3)) rotate(var(--wr3))}100%{transform:translate(0,0) rotate(0)}}
/* Balon berada di kanan Kaira; ujungnya menunjuk ke kiri. */
.speech{border-radius:17px;opacity:0;visibility:hidden;transform:translateY(8px) scale(.95) rotate(4deg);transform-origin:12% 60%;transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s}
.speech.show{opacity:1;visibility:visible;transform:translateY(0) scale(1) rotate(4deg);transition:opacity .2s ease,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s}
.speech::before{content:none}
.speech::after{content:"";position:absolute;width:12px;height:12px;left:-7px;top:58%;background:var(--card);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateY(-50%) rotate(45deg);pointer-events:none}
@media(prefers-reduced-motion:reduce){.speech,.speech.show{transform:rotate(4deg);transition:none}}

/* Informasi mengalir sebagai tipografi, tanpa bingkai kartu. */
.notes{z-index:2;justify-self:end;align-self:center;width:min(100%,310px);padding:0 14px 0 8px;color:var(--ink)}
.notes-overline{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--orange);margin-bottom:16px}
.notes-overline span:first-child{font-family:Georgia,serif;font-size:18px;line-height:1}
.notes-facts{border-top:1px solid var(--line)}
.notes-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:baseline;gap:9px;border-bottom:1px solid var(--line);padding:11px 0;font-size:14px}
.notes-number{font-family:Georgia,serif;font-style:italic;color:var(--orange);font-size:12px}
.notes-row strong{font-weight:650;text-align:right;white-space:nowrap}
.notes-story{font-family:Georgia,serif;font-style:italic;font-size:clamp(16px,1.5vw,20px);line-height:1.35;margin:19px 0 14px;max-width:300px}
.notes-likes{display:flex;flex-wrap:wrap;gap:7px;color:var(--muted);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.notes-likes span:not(:last-child)::after{content:' ·';color:var(--orange);margin-left:7px}
@media(max-width:760px) and (orientation:portrait){.notes{justify-self:center;width:min(100%,420px);padding:0 8px 0;margin:4px auto 6px}.notes-overline{margin-bottom:7px;font-size:9px}.notes-facts{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}.notes-row{grid-template-columns:18px 1fr;gap:3px;padding:5px 0;font-size:11px}.notes-row strong{grid-column:2;text-align:left;font-size:12px}.notes-number{grid-row:span 2;font-size:10px}.notes-story{font-size:13px;line-height:1.3;margin:8px 0 5px;max-width:none}.notes-likes{font-size:9px;gap:3px}}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){.notes{margin:0 auto}.notes-overline{display:none}.notes-row{padding:3px 0;font-size:10px}.notes-row strong{font-size:11px}.notes-story{font-size:12px;margin:5px 0 3px}}
@media(orientation:landscape) and (max-height:600px){.notes{width:min(100%,260px);padding:0 4px}.notes-overline{font-size:9px;margin-bottom:7px}.notes-row{padding:5px 0;font-size:11px;grid-template-columns:22px minmax(0,1fr) auto;gap:5px}.notes-number{font-size:10px}.notes-story{font-size:13px;line-height:1.3;margin:8px 0 6px}.notes-likes{font-size:9px;gap:2px}}
@media(orientation:landscape) and (max-height:380px){.notes-overline{display:none}.notes-row{padding:3px 0}.notes-story{font-size:11px;margin:4px 0}.notes-likes{font-size:8px}}

/* Baris informasi dibaca dari kiri ke kanan, lalu turun berurutan. */
.notes{justify-self:end;text-align:left}
.notes-facts{display:block}
.notes-row{display:flex;justify-content:flex-start;align-items:baseline;gap:8px;text-align:left;padding:9px 0;white-space:nowrap}
.notes-row .notes-number{flex:none;min-width:22px}
.notes-row > span[data-i18n]::after{content:' ·';color:var(--orange)}
.notes-row strong{font-weight:650;text-align:left;white-space:normal}
.notes-story,.notes-likes{text-align:left}
@media(max-width:760px) and (orientation:portrait){.notes{justify-self:center}.notes-facts{display:block}.notes-row{display:flex;gap:5px;padding:4px 0;font-size:11px}.notes-row .notes-number{min-width:17px;font-size:10px}.notes-row strong{font-size:11px}.notes-story{margin:7px 0 4px}}
@media(orientation:landscape) and (max-height:600px){.notes-row{display:flex;gap:5px;padding:4px 0;font-size:11px}.notes-row .notes-number{min-width:18px}}
@media(orientation:landscape) and (max-height:380px){.notes-row{padding:2px 0}}

.greet{font:700 12px ui-rounded,'Trebuchet MS',Arial,sans-serif;padding:8px 12px;line-height:normal}
@media(max-width:760px) and (orientation:portrait){.greet{font-size:10px;padding:6px 9px}}
@media(orientation:landscape) and (max-height:600px){.greet{font-size:11px;padding:5px 10px}}

.socials{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}
.social-link{border:1px solid var(--line);border-radius:30px;padding:7px 12px;background:var(--card);color:var(--ink);font-size:12px;font-weight:700;text-decoration:none;transition:background .15s ease,transform .15s ease}
.social-link:hover{background:var(--soft);transform:translateY(-2px)}.social-link:focus-visible,.legal-links button:focus-visible,.legal-close:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.legal-links{display:flex;align-items:center;gap:8px}.legal-links button{border:0;background:none;color:var(--muted);padding:5px 0;font:700 11px ui-rounded,'Trebuchet MS',Arial,sans-serif;cursor:pointer}.legal-links button:hover{color:var(--ink);text-decoration:underline}
.legal-dialog{position:fixed;max-width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--ink);box-shadow:0 22px 70px #0007;padding:24px 27px 25px}.legal-dialog::backdrop{background:#08130fc2;backdrop-filter:blur(3px)}.legal-dialog h2{font-family:Georgia,serif;font-size:24px;line-height:1.1;margin:0 28px 12px 0}.legal-dialog p{font-size:14px;line-height:1.55;margin:0;color:var(--muted)}.legal-close{position:absolute;right:15px;top:10px;border:0;background:none;color:var(--ink);font-size:25px;cursor:pointer}
@media(max-width:760px) and (orientation:portrait){.intro .socials{display:flex;justify-content:center;margin-top:8px;gap:5px}.social-link{font-size:10px;padding:5px 9px}.legal-links{gap:4px}.legal-links button{font-size:9px}.legal-dialog{padding:20px}.legal-dialog h2{font-size:20px}.legal-dialog p{font-size:12px}}
@media(orientation:landscape) and (max-height:600px){.socials{margin-top:10px;gap:4px}.social-link{font-size:10px;padding:5px 8px}.legal-links button{font-size:9px}.legal-dialog{padding:16px 20px}.legal-dialog h2{font-size:20px}.legal-dialog p{font-size:12px}}

/* Bingkai lebih lega, karakter sedikit lebih besar, kedua sisi seimbang. */
.app{padding:clamp(22px,3.6vw,50px)}
.char-button{height:110%;width:150%;max-height:none}
.notes{width:100%;max-width:none;padding:0;justify-self:stretch}
@media(max-width:1000px) and (min-width:761px){.app{padding:clamp(23px,3.2vw,36px)}}
@media(max-width:760px) and (orientation:portrait){.app{padding:16px 21px 14px}.char-button{height:128%;width:120%;max-width:490px;max-height:none}.notes{width:100%;max-width:none;padding:0 4px}}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){.app{padding:12px 19px 10px}.char-button{height:126%}}
@media(orientation:landscape) and (max-height:600px){.app{padding:14px 24px}.char-button{height:116%;width:143%;max-height:none}.notes{width:100%;padding:0}}
@media(orientation:landscape) and (max-height:380px){.app{padding:10px 19px}.char-button{height:118%}}

/* Layar ponsel: tanpa bingkai, ruang antarseksi jelas, gambar tetap di barisnya. */
@media(max-width:760px) and (orientation:portrait){
  .app{padding:12px 14px 10px}
  .app:before{display:none}
  main{row-gap:7px;grid-template-rows:auto minmax(0,1fr) auto;min-height:0}
  .char-button{height:108%;width:108%;max-width:none}
  .notes{margin:0 auto;padding:0 3px}
  .notes-row{padding:4px 0}
  .notes-likes{margin-top:7px}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){
  .app{padding:9px 12px 7px}
  main{row-gap:5px}
  .char-button{height:100%;width:105%}
  .notes-row{padding:3px 0}
  .notes-likes{margin-top:5px}
}


/* Penyeimbang posisi saat viewport pendek. */
@media(orientation:landscape) and (max-height:700px){.intro{transform:translateY(-10px)}.notes{transform:translateY(10px)}}
@media(orientation:landscape) and (max-height:380px){.intro{transform:translateY(-5px)}.notes{transform:translateY(5px)}}

/* Pada lanskap sempit, pisahkan teks dari kepala dan ekor Kaira. */
@media(orientation:landscape) and (max-width:900px) and (min-height:500px) and (max-height:700px){.intro{transform:translateY(-45px)}.notes{transform:translateY(clamp(110px,24vh,135px))}}
@media(orientation:landscape) and (max-width:900px) and (max-height:499px){.intro{transform:translateY(-16px)}.notes{transform:translateY(38px)}}

/* Susunan dua elemen: teks dan karakter menjadi satu kelompok di tengah. */
main{max-width:1080px;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(18px,4.5vw,70px);align-items:center}
.intro{justify-self:end;align-self:center;width:min(100%,380px);transform:none}
.stage{justify-self:center;width:100%}
@media(max-width:1000px) and (min-width:761px){main{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(18px,3vw,35px)}}
@media(orientation:landscape) and (max-height:700px){.intro{transform:none}}
@media(max-width:760px) and (orientation:portrait){main{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);align-content:stretch;gap:6px}.intro{width:100%;justify-self:center}.stage{min-height:0;height:100%}}
@media(max-width:760px) and (orientation:landscape){main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:minmax(0,1fr);gap:clamp(14px,3vw,25px)}.intro{width:100%;justify-self:end}.char-button{height:100%;width:130%;max-height:none}}

/* Tombol footer harus berada di atas area gambar Kaira yang meluas keluar kolom. */
footer{position:relative;z-index:30}
.legal-links{position:relative;z-index:1}
.legal-links button{position:relative;cursor:pointer;touch-action:manipulation}
/* Area karakter juga meluas ke header; tempatkan kontrol di atasnya. */
header{position:relative;z-index:30}
.tools{position:relative;z-index:1}

/* Kanvas kosong untuk rencana berikutnya: Kaira tetap di pusat viewport. */
main{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0}
.stage{flex:none;width:min(100%,780px);height:100%;max-height:none;min-height:0;display:flex;align-items:center;justify-content:center}
.halo{width:min(82vw,82dvh,700px)}
.char-button{height:min(86dvh,760px);width:auto;aspect-ratio:2/3;max-width:100%;max-height:100%;flex:none}
@media(max-width:760px) and (orientation:portrait){main{display:flex;gap:0;padding:0}.stage{width:100%;height:100%}.char-button{height:min(84dvh,700px);width:auto;max-width:100%;max-height:100%}}
@media(orientation:landscape) and (max-height:600px){main{display:flex;gap:0;padding:0}.stage{width:min(100%,780px);height:100%}.char-button{height:min(90dvh,600px);width:auto;max-width:100%;max-height:100%}}

/* Tipografi poster: belakang, karakter, lalu huruf depan. */
.stage{isolation:isolate}
.halo,.rune{z-index:0}
.poster-back,.poster-front{position:absolute;writing-mode:vertical-rl;text-orientation:upright;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;font-weight:900;line-height:1;white-space:nowrap;pointer-events:none;user-select:none}
.poster-back{top:7%;right:17%;z-index:1;font-size:clamp(76px,15dvh,148px);letter-spacing:-.1em;color:#6a925a;opacity:.66}
.char-button{z-index:2}
.poster-front{left:16%;bottom:11%;z-index:3;font-size:clamp(64px,12dvh,118px);letter-spacing:-.08em;color:#e5f5bf;text-shadow:3px 5px 0 #254632,0 10px 22px #0d211a99}
.latin-name{position:absolute;right:5%;bottom:6%;z-index:4;max-width:52%;font:800 clamp(15px,2.6vw,28px)/1.1 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.13em;text-align:right;color:#fff2d4;text-shadow:0 3px 13px #0d211aba;pointer-events:none;white-space:nowrap}
.latin-name em{font-style:normal;color:#f6a75b}.latin-name:after{content:'';display:block;width:100%;height:1px;margin-top:10px;background:linear-gradient(90deg,transparent,var(--orange))}
@media(max-width:760px) and (orientation:portrait){.poster-back{right:5%;top:12%;font-size:clamp(60px,12vw,100px)}.poster-front{left:14%;bottom:17%;font-size:clamp(51px,10.5vw,84px)}.latin-name{right:3%;bottom:7%;font-size:clamp(13px,4vw,20px);max-width:75%}}
@media(orientation:landscape) and (max-height:600px){.poster-back{top:4%;right:18%;font-size:clamp(54px,17dvh,96px)}.poster-front{left:18%;bottom:8%;font-size:clamp(47px,15dvh,86px)}.latin-name{right:8%;bottom:4%;font-size:clamp(12px,3dvh,20px)}}

/* Aksen editorial di sisi poster; lapisan tetap tidak mengambil klik. */
.arc,.swatches,.poster-rules,.glint{position:absolute;pointer-events:none;user-select:none}
.arc{z-index:0;width:clamp(230px,42vw,540px);aspect-ratio:1;border:5px solid #ed9b44a8;border-radius:50%}
.arc-left{left:-68%;bottom:-35%;border-right-color:transparent;border-top-color:transparent;transform:rotate(-22deg)}
.arc-right{right:-70%;top:18%;border-left-color:transparent;border-bottom-color:transparent;transform:rotate(18deg)}
.swatches{z-index:1;top:14%;left:-18%;display:flex;gap:11px}.swatches i{display:block;width:16px;height:16px;border-radius:50%;background:#719554;box-shadow:0 0 0 1px #dcecb22b}.swatches i:nth-child(2){background:#e99645}.swatches i:nth-child(3){background:#f1dfae}
.poster-rules{z-index:1;right:-22%;top:12%;width:145px;height:30px;border-top:1px solid #a8c48a85}.poster-rules:after{content:'';position:absolute;right:0;top:17px;width:75%;border-top:1px solid #a8c48a85}
.glint{z-index:3;font:28px Georgia,serif;color:#f6ba61;text-shadow:0 0 14px #f0ab5b8a;animation:posterTwinkle 4.5s ease-in-out infinite}.glint-one{top:10%;left:8%}.glint-two{right:0;bottom:24%;font-size:19px;animation-delay:-2s}
@keyframes posterTwinkle{50%{opacity:.42;transform:scale(.78) rotate(15deg)}}
@media(max-width:760px) and (orientation:portrait){.arc{width:clamp(170px,58vw,310px);border-width:4px}.arc-left{left:-41%;bottom:-10%}.arc-right{right:-43%;top:12%}.swatches{left:3%;top:9%;gap:7px}.swatches i{width:10px;height:10px}.poster-rules{right:3%;top:8%;width:48px;height:17px}.poster-rules:after{top:9px}.glint-one{top:19%;left:4%;font-size:18px}.glint-two{right:4%;bottom:31%;font-size:14px}}
@media(orientation:landscape) and (max-height:600px){.arc{width:clamp(180px,38vw,360px);border-width:3px}.arc-left{left:-36%;bottom:-40%}.arc-right{right:-36%;top:16%}.swatches{left:2%;top:13%;gap:6px}.swatches i{width:9px;height:9px}.poster-rules{right:2%;top:10%;width:70px}.glint-one{left:9%;font-size:17px}.glint-two{right:4%;font-size:13px}}
@media(prefers-reduced-motion:reduce){.glint{animation:none}}

/* Fakta kecil mengikuti garis dan titik poster. */
.micro{position:absolute;z-index:1;display:flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none;user-select:none;color:#d3dfb9;opacity:.68;text-transform:uppercase;letter-spacing:.16em;font:800 10px/1.1 ui-rounded,'Trebuchet MS',Arial,sans-serif;text-shadow:0 2px 7px #0b251d}
.micro i{font:italic 21px/1 Georgia,serif;color:#f5b660}.micro b{font:italic 27px/1 Georgia,serif;color:#f5b660}.micro small{font:inherit}
.micro-age{top:5%;left:-5%}.micro-osu{top:22%;right:-11%}.micro-draw{bottom:40%;left:-11%}.micro-code{bottom:34%;right:-12%}.micro-sleep{bottom:5%;left:-5%}.micro-music{bottom:18%;right:-12%}
.micro-age:after,.micro-sleep:after{content:'';display:block;width:25px;border-top:1px solid #c3d4aa8c;margin-left:5px}
@media(max-width:760px) and (orientation:portrait){.micro{font-size:8px;gap:3px;letter-spacing:.1em;opacity:.72}.micro i{font-size:15px}.micro b{font-size:21px}.micro-age{top:4%;left:2%}.micro-osu{top:16%;right:1%}.micro-draw{bottom:43%;left:0}.micro-code{bottom:34%;right:0}.micro-sleep{bottom:4%;left:2%}.micro-music{bottom:18%;right:1%}.micro-age:after,.micro-sleep:after{width:10px}}
@media(orientation:landscape) and (max-height:600px){.micro{font-size:8px;gap:3px}.micro i{font-size:15px}.micro b{font-size:20px}.micro-age{top:4%;left:2%}.micro-osu{top:19%;right:2%}.micro-draw{bottom:40%;left:1%}.micro-code{bottom:31%;right:2%}.micro-sleep{bottom:4%;left:2%}.micro-music{bottom:16%;right:2%}}

/* iPad mini dan tablet: semua anotasi berada di dalam tepi layar. */
@media(min-width:761px) and (max-width:1100px){
    .stage{width:min(100%,740px)}
    .micro{font-size:9px;letter-spacing:.12em}
    .micro-age{left:2%;top:5%}
    .micro-osu{right:2%;top:21%}
    .micro-draw{left:2%;bottom:40%}
    .micro-code{right:2%;bottom:34%}
    .micro-sleep{left:2%;bottom:5%}
    .micro-music{right:2%;bottom:18%}
    .swatches{left:5%;top:14%}
    .poster-rules{right:5%;top:12%}
    .arc-left{left:-44%}.arc-right{right:-44%}
}
@media(min-width:761px) and (max-width:900px) and (orientation:portrait){
    .poster-front{left:13%;font-size:clamp(72px,10dvh,105px)}
    .poster-back{right:10%;font-size:clamp(83px,12dvh,125px)}
    .latin-name{right:5%;bottom:5%;font-size:clamp(17px,2.6vw,23px)}
}

/* Ornamen tambahan: segel kecil dan penanda orbit. */
.seal,.orbit-mark{position:absolute;z-index:1;pointer-events:none;user-select:none}
.seal{top:33%;left:2%;width:54px;height:54px;display:grid;place-items:center;border:2px solid #e5ad6f9c;border-radius:9px;color:#ffd68c;font:35px/1 Georgia,serif;transform:rotate(-9deg);box-shadow:inset 0 0 0 5px #182e24,0 0 0 1px #d9ebac38}
.seal:after{content:'';position:absolute;inset:6px;border:1px dashed #e5ad6f6b;border-radius:4px}
.orbit-mark{top:45%;right:2%;width:50px;height:50px;border:1px solid #b9d89b94;border-radius:50%;box-shadow:0 0 0 7px #b9d89b14}
.orbit-mark:before,.orbit-mark:after{content:'';position:absolute;background:#e8ad69a6}.orbit-mark:before{left:50%;top:-10px;width:1px;height:68px}.orbit-mark:after{top:50%;left:-10px;height:1px;width:68px}
.orbit-mark i{position:absolute;inset:13px;border:1px solid #e8ad69b0;border-radius:50%}
/* Footer tidak ikut menghitung tinggi kelompok karakter. */
.poster-footer{position:absolute;left:0;right:0;bottom:clamp(10px,2dvh,22px);z-index:8;height:auto;display:flex;align-items:center;justify-content:center;gap:18px;color:#c4d0adbd;font:700 10px/1.2 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.16em;text-align:center;pointer-events:none}
.poster-footer:before,.poster-footer:after{content:'';width:clamp(28px,8vw,100px);border-top:1px solid #b3c9965c}
.latin-name{bottom:clamp(46px,8dvh,76px)}
@media(max-width:760px) and (orientation:portrait){.seal{left:-5%;top:30%;width:39px;height:39px;font-size:25px}.seal:after{inset:4px}.orbit-mark{right:-5%;top:44%;width:33px;height:33px}.orbit-mark:before{top:-7px;height:45px}.orbit-mark:after{left:-7px;width:45px}.orbit-mark i{inset:8px}.poster-footer{font-size:8px;letter-spacing:.1em;gap:8px}.poster-footer:before,.poster-footer:after{width:20px}}
@media(min-width:761px) and (max-width:1100px){.seal{left:3%}.orbit-mark{right:3%}}
 @media(orientation:landscape) and (max-height:600px){.seal{left:3%;top:28%;width:36px;height:36px;font-size:23px}.seal:after{inset:4px}.orbit-mark{right:3%;top:46%;width:31px;height:31px}.orbit-mark:before{top:-7px;height:43px}.orbit-mark:after{left:-7px;width:43px}.orbit-mark i{inset:8px}.poster-footer{bottom:5px;font-size:8px}.latin-name{bottom:clamp(28px,8dvh,48px)}}
/* Dua halaman dalam satu kanvas; swipe mendatar memindahkan halaman. */
.app{touch-action:none}
.app > main,.links-page,.soon-page{transition:transform .62s cubic-bezier(.2,.78,.18,1);will-change:transform}
.app > main{z-index:1;transform:translate3d(0,0,0)}
.links-page{position:absolute;inset:0;z-index:12;display:grid;place-items:center;padding:clamp(36px,6vw,90px);overflow:hidden;background:radial-gradient(circle at 72% 36%,#5b78424d,transparent 37%),radial-gradient(circle at 25% 82%,#dc944923,transparent 40%),#192e26;transform:translate3d(100vw,0,0)}
.app.page-two > main{transform:translate3d(-100vw,0,0)}
.app.page-two .links-page{transform:translate3d(0,0,0)}
.soon-page{position:absolute;inset:0;z-index:13;display:grid;place-items:center;padding:clamp(36px,6vw,90px);overflow:hidden;background:radial-gradient(circle at 47% 45%,#5873444f,transparent 47%),#192e26;transform:translate3d(100vw,0,0)}
.app.page-three > main{transform:translate3d(-200vw,0,0)}
.app.page-three .links-page{transform:translate3d(-100vw,0,0)}
.app.page-three .soon-page{transform:translate3d(0,0,0)}
.app.is-dragging > main,.app.is-dragging .links-page,.app.is-dragging .soon-page{transition:none}
.page-next,.page-back,.soon-back{position:absolute;z-index:55;top:clamp(16px,3vw,38px);left:clamp(16px,3vw,42px);display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:4px 6px;border:0;background:none;color:#e9f2cd;font:800 10px/1 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.17em;text-transform:uppercase;text-shadow:0 2px 8px #142d22;transition:color .2s,transform .2s}
.page-next span,.page-back span,.soon-back span{color:#f3b568;font-size:19px;line-height:1}.page-next:hover,.page-back:hover,.soon-back:hover{color:#f3b568;transform:translateX(3px)}.page-back:hover,.soon-back:hover{transform:translateX(-3px)}
.page-next{pointer-events:auto}.app.page-two .page-next,.app.page-three .page-next{pointer-events:none;visibility:hidden}
.links-page:before,.links-page:after{content:'';position:absolute;pointer-events:none;border:1px solid #a9c88e25;border-radius:50%;width:min(66vw,640px);aspect-ratio:1;left:-23%;bottom:-46%}.links-page:after{left:auto;bottom:auto;right:-25%;top:-45%;border-color:#eeb56b3b}
.links-kanji{position:absolute;right:2%;top:16%;writing-mode:vertical-rl;color:#a5c88920;font:900 clamp(80px,17vw,230px)/1 'Yu Gothic','Noto Sans JP',sans-serif;letter-spacing:-.1em;pointer-events:none;user-select:none}
.links-shell{position:relative;z-index:2;width:min(100%,860px);display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(28px,5vw,90px);user-select:none}
.links-kicker{color:#e8b574;font:800 11px/1.2 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.22em}
.links-heading h2{margin:17px 0 15px;color:#eaf4d5;font:900 clamp(42px,6.2vw,90px)/.92 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:-.065em}.links-heading h2 em{display:block;color:#f1a45c;font-style:normal}
.links-heading p{max-width:280px;color:#bfd0ae;font:600 14px/1.6 'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;letter-spacing:.08em;margin:0}
.link-list{display:grid;gap:5px;min-width:0}
.link-list a{display:grid;grid-template-columns:30px minmax(0,1fr) 30px;align-items:center;gap:11px;min-height:76px;border-bottom:1px solid #bbd09a56;color:#eaf3d6;text-decoration:none;transition:color .25s,transform .25s;touch-action:manipulation}
.link-list a:nth-child(1){margin-right:9%}.link-list a:nth-child(2){margin-left:8%}.link-list a:nth-child(3){margin-right:3%}
.link-list a:hover{color:#ffc37e;transform:translateX(5px)}.link-list a:focus-visible{outline:2px solid #ffc37e;outline-offset:3px}
.link-number{color:#e8ad67;font:italic 20px/1 Georgia,serif}.link-label{min-width:0;font:800 clamp(22px,2.7vw,36px)/1.1 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:-.04em}.link-label small{display:block;margin-top:5px;color:#b7cca7;font:600 11px/1.2 'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;letter-spacing:.15em}.link-arrow{color:#f4bc77;font-size:25px;text-align:right}
.future-note{grid-column:2;margin-top:-4px;color:#a8bc97;font:800 9px/1.4 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.18em;text-align:right}
.links-page .page-back{top:clamp(16px,3vw,38px);left:clamp(16px,3vw,42px)}
.soon-page:before{content:'✦';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-12deg);font:400 min(85vw,780px)/1 Georgia,serif;color:#b4d18b0c;pointer-events:none}
.soon-page:after{content:'';position:absolute;width:min(74vw,670px);aspect-ratio:1;border:1px solid #e5ad6955;border-radius:50%;box-shadow:0 0 0 22px #bcd29208;pointer-events:none}
.soon-shell{position:relative;z-index:2;max-width:700px;text-align:center}.soon-kicker{color:#e8b574;font:800 11px/1.2 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.25em}.soon-shell h2{margin:20px 0 12px;color:#eaf4d5;font:900 clamp(43px,8.5vw,112px)/.92 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:-.065em}.soon-shell h2 em{display:block;color:#f1a45c;font-style:normal}.soon-shell p{margin:0;color:#bfd0ae;font:600 clamp(12px,1.5vw,16px)/1.6 'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;letter-spacing:.1em}.soon-platform{display:inline-block;margin-top:clamp(24px,5dvh,45px);padding:10px 20px;border-top:1px solid #c7d8a275;border-bottom:1px solid #c7d8a275;color:#e9f3d2;font:800 12px/1.2 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.stage .particles{position:absolute;inset:0;z-index:1;pointer-events:none}.dust{position:absolute;width:var(--dust-size);height:var(--dust-size);border-radius:50%;background:#f5c477;box-shadow:0 0 12px #f7bf72ad;opacity:.5;animation:dustFloat 4s ease-in-out infinite alternate;animation-delay:var(--dust-delay)}
@keyframes dustFloat{to{transform:translate(3px,-6px);opacity:.2}}
@media(max-width:760px) and (orientation:portrait){
    .page-next,.page-back,.soon-back{top:8px;left:9px;font-size:9px;min-height:32px}
    .micro-age{top:11%;left:3%}.micro-osu,.swatches,.poster-rules{display:none}
    .links-page{padding:54px 22px 46px}
    .links-shell{grid-template-columns:1fr;gap:clamp(18px,3dvh,32px);width:min(100%,460px)}
    .links-heading h2{font-size:clamp(32px,10vw,58px);margin:10px 0 7px}.links-heading p{font-size:11px;line-height:1.4}.links-kicker{font-size:9px}
    .link-list a{min-height:clamp(52px,10dvh,72px);grid-template-columns:22px minmax(0,1fr) 24px;gap:7px}.link-label{font-size:clamp(22px,7vw,32px)}.link-label small{font-size:9px;margin-top:3px}.link-number{font-size:16px}.link-arrow{font-size:21px}
    .future-note{grid-column:1;font-size:8px}.links-kanji{right:-2%;top:15%;font-size:86px}.soon-page{padding:50px 18px}.soon-kicker{font-size:9px}.soon-shell h2{font-size:clamp(40px,13vw,68px)}
}
@media(orientation:landscape) and (max-height:600px){
    .page-next,.page-back,.soon-back{top:5px;left:12px;min-height:28px;font-size:9px}
    .links-page{padding:32px 56px 24px}.links-shell{width:min(100%,850px);gap:25px}.links-heading h2{font-size:clamp(35px,10dvh,62px);margin:8px 0}.links-heading p{font-size:11px}
    .link-list a{min-height:clamp(40px,15dvh,62px)}.link-label{font-size:clamp(19px,5dvh,29px)}.link-label small{font-size:9px;margin-top:2px}.future-note{font-size:8px}
}
@media(max-width:760px) and (orientation:landscape){.micro-age{top:20%}.poster-back{top:18%}.micro-osu,.swatches,.poster-rules{display:none}.links-page{padding:35px 34px 22px}.links-kanji{font-size:70px}}
@media(prefers-reduced-motion:reduce){.app > main,.links-page,.soon-page,.page-next,.page-back,.soon-back,.link-list a{transition:none}.dust{animation:none}}

/* Sudut rahasia hanya ditemukan dengan menggeser poster. */
.secret-page{background:radial-gradient(circle at 50% 46%,#526d3d4a,transparent 42%),#152a22}
.secret-page:before{left:-25%;bottom:-60%;border-color:#d5e7b221;width:min(76vw,750px)}
.secret-page:after{right:-24%;top:-67%;border-color:#f5b46a2b;width:min(70vw,680px)}
.secret-kanji{position:absolute;right:6%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;color:#a4c48315;font:900 clamp(120px,22vw,300px)/1 'Yu Gothic','Noto Sans JP',sans-serif;pointer-events:none;user-select:none}
.secret-orbit{position:absolute;pointer-events:none;border:1px solid #adc18d36;border-radius:50%;aspect-ratio:1}
.secret-orbit-one{width:min(56vw,520px);left:50%;top:50%;transform:translate(-50%,-50%)}
.secret-orbit-two{width:min(39vw,360px);left:50%;top:50%;transform:translate(-50%,-50%);border-style:dashed;border-color:#dba46a38}
.secret-shell{position:relative;z-index:2;width:min(100%,630px);display:flex;flex-direction:column;align-items:center;text-align:center;user-select:none}
.secret-index{color:#dcae73;font:800 10px/1.2 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.25em}
.secret-symbol{position:relative;display:grid;place-items:center;width:clamp(60px,9dvh,86px);height:clamp(60px,9dvh,86px);margin:clamp(13px,3dvh,25px) 0;border:1px solid #e3b776a3;border-radius:50%;box-shadow:0 0 0 9px #e3b7760c,0 0 0 27px #b7cd9510}
.secret-symbol:before{content:'';position:absolute;width:14px;height:14px;top:29%;border:2px solid #f1cb91;border-radius:50%}.secret-symbol:after{content:'';position:absolute;width:5px;height:16px;top:48%;background:#f1cb91;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}
.secret-shell h2{margin:0;color:#eaf4d5;font:900 clamp(42px,7.5vw,94px)/.94 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:-.07em}.secret-shell h2 em{font-style:normal;color:#efa965}
.secret-shell p[lang=ja]{margin:clamp(10px,2dvh,19px) 0 0;color:#d7e5bd;font:600 clamp(12px,1.5vw,16px)/1.5 'Hiragino Kaku Gothic ProN','Yu Gothic','Noto Sans JP',sans-serif;letter-spacing:.1em}
.secret-copy{max-width:360px;margin:clamp(12px,2.4dvh,22px) 0 0;color:#b9c9aa;font:500 clamp(12px,1.5vw,15px)/1.65 ui-rounded,'Trebuchet MS',Arial,sans-serif}
.secret-close{margin-top:clamp(16px,3dvh,28px);color:#dba76e;font:800 9px/1.3 ui-rounded,'Trebuchet MS',Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase}
@media(max-width:760px){.secret-page{padding:38px 23px}.secret-kanji{right:-2%;font-size:clamp(100px,36vw,190px)}.secret-orbit-one{width:min(90vw,450px)}.secret-orbit-two{width:min(65vw,320px)}.secret-shell h2{font-size:clamp(39px,11vw,67px)}.secret-copy{max-width:285px}}
@media(max-height:440px){.secret-page{padding:18px 45px}.secret-symbol{width:42px;height:42px;margin:6px 0}.secret-symbol:before{width:9px;height:9px;top:25%}.secret-symbol:after{height:10px;top:48%}.secret-shell h2{font-size:clamp(32px,9dvh,48px)}.secret-shell p[lang=ja]{margin-top:4px;font-size:10px}.secret-copy{margin-top:5px;font-size:11px;line-height:1.3}.secret-close{margin-top:6px;font-size:8px}}