/* The original paper theme remains available; dark is the first-visit default. */
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/inter-tight-variable-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+0304, U+0308, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111318;
  --white: #20232b;
  --ink: #f3f4f6;
  --muted: #b6bdc8;
  --line: #3b404b;
  --blue: #5f80ff;
  --blue-hover: #4d91ff;
  --blue-action: #1649ff;
  --blue-action-hover: #315dff;
  --coral: #ff7861;
  --pale: #20283b;
  --ground: #1a1e27;
  --quiet-photo: #252a34;
  --input-line: #666d79;
  --warning: #ff958e;
  --approved: #193d30;
  --approved-ink: #a5e7bf;
  --draft: #44321d;
  --draft-ink: #ffd397;
  --practice-want: #453b29;
  --practice-learning: #273959;
  --practice-landed: #56342e;
  --practice-consistent: #244232;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .concept-home { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .brand-hero { background: #08090b; color: #fff; }
html[data-theme="dark"] .site-header { background: var(--paper); }
html[data-theme="dark"] body.home-route .site-header { background: transparent; }
html[data-theme="dark"] body.home-route .site-header.is-scrolled { background: rgba(8,9,11,.96); }
html[data-theme="dark"] .site-header .brand-wordmark { filter: brightness(0) invert(1); }
html[data-theme="dark"] .site-footer .brand-wordmark { filter: none; }
html[data-theme="dark"] .catalog-search { background: var(--paper); }
html[data-theme="dark"] .reader-page { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .catalog-search,
html[data-theme="dark"] .search-line input,
html[data-theme="dark"] .catalog-filters select,
html[data-theme="dark"] .yoyo-filters select { border-color: var(--line); }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--white); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] .btn:not(.secondary):not(.quiet),
html[data-theme="dark"] .site-nav .btn { background: #ff692f; color: #101114; }
html[data-theme="dark"] .btn:not(.secondary):not(.quiet):hover,
html[data-theme="dark"] .site-nav .btn:hover { background: #ff8b5c; color: #101114; }
html[data-theme="dark"] .btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .btn.secondary:hover { background: var(--white); }
html[data-theme="dark"] .btn.unavailable { background: var(--ground) !important; color: var(--muted) !important; }
html[data-theme="dark"] ::selection { background: #5368a8; color: #fff; }
html[data-theme="dark"] { scrollbar-color: #677fcd var(--paper); }

/* Site-wide surfaces, including search, accounts, gear, discussion, and study. */
html[data-theme="dark"] :is(
  .trick, .trick-wide > div, .practice-card, .practice-empty, .follow-row,
  .size-compare article, .community-prompts button,
  .universal-search header button, .health-metrics article, .home-study-demo,
  .home-demo-controls, .home-yoyo-photo, .gallery-nav, .signup-plan,
  .review-form, .reply-form
) { background-color: var(--white); color: var(--ink); }
html[data-theme="dark"] :is(
  .community-prompts button, .mobile-menu-sheet,
  .mobile-menu-sheet > header, .mobile-bottom-nav, .universal-search
) { background-color: var(--paper); color: var(--ink); }
html[data-theme="dark"] .trick { background: var(--ground); }
html[data-theme="dark"] .trick-wide > div { background: rgba(25, 28, 35, .97); }
html[data-theme="dark"] .trick > div { color: var(--ink); }
html[data-theme="dark"] .yoyo-card-image,
html[data-theme="dark"] .competition-card-image,
html[data-theme="dark"] .gear-banner { background: var(--quiet-photo); }
html[data-theme="dark"] .yoyo-card-image img,
html[data-theme="dark"] .home-yoyo-photo img { mix-blend-mode: normal; }
html[data-theme="dark"] .similar-yoyos img,
html[data-theme="dark"] .gallery-stage,
html[data-theme="dark"] .yoyo-card-image,
html[data-theme="dark"] .yoyo-detail-image,
html[data-theme="dark"] .gallery-thumbnails button { background: #fff; }
html[data-theme="dark"] .gallery-stage img,
html[data-theme="dark"] .gallery-thumbnails img,
html[data-theme="dark"] .similar-yoyos img { mix-blend-mode: normal; }
html[data-theme="dark"] .gallery-count { color: #101114; }
html[data-theme="dark"] .gallery-nav:hover { background: var(--white); color: var(--ink); }
html[data-theme="dark"] .competition-card-image span,
html[data-theme="dark"] .home-competition-image span { color: #101114; }
html[data-theme="dark"] .product-art figcaption,
html[data-theme="dark"] .shop-cart-link span { color: #101114; }
html[data-theme="dark"] .home-competition-copy .btn { background: #ff692f; color: #101114; }
html[data-theme="dark"] .compare-tray { background: #242b3c; color: #fff; }
html[data-theme="dark"] .compare-tray .small-button { color: #fff; }
html[data-theme="dark"] .compare-button:hover,
html[data-theme="dark"] .compare-button.is-active,
html[data-theme="dark"] .community-prompts button:hover { background: var(--blue-action); color: #fff; }
html[data-theme="dark"] .creator-mark { background: var(--blue-action); color: #fff; }
html[data-theme="dark"] .site-footer { background: #08090b; }
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .site-footer p { color: #b9bec9; }

/* Header control and the original logo geometry with color only in “vibes.” */
.site-header .brand { position: relative; }
.site-header .brand-vibes-color {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #edff00;
  -webkit-mask: url('/assets/brand/yoyovibes-vibes-mask-ac255d70.svg') center / contain no-repeat;
  mask: url('/assets/brand/yoyovibes-vibes-mask-ac255d70.svg') center / contain no-repeat;
  animation: vibes-neon-dark 3s steps(1, end) infinite;
}
@keyframes vibes-neon-dark {
  0%, 100% { background-color: #edff00; }
  20% { background-color: #00edff; }
  40% { background-color: #ff35d1; }
  60% { background-color: #ff641e; }
  80% { background-color: #a961ff; }
}
html[data-theme="light"] .site-header .brand-vibes-color { animation-name: vibes-neon-light; }
html[data-theme="light"] body.home-route .site-header .brand-vibes-color { animation-name: vibes-neon-dark; }
@keyframes vibes-neon-light {
  0%, 100% { background-color: #5c7200; }
  20% { background-color: #006b79; }
  40% { background-color: #a00078; }
  60% { background-color: #ad2d00; }
  80% { background-color: #6822b4; }
}
.brand-hero h1 { max-width: 100%; white-space: normal; font-size: clamp(3.25rem, 6.2vw, 7.5rem); font-weight: 700; line-height: .92; letter-spacing: -.04em; text-wrap: balance; }
.brand-hero h1 span { display: block; }
.brand-hero h1 .hero-tricks { color: #43b6ff; font-weight: inherit; }
.brand-hero-copy { width: min(1600px, calc(100% - 2 * var(--gutter))); }
.brand-hero-promise { margin-top: 24px; }
.brand-hero-video-meta button { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(8,9,11,.66); color: #fff; }
.brand-hero-video-meta button:hover { background: rgba(8,9,11,.92); }
.brand-hero-video-meta button svg { width: 20px; height: 20px; fill: currentColor; }
.brand-hero-video-meta button[data-state="playing"] .icon-play,
.brand-hero-video-meta button[data-state="paused"] .icon-pause { display: none; }
.brand-hero-video-meta button:disabled { opacity: .55; }
@media (max-width: 760px) {
  .brand-hero h1 { max-width: 12ch; font-size: clamp(2.85rem, 11vw, 4.75rem); line-height: .93; letter-spacing: -.035em; }
  .brand-hero-promise { margin-top: 20px; }
  .brand-hero-video-meta button { width: 44px; height: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .brand-vibes-color { animation: none; background-color: #ff641e; }
  html[data-theme="light"] .site-header .brand-vibes-color { background-color: #ad2d00; }
  html[data-theme="light"] body.home-route .site-header .brand-vibes-color { background-color: #ff641e; }
}

/* Unlisted guides and author tools use the same saved preference. */
.aux-header-actions { display: flex; align-items: center; justify-self: end; gap: 24px; }
[data-account-photo]{width:23px;height:23px;flex:0 0 23px;border-radius:50%;object-fit:cover}
@media (max-width: 760px) {
  .aux-header-actions { gap: 10px; }
}
html[data-theme="dark"].map-page,
html[data-theme="dark"].plan-page { --blue-deep: #5f80ff; --red: #ff7861; }
html[data-theme="dark"] :is(.map-brand img, .plan-header .brand img, .health-page header img),
html[data-theme="dark"].studio-page .brand-logo,
html[data-theme="dark"].three-page .brand-logo { filter: brightness(0) invert(1); }
html[data-theme="dark"].map-page .practice,
html[data-theme="dark"].plan-page .issue-cover { background: #294cbd; color: #fff; }
html[data-theme="dark"].map-page :is(.today, .practice, .principles) { --pale: #e9edff; }
html[data-theme="dark"].plan-page .jump { background: rgba(17, 19, 24, .96); }
html[data-theme="dark"].plan-page .case { background: var(--ground); }
html[data-theme="dark"].plan-page .case-path li + li,
html[data-theme="dark"].plan-page .supplier-note { border-color: var(--line); }
html[data-theme="dark"] .health-body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] .health-page header,
html[data-theme="dark"] .health-rules,
html[data-theme="dark"] .health-rules li { border-color: var(--line); }
html[data-theme="dark"] .health-page > a,
html[data-theme="dark"] .health-links a { color: var(--blue); }
html[data-theme="dark"] .health-page header > span,
html[data-theme="dark"] .health-metrics p,
html[data-theme="dark"] .health-rules span { color: var(--muted); }
html[data-theme="dark"] .health-metrics { background: var(--line); border-color: var(--line); }

html[data-theme="dark"].studio-page,
html[data-theme="dark"].three-page {
  --accent: #8bd5c6;
  --accent-hover: #b5eee1;
  --tint: #213c3e;
  --warm: #44341f;
  --pink: #f179b2;
  --yoyo: #f179b2;
  --string: #9fb3bd;
  --focus-string: #ffbe74;
  --warning: #ffd397;
}
html[data-theme="dark"].studio-page { color: var(--ink); background: var(--paper); }
html[data-theme="dark"].studio-page :is(.button:not(.secondary):not(.text), #toast),
html[data-theme="dark"].three-page .button:not(.secondary):not(.text) { background: #187365; color: #fff; }
html[data-theme="dark"].studio-page :is(.button.secondary, input:not([type="checkbox"]):not([type="range"]), textarea, select, dialog),
html[data-theme="dark"].three-page :is(.button.secondary, input:not([type="checkbox"]):not([type="range"]), textarea, select) { background: var(--white); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"].studio-page :is(.notice, .status) { color: #ffe1ac; }
html[data-theme="dark"].studio-page .sidebar nav a:hover { background: var(--white); }
html[data-theme="dark"].studio-page .diagram-thumb { background: #f6f4ef; color: #172525; }
html[data-theme="dark"].studio-page .skip { background: var(--white); }
html[data-theme="dark"].three-page .motion-info .step-note { color: var(--warning); }
@media print { html[data-theme="dark"] { color-scheme: light; --paper: #fff; --white: #fff; --ink: #111; --muted: #555; --line: #bbb; } }

/* One clearer type and spacing rhythm across the public pages. */
html[data-theme] :is(h1, h2, h3) { font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
html[data-theme] .brand-hero h1 { font-weight: 700; }
html[data-theme] .page-head { padding-block: clamp(48px, 5vw, 72px) 32px; }
html[data-theme] :is(.library-head, .yoyo-head) + .catalog-search { border-top: 0; }
html[data-theme] .competition-head + .competition-featured { border-top: 0; }
html[data-theme] .page-head h1 { max-width: 18ch; margin-bottom: 16px; font-size: clamp(2.75rem, 5vw, 5.5rem); line-height: 1; white-space: normal; overflow-wrap: anywhere; }
html[data-theme] .source-head h1 { font-size: clamp(3rem, 5vw, 5.75rem); line-height: 1; }
html[data-theme] .editorial-trick-head h1 { font-size: clamp(3.5rem, 7vw, 6rem); line-height: .96; }
html[data-theme] :is(.culture-head h1, .community-hero h1, .designer-head h1, .public-playlist h1) { font-size: clamp(3.5rem, 7vw, 6rem); line-height: .97; }
html[data-theme] .story-page > header h1,
html[data-theme] .creator-copy h1 { font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; }
html[data-theme] .story-feature h2,
html[data-theme] .creator-feature h2 { font-size: clamp(2.6rem, 4.2vw, 4rem); line-height: 1.03; }
html[data-theme] .story-page > header { padding-block: clamp(42px, 5vw, 64px) 36px; }
html[data-theme] .story-page > section { padding-block: 44px; }
html[data-theme] .story-page > section p { line-height: 1.62; }
html[data-theme] .story-card p { font-size: .95rem; line-height: 1.55; }
html[data-theme] .catalog-row p,
html[data-theme] .community-roadmap a p { font-size: .94rem; line-height: 1.5; }
html[data-theme] .community-roadmap a h3 { margin-top: 32px; }
html[data-theme] .creator-feature { padding-block: clamp(44px, 5vw, 68px); }
html[data-theme] .creator-index-card { min-height: 260px; padding: 30px 24px; }
html[data-theme] .site-footer .footer-group a { font-size: .88rem; line-height: 1.5; }
html[data-theme] .site-footer .footer-brand p { font-size: .84rem; line-height: 1.55; }
html[data-theme] .btn { font-size: .82rem; letter-spacing: .075em; }

html[data-theme] .brand-hero-video-meta { font-size: .75rem; letter-spacing: .05em; }

html[data-theme].map-page section,
html[data-theme].plan-page section { padding-block: clamp(64px, 7vw, 104px); }
html[data-theme].map-page .map-hero,
html[data-theme].plan-page .hero { padding-block: clamp(64px, 7vw, 112px) 72px; }
html[data-theme].map-page .map-hero h1,
html[data-theme].plan-page .hero h1 { font-size: clamp(4rem, 7vw, 6rem); line-height: .98; }
html[data-theme].map-page .section-head h2,
html[data-theme].plan-page .section-head h2,
html[data-theme].plan-page .case-intro h2 { font-size: clamp(2.75rem, 4.5vw, 5rem); line-height: 1; }
html[data-theme].map-page .practice h2 { font-size: clamp(3.25rem, 5.5vw, 5.75rem); line-height: 1; }
html[data-theme].map-page .today-grid strong { font-weight: 600; }
html[data-theme].map-page .loop-grid h3,
html[data-theme].map-page .roadmap-grid h3,
html[data-theme].map-page .journey-grid h3 { margin-top: 42px; }
html[data-theme].plan-page :is(.recommendation-grid h3, .case-path h3, .build-list h3) { margin-top: 40px; }
html[data-theme].map-page :is(.layer-list p, .journey-grid li, .roadmap-grid li, .nav-map p, .plans li),
html[data-theme].plan-page :is(.product-list p, .case-path p, .build-list li, .recommendation-grid p) { font-size: .94rem; line-height: 1.55; }
html[data-theme].map-page .plans article > p,
html[data-theme].plan-page .sources p { font-size: .88rem; line-height: 1.5; }
html[data-theme].map-page .map-hero nav a,
html[data-theme].plan-page .jump a { font-size: .82rem; letter-spacing: .075em; }
html[data-theme].plan-page .issue-cover strong { font-weight: 600; }
html[data-theme] .health-page h1 { font-size: clamp(3.5rem, 7vw, 5.75rem); line-height: 1; }

@media (max-width: 760px) {
  html[data-theme] .page-head h1 { font-size: clamp(2.5rem, 10vw, 3.75rem); }
  html[data-theme] .story-page > header h1,
  html[data-theme] .creator-copy h1 { font-size: clamp(2.7rem, 11vw, 4.25rem); }
  html[data-theme].map-page .map-hero h1,
  html[data-theme].plan-page .hero h1 { font-size: clamp(3rem, 12vw, 4.75rem); }
  html[data-theme].map-page .section-head h2,
  html[data-theme].plan-page .section-head h2,
  html[data-theme].plan-page .case-intro h2 { font-size: clamp(2.5rem, 10vw, 3.7rem); }
  html[data-theme].map-page section,
  html[data-theme].plan-page section { padding-block: 60px; }
  html[data-theme].plan-page :is(.recommendation-grid h3, .case-path h3, .build-list h3) { margin-top: 24px; }
}

/* One page heading rhythm across the root app, Stories, creators and account pages. */
html[data-theme] :is(
  .page-head, .culture-head, .designer-head, .community-hero,
  .source-head, .editorial-trick-head, .competition-detail-head,
  .auth-intro, .hub-heading, .thread-head, .story-page > header,
  .watchlist-page > header, .public-playlist > header,
  .cart-page > header, .shop-help > header, .shop-admin > header,
  .newsletter-hero, .shop-hero
) {
  display: block;
  max-width: none;
  margin: 0 0 32px;
  padding: clamp(48px, 6vw, 80px) 0 32px;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
html[data-theme] :is(
  .page-head, .culture-head, .designer-head, .community-hero,
  .source-head, .editorial-trick-head, .competition-detail-head,
  .auth-intro, .hub-heading, .thread-head, .story-page > header,
  .watchlist-page > header, .public-playlist > header,
  .cart-page > header, .shop-help > header, .shop-admin > header,
  .newsletter-hero, .shop-hero, .pro-intro, .creator-hero
) h1 {
  max-width: none;
  margin: 0 0 16px;
  color: var(--ink);
  font: 700 clamp(3rem, 5.2vw, 4.625rem)/1 var(--display);
  letter-spacing: -.03em;
  white-space: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}
html[data-theme] #main :is(.page-head, .culture-head, .designer-head, .community-hero, .newsletter-hero, .shop-hero, .pro-intro, .auth-intro, .hub-heading) h1 {
  white-space: nowrap;
  overflow-wrap: normal;
  text-wrap: nowrap;
}
html[data-theme] :is(
  .page-head, .culture-head, .designer-head, .community-hero,
  .source-head, .editorial-trick-head, .competition-detail-head,
  .auth-intro, .hub-heading, .thread-head, .story-page > header,
  .watchlist-page > header, .public-playlist > header,
  .cart-page > header, .shop-help > header, .shop-admin > header,
  .newsletter-hero, .shop-hero, .pro-intro, .creator-hero
) h1 span { color: inherit; }
html[data-theme] :is(
  .page-head, .culture-head, .designer-head, .community-hero,
  .source-head, .editorial-trick-head, .competition-detail-head,
  .auth-intro, .hub-heading, .thread-head, .story-page > header,
  .watchlist-page > header, .public-playlist > header,
  .cart-page > header, .shop-help > header, .shop-admin > header,
  .newsletter-hero, .shop-hero
) > p,
html[data-theme] :is(.page-head, .newsletter-hero, .shop-hero, .pro-intro) > div > p,
html[data-theme] .auth-intro > div {
  max-width: 65ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
html[data-theme] :is(.source-reader, .pricing-page, .policy-page, .support-page, .shop-help, .thread-page) { max-width: none; }
html[data-theme] .creator-hero { grid-template-columns:minmax(0,1fr) minmax(180px,.35fr); align-items:start; }
html[data-theme] .creator-hero .creator-copy { grid-column:1; grid-row:1; }
html[data-theme] .creator-hero .creator-mark { grid-column:2; grid-row:1; }
html[data-theme] .newsletter-hero .newsletter-form { max-width:760px; margin-top:28px; }
html[data-theme] .shop-hero .shop-cart-link { display:inline-flex; margin-top:22px; }
@media (max-width:760px) {
  html[data-theme] :is(
    .page-head, .culture-head, .designer-head, .community-hero,
    .source-head, .editorial-trick-head, .competition-detail-head,
    .auth-intro, .hub-heading, .thread-head, .story-page > header,
    .watchlist-page > header, .public-playlist > header,
    .cart-page > header, .shop-help > header, .shop-admin > header,
    .newsletter-hero, .shop-hero
  ) { margin-bottom:24px; padding:32px 0 24px; }
  html[data-theme] :is(
    .page-head, .culture-head, .designer-head, .community-hero,
    .source-head, .editorial-trick-head, .competition-detail-head,
    .auth-intro, .hub-heading, .thread-head, .story-page > header,
    .watchlist-page > header, .public-playlist > header,
    .cart-page > header, .shop-help > header, .shop-admin > header,
    .newsletter-hero, .shop-hero, .pro-intro, .creator-hero
  ) h1 { max-width:none; font-size:clamp(2.5rem, 10vw, 3.75rem); line-height:1; }
  html[data-theme] .creator-hero { display:block; }
  html[data-theme] .creator-hero .creator-mark { max-width:190px; margin-top:28px; }
}
html[data-theme] :is(.auth-page, .member-hub, .source-reader, .editorial-reader, .policy-page, .shop-admin, .creator-index) { padding-top:0; }
html[data-theme] .pro-intro { padding-top:clamp(48px, 6vw, 80px); }
html[data-theme] :is(.story-page, .cart-page, .watchlist-page, .public-playlist, .order-page) { max-width:none; padding-top:0; }

/* Trick pages: keep practice close, reveal community tools only when needed. */
.trick-activity { width:min(100%,1120px); margin:4px auto 0; }
.trick-activity [hidden] { display:none !important; }
.trick-activity-actions { display:flex; align-items:center; gap:22px; padding:22px 0; border-bottom:1px solid var(--line); }
.trick-activity-actions [data-practice] { flex:1; min-width:0; }
.trick-activity .practice-control { display:grid; grid-template-columns:minmax(150px,1fr) minmax(170px,220px) auto auto; align-items:center; gap:10px; margin:0; padding:0; border:0; }
.trick-activity .practice-control h2 { margin:0; font-size:1.25rem; line-height:1.2; }
.trick-activity .practice-control>div>p { margin:3px 0 0; color:var(--muted); font-size:.8rem; font-weight:400; letter-spacing:0; }
.trick-activity .practice-control select { height:44px; border-radius:5px; background:var(--white); color:var(--ink); }
.trick-activity .practice-control .btn,.trick-activity .practice-remove { min-height:44px; white-space:nowrap; }
.trick-activity .practice-control .practice-remove { padding:0 5px; color:var(--muted); font-size:.8rem; text-decoration:none; }
.trick-activity .practice-control .practice-remove:hover { color:var(--ink); text-decoration:underline; }
.trick-activity .practice-control [role=status] { grid-column:1/-1; }
.trick-activity .practice-control:has(>a.btn) { grid-template-columns:minmax(0,1fr) auto; }
.trick-activity .save-trick-panel { min-height:0; margin:0; padding:0; border:0; }
.trick-activity .save-trick-panel .btn { min-height:44px; white-space:nowrap; }
.trick-activity-tabs { display:flex; gap:4px; margin:0 0 18px; padding:5px; border:1px solid var(--line); border-radius:9px; background:var(--ground); }
.trick-activity-tabs button { flex:1; min-width:0; min-height:48px; padding:10px 14px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:750 1rem/1.2 var(--body); cursor:pointer; }
.trick-activity-tabs button[aria-selected=true] { background:var(--blue-action,var(--blue)); color:#fff; }
.trick-activity-tabs button:hover:not([aria-selected=true]) { background:var(--white); color:var(--ink); }
.trick-activity-tabs button:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.trick-activity [role=tabpanel] { min-height:120px; padding:24px 0 12px; }
.trick-workspace [role=tabpanel] { padding:8px 0 12px; }
.trick-workspace #trick-learn-panel { min-height:0; padding:0 0 8px; }
.trick-workspace .trick-activity-actions { padding:10px 0; border:0; }
.trick-workspace .trick-feedback { width:100%; margin:8px 0 4px; }
.trick-workspace .trust-correction-link { display:inline-flex; align-items:center; min-height:42px; padding:8px 13px; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--ink); font-size:.88rem; font-weight:700; text-decoration:none; cursor:pointer; }
.trick-workspace .trust-correction-link:hover { border-color:var(--blue); color:var(--blue); }
.source-video-tabs { display:flex; gap:8px; margin:24px 0 0; overflow-x:auto; border-bottom:1px solid var(--line); scroll-snap-type:x proximity; scrollbar-color:var(--line) transparent; }
.source-video-tabs button { flex:1 0 210px; max-width:340px; min-width:0; min-height:72px; padding:13px 16px 14px; border:0; border-radius:7px 7px 0 0; background:var(--ground); color:var(--muted); text-align:left; cursor:pointer; scroll-snap-align:start; }
.source-video-tabs button strong { display:block; overflow:hidden; color:inherit; font-size:1rem; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }
.source-video-tabs button strong span { color:var(--muted); font-size:.8rem; font-weight:650; }
.source-video-tabs button small { display:block; overflow:hidden; margin-top:4px; color:inherit; font-size:.82rem; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.source-video-tabs button[aria-selected=true] { background:var(--blue-action,var(--blue)); color:#fff; }
.source-video-tabs button[aria-selected=true] strong span { color:#fff; }
.source-video-tabs button:hover:not([aria-selected=true]) { background:var(--white); color:var(--ink); }
.source-video-tabs button:focus-visible { outline:3px solid var(--blue); outline-offset:-4px; }
#source-video-panel>.tutorial-video { margin:12px 0 60px; }
@media(max-width:560px) { .source-video-tabs { margin-top:16px; } .source-video-tabs button { flex-basis:min(72vw,240px); } #source-video-panel>.tutorial-video { margin:8px -16px 30px; } }
.trick-activity .item-discussion { margin:0; padding:0; border:0; }
.trick-activity .community-empty { margin:0; padding:12px 0; font-size:.95rem; }
.trick-activity .discussion-compose { max-width:700px; margin:0 0 20px; }
.trick-activity .discussion-compose summary { display:inline-flex; align-items:center; min-height:44px; max-width:100%; padding:10px 15px; border:1px solid var(--line); border-radius:6px; background:var(--white); color:var(--ink); font-size:.95rem; font-weight:700; cursor:pointer; list-style:none; }
.trick-activity .discussion-compose summary:hover { border-color:var(--blue); color:var(--blue); }
.trick-activity .discussion-compose[open] summary { margin-bottom:10px; }
.trick-activity .item-discussion label { font-size:.88rem; }
.trick-activity .item-discussion textarea { min-height:100px; border-radius:5px; background:var(--white); color:var(--ink); }
.trick-activity .item-discussion form { margin:0 0 12px; }
.yoyo-detail-body { border-top:1px solid var(--line); }
.yoyo-detail-body [hidden] { display:none !important; }
.yoyo-detail-tabs { display:flex; gap:4px; overflow-x:auto; margin:0; padding:5px 0; scrollbar-color:var(--line) transparent; }
.yoyo-detail-tabs button { flex:1 0 auto; min-height:48px; padding:11px 15px; border:0; border-radius:6px; background:transparent; color:var(--muted); font:750 .95rem/1.2 var(--body); white-space:nowrap; cursor:pointer; }
.yoyo-detail-tabs button[aria-selected=true] { background:var(--blue-action,var(--blue)); color:#fff; }
.yoyo-detail-tabs button:hover:not([aria-selected=true]) { background:var(--white); color:var(--ink); }
.yoyo-detail-tabs button:focus-visible { outline:3px solid var(--blue); outline-offset:-3px; }
.yoyo-detail-body [role=tabpanel] { min-height:260px; padding:24px 0 36px; }
.yoyo-detail-body .spec-section,.yoyo-detail-body .similar-yoyos,.yoyo-detail-body .buy-section { padding:0; border:0; }
.yoyo-detail-body .similar-yoyos>div { gap:16px; }
.yoyo-detail-body .catalog-credit { margin:24px 0 0; }
.yoyo-detail-empty { margin:0; color:var(--muted); font-size:1rem; }
.yoyo-detail-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:22px; }
.yoyo-hero .yoyo-detail-actions > * { display:flex; align-items:center; justify-content:center; width:100%; min-height:56px; margin:0; padding:9px 8px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink); font:700 clamp(.72rem,1vw,.86rem)/1.2 var(--body); text-align:center; text-decoration:none; text-transform:none; cursor:pointer; }
.yoyo-hero .yoyo-detail-actions > :hover,.yoyo-hero .yoyo-detail-actions > .is-active { border-color:var(--blue-action,var(--blue)); background:var(--blue-action,var(--blue)); color:#fff; }
.yoyo-hero .yoyo-detail-actions > .save-yoyo-button { margin-left:0; }
.yoyo-hero .yoyo-detail-actions > :focus-visible { outline:3px solid var(--blue-action,var(--blue)); outline-offset:3px; }
.yoyo-hero .yoyo-detail-actions > :disabled { opacity:.6; cursor:wait; }
.yoyo-action-status { min-height:1.25em; margin:8px 0 0; color:var(--muted); font-size:.84rem; }
.practice-card .practice-kind { display:block; margin:-14px 0 12px; color:var(--muted); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.practice-group-title { margin:24px 0 10px; font:750 1.2rem/1.2 var(--body); }
.practice-group-title:first-of-type { margin-top:0; }
.trick-community-link { display:inline-block; margin-top:12px; font-size:.9rem; }
.trick-feedback { width:min(100%,1120px); margin:16px auto 48px; }
.trick-feedback .trust-correction-link { margin:0; color:var(--muted); font-size:.82rem; font-weight:500; }
@media(max-width:850px) {
 .trick-activity-actions { align-items:stretch; flex-direction:column; gap:12px; }
 .trick-activity .practice-control { grid-template-columns:minmax(0,1fr) auto auto; }
 .trick-activity .practice-control>div { grid-column:1/-1; }
 .trick-activity .save-trick-panel .btn { width:100%; }
}
@media(max-width:560px) {
 .trick-activity .practice-control { grid-template-columns:minmax(0,1fr) auto; }
 .trick-activity .practice-control>label { min-width:0; }
 .trick-activity .practice-control .btn { width:auto; }
 .trick-activity .practice-remove { grid-column:1/-1; justify-self:start; }
 .trick-workspace .trick-activity-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
}