:root{
  --ink:#1d1a3a; --pink:#ff4fa3; --yellow:#ffd83a; --sky:#35b6ff; --lime:#8fe03a; --orange:#ff8f1f; --violet:#8b5cff; --cream:#fff8ec;
  --ui:"M PLUS Rounded 1c", "Arial Rounded MT Bold", system-ui, sans-serif; --pop:"Mochiy Pop One", "M PLUS Rounded 1c", sans-serif;
  color-scheme: light;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:#bfe6ff;overscroll-behavior:none}
body{font-family:var(--ui);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:999px}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none;cursor:grab}
#gl:active{cursor:grabbing}
kbd{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;background:#fff;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);font:800 14px/1 var(--ui);color:var(--ink)}

/* ---------- loading: a little katamari rolling in place ---------- */
#load{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:radial-gradient(circle at 50% 40%,#fff6fb,#ffd6ec 45%,#bfe6ff);transition:opacity .8s}
#load.gone{opacity:0;pointer-events:none}
.ld-ball{position:relative;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffe7f5,#f58ec8 70%);border:3px solid var(--ink);animation:ldspin 1.1s linear infinite}
.ld-ball i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;border:3px solid var(--ink);background:var(--c)}
.ld-ball i:nth-child(1){--c:#ff6fb1;transform:rotate(0deg) translateY(-40px)}
.ld-ball i:nth-child(2){--c:#ffd23f;transform:rotate(60deg) translateY(-40px)}
.ld-ball i:nth-child(3){--c:#58d0ff;transform:rotate(120deg) translateY(-40px)}
.ld-ball i:nth-child(4){--c:#8be04e;transform:rotate(180deg) translateY(-40px)}
.ld-ball i:nth-child(5){--c:#b28dff;transform:rotate(240deg) translateY(-40px)}
.ld-ball i:nth-child(6){--c:#ff9f43;transform:rotate(300deg) translateY(-40px)}
@keyframes ldspin{to{transform:rotate(360deg)}}

/* ---------- title ---------- */
#title{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(12px,2.4vh,26px);padding:max(5vh,20px) 16px 24px;transition:opacity .6s,transform .7s cubic-bezier(.5,-0.4,.7,1);pointer-events:none;background:radial-gradient(ellipse 55% 34% at 50% 22%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%)}
#title>*{pointer-events:auto}
#title.out{opacity:0;transform:translateY(-8vh) scale(1.08)}
#title.night{background:radial-gradient(ellipse 60% 46% at 50% 44%,rgba(20,10,60,.35),rgba(20,10,60,0) 70%)}
#title.night .ctl{display:none}
.logo{display:flex;flex-direction:column;align-items:center;font:400 clamp(50px,9.6vw,128px)/.9 var(--pop);letter-spacing:.01em;text-align:center}
.logo .row{display:flex;justify-content:center}
.logo .row i{font-style:normal;display:inline-block;padding:0 .02em;color:var(--c);-webkit-text-stroke:.12em var(--ink);paint-order:stroke fill;text-shadow:0 .07em 0 var(--ink),0 .1em .08em rgba(29,26,58,.35);animation:bob 2.6s ease-in-out infinite;animation-delay:calc(var(--n) * -.19s);transform-origin:50% 80%}
.logo .row + .row{margin-top:-.04em}
.logo .row i.gap{width:.28em;animation:none}
.logo .row i:nth-child(1){--c:#ff4d6d;--n:0;rotate:-6deg}.logo .row i:nth-child(2){--c:#ffb21f;--n:1;rotate:4deg}.logo .row i:nth-child(3){--c:#ffe03a;--n:2;rotate:-3deg}.logo .row i:nth-child(4){--c:#6ee04a;--n:3;rotate:6deg}.logo .row i:nth-child(5){--c:#35c9ff;--n:4;rotate:-5deg}.logo .row i:nth-child(6){--c:#8b6bff;--n:5;rotate:3deg}.logo .row i:nth-child(7){--c:#ff6fd2;--n:6;rotate:-4deg}
.logo .row + .row i:nth-child(1){--c:#35c9ff}.logo .row + .row i:nth-child(2){--c:#8b6bff}.logo .row + .row i:nth-child(3){--c:#ff6fd2}.logo .row + .row i:nth-child(4){--c:#ff4d6d}.logo .row + .row i:nth-child(5){--c:#ffb21f}.logo .row + .row i:nth-child(6){--c:#ffe03a}.logo .row + .row i:nth-child(7){--c:#6ee04a}
.logo{position:relative}
.twinkle{position:absolute;inset:-.3em -.6em;pointer-events:none}
.twinkle i{position:absolute;width:.34em;height:.34em;background:var(--c,#ffe03a);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:tw 1.8s ease-in-out infinite;filter:drop-shadow(0 .03em 0 var(--ink))}
.twinkle i:nth-child(1){left:2%;top:8%;--c:#ffe03a;animation-delay:-.2s}
.twinkle i:nth-child(2){right:4%;top:0;--c:#ff6fd2;animation-delay:-.9s;width:.26em;height:.26em}
.twinkle i:nth-child(3){left:-2%;bottom:18%;--c:#35c9ff;animation-delay:-1.3s;width:.22em;height:.22em}
.twinkle i:nth-child(4){right:-3%;bottom:30%;--c:#6ee04a;animation-delay:-.5s}
.twinkle i:nth-child(5){left:46%;top:-12%;--c:#ffb21f;animation-delay:-1.6s;width:.2em;height:.2em}
.twinkle i:nth-child(6){right:30%;bottom:-8%;--c:#8b6bff;animation-delay:-.1s;width:.24em;height:.24em}
@keyframes tw{0%,100%{transform:scale(.6) rotate(0deg);opacity:.5}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-.06em) scale(1.03,.97)}}
.start{font:400 clamp(24px,3.4vw,36px)/1 var(--pop);padding:.55em 1.6em .6em;border-radius:999px;background:linear-gradient(#fff,#ffe9f5);border:4px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 12px 24px rgba(29,26,58,.25);letter-spacing:.04em;animation:pulse 1.6s ease-in-out infinite}
.start:hover{background:linear-gradient(#fffbe0,#ffe05a)}
.start:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
@keyframes pulse{50%{scale:1.05}}
.tnav{display:flex;gap:12px}
.pill{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 var(--ui);padding:10px 16px 11px;border-radius:999px;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);white-space:nowrap}
.pill svg{width:17px;height:17px}
.pill:hover{background:#fffbe0}
.pill:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ctl{display:flex;gap:18px;align-items:center;opacity:.9;margin-top:4px}
.ctl .keys,#hint .keys{display:grid;grid-template-columns:repeat(3,28px);grid-template-rows:28px 28px;gap:4px}
.ctl .keys kbd:first-child,#hint .keys kbd:first-child{grid-column:2}
.ctl .keys kbd:nth-child(2),#hint .keys kbd:nth-child(2){grid-row:2;grid-column:1}
.ctl .keys kbd:nth-child(3),#hint .keys kbd:nth-child(3){grid-row:2;grid-column:2}
.ctl .keys kbd:nth-child(4),#hint .keys kbd:nth-child(4){grid-row:2;grid-column:3}
.drag{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.drag svg{width:36px;height:36px;animation:dragit 1.8s ease-in-out infinite}
@keyframes dragit{50%{transform:translate(-3px,4px)}}
.touch .ctl .keys,.touch #hint .keys{display:none}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;opacity:0;transition:opacity .6s}
#hud.on{opacity:1}
#hud>*{pointer-events:auto}
#size{position:absolute;left:max(14px,env(safe-area-inset-left));top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:10px;pointer-events:none}
#sizeCv{width:92px;height:92px;filter:drop-shadow(0 4px 0 rgba(29,26,58,.25))}
#sizeTxt{font:400 22px/1 var(--pop);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;text-shadow:0 3px 0 var(--ink);white-space:nowrap}
#sizeTxt b{font-weight:400;font-size:1.55em}
#sizeTxt i{font-style:normal;font-size:.8em;margin:0 .06em 0 .04em;color:var(--yellow)}
#size.up #sizeCv{animation:sizeup .7s cubic-bezier(.3,1.8,.5,1)}
#size.up #sizeTxt{animation:sizeup .7s cubic-bezier(.3,1.8,.5,1) .05s}
@keyframes sizeup{0%{transform:scale(1)}30%{transform:scale(1.28) rotate(-4deg)}100%{transform:scale(1)}}
#topR{position:absolute;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:flex;gap:10px;align-items:center}
.icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.icon svg{width:24px;height:24px}
.icon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
#bSound .w1,#bSound .w2{display:none}
#bSound.on .w1,#bSound.on .w2{display:inline}
#bSound.on .x{display:none}
#bSound.on{background:var(--yellow)}
#pick{position:absolute;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:0;text-align:left;max-width:min(560px,calc(100vw - 24px));transition:opacity .4s,transform .4s}
#pick canvas{position:relative;z-index:2;width:118px;height:118px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0,#fff 45%,color-mix(in srgb,var(--pc) 35%,#fff) 70%,var(--pc) 100%);border:4px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
#pick .pk-txt{display:flex;flex-direction:column;gap:3px;margin-left:-22px;padding:12px 18px 13px 34px;background:#fff;border:3px solid var(--ink);border-radius:0 22px 22px 0;box-shadow:0 5px 0 var(--ink);min-width:0}
#pick .pk-name{font:400 22px/1.05 var(--pop);color:var(--ink);letter-spacing:.01em}
#pick .pk-line{font:700 14px/1.3 var(--ui);color:#4b4670;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#pick .pk-line::before{content:"\201C"}#pick .pk-line::after{content:"\201D"}
#pick .pk-line.from{font-style:italic;font-weight:600}#pick .pk-line.from::before,#pick .pk-line.from::after{content:none}
#pick .pk-proj{display:flex;align-items:baseline;gap:8px;margin-top:3px;font:800 14px/1.1 var(--ui)}
#pick .pk-t{font-style:normal;color:var(--ink);background:color-mix(in srgb,var(--pc) 22%,#fff);padding:3px 8px 4px;border-radius:8px}
#pick .pk-c{font-size:11px;letter-spacing:.12em;color:#8a85a8}
#pick .pk-proj em{font-style:normal;color:var(--pc);font-size:18px;line-height:0;margin-left:auto}
#pick:hover .pk-txt{background:#fffbe6}
#pick.pop{animation:pickpop .45s cubic-bezier(.3,1.7,.5,1)}
@keyframes pickpop{0%{transform:scale(.6) translateY(20px);opacity:.3}100%{transform:none;opacity:1}}
#pick.dim{opacity:.72;transform:scale(.9);transform-origin:0 100%}
#pick.dim:hover,#pick.dim:focus-visible{opacity:1;transform:none}
#hint{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:16px;align-items:center;opacity:0;transition:opacity .8s;pointer-events:none}
#hint.on{opacity:.95}
#hint.gone{opacity:0}
#stick{position:fixed;z-index:11;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:3px dashed rgba(29,26,58,.55);background:rgba(255,255,255,.25);pointer-events:none}
#stick i{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 38% 34%,#ffe7f5,#f58ec8 72%);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
body.overlay #hud,body.overlay #stick{visibility:hidden}

/* ---------- Collection ---------- */
#coll{position:fixed;inset:0;z-index:30;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;user-select:text;background:#6fd0ff radial-gradient(circle,rgba(255,255,255,.45) 0 3px,transparent 4px) 0 0/34px 34px;-webkit-overflow-scrolling:touch}
.coll-in{max-width:1240px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px 40px}
#coll header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;margin:0 -16px;padding:10px 16px 18px;background:linear-gradient(#6fd0ff 72%,rgba(111,208,255,0))}
#coll h2{font:400 clamp(30px,5vw,52px)/1 var(--pop);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 5px 0 var(--ink)}
#collGrid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:10px 10px 14px;border-radius:22px;background:#fff;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);text-align:center;transition:transform .15s}
.tile canvas{width:100%;max-width:170px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 46%,color-mix(in srgb,var(--pc) 30%,#fff) 72%,var(--pc));margin-bottom:8px}
.tile b{font:400 16px/1.15 var(--pop)}
.tile small{margin-top:4px;font:800 11px/1.2 var(--ui);letter-spacing:.12em;color:#8a85a8}
.tile:hover{transform:translateY(-4px) rotate(-1deg);background:#fffbe6}
.tile.about .me{display:grid;place-items:center;width:100%;max-width:170px;aspect-ratio:1;border-radius:50%;margin-bottom:8px;font:400 22px/1.05 var(--pop);color:#fff;-webkit-text-stroke:5px var(--ink);paint-order:stroke fill;background:conic-gradient(#ff4d6d,#ffb21f,#ffe03a,#6ee04a,#35c9ff,#8b6bff,#ff6fd2,#ff4d6d)}

/* ---------- a project's page: the cosmos ---------- */
#case{position:fixed;inset:0;z-index:40;color:#fff;user-select:text;touch-action:pan-y}
.cs-sky{position:absolute;inset:0;background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.9) 0 1px,transparent 2px) 0 0/120px 120px,
  radial-gradient(circle at 70% 80%,rgba(255,255,255,.7) 0 1px,transparent 2px) 0 0/90px 90px,
  radial-gradient(circle at 40% 60%,rgba(255,236,160,.8) 0 1.5px,transparent 2.5px) 0 0/170px 170px,
  radial-gradient(ellipse 80% 60% at 70% 0%,color-mix(in srgb,var(--pc) 45%,transparent),transparent 70%),
  linear-gradient(#140f3d,#2a1766 55%,#3c1f7a)}
.cs-bar{position:absolute;left:0;right:0;top:0;z-index:3;display:flex;justify-content:space-between;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));pointer-events:none}
.cs-bar>*{pointer-events:auto}
.cs-nav{display:flex;gap:10px}
.cs-bar .icon{color:var(--ink)}
.cs-scroll{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:max(70px,calc(env(safe-area-inset-top) + 60px)) 16px 60px}
.cs-hero{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,380px) 1fr;gap:clamp(16px,4vw,48px);align-items:center}
.cs-halo{position:relative;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0 38%,rgba(255,255,255,.25) 56%,transparent 70%)}
.cs-halo::before{content:"";position:absolute;inset:-6%;border-radius:50%;background:conic-gradient(from 0deg,#ff4d6d,#ffb21f,#ffe03a,#6ee04a,#35c9ff,#8b6bff,#ff6fd2,#ff4d6d);-webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 66%,transparent 67%);mask:radial-gradient(circle,transparent 62%,#000 63%,#000 66%,transparent 67%);animation:ldspin 30s linear infinite;opacity:.9}
.cs-halo canvas{position:relative;width:100%;height:100%;display:block}
.cs-client{font:800 13px/1 var(--ui);letter-spacing:.2em;color:var(--yellow);text-transform:uppercase;margin-bottom:12px}
#csTitle{font:400 clamp(34px,6vw,74px)/1 var(--pop);color:#fff;-webkit-text-stroke:.12em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 var(--pc),0 .14em 0 var(--ink);margin-bottom:18px;overflow-wrap:anywhere}
.cs-desc{font:500 clamp(16px,1.8vw,20px)/1.55 var(--ui);color:#efeaff;max-width:60ch}
.cs-toys-wrap{max-width:1120px;margin:28px auto 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.cs-toys{list-style:none;display:flex;gap:12px;padding:6px 2px 14px}
.cs-toys li{flex:none;width:168px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 10px 12px;border-radius:20px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18)}
.cs-toys canvas{width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 48%,color-mix(in srgb,var(--pc) 40%,#fff) 74%,var(--pc))}
.cs-toys b{margin-top:8px;font:400 14px/1.15 var(--pop);color:#fff}
.cs-toys q{margin-top:5px;font:600 12.5px/1.35 var(--ui);color:#d9d2ff}
.cs-toys q::before{content:"\201C"}.cs-toys q::after{content:"\201D"}
.cs-toys q.from{font-style:italic}.cs-toys q.from::before,.cs-toys q.from::after{content:none}
#csWork{max-width:1120px;margin:18px auto 0}
.cs-credits{max-width:1120px;margin:26px auto 0;font:600 13px/1.6 var(--ui);color:#b9b0e6;letter-spacing:.02em}
/* the real work, from the shared renderer */
.cs-sec{margin-top:26px}
.cs-h{font:400 clamp(18px,2.3vw,24px)/1.2 var(--pop);color:var(--yellow);margin-bottom:6px}
.cs-p{font:500 16px/1.55 var(--ui);color:#e6e0ff;max-width:70ch;margin-bottom:12px}
.cs-p a{color:var(--yellow)}
.cs-films{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.cs-film{margin:0}
.cs-film.is-tall{max-width:320px}
.cs-films:has(.is-tall){grid-template-columns:repeat(auto-fill,minmax(180px,240px))}
.cs-frame{position:relative;display:block;width:100%;border-radius:18px;overflow:hidden;background:#000;border:3px solid #fff;box-shadow:0 6px 0 var(--pc),0 12px 26px rgba(0,0,0,.35)}
.cs-frame img{width:100%;height:100%;object-fit:cover;display:block}
.cs-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cs-glyph{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px;border-radius:50%;background:#fff;border:4px solid var(--ink);box-shadow:0 4px 0 var(--ink);transition:transform .15s}
.cs-glyph::after{content:"";position:absolute;left:25px;top:18px;border-left:20px solid var(--ink);border-top:12px solid transparent;border-bottom:12px solid transparent}
button.cs-frame:hover .cs-glyph{transform:scale(1.12)}
.cs-cap{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font:700 14px/1.3 var(--ui);color:#fff}
.cs-dur{color:#b9b0e6;font-weight:600}
.cs-imgs{display:grid;gap:14px;margin-top:6px}
.cs-full{grid-template-columns:1fr}
.cs-row-2{grid-template-columns:repeat(2,1fr)}
.cs-row-3{grid-template-columns:repeat(3,1fr)}
.cs-row-4{grid-template-columns:repeat(4,1fr)}
.cs-img{margin:0;border-radius:16px;overflow:hidden;background:#fff;border:3px solid #fff;box-shadow:0 6px 0 var(--pc)}
.cs-img img{width:100%;height:auto;display:block}
.cs-audio{list-style:none;display:grid;gap:10px;max-width:760px}
.cs-track{display:grid;grid-template-columns:48px 34px 1fr;grid-template-rows:auto 6px;column-gap:10px;align-items:center;padding:10px 14px;border-radius:18px;background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 var(--pc)}
.cs-ap{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);position:relative}
.cs-ap::after{content:"";position:absolute;left:16px;top:11px;border-left:16px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent}
.cs-track.is-on .cs-ap::after{left:13px;top:12px;width:6px;height:18px;border:0;border-left:6px solid var(--ink);border-right:6px solid var(--ink);box-sizing:content-box;width:6px}
.cs-n{font:800 13px/1 var(--ui);color:#8a85a8}
.cs-at{font:800 15px/1.25 var(--ui)}
.cs-bar-x,.cs-track .cs-bar{grid-column:2/4;height:6px;border-radius:3px;background:#ece8f7;overflow:hidden}
.cs-track .cs-bar i{display:block;height:100%;width:0;background:var(--pc)}
.about .xp{list-style:none;display:grid;gap:12px;max-width:760px}
.about .xp li{display:grid;grid-template-columns:auto 1fr;column-gap:10px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.16)}
.about .xp b{font:400 16px/1.3 var(--pop);color:#fff}
.about .xp span{font:800 12px/1.9 var(--ui);letter-spacing:.14em;color:var(--yellow);text-align:right}
.about .xp small{grid-column:1/3;font:500 14px/1.5 var(--ui);color:#d9d2ff;margin-top:4px}
#case.is-about .cs-halo::before{animation-duration:12s}

@media (max-width:760px){
  .cs-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
  .cs-halo{width:min(62vw,300px)}
  .cs-desc{margin:0 auto}
  .cs-films{grid-template-columns:1fr}
  .cs-row-3,.cs-row-4{grid-template-columns:repeat(2,1fr)}
  #sizeCv{width:68px;height:68px}
  #sizeTxt{font-size:17px;-webkit-text-stroke-width:4px}
  #pick canvas{width:88px;height:88px}
  #pick .pk-txt{padding:9px 12px 10px 28px}
  #pick .pk-name{font-size:17px}
  #pick .pk-line{font-size:12.5px}
  #topR .pill{font-size:0;gap:0;padding:0;width:46px;height:46px;justify-content:center}
  #topR .pill svg{width:22px;height:22px}
  #collGrid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tile b{font-size:14px}
  .ctl .keys{display:none}
}
@media (prefers-reduced-motion:reduce){
  .logo i,.start,.ld-ball,.cs-halo::before,.drag svg,.twinkle i{animation:none}
}

/* ---------- the publisher mark (loading screen and title, where a game puts its studio) ---------- */
.pub{display:inline-block;font:400 15px/1 "Alfa Slab One",serif;letter-spacing:.16em;color:#fff;background:#e2231a;padding:.5em 1em .45em 1.1em;border-radius:.45em;border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);transform:skewX(-9deg);white-space:nowrap}
#title .pub{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%) skewX(-9deg);margin:0;pointer-events:none}
#title.night .pub{background:#b8182a}

/* ---------- the mission, at the start of play ---------- */
#mission{position:absolute;left:50%;top:max(96px,calc(env(safe-area-inset-top) + 88px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:16px 26px 17px;background:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink),0 14px 30px rgba(29,26,58,.25);text-align:center;pointer-events:none;overflow:hidden}
#mission::before{content:"";position:absolute;left:0;right:0;top:0;height:7px;background:linear-gradient(90deg,#ff4d6d,#ffb21f,#ffe03a,#6ee04a,#35c9ff,#8b6bff,#ff6fd2)}
#mission .ms-go{font:400 clamp(26px,4.4vw,38px)/1.05 var(--pop);white-space:nowrap}
#mission .ms-go i{font-style:normal;display:inline-block;color:var(--c,#ff4d6d);-webkit-text-stroke:.14em var(--ink);paint-order:stroke fill;text-shadow:0 .08em 0 var(--ink)}
#mission .ms-go i:nth-child(6n+1){--c:#ff4d6d}#mission .ms-go i:nth-child(6n+2){--c:#ffb21f}#mission .ms-go i:nth-child(6n+3){--c:#ffe03a}#mission .ms-go i:nth-child(6n+4){--c:#6ee04a}#mission .ms-go i:nth-child(6n+5){--c:#35c9ff}#mission .ms-go i:nth-child(6n){--c:#8b6bff}
#mission span{font:700 16px/1.35 var(--ui);color:#4b4670}
#mission.in{animation:msIn .6s cubic-bezier(.3,1.7,.5,1)}
#mission.in .ms-go i{animation:hop .5s cubic-bezier(.3,1.8,.5,1) backwards}
#mission.in .ms-go i:nth-child(n){animation-delay:calc(var(--k,0) * 45ms)}
#mission.out{animation:msOut .45s ease-in forwards}
@keyframes msIn{0%{transform:translateX(-50%) translateY(-30px) scale(.6);opacity:0}100%{transform:translateX(-50%);opacity:1}}
@keyframes msOut{to{transform:translateX(-50%) translateY(-40px) scale(.8);opacity:0}}
@keyframes hop{0%{transform:translateY(.4em) scale(.3);opacity:0}100%{transform:none;opacity:1}}

/* ---------- the unlock fanfare ---------- */
#unlock{position:absolute;left:50%;top:clamp(74px,8vh,96px);width:min(470px,calc(100vw - 24px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:3}
#unlock .ul-rays{position:absolute;left:50%;top:84px;width:460px;height:460px;margin:-230px 0 0 -230px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,226,102,.75) 0 9deg,rgba(255,255,255,0) 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 18%,transparent 66%);mask:radial-gradient(circle,#000 18%,transparent 66%);animation:ldspin 9s linear infinite}
#unlockCv{position:relative;width:168px;height:168px;border-radius:50%;background:radial-gradient(circle at 50% 42%,#fff 0 45%,color-mix(in srgb,var(--pc) 40%,#fff) 70%,var(--pc));border:5px solid var(--ink);box-shadow:0 6px 0 var(--ink),0 0 0 9px #fff,0 0 0 12px var(--ink),0 0 50px 20px rgba(255,226,102,.85)}
#unlock .ul-word{position:relative;margin-top:-20px;font:400 clamp(30px,5vw,44px)/1 var(--pop);white-space:nowrap}
#unlock .ul-word i{font-style:normal;display:inline-block;color:var(--c);-webkit-text-stroke:.13em var(--ink);paint-order:stroke fill;text-shadow:0 .09em 0 var(--ink)}
#unlock .ul-word i:nth-child(1){--c:#ff4d6d;--k:0}#unlock .ul-word i:nth-child(2){--c:#ffb21f;--k:1}#unlock .ul-word i:nth-child(3){--c:#ffe03a;--k:2}#unlock .ul-word i:nth-child(4){--c:#6ee04a;--k:3}#unlock .ul-word i:nth-child(5){--c:#35c9ff;--k:4}#unlock .ul-word i:nth-child(6){--c:#8b6bff;--k:5}#unlock .ul-word i:nth-child(7){--c:#ff6fd2;--k:6}#unlock .ul-word i:nth-child(8){--c:#ff4d6d;--k:7}#unlock .ul-word i:nth-child(9){--c:#ffb21f;--k:8}
#unlock .ul-title{position:relative;margin-top:6px;max-width:100%;font:400 clamp(21px,3.4vw,28px)/1.1 var(--pop);color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);text-align:center;overflow-wrap:anywhere}
#unlock .ul-client{position:relative;margin-top:8px;font:800 12px/1 var(--ui);letter-spacing:.2em;color:#fff;background:var(--ink);padding:6px 11px;border-radius:999px}
#unlock .ul-conf{position:absolute;left:50%;top:84px;width:0;height:0}
#unlock .ul-conf i{position:absolute;left:0;top:0;width:11px;height:15px;margin:-7px 0 0 -5px;background:var(--c);border-radius:2px;border:1.5px solid rgba(29,26,58,.5);opacity:0}
#unlock.show{animation:ulIn .55s cubic-bezier(.3,1.6,.5,1)}
#unlock.show .ul-word i{animation:hop .5s cubic-bezier(.3,1.8,.5,1) backwards;animation-delay:calc(.15s + var(--k) * 45ms)}
#unlock.show .ul-conf i{animation:conf 1.25s cubic-bezier(.12,.75,.3,1) forwards}
#unlock.fly{transition:transform .55s cubic-bezier(.55,-.25,.75,1),opacity .55s ease-in;transform:translateX(-50%) translate(var(--fx),var(--fy)) scale(.05);opacity:0}
@keyframes ulIn{0%{transform:translateX(-50%) scale(.2);opacity:0}100%{transform:translateX(-50%);opacity:1}}
@keyframes conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}

/* the pick-up card when it unlocks a project */
#pick .pk-new{position:absolute;z-index:3;left:74px;top:-14px;display:none;font:400 16px/1 var(--pop);color:#fff;background:#ff3d6e;border:3px solid var(--ink);border-radius:10px;padding:5px 9px 6px;transform:rotate(-9deg);box-shadow:0 3px 0 var(--ink)}
#pick.unlocked .pk-new{display:block;animation:stamp .5s cubic-bezier(.3,1.9,.5,1)}
#pick.unlocked canvas{box-shadow:0 5px 0 var(--ink),0 0 0 5px #ffd83a,0 0 34px 10px rgba(255,216,58,.85)}
@keyframes stamp{0%{transform:rotate(-9deg) scale(2.6);opacity:0}100%{transform:rotate(-9deg) scale(1);opacity:1}}

/* the Collection button when there's something new in it */
#bColl{position:relative}
#bColl .newdot{display:none;position:absolute;right:-5px;top:-5px;width:17px;height:17px;border-radius:50%;background:#ff3d6e;border:3px solid var(--ink)}
#bColl.has-new .newdot{display:block;animation:pulse 1.1s ease-in-out infinite}
#bColl.catch{animation:sizeup .6s cubic-bezier(.3,1.8,.5,1)}

/* the Collection: locked slots are silhouettes and question marks, as in Katamari's own collection */
#coll header{flex-wrap:wrap;gap:10px 14px}
#collHint{flex:1 1 320px;max-width:600px;margin:0;font:700 15px/1.35 var(--ui);color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:16px;padding:9px 14px 10px;box-shadow:0 4px 0 var(--ink)}
#collHint b{font:400 17px/1 var(--pop);color:#fff;background:var(--ink);border-radius:50%;display:inline-grid;place-items:center;width:1.35em;height:1.35em;vertical-align:-.12em}
#collClose{margin-left:auto}
.tile .q,.tile .nw{position:absolute;display:none;pointer-events:none}
.tile.locked{background:#efeaf9}
.tile.locked canvas{background:radial-gradient(circle at 50% 42%,#fff 0 40%,#d9d2f0 72%,#bdb3e0)}
.tile.locked b{letter-spacing:.24em;color:#8a85a8}
.tile.locked small{color:#a9a3c6}
.tile.locked .q{display:grid;place-items:center;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);font:400 24px/1 var(--pop);color:var(--ink)}
.tile.locked:hover{background:#fffbe6}
.tile.is-new .nw{display:block;left:6px;top:8px;z-index:2;font:400 15px/1 var(--pop);color:#fff;background:#ff3d6e;border:3px solid var(--ink);border-radius:10px;padding:4px 8px 5px;transform:rotate(-10deg);box-shadow:0 3px 0 var(--ink);animation:stamp .5s cubic-bezier(.3,1.9,.5,1) backwards}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  #unlockCv{width:128px;height:128px}
  #unlock .ul-rays{top:64px;width:340px;height:340px;margin:-170px 0 0 -170px}
  #unlock .ul-conf{top:64px}
  #mission{padding:12px 16px 13px}
  #mission span{font-size:14px}
  #collHint{order:3;flex-basis:100%;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  #unlock .ul-rays,#mission.in,#mission.in .ms-go i,#unlock.show,#unlock.show .ul-word i,#bColl.has-new .newdot,#bColl.catch,.tile.is-new .nw,#pick.unlocked .pk-new{animation:none}
  #unlock .ul-conf{display:none}
  #unlock.fly{transform:translateX(-50%);transition:opacity .4s}
}