:root{--purple:#46178F;--night:#25076B;--paper:#FFFDF6;--ink:#1D0B3F;--red:#E21B3C;--blue:#1368CE;--gold:#8A6300;--green:#26890C;--lime:#D9F24B;--hand:"Gochi Hand","Comic Neue",cursive;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;}*{box-sizing:border-box;margin:0;padding:0}html{background:var(--purple);-webkit-text-size-adjust:100%}body{min-height:100dvh;display:flex;flex-direction:column;font-family:var(--sans);font-weight:500;color:#fff;background:radial-gradient(120% 70% at 50% 0%,#5A23AE 0%,var(--purple) 55%,var(--night) 100%);overflow-x:clip;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}main{flex:1;width:100%;max-width:600px;margin:0 auto;padding:clamp(14px,3vh,36px) 16px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;}.brand{display:flex;align-items:center;gap:10px}.brand img{width:clamp(48px,12vw,72px);height:auto;aspect-ratio:1;border-radius:14px;display:block}.brand span{font-weight:800;font-size:clamp(1rem,0.9rem + 0.6vw,1.2rem);letter-spacing:0.01em}h1{margin-top:clamp(10px,2.2vh,22px);font-weight:800;line-height:1.02;letter-spacing:-0.01em;font-size:clamp(2.05rem,1.4rem + 3.6vw,3.6rem);}h1 em{font-family:var(--hand);font-style:normal;font-weight:400;color:var(--lime);display:inline-block;transform:rotate(-3deg);font-size:1.12em;line-height:0.9;}.sub{margin-top:10px;max-width:34ch;color:#EDE6FA;font-size:clamp(0.98rem,0.92rem + 0.35vw,1.12rem);line-height:1.4;}.tabs{position:relative;margin-top:clamp(12px,2vh,20px);display:grid;grid-template-columns:1fr 1fr;width:min(100%,300px);padding:4px;border-radius:999px;background:var(--night);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14);}.tabs .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--paper);transform:translateX(100%);transition:transform 260ms cubic-bezier(.3,.7,.2,1);}html[data-side="without"] .tabs .knob{transform:translateX(0)}.tabs button{position:relative;z-index:1;min-height:44px;border:0;background:none;cursor:pointer;font:800 0.98rem/1 var(--sans);color:#E3D9F7;border-radius:999px;-webkit-tap-highlight-color:transparent;transition:color 200ms;}.tabs button[aria-pressed="true"]{color:var(--purple)}.tabs button:focus-visible{outline:3px solid var(--lime);outline-offset:2px}.tabs.nudge .knob{animation:nudge 900ms 500ms ease-in-out 1}@keyframes nudge{0%,100%{transform:translateX(100%)}35%{transform:translateX(calc(100% - 10px))}65%{transform:translateX(calc(100% + 2px))}}.sheet{view-transition-name:sheet;margin-top:clamp(12px,2vh,20px);width:100%;background:var(--paper);color:var(--ink);border-radius:18px;padding:12px 12px 14px;box-shadow:0 18px 40px -18px rgba(0,0,0,0.45);}.sheet-top{display:flex;justify-content:space-between;align-items:baseline;padding:0 4px 10px;font-weight:800;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:#5B4A7E}.sheet-top .hand{font-family:var(--hand);font-weight:400;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--purple)}.tags{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tags li{border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(29,11,63,0.12);padding-bottom:4px;transform:rotate(var(--r,0deg));}.tags li:nth-child(4n+1){--c:var(--red);--r:-1.5deg}.tags li:nth-child(4n+2){--c:var(--blue);--r:1deg}.tags li:nth-child(4n+3){--c:var(--gold);--r:-0.6deg}.tags li:nth-child(4n+4){--c:var(--green);--r:1.6deg}.tags .hello{display:block;background:var(--c);color:#fff;font-weight:800;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;padding:4px 0 3px}.tags .name{display:flex;align-items:center;justify-content:center;height:clamp(34px,5.4vh,46px);font-family:var(--hand);font-size:clamp(1.05rem,0.95rem + 0.5vw,1.3rem);color:var(--ink);padding:0 4px;white-space:nowrap;overflow:hidden}.tags .blank{display:block;width:62%;height:2px;background:#D6CDE6;border-radius:2px}[data-pane="without"] .tags li{--c:#6E5F92}[data-pane="without"] .tags li:first-child{--c:var(--purple)}@media (max-width:519px){.tags li:nth-child(n+10){display:none}}@media (min-width:520px){.tags{grid-template-columns:repeat(4,1fr)}}.cta{margin-top:clamp(14px,2.4vh,24px);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:999px;background:var(--lime);color:var(--night);text-decoration:none;font-weight:800;font-size:clamp(1.05rem,1rem + 0.3vw,1.2rem);box-shadow:0 10px 24px -12px rgba(0,0,0,0.5);transition:transform 160ms ease;-webkit-tap-highlight-color:transparent;}.cta svg{width:20px;height:20px}.cta:active{transform:scale(0.97)}.cta:focus-visible{outline:3px solid #fff;outline-offset:3px}@media (hover: hover) and (pointer: fine){.cta:hover{transform:translateY(-2px)}}footer{padding:14px 16px calc(14px + env(safe-area-inset-bottom));text-align:center;font-size:0.85rem;color:#D9CCF2}::view-transition-old(sheet){animation:none}::view-transition-new(sheet){animation:wipe 360ms cubic-bezier(.4,.1,.2,1) both}@keyframes wipe{from{clip-path:inset(0 0 100% 0 round 18px)}to{clip-path:inset(0 0 0 0 round 18px)}}.fade{animation:fade 300ms ease both}@keyframes fade{from{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}::view-transition-new(sheet),::view-transition-old(sheet){animation:none !important}}