.tc{scroll-margin-top:calc(var(--header-h) + 16px);--tc-plus:linear-gradient(120deg, #ffd34d 0%, #ff8fb8 52%, #a58bff 100%)}.tc-grid{gap:var(--s-6);align-items:start;display:grid}@media (width>=720px){.tc-grid{gap:var(--s-8);grid-template-columns:minmax(280px,400px) minmax(0,1fr)}}@media (width>=1100px){.tc-grid{grid-template-columns:430px minmax(0,1fr)}}.tc-stage{--pa:var(--accent);--pb:var(--accent-2);align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-4) var(--s-4);border-radius:var(--r-xl);background:radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--pa) 26%, transparent) 0%, transparent 70%), radial-gradient(60% 50% at 80% 90%, color-mix(in srgb, var(--pb) 18%, transparent) 0%, transparent 70%), var(--surface);border:1px solid color-mix(in srgb, var(--pa) 30%, var(--border));box-shadow:var(--shadow-1);transition:border-color var(--dur-3) var(--ease-out);flex-direction:column;display:flex;position:relative}.tc-stage.is-accent{background:radial-gradient(80% 60% at 50% 30%, color-mix(in srgb, var(--pa) 30%, transparent) 0%, transparent 70%) padding-box, radial-gradient(60% 50% at 80% 90%, color-mix(in srgb, var(--pb) 22%, transparent) 0%, transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--pa), var(--pb)) border-box;border:1.5px solid #0000}.tc-tilt{perspective:1100px;touch-action:pan-y;width:100%;max-width:380px}.tc-card{--rx:0deg;--ry:0deg;--mx:50%;--my:30%;aspect-ratio:600/840;width:100%;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .42s var(--ease-out);background:color-mix(in srgb, var(--pa) 25%, var(--surface-2));border-radius:6%/4.3%;position:relative;box-shadow:0 2px 6px #00000040,0 24px 50px -12px #00000080}.tc-card.is-hover{transition-duration:90ms}.tc-card canvas{border-radius:inherit;opacity:0;width:100%;height:100%;transition:opacity .26s var(--ease-out);display:block}.tc-card.is-ready canvas{opacity:1}.tc-glare{border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .26s var(--ease-out);background:radial-gradient(45% 35% at var(--mx) var(--my), #ffffff38, transparent 70%);mix-blend-mode:soft-light;position:absolute;inset:0}.tc-card.is-hover .tc-glare{opacity:1}.tc-foil{border-radius:inherit;pointer-events:none;mix-blend-mode:color-dodge;opacity:.5;background:linear-gradient(115deg,#0000 18%,#ff78dc8c 32%,#fff08c8c 40%,#78ffc88c 48%,#78c8ff8c 56%,#be8cff80 64%,#0000 78%) 0 0/260% 260%;animation:6s ease-in-out infinite alternate tc-shine;position:absolute;inset:0}.tc-card.is-hover .tc-foil{background-position:var(--mx) var(--my);transition:background-position .12s linear;animation-play-state:paused}.tc-card.is-still .tc-foil{opacity:.32;background-position:50%;animation:none}@keyframes tc-shine{0%{background-position:0 0}to{background-position:100% 100%}}.tc-actions{justify-content:center;gap:var(--s-2) var(--s-3);flex-wrap:wrap;width:100%;display:flex}.tc-actions .ui-btn--lg{flex:100%;max-width:380px}@media (width>=720px){.tc-actions .ui-btn--lg{flex-basis:100%}}.tc-locked{align-items:center;gap:var(--s-2);text-align:center;width:100%;max-width:380px;padding:var(--s-3) var(--s-4);border-radius:var(--r-lg);background:color-mix(in srgb, #a58bff 12%, var(--surface));border:1px solid #a58bff66;flex-direction:column;display:flex}.tc-locked p{font-size:var(--t-small);color:var(--text-2);margin:0}.tc-locked p b{color:var(--text)}.tc-locked__row{justify-content:center;gap:var(--s-2);flex-wrap:wrap;display:flex}.tc-safe{max-width:380px;color:var(--text-2);align-items:flex-start;gap:8px;margin:0;font-weight:500;display:flex}.tc-safe svg{color:var(--good);flex:none;margin-top:1px}.tc-plusmark{border-radius:var(--r-pill);background:var(--tc-plus);color:#24123d;font-family:var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;vertical-align:middle;align-items:center;gap:4px;padding:3px 9px 3px 7px;font-size:.72rem;font-weight:800;line-height:1.2;display:inline-flex}.tc-controls{gap:var(--s-6);flex-direction:column;min-width:0;display:flex}.tc-block{gap:var(--s-3);flex-direction:column;display:flex}.tc-h{align-items:center;gap:var(--s-2);margin:0;display:flex}.tc-sub{margin:var(--s-2) 0 0;align-items:center;gap:var(--s-2);font-family:var(--font-display);font-weight:600;font-size:var(--t-small);color:var(--text-2);display:flex}.tc-note{align-items:center;gap:6px;margin:0;display:flex}.tc-themes{gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(92px,1fr));display:grid}@media (width<=400px){.tc-themes{grid-template-columns:repeat(3,minmax(0,1fr))}}.tc-theme{border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;font:inherit;text-align:center;transition:border-color var(--dur-1), background-color var(--dur-1), transform var(--dur-press) var(--ease-out), box-shadow var(--dur-2);flex-direction:column;align-items:stretch;gap:6px;padding:6px 6px 8px;display:flex;position:relative}@media (hover:hover) and (pointer:fine){.tc-theme:hover{border-color:var(--border-strong);background:var(--surface-2)}}.tc-theme.is-on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent)}.tc-theme:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.tc-theme__name{font-family:var(--font-display);font-weight:600;font-size:var(--t-micro);line-height:1.15}.tc-theme__lock{color:#fff;background:#0000008c;border-radius:50%;place-items:center;width:22px;height:22px;display:grid;position:absolute;top:10px;right:10px}.tc-mini{aspect-ratio:5/4;color:var(--ink);border:3px solid #0000;border-radius:10px;display:block;position:relative;overflow:hidden}.tc-mini__sky{width:100%;height:70%;position:absolute;bottom:0;left:0;right:0}.tc-mini__glyph{color:var(--acc);filter:drop-shadow(0 1px 2px #00000040);place-items:center;display:grid;position:absolute;inset:0}.tc-mini--bolts .tc-mini__glyph{color:#1e1600}.tc-mini--ball .tc-mini__glyph{color:#e8283c}.tc-mini__foil{mix-blend-mode:color-dodge;opacity:.7;background:linear-gradient(115deg,#0000 15%,#ff78dc99 35%,#fff08c99 45%,#78ffc899 55%,#78c8ff99 65%,#0000 85%);position:absolute;inset:0}.tc-fav__row{align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);flex-wrap:wrap;display:flex}.tc-fav__img{object-fit:contain;flex:none;width:64px;height:64px}.tc-fav__txt{flex-direction:column;flex:150px;gap:2px;min-width:0;display:flex}.tc-fav__txt b{font-family:var(--font-display);font-size:var(--t-h3)}.tc-accents{gap:var(--s-2);flex-wrap:wrap;display:flex}.tc-accent{cursor:pointer;color:#fff;border:2px solid var(--surface);width:40px;height:40px;box-shadow:0 0 0 1px var(--border-strong);background:linear-gradient(135deg, var(--a), var(--b));transition:box-shadow var(--dur-1), transform var(--dur-press) var(--ease-out);border-radius:50%;place-items:center;padding:0;display:grid;position:relative}.tc-accent svg{filter:drop-shadow(0 1px 1px #0009)}.tc-accent.is-default{background:conic-gradient(var(--belt-yellow), var(--belt-orange), var(--belt-green), var(--belt-blue), var(--belt-purple), var(--belt-brown), var(--belt-black), var(--belt-white), var(--belt-yellow))}.tc-accent[aria-checked=true]{box-shadow:0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent)}.tc-accent:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.tc-favsheet .tc-sub{margin-top:var(--s-5)}.tc-quick{margin:var(--s-3) 0 0;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));padding:0;list-style:none;display:grid}.tc-quick__btn{width:100%;padding:var(--s-2);border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text);font:inherit;font-size:var(--t-micro);cursor:pointer;flex-direction:column;align-items:center;gap:4px;font-weight:600;display:flex}.tc-quick__btn img{object-fit:contain;width:64px;height:64px}.tc-quick__btn.is-on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent)}@media (hover:hover) and (pointer:fine){.tc-quick__btn:hover{background:var(--surface-2)}}@media (width<=719px){.tc-stage{padding:var(--s-4) var(--s-3) var(--s-3)}.tc-tilt{max-width:340px}}
