/* Neon / Tron accents — light canvas with cyan + violet glow (storefront + tutorials) */

:root {
    --neon-cyan: #00e5ff;
    --neon-cyan-soft: #7df9ff;
    --neon-cyan-dim: #00b4d8;
    --neon-magenta: #e040fb;
    --neon-violet: #9d4edd;
    --neon-orange: #ff9f0a;
    --neon-orange-bright: #ffb340;
    --neon-orange-deep: #d97706;
    --neon-orange-soft: rgba(255, 159, 10, .12);
    --neon-orange-glow-sm: 0 0 8px rgba(255, 159, 10, .24);
    --neon-orange-glow: 0 0 12px rgba(255, 159, 10, .32);
    --neon-gradient-accent: linear-gradient(90deg, var(--primary) 0%, var(--neon-cyan-dim) 100%);
    --neon-gradient-line: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 229, 255, .22) 18%,
        rgba(0, 229, 255, .52) 50%,
        rgba(0, 229, 255, .22) 82%,
        transparent 100%
    );
    --neon-line-glow: 0 0 10px rgba(0, 229, 255, .28);
    --neon-line: rgba(0, 229, 255, .22);
    --neon-line-soft: rgba(0, 229, 255, .08);
    --neon-tron-size: 56px;
    --neon-tron-opacity: 1;
    --neon-tron-shift-x: 0px;
    --neon-tron-shift-y: 0px;
    --neon-tron-rotate: 0deg;
    --neon-tron-fade-x: 50%;
    --neon-tron-fade-y: 35%;
    --neon-tron-fade-w: 85%;
    --neon-tron-fade-h: 75%;
    --neon-tron-line: var(--neon-line-soft);
    --neon-glow-sm: 0 0 10px rgba(0, 229, 255, .28);
    --neon-glow-md: 0 0 16px rgba(0, 229, 255, .35), 0 0 32px rgba(0, 229, 255, .12);
    --neon-glow-lg: 0 0 20px rgba(0, 229, 255, .4), 0 0 40px rgba(157, 78, 221, .15);
    --neon-glow-primary: 0 0 14px rgba(10, 132, 255, .45), 0 0 28px rgba(0, 229, 255, .2);
    --neon-gradient: linear-gradient(135deg, var(--primary) 0%, var(--neon-cyan-dim) 52%, var(--neon-violet) 100%);
    --neon-gradient-btn: radial-gradient(circle at 50% 40%, #4a9eff 0%, var(--primary) 58%, #0670d4 100%);
    --neon-gradient-btn-hover: radial-gradient(circle at 50% 40%, #5aa7ff 0%, var(--primary-hover) 58%, #0562bd 100%);
    --neon-glow-btn: 0 4px 14px rgba(10, 132, 255, .16), 0 0 8px rgba(10, 132, 255, .1);
    --neon-glow-btn-hover: 0 6px 18px rgba(10, 132, 255, .2), 0 0 10px rgba(10, 132, 255, .14);
    --neon-gradient-soft: linear-gradient(135deg, rgba(10, 132, 255, .12) 0%, rgba(0, 229, 255, .08) 50%, rgba(157, 78, 221, .08) 100%);
    --neon-bg-mesh:
        radial-gradient(ellipse 90% 55% at 15% -8%, rgba(0, 229, 255, .09), transparent 52%),
        radial-gradient(ellipse 55% 40% at 88% 12%, rgba(255, 159, 10, .06), transparent 46%),
        radial-gradient(ellipse 70% 45% at 92% 5%, rgba(157, 78, 221, .07), transparent 48%),
        radial-gradient(ellipse 60% 35% at 50% 105%, rgba(10, 132, 255, .06), transparent 42%);
}

/* Light Tron grid — home & custom pages only (not app center / blog / tutorials) */
body:not(.play-apps-page):not(.is-tutorials):not(.is-blog):not(.is-article) {
    background: transparent;
}

body:not(.play-apps-page):not(.is-tutorials):not(.is-blog):not(.is-article)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: var(--neon-tron-opacity, 1);
    transform: rotate(var(--neon-tron-rotate, 0deg));
    transform-origin: 50% 42%;
    background-color: var(--bg);
    background-image:
        var(--neon-bg-mesh),
        linear-gradient(var(--neon-tron-line, var(--neon-line-soft)) 1px, transparent 1px),
        linear-gradient(90deg, var(--neon-tron-line, var(--neon-line-soft)) 1px, transparent 1px);
    background-size:
        auto,
        var(--neon-tron-size, 56px) var(--neon-tron-size, 56px),
        var(--neon-tron-size, 56px) var(--neon-tron-size, 56px);
    background-position:
        0 0,
        var(--neon-tron-shift-x, 0) var(--neon-tron-shift-y, 0),
        calc(var(--neon-tron-shift-x, 0) + 13px) calc(var(--neon-tron-shift-y, 0) + 9px);
    background-attachment: fixed;
    mask-image: radial-gradient(
        ellipse var(--neon-tron-fade-w, 85%) var(--neon-tron-fade-h, 75%) at var(--neon-tron-fade-x, 50%) var(--neon-tron-fade-y, 35%),
        #000 0%,
        rgba(0, 0, 0, .42) 38%,
        transparent 76%
    );
}

body.is-tutorials main.wrap {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

body.is-tutorials .page-head,
body.is-tutorials .filter-bar,
body.is-tutorials .blog-strip,
body.is-tutorials .grid,
body.is-tutorials .pagination-wrap,
body.is-tutorials .empty-state,
body.is-tutorials .breadcrumbs {
    position: relative;
    z-index: 1;
}

body.is-tutorials .tut-card__link,
body.is-tutorials .filter-pill:not(.is-active),
body.is-tutorials .blog-strip {
    background: var(--surface);
}

body.is-tutorials .filter-pill.is-active {
    background: var(--neon-gradient-btn);
    border-color: rgba(10, 132, 255, .3);
    box-shadow: var(--neon-glow-btn);
    color: #fff !important;
}

body.is-tutorials .page-head__desc {
    color: var(--text-secondary);
}

/* Header — neon hairline */
.site-header {
    position: sticky;
    border-bottom-color: rgba(0, 184, 212, .18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .85),
        0 0 24px rgba(0, 229, 255, .06);
}
.site-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--neon-gradient-line);
    opacity: .9;
    pointer-events: none;
}
.site-brand__mark {
    background: var(--neon-gradient);
    box-shadow: var(--neon-glow-sm), var(--primary-shadow);
    border: 1px solid rgba(0, 229, 255, .35);
}
.site-search__field:focus-within {
    border-color: rgba(0, 229, 255, .45);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, .14), var(--neon-glow-sm);
}
.site-nav a.is-active {
    background: var(--neon-gradient-btn);
    border: 1px solid rgba(10, 132, 255, .28);
    box-shadow: var(--neon-glow-btn);
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 48, 96, .16);
}
.site-nav a:hover {
    box-shadow: 0 0 10px rgba(0, 229, 255, .1);
}

/* Page titles & breadcrumbs */
.page-head__title {
    text-shadow: 0 0 28px rgba(0, 229, 255, .1), 0 0 18px rgba(255, 159, 10, .06);
}
.page-head__title::after {
    content: "";
    display: block;
    width: min(5rem, 28%);
    height: 2px;
    margin-top: .65rem;
    border-radius: 999px;
    background: rgba(0, 184, 212, .5);
    box-shadow: var(--neon-line-glow);
}
.breadcrumbs__sep {
    color: var(--neon-orange) !important;
    opacity: .72;
    text-shadow: var(--neon-orange-glow-sm);
}
body.is-tut-step .breadcrumbs a:hover {
    color: var(--neon-orange-deep) !important;
    text-shadow: 0 0 10px rgba(255, 159, 10, .22);
}

/* Buttons — soft center glow, readable labels */
.btn--primary,
.tut-nav__btn--primary,
.filter-pill.is-active,
.pagination-wrap span[aria-current="page"] {
    color: #fff !important;
    text-shadow: 0 1px 0 rgba(0, 48, 96, .16);
}

.btn--primary {
    background: var(--neon-gradient-btn);
    border: 1px solid rgba(10, 132, 255, .28);
    box-shadow: var(--neon-glow-btn);
}
.btn--primary:hover {
    background: var(--neon-gradient-btn-hover);
    box-shadow: var(--neon-glow-btn-hover);
}
.btn--ghost:hover {
    border-color: rgba(10, 132, 255, .24);
    box-shadow: 0 0 6px rgba(10, 132, 255, .08);
    background: radial-gradient(circle at 50% 50%, rgba(10, 132, 255, .04) 0%, rgba(255, 255, 255, .97) 78%);
}

.btn--ghost {
    border-color: rgba(0, 184, 212, .22);
    background: rgba(255, 255, 255, .82);
}

/* Filter pills */
.filter-pill {
    border-color: rgba(0, 184, 212, .16);
    background: rgba(255, 255, 255, .88);
}
.filter-pill:hover {
    border-color: rgba(0, 229, 255, .32);
    box-shadow: var(--neon-glow-sm);
}
.filter-pill.is-active {
    background: var(--neon-gradient-btn);
    border-color: rgba(10, 132, 255, .3);
    box-shadow: var(--neon-glow-btn);
}

/* Cards & panels */
.card,
.panel,
.post-card__link,
.tut-card__link {
    border-color: rgba(0, 184, 212, .14);
    background: rgba(255, 255, 255, .92);
}

body.is-tutorials .tut-card__link {
    background: var(--surface);
}
.post-card__link:hover,
.tut-card__link:hover,
.card:hover,
.panel:hover {
    border-color: rgba(0, 229, 255, .38);
    box-shadow: var(--shadow-card-hover), var(--neon-glow-sm);
}

/* Category / tag chips */
.post-card__cat,
.tut-card__tag,
.tut-card__badge,
.article-card__badge,
.tut-intro__tag {
    box-shadow: 0 0 8px rgba(0, 229, 255, .08);
}
.tut-card__tag,
.article-card__badge,
.tut-intro__tag:not(.tut-intro__tag--soft) {
    border-color: rgba(0, 229, 255, .28);
    background: linear-gradient(135deg, rgba(232, 244, 255, .95) 0%, rgba(224, 247, 255, .9) 100%);
    color: #0077b6;
}
.tut-card__badge {
    border: 1px solid rgba(255, 159, 10, .26);
    background: linear-gradient(135deg, rgba(255, 248, 235, .95) 0%, rgba(255, 237, 213, .88) 100%);
    color: var(--neon-orange-deep);
    box-shadow: var(--neon-orange-glow-sm);
}

/* Blog strip (tutorials index reuses this) */
.blog-strip {
    border-bottom-color: rgba(0, 184, 212, .22);
    background: var(--neon-gradient-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 0 20px rgba(0, 229, 255, .06);
    border-inline-start: 3px solid var(--neon-orange);
}
.blog-strip__label {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--neon-orange-deep);
    font-weight: 700;
}
.blog-strip__label::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--neon-orange);
    box-shadow: var(--neon-orange-glow-sm);
    flex-shrink: 0;
}

/* Article page */
body.is-article .breadcrumbs a:hover {
    color: var(--neon-cyan-dim) !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, .18);
}

.article-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(0, 184, 212, .18);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 252, 255, .96) 100%);
    box-shadow: var(--shadow-soft), 0 0 28px rgba(0, 229, 255, .07);
}

.article-card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 6%;
    height: 2px;
    background: var(--neon-gradient-line);
    box-shadow: var(--neon-line-glow);
    pointer-events: none;
    z-index: 2;
}

.article-card__header {
    position: relative;
    border-bottom: 1px solid rgba(0, 184, 212, .1);
    background: linear-gradient(180deg, rgba(0, 229, 255, .03) 0%, transparent 100%);
}

.article-card__meta time {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-tertiary);
}

.article-card__meta time::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-orange);
    box-shadow: var(--neon-orange-glow-sm);
    flex-shrink: 0;
}

.article-card__badge,
.tut-intro__tag:not(.tut-intro__tag--soft) {
    border-color: rgba(0, 229, 255, .28);
    background: linear-gradient(135deg, rgba(232, 244, 255, .95) 0%, rgba(224, 247, 255, .9) 100%);
    color: #0077b6;
    box-shadow: 0 0 8px rgba(0, 229, 255, .1);
}

.article-card__title {
    text-shadow: 0 0 20px rgba(0, 229, 255, .06), 0 0 12px rgba(255, 159, 10, .04);
}

.article-card__title::after {
    content: "";
    display: block;
    width: min(4.5rem, 22%);
    height: 2px;
    margin-top: .65rem;
    border-radius: 999px;
    background: rgba(0, 184, 212, .48);
    box-shadow: var(--neon-line-glow);
}

.article-card__lead {
    padding-inline-start: .15rem;
    border-inline-start: 2px solid rgba(255, 159, 10, .35);
    box-shadow: inset 4px 0 12px rgba(255, 159, 10, .04);
}

.article-card__hero .cover-frame--hero {
    border: 1px solid rgba(0, 229, 255, .16);
    box-shadow: 0 0 18px rgba(0, 229, 255, .08), 0 8px 24px rgba(16, 24, 40, .08);
}

.article-card__body.prose {
    border-top: 1px solid rgba(0, 184, 212, .08);
}

.prose h2 {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.prose h2::before {
    content: "";
    width: 4px;
    height: 1.05em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--neon-orange-bright), var(--neon-orange-deep));
    box-shadow: var(--neon-orange-glow-sm);
    flex-shrink: 0;
}

.prose h3 {
    color: var(--text-primary);
    text-shadow: 0 0 14px rgba(0, 229, 255, .05);
}

.prose a {
    text-decoration-color: rgba(0, 184, 212, .45);
}

.prose a:hover {
    text-shadow: 0 0 10px rgba(0, 229, 255, .14);
}

.prose blockquote {
    border-inline-start-color: var(--neon-cyan-dim);
    background: linear-gradient(135deg, rgba(232, 244, 255, .55) 0%, rgba(255, 248, 235, .35) 100%);
    box-shadow: inset 0 0 16px rgba(0, 229, 255, .04), 0 0 12px rgba(255, 159, 10, .05);
}

.article-card__tags {
    border-top-color: rgba(0, 184, 212, .14);
    background: linear-gradient(180deg, rgba(248, 252, 255, .6) 0%, rgba(255, 255, 255, .9) 100%);
}

.article-card__tag {
    border-color: rgba(0, 184, 212, .16);
    background: rgba(255, 255, 255, .88);
}

.article-card__tag:hover {
    border-color: rgba(0, 229, 255, .35);
    box-shadow: var(--neon-glow-sm);
    background: var(--accent-soft);
}

.article-card__footer {
    border-top-color: rgba(0, 184, 212, .14);
    background: linear-gradient(180deg, rgba(248, 252, 255, .85) 0%, rgba(255, 255, 255, .95) 100%);
    box-shadow: inset 0 1px 0 rgba(0, 229, 255, .06);
}

.article-card__back {
    border-color: rgba(10, 132, 255, .2);
    box-shadow: 0 0 8px rgba(10, 132, 255, .06);
}

.article-card__back:hover {
    border-color: rgba(0, 229, 255, .32);
    box-shadow: var(--neon-glow-sm);
    color: var(--neon-cyan-dim) !important;
}

.article-card__back-icon {
    color: var(--neon-orange-deep);
    filter: drop-shadow(0 0 4px rgba(255, 159, 10, .2));
}

/* Pagination */
.pagination-wrap a:hover {
    border-color: rgba(0, 229, 255, .4);
    box-shadow: var(--neon-glow-sm);
}
.pagination-wrap span[aria-current="page"] {
    background: var(--neon-gradient-btn);
    border: 1px solid rgba(0, 229, 255, .35);
    box-shadow: var(--neon-glow-btn);
}

/* Home hero — inner neon accents */
.home-hero {
    border-color: rgba(0, 184, 212, .18);
    box-shadow: var(--shadow-soft), 0 0 28px rgba(0, 229, 255, .07);
}

.home-hero__content {
    position: absolute;
    isolation: isolate;
}

.home-hero__content::before {
    content: "";
    position: absolute;
    inset: calc(var(--space-sm) * -1) calc(var(--space-sm) * -1) 0;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 229, 255, .22);
    border-inline-start: 2px solid rgba(255, 159, 10, .5);
    background: linear-gradient(
        145deg,
        rgba(0, 0, 0, .58) 0%,
        rgba(0, 0, 0, .46) 38%,
        rgba(8, 28, 48, .4) 100%
    );
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
    box-shadow:
        inset 0 0 28px rgba(0, 229, 255, .08),
        0 0 22px rgba(0, 229, 255, .1),
        0 8px 28px rgba(0, 0, 0, .22);
    pointer-events: none;
    z-index: -1;
}

.home-hero__badge {
    border: 1px solid rgba(0, 229, 255, .32);
    box-shadow: 0 0 12px rgba(0, 229, 255, .18);
    background: rgba(0, 229, 255, .12);
    backdrop-filter: blur(10px);
}

.home-hero__title {
    -webkit-text-stroke: 0.4px rgba(0, 0, 0, .65);
    text-shadow:
        0 0 1px rgba(0, 0, 0, .95),
        0 0 2px rgba(0, 0, 0, .88),
        0 1px 3px rgba(0, 0, 0, .78),
        0 2px 12px rgba(0, 0, 0, .58),
        0 0 22px rgba(0, 229, 255, .22),
        0 0 14px rgba(255, 159, 10, .12);
}

.home-hero__excerpt {
    -webkit-text-stroke: 0.3px rgba(0, 0, 0, .5);
    text-shadow:
        0 0 1px rgba(0, 0, 0, .88),
        0 1px 3px rgba(0, 0, 0, .62),
        0 2px 14px rgba(0, 0, 0, .42),
        0 0 16px rgba(0, 229, 255, .14),
        0 0 10px rgba(255, 159, 10, .08);
}

.home-hero__date {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem 0;
    color: rgba(255, 255, 255, .82);
    text-shadow: 0 0 10px rgba(255, 159, 10, .12);
}

.home-hero__date::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--neon-orange);
    box-shadow: var(--neon-orange-glow-sm);
    flex-shrink: 0;
}

.home-hero__cta {
    border: 1px solid rgba(10, 132, 255, .22);
    background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .98) 0%, rgba(245, 250, 255, .94) 58%, rgba(255, 255, 255, .98) 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16), 0 0 8px rgba(10, 132, 255, .12);
}

.home-hero__slide-link:hover .home-hero__cta {
    border-color: rgba(0, 229, 255, .28);
    background: radial-gradient(circle at 50% 42%, #fff 0%, rgba(238, 247, 255, .96) 55%, #fff 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18), 0 0 12px rgba(10, 132, 255, .16), 0 0 8px rgba(255, 159, 10, .1);
}

.home-hero__cta-icon {
    color: var(--neon-cyan-dim);
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, .28));
}

.home-hero__chrome {
    background: linear-gradient(to top, rgba(0, 0, 0, .48) 0%, rgba(0, 0, 0, .08) 55%, transparent 100%);
}

.home-hero__progress {
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(0, 229, 255, .14);
    box-shadow: inset 0 0 8px rgba(0, 229, 255, .08);
}

.home-hero__progress-bar {
    background: var(--neon-gradient-accent);
    box-shadow: var(--neon-line-glow);
}

.home-hero__counter {
    border-color: rgba(0, 184, 212, .18);
    box-shadow: 0 0 10px rgba(0, 229, 255, .08);
}

.home-hero__counter [data-hero-current] {
    color: var(--neon-orange-deep);
    text-shadow: 0 0 8px rgba(255, 159, 10, .2);
}

.home-hero__btn {
    border: 1px solid rgba(0, 229, 255, .16);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12), 0 0 8px rgba(0, 229, 255, .08);
}

.home-hero__btn:hover {
    border-color: rgba(0, 229, 255, .32);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .14), 0 0 12px rgba(0, 229, 255, .16);
}

.home-hero__thumbs {
    border-top-color: rgba(0, 184, 212, .16);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 252, 255, .96) 100%);
}

.home-hero__thumb.is-active {
    border-color: rgba(0, 229, 255, .28);
    background: linear-gradient(135deg, rgba(232, 244, 255, .75) 0%, rgba(255, 248, 235, .55) 100%);
    box-shadow: 0 4px 16px rgba(10, 132, 255, .1), 0 0 10px rgba(255, 159, 10, .08);
}

.home-hero__thumb.is-active .home-hero__thumb-img {
    box-shadow: 0 0 0 1px rgba(0, 229, 255, .22), 0 0 10px rgba(0, 229, 255, .12);
}

.home-hero__thumb-title {
    text-shadow: none;
}

.home-hero__thumb.is-active .home-hero__thumb-title {
    color: var(--neon-cyan-dim);
}
.home-panel__accent {
    box-shadow: 0 0 12px currentColor;
}
.home-panel__accent--teal {
    background: linear-gradient(180deg, var(--neon-orange-bright), var(--neon-orange-deep));
    color: var(--neon-orange-deep);
    box-shadow: 0 0 12px rgba(255, 159, 10, .35);
}
.home-tuts__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    color: var(--neon-orange-deep);
    background: var(--neon-orange-soft);
    border: 1px solid rgba(255, 159, 10, .28);
    box-shadow: var(--neon-orange-glow-sm);
}
.home-panel__accent--violet {
    background: linear-gradient(180deg, #c77dff, var(--neon-violet));
    color: var(--neon-violet);
}

/* —— Tutorial player —— */
.tut-intro.panel {
    border-color: rgba(0, 184, 212, .18);
    box-shadow: var(--shadow-soft), 0 0 28px rgba(0, 229, 255, .08);
    background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(248, 252, 255, .94) 100%);
}
.tut-intro__title {
    text-shadow: 0 0 24px rgba(0, 229, 255, .1);
}
.tut-progress__bar {
    border: 1px solid rgba(0, 184, 212, .12);
    box-shadow: inset 0 0 8px rgba(0, 229, 255, .06);
}
.tut-progress__fill {
    background: var(--neon-gradient-accent);
    box-shadow: var(--neon-line-glow);
}
.tut-step-card {
    border-color: rgba(0, 184, 212, .18);
    box-shadow: var(--shadow-soft), 0 0 22px rgba(0, 229, 255, .07);
}
.tut-step-card__label {
    color: var(--neon-orange-deep);
    text-shadow: 0 0 10px rgba(255, 159, 10, .18);
}
.tut-step-card__label::before {
    content: "◆";
    display: inline-block;
    margin-inline-end: .35rem;
    font-size: .62rem;
    color: var(--neon-orange);
    text-shadow: var(--neon-orange-glow-sm);
    vertical-align: middle;
}
.tut-nav__btn {
    border-color: rgba(0, 184, 212, .2);
    background: rgba(255, 255, 255, .9);
}
.tut-nav__btn:hover {
    border-color: rgba(10, 132, 255, .22);
    box-shadow: 0 0 6px rgba(10, 132, 255, .08);
    background: radial-gradient(circle at 50% 50%, rgba(10, 132, 255, .04) 0%, rgba(255, 255, 255, .97) 78%);
}
.tut-nav__btn--primary {
    background: var(--neon-gradient-btn);
    border-color: rgba(10, 132, 255, .28);
    box-shadow: var(--neon-glow-btn);
}
.tut-nav__btn--primary:hover {
    background: var(--neon-gradient-btn-hover);
    box-shadow: var(--neon-glow-btn-hover);
}
.tut-outline {
    border-color: rgba(0, 184, 212, .16);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-soft), 0 0 18px rgba(157, 78, 221, .06);
}
.tut-outline h2 {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.tut-outline h2::before {
    content: "";
    width: 4px;
    height: 1.1em;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--neon-orange-bright), var(--neon-orange-deep));
    box-shadow: var(--neon-orange-glow-sm);
    flex-shrink: 0;
}
.tut-outline a.is-current {
    background: linear-gradient(135deg, rgba(10, 132, 255, .08) 0%, rgba(255, 159, 10, .07) 100%);
    border: 1px solid rgba(255, 159, 10, .22);
    box-shadow: inset 0 0 10px rgba(255, 159, 10, .06);
}
.tut-outline a.is-current .tut-outline__num {
    background: radial-gradient(circle at 50% 40%, var(--neon-orange-bright) 0%, var(--neon-orange-deep) 100%);
    box-shadow: var(--neon-orange-glow-sm);
    border: 1px solid rgba(255, 159, 10, .35);
    color: #fff;
}
.tut-outline__num {
    border: 1px solid rgba(255, 159, 10, .22);
    color: var(--neon-orange-deep);
    box-shadow: inset 0 0 6px rgba(255, 159, 10, .06);
}
.tut-intro__tag--soft:hover {
    border-color: rgba(0, 229, 255, .4);
    box-shadow: var(--neon-glow-sm);
}

/* Step player (?step=1…) — stronger Tron frame */
.tut-player--step {
    position: relative;
    padding: var(--space-sm) 0 var(--space-md);
}

.tut-player--step::before {
    content: "";
    position: absolute;
    inset: 0 -10px;
    border-radius: calc(var(--radius-xl) + 2px);
    border: 1px solid rgba(0, 229, 255, .16);
    box-shadow:
        0 0 36px rgba(0, 229, 255, .1),
        inset 0 0 28px rgba(0, 229, 255, .04);
    pointer-events: none;
    z-index: -1;
}

.tut-player--step .tut-intro__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .5rem;
    padding: .5rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, .18);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--neon-glow-sm);
    width: fit-content;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
}

.tut-player--step .tut-progress {
    padding: .65rem .9rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 229, 255, .22);
    background: rgba(255, 255, 255, .9);
    box-shadow: var(--neon-glow-sm);
}

.tut-player--step .tut-progress > span {
    font-weight: 700;
    color: var(--neon-orange-deep);
    text-shadow: 0 0 8px rgba(255, 159, 10, .16);
}

.tut-player--step .tut-progress__bar {
    border-color: rgba(0, 229, 255, .2);
    background: rgba(0, 229, 255, .06);
}

.tut-player--step .tut-progress__fill {
    background: var(--neon-gradient-accent);
    box-shadow: var(--neon-line-glow);
}

.tut-player--step .tut-step-card {
    position: relative;
    overflow: hidden;
    border-color: rgba(0, 229, 255, .28);
    box-shadow: var(--shadow-soft), var(--neon-glow-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 253, 255, .95) 100%);
}

.tut-player--step .tut-step-card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 8%;
    height: 2px;
    background: var(--neon-gradient-line);
    box-shadow: var(--neon-line-glow);
    pointer-events: none;
    z-index: 2;
}

.tut-player--step .tut-step-card__figure {
    border-bottom: 1px solid rgba(0, 229, 255, .16);
    box-shadow: inset 0 -12px 28px rgba(0, 229, 255, .05);
}

.tut-player--step .tut-step-card__title {
    text-shadow: 0 0 22px rgba(0, 229, 255, .1);
}

.tut-player--step .tut-nav__btn.is-disabled {
    border-color: rgba(0, 184, 212, .12);
    background: rgba(255, 255, 255, .65);
}

.tut-player--step .tut-outline {
    border-color: rgba(0, 229, 255, .2);
    box-shadow: var(--shadow-soft), 0 0 24px rgba(157, 78, 221, .08);
}

.tut-player--step .tut-outline h2 {
    color: var(--text-primary);
    text-shadow: 0 0 16px rgba(0, 229, 255, .08);
}

.tut-player--step .tut-outline a:hover {
    background: rgba(0, 229, 255, .06);
    box-shadow: inset 0 0 10px rgba(0, 229, 255, .06);
}

/* App detail — screenshots + about (blog-like neon) */
.play-detail__preview {
    border-color: rgba(0, 184, 212, .18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        0 0 22px rgba(0, 229, 255, .07);
    border-inline-start: 3px solid var(--neon-orange);
}

.play-detail__preview-head .play-section__accent,
.play-detail__section--about .play-section__accent {
    background: linear-gradient(180deg, var(--neon-orange-bright), var(--neon-orange-deep));
    box-shadow: var(--neon-orange-glow-sm);
}

.play-detail__preview-title,
.play-detail__section--about .play-section__title {
    text-shadow: 0 0 20px rgba(0, 229, 255, .06), 0 0 12px rgba(255, 159, 10, .04);
}

.play-detail__preview-title::after,
.play-detail__section--about .play-section__title::after {
    content: "";
    display: block;
    width: min(3.75rem, 24%);
    height: 2px;
    margin-top: .45rem;
    border-radius: 999px;
    background: rgba(0, 184, 212, .48);
    box-shadow: var(--neon-line-glow);
}

.play-detail__preview-count {
    border-color: rgba(0, 229, 255, .22);
    color: #0077b6;
    background: linear-gradient(135deg, rgba(232, 244, 255, .95) 0%, rgba(224, 247, 255, .9) 100%);
    box-shadow: 0 0 8px rgba(0, 229, 255, .08);
}

.play-detail-page .play-shots__frame {
    border-color: rgba(0, 229, 255, .18);
    box-shadow: 0 0 14px rgba(0, 229, 255, .07), var(--shadow-soft);
}

.play-detail-page .play-shots__frame:hover {
    border-color: rgba(0, 229, 255, .42);
    box-shadow: var(--neon-glow-sm), 0 10px 26px rgba(16, 24, 40, .1);
}

.play-detail__section--about {
    border-color: rgba(0, 184, 212, .18);
    box-shadow: var(--shadow-soft), 0 0 28px rgba(0, 229, 255, .07);
}

.play-detail__section--about::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 6%;
    height: 2px;
    background: var(--neon-gradient-line);
    box-shadow: var(--neon-line-glow);
    pointer-events: none;
    z-index: 2;
}

.play-detail__section--about .play-section__head {
    border-bottom-color: rgba(0, 184, 212, .12);
}

.play-detail__section--about .play-detail__body {
    border-color: rgba(0, 229, 255, .16);
    background: var(--play-surface);
    box-shadow: var(--shadow-soft), 0 0 14px rgba(255, 159, 10, .05);
}

.play-detail__section--about .play-detail__body p:first-child {
    box-shadow: inset 4px 0 12px rgba(255, 159, 10, .04);
}

html.play-theme-dark .play-detail__preview {
    border-color: rgba(0, 229, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 24px rgba(0, 229, 255, .1);
}

html.play-theme-dark .play-detail__preview-count {
    border-color: rgba(0, 229, 255, .24);
    color: var(--neon-cyan-soft);
    background: rgba(0, 229, 255, .08);
    box-shadow: 0 0 10px rgba(0, 229, 255, .12);
}

html.play-theme-dark .play-detail-page .play-shots__frame {
    border-color: rgba(0, 229, 255, .24);
    box-shadow: 0 0 16px rgba(0, 229, 255, .12), var(--shadow-soft);
}

.play-detail-page .play-shots__frame--mac {
    border-color: rgba(0, 229, 255, .28);
    box-shadow: 0 0 18px rgba(0, 229, 255, .1), 0 16px 34px rgba(16, 24, 40, .14);
}

.play-detail-page .play-shots__frame--phone,
.play-detail-page .play-shots__frame--ipad,
.play-detail-page .play-shots__frame--watch {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        0 0 16px rgba(0, 229, 255, .08),
        0 12px 28px rgba(16, 24, 40, .12);
}

html.play-theme-dark .play-detail__tron-panel::before {
    background-image:
        linear-gradient(rgba(0, 229, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 229, 255, .16) 1px, transparent 1px);
}

html.play-theme-dark .play-detail__section--about {
    border-color: rgba(0, 229, 255, .22);
    box-shadow: var(--shadow-soft), 0 0 28px rgba(0, 229, 255, .1);
}

html.play-theme-dark .play-detail__section--about .play-detail__body {
    border-color: rgba(0, 229, 255, .18);
    background: var(--play-surface);
    box-shadow: var(--shadow-soft), inset 0 0 18px rgba(0, 229, 255, .05);
}

@media (max-width: 768px) {
    body:not(.play-apps-page):not(.is-tutorials):not(.is-blog):not(.is-article)::before {
        background-attachment: scroll;
    }

    .tut-nav {
        border-top-color: rgba(0, 229, 255, .2);
        box-shadow: 0 -8px 28px -10px rgba(0, 229, 255, .18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn--primary:hover,
    .tut-nav__btn--primary:hover,
    .post-card__link:hover,
    .tut-card__link:hover {
        filter: none;
    }
}