@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800;900&family=Noto+Sans+KR:wght@400;500;600&display=swap');
:root{color-scheme:dark;--bg:#141414;--cream:#f8f5ed;--pink:#ef7fba;--yellow:#f6ce36;--blue:#4b8cf5;--purple:#9380fa;--lime:#d3f46e}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--cream);font-family:Inter,'Noto Sans KR',Arial,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid var(--lime);outline-offset:8px}a{-webkit-tap-highlight-color:transparent}.universe-header{display:flex;align-items:center;justify-content:space-between;padding:25px 3%;font-size:12px;font-weight:700;letter-spacing:.06em}.brand{display:flex;align-items:center;gap:10px}.brand-mark{font-size:29px;color:var(--lime);line-height:1}.explore-link{display:flex;gap:18px;align-items:center}.explore-link span{font-size:22px}.universe{padding:25px 2% 0}.intro{text-align:center;padding:0 15px}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;color:#a6a59f;margin:8px 0 25px}h1{font-size:clamp(65px,8.4vw,154px);font-weight:900;line-height:.98;letter-spacing:-.055em;margin:0;color:var(--cream)}h1>span{display:inline-block}.description{font-family:'Noto Sans KR',sans-serif;font-size:15px;font-weight:400;line-height:1.9;margin:30px 0 21px;color:#c7c5be;word-break:keep-all}.mobile-break{display:none}.explore-pill{display:inline-flex;align-items:center;gap:35px;background:var(--lime);color:var(--bg);border-radius:40px;padding:15px 27px;font-size:14px;font-weight:700;transition:background .2s,transform .2s}.explore-pill:hover{background:#e6ff9c;transform:translateY(-3px)}.explore-pill span{font-size:20px}.ip-collection{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:47px auto 0;max-width:1850px}.ip-card{min-width:0}.icon-shape{aspect-ratio:1;position:relative;background:var(--pink);border-radius:12%;display:grid;place-items:center;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s;overflow:hidden;isolation:isolate}.mock-mark{color:var(--bg);font-family:Inter,'Arial Black',sans-serif;font-weight:900;font-size:clamp(90px,15.8vw,310px);letter-spacing:-.07em;line-height:1;user-select:none;transition:transform .35s}.mark-cg{display:flex;letter-spacing:-.1em;align-items:center;transform:rotate(-10deg);font-size:clamp(70px,12vw,240px);margin-left:-.08em}.mark-cg>span{transform:translate(-.04em,.12em)}.figgles .icon-shape{background:var(--yellow);border-radius:50%}.mark-f{letter-spacing:-.07em;transform:rotate(9deg);margin-top:-.03em}.mark-f span{display:inline-block;transform:rotate(-10deg);font-size:.72em;margin-left:.01em}.kkonthat .icon-shape{background:var(--blue);border-radius:12% 34% 12% 12%}.mark-k{transform:rotate(-10deg)}.mamotori .icon-shape{background:var(--purple);border-radius:50% 50% 14% 14%}.mark-m{transform:rotate(7deg);font-size:clamp(95px,17.5vw,330px);margin-top:-.08em}.enter-arrow{position:absolute;top:15px;right:18px;font-size:28px;font-weight:700;color:var(--bg);opacity:0;transform:translate(-5px,5px);transition:opacity .25s,transform .25s}.cele:hover .icon-shape,.cele:focus-visible .icon-shape{transform:translateY(-12px) rotate(-2deg);background:#ff9bd0}.cele:hover .mark-cg{transform:rotate(0deg) scale(1.04)}.cele:hover .enter-arrow,.cele:focus-visible .enter-arrow{opacity:1;transform:none}.card-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:20px 3px 12px}h2{font-size:clamp(14px,1.25vw,22px);font-weight:700;letter-spacing:-.035em;margin:0;line-height:1.3}.card-action,.coming-soon{font-size:9px;letter-spacing:.045em;white-space:nowrap}.card-action{color:var(--pink)}.coming-soon{color:#aaa7a0}.ip-card:not(a) .mock-mark{opacity:.92}footer{display:flex;justify-content:space-between;margin:28px 3% 0;padding:22px 0 25px;border-top:1px solid #ffffff20;color:#93918c;font-size:10px;letter-spacing:.08em}.intro{animation:arrive .7s ease both}.ip-card{animation:arrive .8s ease both}.figgles{animation-delay:.06s}.kkonthat{animation-delay:.12s}.mamotori{animation-delay:.18s}@keyframes arrive{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@media(min-width:1600px){.universe{padding-top:35px}.ip-collection{margin-top:55px}.description{margin-top:35px;font-size:17px}}@media(max-width:1000px){.card-caption{align-items:start;flex-direction:column;gap:7px}h1{font-size:9vw}.ip-collection{gap:14px}.eyebrow{font-size:10px}.card-action,.coming-soon{font-size:10px}}@media(max-width:600px){.universe-header{padding:22px 5%;font-size:10px}.brand{gap:6px}.brand-mark{font-size:24px}.explore-link{gap:7px;font-size:9px}.universe{padding:30px 5% 0}.intro{padding:0}.eyebrow{font-size:8px;letter-spacing:.06em;margin:5px 0 25px}h1{font-size:clamp(40px,10.3vw,64px);line-height:1.05;letter-spacing:-.05em}.description{font-size:13px;line-height:1.9;margin:23px 0 21px}.mobile-break{display:block}.explore-pill{font-size:12px;gap:23px;padding:12px 22px}.ip-collection{grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 15px;margin-top:38px}.mock-mark{font-size:29vw}.mark-cg{font-size:23vw}.mark-m{font-size:33vw}.card-caption{padding:13px 2px 0;gap:5px}h2{font-size:15px;letter-spacing:-.035em}.card-action,.coming-soon{font-size:9px}.enter-arrow{font-size:22px;top:10px;right:12px;opacity:1;transform:none}.cele:hover .icon-shape{transform:translateY(-5px)}footer{font-size:8px;margin:30px 5% 0;padding:20px 0;letter-spacing:.03em}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* One pinned scene carries the four marks from the collection into the names. */
.scroll-story{height:225svh;position:relative;margin-top:47px}.story-stage{position:sticky;top:0;height:100svh;min-height:600px;isolation:isolate}.story-stage>.ip-collection{margin-top:0;position:relative;z-index:2}.story-copy{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#141414;opacity:0;pointer-events:none;padding:35px 0}.story-eyebrow{text-align:center;font-family:'Noto Sans KR',sans-serif;font-size:14px;line-height:1.6;margin:0 0 55px}.story-lines{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.story-line{display:flex;align-items:center;justify-content:center;gap:.17em;margin:0;white-space:nowrap;font-size:clamp(28px,4.9vw,86px);font-weight:900;letter-spacing:-.05em;line-height:1.18;position:relative}.story-line strong{font-weight:900}.story-line .icon-slot{flex:0 0 1.05em;width:1.05em;height:1.05em;display:inline-block;margin-inline:.04em}.story-link-arrow{position:absolute;right:-.9em;top:0;font-size:.44em;opacity:0;transition:opacity .2s}.story-line:hover .story-link-arrow,.story-line:focus-visible .story-link-arrow{opacity:1}.story-line[href]:hover strong{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.1em}.story-closing{font-family:'Noto Sans KR',sans-serif;font-size:14px;margin:55px 0 0;text-align:center}.scroll-hint{text-align:center;margin:55px 0 0;color:#a6a59f;font-size:10px;letter-spacing:.13em}.scroll-hint span{display:inline-block;margin-left:15px}.flying-icon{position:absolute!important;left:0;top:0;z-index:4;pointer-events:none!important;transform-origin:0 0;transition:none!important;will-change:transform;border-radius:12%}.flying-icon .mock-mark{font-size:calc(var(--base-size)*.68);transition:none}.flying-icon .mark-cg{font-size:calc(var(--base-size)*.52)}.flying-icon .mark-m{font-size:calc(var(--base-size)*.76)}.flying-icon.figgles{background:var(--yellow);border-radius:50%;animation:none}.flying-icon.kkonthat{background:var(--blue);border-radius:12% 34% 12% 12%;animation:none}.flying-icon.mamotori{background:var(--purple);border-radius:50% 50% 14% 14%;animation:none}.flying-icon .enter-arrow{display:none}footer{position:relative}.story-stage .ip-card{animation:none}
@media(max-width:600px){.scroll-story{height:210svh;margin-top:38px}.story-stage{min-height:620px}.story-copy{padding:30px 0}.story-eyebrow{font-size:12px;margin-bottom:40px}.story-line{font-size:6vw;gap:.16em;letter-spacing:-.05em}.story-lines{gap:20px}.story-closing{font-size:12px;margin-top:40px}.scroll-hint{margin-top:28px}.story-link-arrow{display:none}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-stage{height:auto;min-height:0;position:relative}.story-copy{position:relative;opacity:1;pointer-events:auto;background:var(--cream);margin:50px -2.1% 0;padding:80px 2.1%;min-height:75svh}.scroll-hint{display:none}.story-line .icon-slot{position:relative}.icon-slot>.icon-shape{width:100%;height:100%}.icon-slot .mock-mark{font-size:.8em}.icon-slot .mark-cg{font-size:.65em}.icon-slot .enter-arrow{display:none}.icon-slot>.figgles{background:var(--yellow);border-radius:50%}.icon-slot>.kkonthat{background:var(--blue);border-radius:12% 34% 12% 12%}.icon-slot>.mamotori{background:var(--purple);border-radius:50% 50% 14% 14%}.story-link-arrow{display:none}}
@media(min-width:601px){.story-line{font-size:clamp(34px,6.4vw,106px)}}
/* PAWBULOUS palette and company story. */
:root{--pink:#ec77a3;--yellow:#91dfcb;--blue:#289fcc;--purple:#08787b;--lime:#91dfcb;--rose:#ec77a3;--mint:#91dfcb;--peacock:#08787b;--cerulean:#289fcc}
.kkonthat .icon-shape,.flying-icon.kkonthat{background:var(--peacock)}.kkonthat .mock-mark{color:var(--cream)}.mamotori .icon-shape,.flying-icon.mamotori{background:var(--blue)}
.scroll-story{height:245svh}.story-stage:before{content:'';position:absolute;inset:0 calc(-2vw - 1px);background:var(--scene-color,#141414);z-index:-1}.story-stage{--scene-color:#141414}.story-lines{gap:12px}.flying-icon{backface-visibility:hidden}.story-line{will-change:transform,opacity}.story-copy{opacity:1!important}.story-stage>.ip-collection .icon-shape{transition:none}.story-stage>.ip-collection .cele:hover .icon-shape{transform:none}.scroll-hint{font-size:12px}.story-stage .flying-icon .mark-k{color:var(--cream)}
.color-chapter{height:190svh;position:relative;background:#141414;color:var(--cream);margin-top:0}.color-stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden}.chapter-heading{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px 5%}.chapter-heading h2{font-size:clamp(52px,7.8vw,130px);font-weight:900;line-height:1.12;letter-spacing:-.055em}.chapter-heading>p:last-child{font-size:16px;margin-top:35px}.chapter-heading .eyebrow{color:#bcb9b7}.color-wipes{position:absolute;inset:0;pointer-events:none;overflow:hidden}.wipe-row{height:34%;width:120%;margin-left:-10%;border:2px solid #141414;border-radius:0 14svh 14svh 0;color:#141414;display:flex;align-items:center;justify-content:space-between;padding:0 14%;font-size:clamp(55px,9vw,150px);font-weight:900;letter-spacing:-.045em;will-change:transform}.wipe-row:nth-child(2){border-radius:14svh 0 0 14svh}.wipe-row b{font-size:1.2em;line-height:1}.rose{background:var(--rose)}.mint{background:var(--mint)}.blue{background:var(--blue)}.peacock{background:var(--peacock);color:var(--ip-key)!important}.text-chip{display:inline-block;color:#141414;padding:.035em .18em .07em;border-radius:.21em;line-height:1.03;vertical-align:baseline;white-space:nowrap;letter-spacing:-.045em}.text-chip.peacock{border-radius:.1em .45em .45em .1em}.text-chip.rose{transform:rotate(-2deg)}.inline-symbol{display:inline-flex;align-items:center;justify-content:center;color:#141414;width:1.08em;height:1.08em;line-height:1;border-radius:50%;font-family:Arial,sans-serif;font-weight:700;margin:0 .1em;vertical-align:middle;flex-shrink:0}.inline-symbol.rose{border-radius:20% 45% 20% 20%}.inline-symbol.blue{border-radius:.15em}.company-about{background:#141414;color:var(--cream);padding:100px 7% 140px;position:relative}.company-label{display:flex;justify-content:space-between;gap:20px;font-size:12px;letter-spacing:.1em;font-weight:600;color:#aaa7a1;margin-bottom:75px}.read-copy{font-size:clamp(34px,4.8vw,79px);font-weight:800;line-height:1.33;letter-spacing:-.045em;max-width:1500px;margin:0 auto}.read-word{display:inline-block;position:relative;border-radius:50px;transition:color .15s,background-color .15s;vertical-align:baseline}.read-word.masked{color:transparent!important;background:#343434}.read-copy>.text-chip.masked,.read-copy>.inline-symbol.masked{color:transparent!important;background:#343434;transform:none}.read-copy>.text-chip,.read-copy>.inline-symbol{transition:color .15s,background-color .15s}.about-ko{font-family:'Noto Sans KR',sans-serif;font-size:16px;line-height:1.9;color:#b7b3ad;margin:35px 0 95px}.second-copy{margin-top:0}.studio-world{background:var(--mint);color:#141414;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:80px 6%;gap:6%}.studio-image{overflow:hidden;border-radius:48% 48% 4% 4%;transform:rotate(-3deg)}.studio-image img{width:100%;height:auto;display:block}.studio-caption>span{font-size:12px;letter-spacing:.1em;font-weight:700}.studio-caption h2{font-size:clamp(48px,5.7vw,100px);line-height:1.12;letter-spacing:-.055em;margin:35px 0}.studio-caption p{font-size:16px;line-height:1.9;word-break:keep-all}.company-work{background:var(--cream);color:#141414;padding:100px 7%}.company-work .company-label{color:#656660;margin-bottom:40px}.company-work>h2{font-size:clamp(45px,6.7vw,110px);letter-spacing:-.055em;margin-bottom:70px;line-height:1.2}.work-row{display:grid;grid-template-columns:.15fr 1fr;padding:65px 0;border-top:1px solid #14141445}.work-number{font-size:14px;font-weight:700;align-self:start;margin-top:10px}.work-row h3{font-size:clamp(36px,5.5vw,90px);line-height:1.25;letter-spacing:-.05em;margin:0}.work-row p{font-size:16px;line-height:1.8;word-break:keep-all;margin:30px 0 0}.company-contact{background:var(--peacock);color:var(--cream);padding:100px 7%;text-align:center}.company-contact>p{font-size:12px;letter-spacing:.12em;margin-bottom:35px}.company-contact h2{font-size:clamp(52px,7.5vw,125px);line-height:1.16;letter-spacing:-.06em}.company-contact>a{display:table;margin:40px auto 0;border:1px solid #ffffff70;padding:15px 25px;border-radius:40px;font-size:14px}.company-contact>a span{margin-left:25px}.company-contact>a:hover{background:var(--cream);color:var(--peacock)}.company-contact .back-ips{border:0;font-size:13px;margin-top:20px}footer{margin:0;padding:28px 5%;background:#141414;color:#b4b0aa;font-size:11px}body{background:#141414!important}.universe{overflow:clip}.story-copy .story-line{pointer-events:auto}.story-copy[inert] .story-line{pointer-events:none}
@media(max-width:600px){.scroll-story{height:250svh}.story-stage:before{inset:0 calc(-5.56% - 1px)}.story-lines{gap:23px}.color-chapter{height:175svh}.color-stage{min-height:600px}.chapter-heading h2{font-size:12vw}.chapter-heading .inline-symbol{font-size:.75em}.chapter-heading>p:last-child{font-size:14px}.company-about{padding:65px 6% 85px}.company-label{font-size:10px;margin-bottom:45px}.read-copy{font-size:30px;line-height:1.45;letter-spacing:-.04em}.about-ko{font-size:14px;margin:28px 0 75px}.studio-world{grid-template-columns:1fr;gap:45px;padding:60px 7%}.studio-image{max-width:450px}.studio-caption h2{font-size:52px;margin:25px 0}.studio-caption p{font-size:14px}.company-work{padding:65px 6%}.company-work>h2{font-size:40px;margin-bottom:40px}.work-row{grid-template-columns:25px 1fr;gap:10px;padding:40px 0}.work-row h3{font-size:8vw;letter-spacing:-.045em}.work-row p{font-size:14px}.work-number{font-size:12px}.company-contact{padding:70px 5%}.company-contact h2{font-size:13vw}.company-contact>a{font-size:13px}footer{font-size:9px;gap:15px}.story-line{font-size:6vw}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:auto}.story-stage:before{display:none}.story-copy{background:var(--cream)}.story-line{opacity:1!important;transform:none!important}.story-eyebrow,.story-closing{opacity:1!important}.color-chapter{height:auto}.color-stage{position:relative;height:85svh}.color-wipes{display:none}.chapter-heading{opacity:1!important}.read-word.masked{color:inherit!important;background:transparent}.read-copy .masked{color:inherit!important}.flying-icon{display:none!important}}
/* Hover typography: initials and expanded names share the same letter nodes. */
.ip-card:focus-visible{outline:3px solid var(--mint);outline-offset:7px;border-radius:12%}.ip-card.morph-ready>.icon-shape>.mock-mark{opacity:0!important}.morph-layer{position:absolute;inset:0;pointer-events:none;color:#141414}.kkonthat .morph-layer{color:var(--cream)}.morph-letter{position:absolute;left:0;top:0;font:900 100px/1 Inter,Arial,sans-serif;letter-spacing:0;transform-origin:0 0;transform:var(--from);opacity:var(--rest-opacity);transition:transform .68s cubic-bezier(.22,.82,.2,1),opacity .3s ease;will-change:transform,opacity}.name-open .morph-letter{transform:var(--to);opacity:1;transition-delay:var(--delay)}.cele.name-open .enter-arrow{opacity:1;transform:none}.ip-card:not(a){cursor:default}.story-stage .ip-card .icon-shape{background:var(--pink)}.story-stage .figgles .icon-shape{background:var(--mint)}.story-stage .kkonthat .icon-shape{background:var(--peacock)}.story-stage .mamotori .icon-shape{background:var(--blue)}
@media(prefers-reduced-motion:reduce){.morph-letter{transition:none!important}}
.has-morph>.mock-mark{opacity:0!important}
/* A/B motion study: CG uses staggered lateral passes; fi rotates with ease-in-out. */
.ip-card.cele .morph-layer>.morph-letter{opacity:0;transform:var(--to);transition:none;animation:none}
.ip-card.cele .slide-initials .morph-letter{opacity:1;transform:var(--from);transition:none}
.ip-card.cele.name-open .slide-initials .morph-letter{animation:cg-initial-out .3s cubic-bezier(.55,0,.8,.4) both;animation-delay:calc(var(--order)*.065s)}
.ip-card.cele.name-open .morph-layer>.morph-letter{animation:cg-name-in .56s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.24s + var(--index)*.026s)}
.ip-card.cele.motion-used:not(.name-open) .morph-layer>.morph-letter{animation:cg-name-out .27s cubic-bezier(.55,0,.8,.4) both;animation-delay:calc(var(--index)*.012s)}
.ip-card.cele.motion-used:not(.name-open) .slide-initials .morph-letter{animation:cg-initial-in .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.3s + var(--order)*.075s)}
@keyframes cg-initial-out{from{opacity:1;transform:var(--from)}to{opacity:0;transform:translateX(var(--slide-distance)) var(--from)}}
@keyframes cg-name-in{from{opacity:0;transform:translateX(calc(-1 * var(--slide-distance))) var(--to)}to{opacity:1;transform:var(--to)}}
@keyframes cg-name-out{from{opacity:1;transform:var(--to)}to{opacity:0;transform:translateX(var(--slide-distance)) var(--to)}}
@keyframes cg-initial-in{from{opacity:0;transform:translateX(calc(-1 * var(--slide-distance))) var(--from)}to{opacity:1;transform:var(--from)}}
.ip-card.figgles .morph-letter{transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .65s ease-in-out;transition-delay:calc(var(--index)*.026s)}
.ip-card.figgles.name-open .morph-letter{transform:var(--turn-to);transition-delay:calc(var(--index)*.036s)}
.story-stage .ip-card.cele:focus-visible .icon-shape{transform:none}
@media(prefers-reduced-motion:reduce){.ip-card.cele .morph-layer>.morph-letter{animation:none!important;opacity:0}.ip-card.cele.name-open .morph-layer>.morph-letter{opacity:1;transform:var(--to)}.ip-card.cele .slide-initials .morph-letter{animation:none!important;opacity:1;transform:var(--from)}.ip-card.cele.name-open .slide-initials .morph-letter{opacity:0}.ip-card.figgles .morph-letter{transition:none!important}}
/* Mamotori: the m becomes a reservoir; staggered droplets resolve into letters. */
.ip-card.mamotori .morph-layer>.morph-letter{opacity:0;transform:var(--ink-start);transition:none;animation:none}
.ip-card.mamotori .ink-source{position:absolute;inset:0;transform-origin:50% 60%;pointer-events:none}
.ip-card.mamotori .ink-source>.morph-letter{opacity:1;transform:var(--from);transition:none;animation:none}
.ip-card.mamotori.name-open .ink-source{animation:ink-reservoir .72s cubic-bezier(.45,0,.25,1) both}
.ip-card.mamotori.name-open .morph-layer>.morph-letter{animation:ink-emerge .78s cubic-bezier(.3,.05,.25,1) both;animation-delay:calc(.10s + var(--index)*.075s)}
.ip-card.mamotori .morph-layer>.morph-letter:before{content:'';position:absolute;left:0;top:20px;width:66px;height:66px;background:#141414;border-radius:50%;opacity:0}
.ip-card.mamotori.name-open .morph-layer>.morph-letter:before{animation:ink-droplet .78s ease both;animation-delay:calc(.10s + var(--index)*.075s)}
.ip-card.mamotori.motion-used:not(.name-open) .ink-source{animation:ink-return .45s ease-out both}
.ip-card.mamotori.motion-used:not(.name-open) .morph-layer>.morph-letter{animation:ink-rejoin .42s cubic-bezier(.55,0,.4,1) both;animation-delay:calc((7 - var(--index))*.022s)}
@keyframes ink-reservoir{0%{opacity:1;transform:scale(1);filter:blur(0)}25%{opacity:1;transform:scale(1.045,.94);filter:blur(.4px)}65%{opacity:.8;transform:translateY(7%) scale(.5,.22);filter:blur(3px)}100%{opacity:0;transform:translateY(8%) scale(.06,.03);filter:blur(4px)}}
@keyframes ink-emerge{0%{transform:var(--ink-start);opacity:0;color:transparent;filter:blur(3px)}16%{opacity:1;color:transparent}44%{transform:var(--ink-mid);opacity:1;color:#141414;filter:blur(2px)}78%{transform:var(--ink-pop);opacity:1;color:#141414;filter:blur(.2px)}100%{transform:var(--to);opacity:1;color:#141414;filter:blur(0)}}
@keyframes ink-droplet{0%,20%{opacity:1;transform:scale(.8,1.3)}55%,100%{opacity:0;transform:scale(.2)}}
@keyframes ink-return{from{opacity:0;transform:translateY(8%) scale(.06,.03);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes ink-rejoin{from{opacity:1;transform:var(--to);filter:blur(0)}to{opacity:0;transform:var(--ink-start);filter:blur(3px)}}
@media(prefers-reduced-motion:reduce){.ip-card.mamotori .ink-source,.ip-card.mamotori .morph-layer>.morph-letter,.ip-card.mamotori .morph-layer>.morph-letter:before{animation:none!important;filter:none!important}.ip-card.mamotori.name-open .ink-source{opacity:0}.ip-card.mamotori:not(.name-open) .ink-source{opacity:1;transform:none}.ip-card.mamotori.name-open .morph-layer>.morph-letter{opacity:1;transform:var(--to);color:#141414}.ip-card.mamotori:not(.name-open) .morph-layer>.morph-letter,.ip-card.mamotori .morph-layer>.morph-letter:before{opacity:0}}
/* Crisp fracture variant: eight clipped pieces break away from the large m. */
.ip-card.mamotori .chip-source,.chip-shard{position:absolute;inset:0;pointer-events:none}
.ip-card.mamotori .chip-shard{transform-origin:50% 55%;opacity:1;transform:none}
.ip-card.mamotori .chip-shard>.morph-letter{opacity:1;transform:var(--from);transition:none;animation:none}
.ip-card.mamotori.name-open .chip-shard{animation:chip-break .54s cubic-bezier(.3,.05,.7,.25) both;animation-delay:calc(var(--piece)*.045s)}
.ip-card.mamotori.motion-used:not(.name-open) .chip-shard{animation:chip-assemble .4s cubic-bezier(.15,.8,.25,1) both;animation-delay:calc((7 - var(--piece))*.025s)}
.ip-card.mamotori.name-open .morph-layer>.morph-letter{animation:chip-letter .55s cubic-bezier(.18,.75,.28,1) both;animation-delay:calc(.19s + var(--index)*.06s)}
.ip-card.mamotori .morph-layer>.morph-letter:before{display:none!important}
.ip-card.mamotori.motion-used:not(.name-open) .morph-layer>.morph-letter{animation:chip-retract .3s ease-in both;animation-delay:calc((7 - var(--index))*.025s)}
@keyframes chip-break{0%{opacity:1;transform:none}12%{opacity:1;transform:translate(-1px,1px) rotate(-1deg)}24%{opacity:1;transform:translate(2px,-1px) rotate(1deg)}38%{opacity:1;transform:translate(calc(var(--chip-x)*.18),calc(var(--chip-y)*.18)) rotate(calc(var(--chip-turn)*.25))}75%{opacity:.85}100%{opacity:0;transform:translate(var(--chip-x),var(--chip-y)) rotate(var(--chip-turn)) scale(.62)}}
@keyframes chip-letter{0%{opacity:0;transform:var(--ink-start) rotate(-32deg);filter:none;color:#141414;clip-path:polygon(0 15%,75% 0,100% 70%,20% 100%)}25%{opacity:1;transform:var(--ink-mid) rotate(18deg);clip-path:polygon(0 0,90% 0,100% 95%,0 100%)}64%{opacity:1;transform:var(--ink-pop) rotate(-5deg);clip-path:inset(0)}82%{transform:var(--to) rotate(2deg)}100%{opacity:1;transform:var(--to);filter:none;color:#141414;clip-path:inset(0)}}
@keyframes chip-assemble{from{opacity:0;transform:translate(var(--chip-x),var(--chip-y)) rotate(var(--chip-turn)) scale(.62)}to{opacity:1;transform:none}}
@keyframes chip-retract{from{opacity:1;transform:var(--to);filter:none}to{opacity:0;transform:var(--ink-start) rotate(25deg);filter:none}}
@media(prefers-reduced-motion:reduce){.ip-card.mamotori .chip-shard{animation:none!important;transform:none!important}.ip-card.mamotori.name-open .chip-shard{opacity:0}.ip-card.mamotori:not(.name-open) .chip-shard{opacity:1}}
/* KKONTHAT: three alternating paint passes per letter, paced like a spray tag. */
.ip-card.kkonthat .graffiti-layer{position:absolute;inset:0;pointer-events:none;opacity:0}
.ip-card.kkonthat .morph-layer>.morph-letter{transition:opacity .2s ease,filter .2s ease;transform:var(--from);opacity:var(--rest-opacity)}
.ip-card.kkonthat.name-open .morph-layer>.morph-letter{opacity:0;transform:var(--from);filter:blur(3px)}
.ip-card.kkonthat.name-open .graffiti-layer{opacity:1}
.paint-letter{position:absolute;left:0;top:0;width:100px;height:115px;font:900 100px/1 Inter,Arial,sans-serif;color:var(--cream);transform:var(--to);transform-origin:0 0}
.paint-band{position:absolute;inset:0;clip-path:inset(0 calc((2 - var(--stroke))*33.333%) 0 calc(var(--stroke)*33.333%))}
.paint-ink{position:absolute;inset:0;clip-path:inset(0 0 100% 0);opacity:0;will-change:clip-path,filter}
.ip-card.kkonthat.name-open .paint-ink{animation:spray-down .32s linear both;animation-delay:calc(.14s + var(--paint-index)*.11s + var(--stroke)*.065s)}
.ip-card.kkonthat.name-open .paint-band:nth-child(2) .paint-ink{animation-name:spray-up}
.ip-card.kkonthat:not(.name-open) .graffiti-layer{transition:opacity .2s ease-out}
.ip-card.kkonthat.motion-used:not(.name-open) .morph-layer>.morph-letter{transition-delay:.12s;filter:none}
@keyframes spray-down{0%{opacity:0;clip-path:inset(0 0 100% 0);filter:blur(2px);text-shadow:2px 0 2px #f8f5ed88,-2px 0 2px #f8f5ed55}12%{opacity:1}72%{clip-path:inset(0 0 12% 0);filter:blur(.8px)}100%{opacity:1;clip-path:inset(0);filter:blur(0);text-shadow:none}}
@keyframes spray-up{0%{opacity:0;clip-path:inset(100% 0 0 0);filter:blur(2px);text-shadow:2px 0 2px #f8f5ed88,-2px 0 2px #f8f5ed55}12%{opacity:1}72%{clip-path:inset(12% 0 0 0);filter:blur(.8px)}100%{opacity:1;clip-path:inset(0);filter:blur(0);text-shadow:none}}
@media(prefers-reduced-motion:reduce){.ip-card.kkonthat .morph-layer>.morph-letter,.ip-card.kkonthat .graffiti-layer{transition:none!important;filter:none!important}.ip-card.kkonthat.name-open .paint-ink{animation:none!important;opacity:1;clip-path:inset(0);filter:none}}
/* Character-specific reveals: sparkle pop, giggle wiggle, aerosol stipple. */
.spark-burst{position:absolute;inset:0;pointer-events:none}.spark-burst>span{position:absolute;left:50%;top:50%;font-size:var(--spark-size);line-height:1;color:#fff7d3;opacity:0;transform:translate(-50%,-50%) scale(0)}
.ip-card.cele.name-open .spark-burst>span{animation:star-burst .8s cubic-bezier(.18,.65,.3,1) both;animation-delay:var(--spark-delay)}
@keyframes star-burst{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.4) rotate(15deg)}55%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.15) rotate(100deg)}}
.ip-card.cele.name-open .slide-initials .morph-letter{animation:star-initial .28s ease-in both;animation-delay:0s}
@keyframes star-initial{0%{opacity:1;transform:var(--from)}45%{opacity:1;transform:var(--from) scale(1.08);filter:brightness(2)}100%{opacity:0;transform:var(--from) scale(.55);filter:blur(4px)}}
.ip-card.cele.name-open .morph-layer>.morph-letter{animation:star-name .62s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(.20s + var(--index)*.027s)}
@keyframes star-name{0%{opacity:0;transform:var(--to) translateY(20px) scale(.3);filter:blur(3px)}60%{opacity:1;transform:var(--to) translateY(-5px) scale(1.12);filter:blur(0)}80%{transform:var(--to) scale(.97)}100%{opacity:1;transform:var(--to);filter:none}}
.ip-card.cele.motion-used:not(.name-open) .morph-layer>.morph-letter{animation:star-fade .2s ease-out both;animation-delay:0s}.ip-card.cele.motion-used:not(.name-open) .slide-initials .morph-letter{animation:star-return .35s ease-out both;animation-delay:.08s}
@keyframes star-fade{from{opacity:1;transform:var(--to)}to{opacity:0;transform:var(--to) scale(.7)}}@keyframes star-return{from{opacity:0;transform:var(--from) scale(.8)}to{opacity:1;transform:var(--from)}}
.ip-card.figgles.name-open .morph-letter{animation:giggle .95s ease-in-out both;animation-delay:calc(var(--index)*.065s);transition:none}
@keyframes giggle{0%{opacity:var(--rest-opacity);transform:var(--from)}22%{opacity:1;transform:var(--to) translateY(16px) rotate(-13deg) scale(1.12,.78)}40%{transform:var(--to) translateY(-15px) rotate(12deg) scale(.92,1.12)}56%{transform:var(--to) translateY(5px) rotate(-10deg) scale(1.08,.9)}70%{transform:var(--to) translateY(-7px) rotate(7deg)}84%{transform:var(--to) translateY(2px) rotate(-4deg)}100%{opacity:1;transform:var(--to)}}
.spray-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity .2s}.ip-card.kkonthat.name-open .spray-canvas{opacity:1}.ip-card.kkonthat .graffiti-layer{display:none}
@media(prefers-reduced-motion:reduce){.spark-burst,.spray-canvas{display:none}.ip-card.kkonthat .graffiti-layer{display:block}.ip-card.figgles.name-open .morph-letter{animation:none;opacity:1;transform:var(--to)}}
/* A single black star detonates, then its fragments burst again. */
.spark-burst>span{color:#141414}.spark-burst{z-index:2}
.ip-card.cele.name-open .spark-burst>.burst-core{animation:central-star .48s cubic-bezier(.2,.7,.25,1) both;animation-delay:0s}
.ip-card.cele.name-open .spark-burst>.burst-primary{animation:primary-stars .58s ease-out both;animation-delay:var(--spark-delay)}
.ip-card.cele.name-open .spark-burst>.burst-fragment{animation:secondary-stars .48s ease-out both;animation-delay:var(--spark-delay)}
@keyframes central-star{0%{opacity:0;transform:translate(-50%,-50%) scale(.08) rotate(-20deg)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(0deg)}52%{opacity:1;transform:translate(-50%,-50%) scale(.9) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35) rotate(25deg)}}
@keyframes primary-stars{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1}65%{opacity:1;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.15) rotate(55deg)}100%{opacity:0;transform:translate(calc(-50% + var(--ex)),calc(-50% + var(--ey))) scale(.05) rotate(110deg)}}
@keyframes secondary-stars{0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.2)}25%{opacity:1;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(1.4)}100%{opacity:0;transform:translate(calc(-50% + var(--ex)),calc(-50% + var(--ey))) scale(.1) rotate(120deg)}}
.ip-card.cele.name-open .morph-layer>.morph-letter{animation-delay:calc(.38s + var(--index)*.023s)}

/* Shorter handoff: the colour ribbons enter while the IP sentences leave. */
@media(prefers-reduced-motion:no-preference){.scroll-story{height:205svh}.color-chapter{height:155svh}.color-chapter{margin-top:0}@media(max-width:600px){.scroll-story{height:215svh}.color-chapter{height:150svh}.color-chapter{margin-top:0}}}

/* IP identity palette; source Mamotori logo: Artboard 3 (#3DB0B9). */
:root{--mamotori-key:#3db0b9;--kkonthat-key:#a399cb}
.story-stage .mamotori .icon-shape,.flying-icon.mamotori,.icon-slot>.mamotori{background:var(--mamotori-key)}
.story-stage .kkonthat .icon-shape,.flying-icon.kkonthat,.icon-slot>.kkonthat{background:var(--kkonthat-key)}
.story-line{display:grid;grid-template-columns:auto auto;column-gap:.19em;row-gap:6px;font-size:clamp(28px,4.7vw,76px);line-height:1.03}
.story-line .story-tagline{grid-column:1 / -1;grid-row:1;font-size:clamp(13px,1.15vw,18px);font-weight:600;letter-spacing:0;text-align:center;line-height:1.3}
.story-line .icon-slot{grid-column:1;grid-row:2}
.story-line strong{grid-column:2;grid-row:2}
.story-lines{gap:20px}.story-eyebrow{margin-bottom:26px}.story-closing{margin-top:27px}
@media(max-width:600px){.story-line{font-size:7vw;row-gap:5px}.story-line .story-tagline{font-size:12px}.story-lines{gap:24px}.story-eyebrow{margin-bottom:24px}.story-closing{margin-top:24px}}

/* Restore the original sentence rows: phrase, icon, name. */
.story-line{display:flex;align-items:center;gap:.17em;font-size:clamp(22px,4.6vw,80px);line-height:1.18;white-space:nowrap}
.story-line .story-tagline{font:inherit;letter-spacing:inherit;line-height:inherit}.story-lines{gap:16px}.story-eyebrow{margin-bottom:46px}.story-closing{margin-top:42px}
@media(max-width:600px){.story-line{font-size:5vw;gap:.15em}.story-line .story-tagline{font-size:inherit}.story-lines{gap:26px}.story-eyebrow{margin-bottom:38px}.story-closing{margin-top:38px}}
/* CG launches as a single mark, crackles, then becomes a star constellation. */
.ip-card.cele .slide-initials{transform-origin:50% 50%}
.ip-card.cele.name-open .slide-initials{animation:cg-rocket .76s linear both}
.ip-card.cele.name-open .slide-initials .morph-letter{animation:none;opacity:1;transform:var(--from);filter:none}
@keyframes cg-rocket{0%{transform:translateY(0) scale(1);opacity:1}12%{transform:translateY(8px) scale(1.06,.94)}38%{transform:translate(2px,calc(var(--rocket-rise)*.55)) scale(.42)}55%{transform:translate(-2px,var(--rocket-rise)) scale(.12)}62%{transform:translate(2px,calc(var(--rocket-rise) - 2px)) scale(.09)}69%{transform:translate(-2px,var(--rocket-rise)) scale(.12)}77%{transform:translate(1px,calc(var(--rocket-rise) - 1px)) scale(.08)}90%{transform:translate(-1px,var(--rocket-rise)) scale(.1);opacity:1}91%,100%{transform:translateY(var(--rocket-rise)) scale(0);opacity:0}}
.ip-card.cele .spark-burst>span{top:28%}
.ip-card.cele.name-open .spark-burst>.burst-core{animation-delay:.68s;animation-duration:.44s}
.ip-card.cele.name-open .spark-burst>.burst-primary{animation-delay:calc(.68s + var(--spark-delay))}
.ip-card.cele.name-open .spark-burst>.burst-fragment{animation-delay:calc(.68s + var(--spark-delay))}
.ip-card.cele.name-open .morph-layer>.morph-letter{animation:cg-star-letter .65s cubic-bezier(.2,.8,.25,1) both;animation-delay:calc(1.03s + var(--index)*.028s)}
.ip-card.cele .morph-layer>.morph-letter:after{content:'✦';position:absolute;left:0;top:0;font-family:Arial,sans-serif;line-height:1;color:#141414;opacity:0}
.ip-card.cele.name-open .morph-layer>.morph-letter:after{animation:cg-letter-star .65s linear both;animation-delay:calc(1.03s + var(--index)*.028s)}
@keyframes cg-star-letter{0%{opacity:0;color:transparent;transform:var(--rocket-origin)}1%{opacity:1;color:transparent}55%{color:transparent;transform:var(--to) translateY(-7px) scale(.65) rotate(-15deg)}69%{color:transparent}70%{color:#141414;transform:var(--to) translateY(-4px) scale(.8)}88%{color:#141414;transform:var(--to) scale(1.08)}100%{opacity:1;color:#141414;transform:var(--to)}}
@keyframes cg-letter-star{0%{opacity:0;transform:rotate(0)}1%,69%{opacity:1;transform:rotate(90deg)}70%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.ip-card.cele.name-open .slide-initials{display:none}.ip-card.cele.name-open .morph-layer>.morph-letter{animation:none;opacity:1;color:#141414;transform:var(--to)}.ip-card.cele .morph-letter:after{display:none}}

/* Keep the complete stage comfortably inside a wide viewport. */
.intro,.scroll-story{max-width:1200px;margin-left:auto;margin-right:auto}
.intro h1{font-size:clamp(65px,8.4vw,104px)}
.ip-collection{max-width:1200px}
.story-stage:before{inset:0 auto 0 50%;width:100vw;transform:translateX(-50%)}
.story-line{font-size:clamp(22px,4.6vw,58px)}
@media(max-width:600px){.intro h1{font-size:clamp(40px,10.3vw,64px)}.story-line{font-size:5vw}}
/* The two initials round into separate, visible rising firework seeds. */
.cg-launch-piece{position:absolute;left:0;top:0;width:100px;height:100px;font:900 100px/1 Inter,Arial,sans-serif;letter-spacing:0;transform-origin:0 0;transform:var(--from);color:#141414;border-radius:0}
.ip-card.cele.name-open .slide-initials{animation:none;transform:none;opacity:1}
.ip-card.cele.name-open .cg-launch-piece{animation:cg-orbit-launch 1.25s ease-in-out both;animation-delay:calc(var(--order)*.07s)}
@keyframes cg-orbit-launch{0%,10%{transform:var(--from);color:#141414;background:transparent;border-radius:0;opacity:1}28%{transform:var(--orb-start);color:transparent;background:#141414;border-radius:50%;opacity:1}70%{transform:var(--orb-top);color:transparent;background:#141414;border-radius:50%}78%{transform:var(--orb-top) translateX(-15px)}85%{transform:var(--orb-top) translateX(15px) scale(.85)}94%{transform:var(--orb-top) translateX(-8px) scale(.7);opacity:1}100%{transform:var(--orb-top) scale(0);color:transparent;background:#141414;border-radius:50%;opacity:0}}
.ip-card.cele.name-open .spark-burst>.burst-core{animation-delay:1.18s}
.ip-card.cele.name-open .spark-burst>.burst-primary,.ip-card.cele.name-open .spark-burst>.burst-fragment{animation-delay:calc(1.18s + var(--spark-delay))}
.ip-card.cele.name-open .morph-layer>.morph-letter,.ip-card.cele.name-open .morph-layer>.morph-letter:after{animation-delay:calc(1.53s + var(--index)*.028s)}

/* Supplied IP silhouettes: transparent artwork replaces the geometric tiles. */
.story-stage .icon-shape,.story-stage .ip-card:hover .icon-shape,.story-stage .ip-card:focus-visible .icon-shape,.icon-slot>.icon-shape{background:transparent!important;border-radius:0;overflow:visible}
.official-symbol{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;pointer-events:none;user-select:none}
.story-stage .mock-mark{display:none}
.ip-card.cele.morph-ready .icon-shape>.official-symbol,.ip-card.mamotori.morph-ready .icon-shape>.official-symbol{visibility:hidden}
.cg-launch-piece{inset:0;width:100%;height:100%;transform:none;transform-origin:50% 50%;font-size:0}
.ip-card.cele.name-open .cg-launch-piece{animation:official-cg-launch 1.25s ease-in-out both}
@keyframes official-cg-launch{0%,10%{transform:none;opacity:1}30%{transform:translateY(5%) scale(.8)}70%{transform:translateY(-25%) scale(.14)}80%{transform:translate(-1%,-26%) scale(.12)}90%{transform:translate(1%,-26%) scale(.1);opacity:1}100%{transform:translateY(-26%) scale(0);opacity:0}}
.ip-card.figgles:not(.name-open) .morph-layer>.morph-letter,.ip-card.kkonthat:not(.name-open) .morph-layer>.morph-letter{opacity:0}
.ip-card.figgles.name-open .icon-shape>.official-symbol{animation:official-giggle .65s ease-in-out both}
.ip-card.kkonthat.name-open .icon-shape>.official-symbol{animation:official-spray-away .35s ease-in both}
@keyframes official-giggle{0%{transform:none;opacity:1}25%{transform:rotate(-9deg) scale(1.04,.9)}50%{transform:rotate(9deg) scale(.9,1.04)}100%{transform:translateY(15%) scale(.15);opacity:0}}
@keyframes official-spray-away{to{transform:scale(.8);opacity:0;filter:blur(8px)}}
.ip-card.name-open .morph-layer>.morph-letter{color:var(--ip-key)!important}
.ip-card.cele.name-open .morph-layer>.morph-letter{color:var(--ip-key)!important}
.ip-card.cele .spark-burst{filter:drop-shadow(0 0 1px #ef7fba) drop-shadow(0 0 4px #ef7fba)}
.ip-card.cele .morph-letter:after{color:var(--ip-key)!important}
.flying-icon .official-symbol,.icon-slot .official-symbol{opacity:1;animation:none}
@media(prefers-reduced-motion:reduce){.ip-card .icon-shape>.official-symbol{visibility:visible!important;opacity:1}.ip-card.name-open .icon-shape>.official-symbol{opacity:0}.ip-card .slide-initials,.ip-card .chip-source{display:none}.ip-card.name-open .morph-layer>.morph-letter{opacity:1;transform:var(--to)}}
/* Resting artwork stays in one piece, avoiding seams between animated fragments. */
.ip-card.cele.morph-ready:not(.name-open) .icon-shape>.official-symbol,.ip-card.mamotori.morph-ready:not(.name-open) .icon-shape>.official-symbol{visibility:inherit}
.ip-card.cele:not(.name-open) .slide-initials,.ip-card.mamotori:not(.name-open) .chip-source{visibility:hidden}

/* Match the reveal typography to each supplied SVG. */
.ip-card.mamotori{--ip-key:#3db0b9}.ip-card.cele{--ip-key:#ea5d92}.ip-card.kkonthat{--ip-key:#916bce}.ip-card.figgles{--ip-key:#e61c65}
.kkonthat .official-symbol{inset:0;width:100%;height:100%}
.ip-card.kkonthat .paint-letter{color:var(--ip-key)}

.morph-letter:after{font-family:Arial,sans-serif}
.ip-card.cele .morph-layer>.morph-letter:after{content:'';width:1em;height:1em;background:currentColor;clip-path:polygon(50% 0,64% 35%,100% 50%,64% 65%,50% 100%,36% 65%,0 50%,36% 35%)}

/* Keep all four entry icons inside a phone's first visible screen. */
@media(max-width:600px){
 .universe{padding-top:14px}
 .intro .description{margin:16px 0 14px}
 .ip-collection{width:min(74vw,calc(100svh - 340px));max-width:320px;gap:12px;margin-top:24px;margin-inline:auto}
}
@media(max-width:600px) and (max-height:700px){
 .universe-header{padding-block:15px}
 .intro h1{font-size:clamp(34px,9.5vw,52px)}
 .intro .description{margin:12px 0 10px}
 .ip-collection{margin-top:18px;width:min(68vw,calc(100svh - 300px))}
}