.tt.sl{font-family:var(--tt-body);color:var(--sa-ink);--sl-cream:255, 249, 240;touch-action:pan-y;background:linear-gradient(#8fd8ff 0%,#d4f1ff 55%,#b9e59a 56%,#8fcf6a 100%);grid-template:"top top top""story hero maker"1fr"go hero maker"/minmax(300px,1fr) minmax(220px,.9fr) minmax(300px,380px);column-gap:clamp(16px,3vw,48px);padding:22px clamp(20px,4vw,56px) 28px;display:grid;overflow-y:auto}.sl-backdrop{pointer-events:none;position:fixed;inset:0}.sl[data-art=true] .sl-backdrop{background:var(--sl-art) center 35% / cover no-repeat;filter:blur(5px)saturate(1.1);inset:-24px}.sl-backdrop:after{content:"";background:linear-gradient(90deg, rgba(var(--sl-cream), .94) 0%, rgba(var(--sl-cream), .82) 26%, rgba(var(--sl-cream), .12) 52%, rgba(var(--sl-cream), 0) 62%), linear-gradient(0deg, rgba(var(--sl-cream), .55) 0%, rgba(var(--sl-cream), 0) 30%);position:absolute;inset:0}.sl>:not(.sl-backdrop){position:relative}.sl-top{grid-area:top;justify-content:space-between;align-items:center;display:flex}.sl-brand{font-family:var(--tt-title);color:var(--sa-ink);backdrop-filter:blur(8px);background:rgba(255,255,255,.78);border-radius:999px;margin:0;padding:7px 14px;font-size:.9rem;box-shadow:0 2px 10px rgba(43,35,80,.1)}.sl-brand:before{content:"";background:var(--sa-accent);vertical-align:1px;border-radius:50%;width:9px;height:9px;margin-right:8px;display:inline-block}.tt .sl-back{color:var(--sa-ink);backdrop-filter:blur(8px);background:rgba(255,255,255,.78);border-radius:999px;padding:8px 16px 8px 12px;font-size:.95rem;font-weight:800;box-shadow:0 2px 10px rgba(43,35,80,.1)}.sl-back span{vertical-align:-2px;margin-right:2px;font-size:1.3rem;line-height:0}.sl-story{grid-area:story;align-self:end;max-width:520px;padding-bottom:8px}.sl-kicker{font-family:var(--tt-title);letter-spacing:.04em;text-transform:uppercase;color:var(--sa-accent-text);margin:0;font-size:1.05rem}.sl h1{font-family:var(--tt-title);color:var(--sa-ink);letter-spacing:-.01em;margin:6px 0 14px;font-size:clamp(2.3rem,4.4vw,3.6rem);font-weight:700;line-height:1.02}.sl-line{color:var(--sa-ink-muted);max-width:30ch;margin:0 0 18px;font-size:1.15rem;line-height:1.45}.tt .sl-hear{color:var(--sa-ink);box-shadow:0 0 0 2px var(--sa-border), 0 4px 0 var(--sa-border);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-size:1rem;font-weight:800;transition:transform .1s,box-shadow .1s;display:inline-flex}.tt .sl-hear:active{box-shadow:0 0 0 2px var(--sa-border), 0 1px 0 var(--sa-border);transform:translateY(3px)}.sl-practise{color:var(--sa-ink-muted);background:rgba(255,255,255,.6);border-radius:10px;gap:6px;margin:18px 0 0;padding:6px 12px;font-size:.9rem;font-weight:700;display:inline-flex}.sl-hero{grid-area:hero;place-items:end center;min-height:0;display:grid}.sl-stage{place-items:center;width:min(100%,340px);height:min(62vh,480px);display:grid;position:relative}.sl-stage[data-ready=false]{visibility:hidden}.sl-stage .tt-me-canvas{z-index:1;width:100%;height:94%;position:absolute;inset:0 0 6%}.sl-pedestal{background:radial-gradient(at 50% 40%,rgba(255,255,255,.95) 0%,rgba(255,240,210,.85) 45%,rgba(255,214,140,.35) 70%,rgba(255,214,140,0) 72%);border-radius:50%;width:78%;height:15%;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 18px 40px -12px rgba(120,80,20,.35)}.sl-maker{-webkit-backdrop-filter:blur(16px)saturate(1.2);background:rgba(255,255,255,.8);border-radius:28px;flex-direction:column;grid-area:maker;align-self:center;gap:14px;padding:22px 20px 20px;display:flex;box-shadow:inset 0 1px rgba(255,255,255,.9),0 20px 50px -18px rgba(43,35,80,.35)}.sl-maker[data-ready=false]{visibility:hidden}.sl-maker-title{text-align:center;font-family:var(--tt-title);color:var(--sa-ink);margin:0 0 2px;font-size:1.25rem}.sl-tabs{background:rgba(43,35,80,.06);border-radius:18px;grid-template-columns:repeat(4,1fr);gap:4px;padding:4px;display:grid}.tt .sl-tab{background:0 0;border-radius:14px;flex-direction:column;align-items:center;gap:1px;padding:7px 2px 5px;transition:background .15s,transform .15s;display:flex}.sl-tab span{font-size:1.5rem;line-height:1.1;transition:transform .2s}.sl-tab small{color:var(--sa-ink-muted);font-size:.7rem;font-weight:800}.tt .sl-tab[data-on=true]{background:#fff;box-shadow:0 2px 8px rgba(43,35,80,.15)}.sl-tab[data-on=true] span{transform:scale(1.15)rotate(-6deg)}.sl-tab[data-on=true] small{color:var(--sa-accent-text)}.sl-panel{flex-direction:column;justify-content:center;gap:16px;min-height:196px;animation:.25s ease-out sl-in;display:flex}@keyframes sl-in{0%{opacity:0;transform:translateY(8px)}}.sl-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.tt .sl-dot{background:var(--c);border-radius:50%;width:42px;height:42px;transition:transform .15s,box-shadow .15s;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(43,35,80,.12),0 3px 6px rgba(43,35,80,.2)}.tt .sl-dot:hover{transform:scale(1.08)}.tt .sl-dot[data-on=true]{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--sa-accent), 0 4px 10px rgba(43,35,80,.25);transform:scale(1.15)}.tt .sl-tile{background:linear-gradient(#fff,#fbf6ef);border-radius:22px;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:76px;height:92px;transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s,background .15s;display:flex;position:relative;box-shadow:0 0 0 2px rgba(43,35,80,.08),0 5px rgba(43,35,80,.1)}.tt .sl-tile:hover{transform:translateY(-3px)rotate(-2deg)}.tt .sl-tile:active{transform:translateY(3px);box-shadow:0 0 0 2px rgba(43,35,80,.08),0 1px rgba(43,35,80,.1)}.tt .sl-tile[data-on=true]{background:linear-gradient(#fff, var(--sa-tint));box-shadow:0 0 0 3px var(--sa-accent), 0 5px 0 var(--sa-accent-pressed);transform:translateY(-2px)}.sl-tile small{color:var(--sa-ink-muted);font-size:.75rem;font-weight:800}.sl-tile svg{width:48px;height:48px}.sl-emoji{filter:drop-shadow(0 3px 2px rgba(43,35,80,.15));font-size:2.6rem;line-height:1.1}.sl-face{background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), transparent 45%), var(--c);border-radius:50%;width:46px;height:46px;box-shadow:inset 0 -4px rgba(0,0,0,.12)}.sl-tick{width:26px;height:26px;font:900 .85rem/1 var(--tt-body);color:#fff;background:var(--sa-accent);border-radius:50%;place-items:center;font-style:normal;animation:.3s cubic-bezier(.3,1.8,.5,1) sl-tick;display:grid;position:absolute;top:-8px;right:-8px;box-shadow:0 0 0 3px #fff}@keyframes sl-tick{0%{transform:scale(0)}}.sl-colours{border-top:1px dashed rgba(43,35,80,.12);padding-top:14px}.tt .sl-surprise{color:var(--sa-ink);box-shadow:0 0 0 2px var(--sa-border), 0 4px 0 var(--sa-border);background:#fff;border-radius:999px;align-self:center;align-items:center;gap:8px;padding:9px 18px;font-size:.95rem;font-weight:800;transition:transform .1s;display:inline-flex}.sl-surprise span{font-size:1.2rem;transition:transform .4s;display:inline-block}.tt .sl-surprise:hover span{transform:rotate(180deg)}.tt .sl-surprise:active{transform:translateY(3px)}.sl-stage[data-pop="0"] .tt-me-canvas{animation:.45s cubic-bezier(.3,1.6,.5,1) sl-hop0}.sl-stage[data-pop="1"] .tt-me-canvas{animation:.45s cubic-bezier(.3,1.6,.5,1) sl-hop1}@keyframes sl-hop0{40%{transform:translateY(-14px)scale(1.04,.97)}}@keyframes sl-hop1{40%{transform:translateY(-14px)scale(1.04,.97)}}.sl-stage[data-pop="0"] .sl-pedestal,.sl-stage[data-pop="1"] .sl-pedestal{animation:.6s ease-out sl-glow}@keyframes sl-glow{30%{filter:brightness(1.25);transform:translate(-50%)scale(1.06)}}.sl-go{flex-direction:column;grid-area:go;align-self:end;align-items:flex-start;gap:12px;padding-top:22px;display:flex}.tt .sl-play{padding:14px 64px;font-size:2.1rem}.sl-saved{gap:8px;margin:0;display:flex}.sl-saved span{box-shadow:0 0 0 2px var(--sa-border);background:rgba(255,255,255,.8);border-radius:999px;padding:5px 12px;font-size:1rem;font-weight:800}.sl-keys{color:var(--sa-ink-muted);flex-wrap:wrap;align-items:center;gap:4px;margin:0;font-size:.9rem;display:flex}.sl-keys kbd{min-width:24px;font:800 .78rem var(--tt-body);text-align:center;color:var(--sa-ink);background:#fff;border-radius:6px;padding:2px 6px;box-shadow:0 0 0 1px rgba(43,35,80,.15),0 2px rgba(43,35,80,.15)}.sl-keys .sl-space{min-width:54px}.tt.sl button:focus-visible{outline:3px solid var(--sa-accent);outline-offset:3px}@media (width<=899px){.tt.sl{grid-template-rows:none;grid-template-columns:1fr;grid-template-areas:"top""story""hero""maker""go";grid-auto-rows:max-content;align-content:start;row-gap:12px;padding:14px 16px 0}.sl-backdrop:after{background:linear-gradient(180deg, rgba(var(--sl-cream), .92) 0%, rgba(var(--sl-cream), .7) 34%, rgba(var(--sl-cream), .25) 60%, rgba(var(--sl-cream), .8) 100%)}.sl-story{text-align:center;align-self:start;margin:0 auto;padding:0}.sl h1{margin-bottom:8px;font-size:clamp(1.9rem,8vw,2.6rem)}.sl-line{margin:0 auto 12px;font-size:1rem}.sl-practise{margin-top:10px}.sl-hero{min-height:auto}.sl-stage{width:210px;height:240px}.sl-maker{align-self:stretch;width:min(100%,440px);margin:0 auto;padding:18px 12px}.tt .sl-tile{width:70px}.sl-row{gap:8px}.tt.sl .sl-go{z-index:2;background:linear-gradient(rgba(var(--sl-cream), 0), rgba(var(--sl-cream), .96) 28%);align-items:center;margin:0 -16px;padding:14px 16px 18px;position:sticky;bottom:0}.sl-keys{justify-content:center}}@media (width>=900px) and (height<=760px){.sl-stage{height:52vh}.sl-maker{gap:10px;padding:16px}.sl-panel{min-height:170px}.tt .sl-tile{height:84px}}@media (prefers-reduced-motion:reduce){.tt .sl-tile,.tt .sl-dot,.tt .sl-hear,.sl-tab span{transition:none}.sl-panel,.sl-tick,.sl-stage .tt-me-canvas,.sl-stage .sl-pedestal{animation:none!important}}