:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-bg:#fff7ef;--color-bg-gradient:linear-gradient(150deg, #fff1f8 0%, #eef8ff 45%, #fffbe6 100%);--color-surface:#fff;--color-text:#2c2a4a;--color-muted:#706a95;--color-border:#ffdcee;--color-accent:#ff5da2;--color-accent-2:#3fc1ff;--color-accent-3:#fc3;--color-accent-4:#9b6bff;--color-accent-contrast:#fff;--shadow-soft:0 14px 32px #ff5da229;--shadow-pop:0 6px 0 #2c2a4a1a;--radius-md:22px;--radius-sm:14px;--font-sans:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, -apple-system, sans-serif;--font-display:"M PLUS Rounded 1c", var(--font-sans);--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--content-max:72rem}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-sans);background:var(--color-bg-gradient) fixed;color:var(--color-text);margin:0;line-height:1.6}a{color:var(--color-accent);text-underline-offset:.15em;text-decoration-thickness:1px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:3px solid var(--color-accent-2);outline-offset:2px;border-radius:var(--radius-sm)}.skip-link{left:-9999px;top:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);z-index:100;position:absolute}.skip-link:focus{left:var(--space-4)}.page{min-height:100vh;transition:padding-bottom .2s;position:relative;overflow-x:clip}body.has-game-banner .page{padding-bottom:5.5rem}.sparkle-field{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.sparkle-field__star{opacity:.55;filter:drop-shadow(0 0 6px #ffffffb3);font-size:1.4rem;animation:3.4s ease-in-out infinite sparkle-twinkle;position:absolute}.sparkle-field__star:first-child{animation-delay:0s;top:6%;left:8%}.sparkle-field__star:nth-child(2){font-size:1.8rem;animation-delay:.6s;top:14%;left:82%}.sparkle-field__star:nth-child(3){font-size:1.1rem;animation-delay:1.1s;top:34%;left:46%}.sparkle-field__star:nth-child(4){font-size:1.6rem;animation-delay:1.6s;top:52%;left:12%}.sparkle-field__star:nth-child(5){animation-delay:.3s;top:68%;left:88%}.sparkle-field__star:nth-child(6){font-size:1.2rem;animation-delay:2s;top:78%;left:30%}.sparkle-field__star:nth-child(7){font-size:1rem;animation-delay:2.4s;top:22%;left:65%}.sparkle-field__star:nth-child(8){font-size:1.5rem;animation-delay:1.8s;top:88%;left:60%}@keyframes sparkle-twinkle{0%,to{opacity:.25;transform:scale(.85)rotate(0)}50%{opacity:.85;transform:scale(1.15)rotate(12deg)}}.site-header{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:3px solid var(--color-border);background:#ffffffd9;position:sticky;top:0}.site-header__inner{max-width:var(--content-max);padding:var(--space-4) var(--space-6);justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin:0 auto;display:flex}.brand{align-items:center;gap:var(--space-4);display:flex}.brand__logo{border-radius:var(--radius-sm);border:2px dashed var(--color-accent-4);letter-spacing:.04em;width:52px;height:52px;color:var(--color-accent-contrast);background:linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-4) 100%);font-size:.7rem;font-family:var(--font-display);place-items:center;font-weight:700;transition:transform .25s;display:grid}.brand:hover .brand__logo{transform:rotate(-6deg)scale(1.08)}.brand__text{gap:var(--space-1);flex-direction:column;display:flex}.brand__title{font-family:var(--font-display);letter-spacing:.02em;background:linear-gradient(90deg, var(--color-accent), var(--color-accent-4));color:#0000;-webkit-background-clip:text;background-clip:text;font-size:1.15rem;font-weight:800}.brand__subtitle{color:var(--color-muted);font-size:.85rem}.nav-inline{gap:var(--space-3) var(--space-3);flex-wrap:wrap;display:flex}.nav-inline a{font-size:.95rem;font-family:var(--font-display);color:var(--color-text);padding:var(--space-2) var(--space-4);background:var(--color-surface);border:2px solid var(--color-border);border-radius:999px;font-weight:700;text-decoration:none;transition:transform .15s,border-color .15s,background .15s}.nav-inline a:hover{border-color:var(--color-accent-2);background:#eefaff;text-decoration:none;transform:translateY(-2px)}main{z-index:1;max-width:var(--content-max);padding:var(--space-8) var(--space-6) var(--space-12);gap:var(--space-12);flex-direction:column;margin:0 auto;display:flex;position:relative}.section{background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-8);box-shadow:var(--shadow-soft)}.section__heading{margin:0 0 var(--space-6);font-family:var(--font-display);letter-spacing:.02em;color:var(--color-text);font-size:1.5rem;font-weight:800}.section__subheading{margin:0 0 var(--space-4);color:var(--color-muted);font-size:.95rem;font-weight:500}.intro__title{margin:0 0 var(--space-2);font-family:var(--font-display);font-size:2.1rem;font-weight:800;line-height:1.25}.intro__role{color:var(--color-muted);margin:0;font-size:1.05rem}.demo-list{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:0;padding:0;list-style:none;display:grid}.demo-item{border:3px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);background:var(--color-surface);box-shadow:var(--shadow-pop);transition:transform .18s,box-shadow .18s,border-color .18s;position:relative}.demo-item:nth-child(3n+1){border-color:color-mix(in srgb, var(--color-accent) 45%, var(--color-border))}.demo-item:nth-child(3n+2){border-color:color-mix(in srgb, var(--color-accent-2) 45%, var(--color-border))}.demo-item:nth-child(3n){border-color:color-mix(in srgb, var(--color-accent-3) 55%, var(--color-border))}.demo-item:hover{transform:translateY(-5px)rotate(-.6deg);box-shadow:0 10px #2c2a4a1f}.demo-item__link{align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:1.1rem;font-weight:700;text-decoration:none;display:inline-flex}.demo-item__link:hover{text-decoration:underline}.demo-item__icon{font-size:1.25rem}.demo-item__description{margin:var(--space-2) 0 0;color:var(--color-muted)}.demo-list__empty{color:var(--color-muted);margin:0}.site-footer{z-index:1;max-width:var(--content-max);padding:0 var(--space-6) var(--space-8);color:var(--color-muted);margin:0 auto;font-size:.9rem;position:relative}.game-banner{z-index:50;justify-content:center;align-items:center;gap:var(--space-3) var(--space-6);padding:var(--space-4) var(--space-8);padding-bottom:calc(var(--space-4) + env(safe-area-inset-bottom,0px));background:linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-4) 50%, var(--color-accent-2) 100%);background-size:200% 100%;flex-wrap:wrap;animation:6s ease-in-out infinite game-banner-shimmer;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 24px #2c2a4a33}@keyframes game-banner-shimmer{0%,to{background-position:0%}50%{background-position:100%}}.game-banner__text{color:#fff;font-family:var(--font-display);text-shadow:0 1px 3px #00000026;text-align:center;margin:0;font-size:1.05rem;font-weight:800}.game-banner__cta{font-family:var(--font-display);color:var(--color-accent);padding:var(--space-2) var(--space-6);white-space:nowrap;background:#fff;border-radius:999px;font-size:1rem;font-weight:800;text-decoration:none;transition:transform .15s,box-shadow .15s;box-shadow:0 4px #00000026}.game-banner__cta:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 6px #00000026}.game-banner__close{top:var(--space-2);right:var(--space-2);color:#fff;cursor:pointer;background:#ffffff40;border:none;border-radius:999px;place-items:center;width:28px;height:28px;font-size:1.1rem;line-height:1;transition:background .15s;display:grid;position:absolute}.game-banner__close:hover{background:#ffffff73}@media (width<=480px){.game-banner{padding-left:var(--space-6);padding-right:calc(var(--space-6) + 32px);justify-content:flex-start}body.has-game-banner .page{padding-bottom:7rem}}@media (prefers-reduced-motion:reduce){.sparkle-field__star,.game-banner{animation:none}.demo-item:hover,.brand:hover .brand__logo,.game-banner__cta:hover{transform:none}}
