.subtitle-page {
    --sub-cyan: #62b5f3;
    --sub-green: #64d3a1;
    --sub-purple: #b18bf4;
    --sub-amber: #f2c75c;
    --sub-pink: #ff6f9f;
}

.subtitle-page .hero { background: linear-gradient(110deg, rgba(98,181,243,.045), transparent 46%), var(--bg); }
.subtitle-page .hero h1 { max-width: 800px; }
.subtitle-page .hero-glow-one { background: radial-gradient(circle, rgba(98,181,243,.15), transparent 68%); }
.subtitle-page .hero-glow-two { background: radial-gradient(circle, rgba(177,139,244,.08), transparent 70%); }
.subtitle-page .eyebrow span,
.subtitle-page .article-intro::first-letter,
.subtitle-page .breadcrumb span:last-child,
.subtitle-page .hero h1 em { color: var(--sub-cyan); }
.subtitle-page .eyebrow span { background: var(--sub-cyan); }
.subtitle-page .reading-progress span { background: linear-gradient(90deg, var(--sub-cyan), var(--sub-purple)); box-shadow: 0 0 16px rgba(98,181,243,.6); }
.subtitle-page .header-nav .nav-pill { background: rgba(98,181,243,.12); border-color: rgba(98,181,243,.28); }
.subtitle-page .header-nav .nav-pill span,
.subtitle-page .toc-title span { color: var(--sub-cyan); }
.subtitle-page .author-mark,
.subtitle-page .footer-brand::before { background: linear-gradient(145deg, var(--sub-cyan), #756ee8); }
.subtitle-page .section-number { color: var(--sub-cyan); background: rgba(98,181,243,.11); border-color: rgba(98,181,243,.2); }
.subtitle-page .section-heading > div > p { color: var(--sub-cyan); }
.subtitle-page .toc-card nav a.active::before { background: var(--sub-cyan); box-shadow: 0 0 10px rgba(98,181,243,.48); }

.subtitle-page code {
    padding: 2px 6px;
    border: 1px solid rgba(98,181,243,.16);
    border-radius: 7px;
    color: #d8ecff;
    background: rgba(98,181,243,.08);
    font-size: .88em;
}

.subtitle-page .subtitle-visual::before { display: none; }
.subtitle-visual { min-height: 430px; }
.subtitle-screen {
    position: absolute;
    left: 50%;
    top: 48%;
    width: 350px;
    height: 235px;
    transform: translate(-50%,-50%) rotate(-2deg);
    overflow: hidden;
    border: 1px solid rgba(98,181,243,.2);
    border-radius: 25px;
    background:
        radial-gradient(circle at 20% 25%, rgba(98,181,243,.18), transparent 38%),
        linear-gradient(145deg, #242630, #111117 72%);
    box-shadow: 0 36px 80px rgba(0,0,0,.48), inset 0 0 44px rgba(255,255,255,.03), 0 0 70px rgba(98,181,243,.08);
}
.subtitle-screen::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
}
.screen-noise {
    position: absolute;
    inset: 0;
    opacity: .24;
    background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(circle, #000, transparent 78%);
}
.screen-frame {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 28px;
    display: flex;
    justify-content: space-between;
    color: #77747d;
    font-size: 8px;
    letter-spacing: .16em;
}
.screen-frame b { color: #d9eefc; font: 700 9px "Yume Quicksand",sans-serif; }
.subtitle-line {
    position: absolute;
    left: 50%;
    z-index: 3;
    min-width: 230px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font: 700 12px "Yume Quicksand",sans-serif;
    line-height: 1.25;
}
.hard-line {
    bottom: 57px;
    background: rgba(0,0,0,.63);
    text-shadow: 0 1px 2px #000, 0 0 8px rgba(0,0,0,.9);
    box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}
.soft-line {
    bottom: 23px;
    border: 1px dashed rgba(100,211,161,.42);
    color: #dff8ec;
    background: rgba(100,211,161,.1);
}
.track-stack {
    position: absolute;
    left: 50%;
    top: 79px;
    z-index: 2;
    width: 220px;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.track-stack span {
    display: block;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    color: #85818a;
    background: rgba(255,255,255,.03);
    font-size: 8px;
    letter-spacing: .15em;
}
.track-stack span:last-child { color: var(--sub-green); border-color: rgba(100,211,161,.26); background: rgba(100,211,161,.07); }
.track-stack i { justify-self: center; width: 1px; height: 7px; background: rgba(255,255,255,.1); }
.subtitle-chip {
    position: absolute;
    z-index: 5;
    min-width: 128px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 15px;
    background: rgba(29,29,37,.94);
    box-shadow: 0 16px 36px rgba(0,0,0,.34);
    animation: float-card 5s ease-in-out infinite;
}
.subtitle-chip b { color: #fff; font: 700 16px "Yume Quicksand",sans-serif; }
.subtitle-chip span { color: #918c96; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.raw-chip { left: -2%; top: 15%; border-left: 3px solid var(--sub-amber); }
.soft-chip { right: -4%; top: 18%; border-left: 3px solid var(--sub-green); animation-delay: -1.6s; }
.hard-chip { right: 6%; bottom: 10%; border-left: 3px solid var(--sub-purple); animation-delay: -3.2s; }

.format-trio {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 28px 0;
}
.format-trio article {
    position: relative;
    overflow: hidden;
    min-height: 205px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 19px;
    background: rgba(255,255,255,.018);
}
.format-trio article::after {
    content: "";
    position: absolute;
    width: 125px;
    height: 125px;
    right: -52px;
    bottom: -54px;
    border-radius: 50%;
    background: currentColor;
    opacity: .075;
}
.format-trio span {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 13%, transparent);
    font: 700 9px "Yume Quicksand",sans-serif;
    letter-spacing: .13em;
}
.format-trio h3 { margin: 18px 0 7px; font-size: 17px; }
.format-trio p { margin: 0; color: #948f99; font-size: 12px; line-height: 1.62; }
.raw-card { color: var(--sub-amber); }
.soft-card { color: var(--sub-green); }
.hard-card { color: var(--sub-purple); }
.subtitle-definition { border-color: rgba(98,181,243,.17); background: rgba(98,181,243,.05); }
.subtitle-definition .definition-symbol { color: var(--sub-cyan); background: rgba(98,181,243,.11); font-family: "Yume Quicksand",sans-serif; }

.raw-panel {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 16px;
    margin: 28px 0;
}
.raw-screen {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(242,199,92,.16);
    border-radius: 21px;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
        radial-gradient(circle at 50% 40%, rgba(242,199,92,.11), transparent 55%),
        #15151b;
    background-size: 28px 28px, 28px 28px, auto, auto;
    line-height: 1;
}
.raw-screen span,
.raw-screen small { color: #817b72; font-size: 8px; font-weight: 700; letter-spacing: .22em; }
.raw-screen strong { margin: 12px 0 8px; color: var(--sub-amber); font-size: 56px; letter-spacing: -.02em; }
.raw-notes {
    display: grid;
    gap: 12px;
}
.raw-notes article {
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255,255,255,.018);
}
.raw-notes b { color: #f0edf0; font: 700 14px "Yume Quicksand",sans-serif; }
.raw-notes p { margin: 7px 0 0; color: #918d96; font-size: 12px; line-height: 1.62; }
.article-content .article-note {
    padding: 15px 17px;
    border-left: 3px solid var(--sub-amber);
    border-radius: 0 12px 12px 0;
    color: #a6a0a8;
    background: rgba(242,199,92,.045);
    font-size: 13px;
}

.softsub-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 17px;
    margin: 28px 0;
}
.player-panel {
    position: relative;
    min-height: 270px;
    overflow: hidden;
    border: 1px solid rgba(100,211,161,.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 32% 25%, rgba(100,211,161,.15), transparent 42%),
        linear-gradient(145deg, #22252b, #121217 75%);
    box-shadow: inset 0 0 50px rgba(255,255,255,.025);
}
.player-panel::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 54px;
    height: 112px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    background: rgba(255,255,255,.025);
}
.player-top {
    position: absolute;
    left: 21px;
    top: 18px;
    display: flex;
    gap: 6px;
}
.player-top span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.player-caption {
    position: absolute;
    left: 50%;
    top: 125px;
    width: 230px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 9px;
    color: #e6fff0;
    text-align: center;
    background: rgba(100,211,161,.13);
    font: 700 12px "Yume Quicksand",sans-serif;
}
.player-controls {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
}
.player-controls b {
    display: grid;
    place-items: center;
    width: 34px;
    height: 25px;
    border-radius: 8px;
    color: #111;
    background: var(--sub-green);
    font: 700 11px "Yume Quicksand",sans-serif;
}
.player-controls i { height: 5px; border-radius: 99px; background: linear-gradient(90deg, var(--sub-green) 42%, rgba(255,255,255,.13) 42%); }
.player-controls small { color: #9ae9c1; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.soft-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}
.soft-list li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: rgba(255,255,255,.018);
}
.soft-list span {
    flex: 0 0 25px;
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: var(--sub-green);
    background: rgba(100,211,161,.11);
    font-weight: 700;
}
.soft-list p { margin: 0; color: #aaa5ae; font-size: 13px; line-height: 1.55; }

.hardsub-demo {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 17px;
    margin: 28px 0;
}
.burn-frame {
    position: relative;
    min-height: 278px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    border: 1px solid rgba(177,139,244,.18);
    border-radius: 22px;
    background:
        radial-gradient(circle at 28% 22%, rgba(177,139,244,.16), transparent 43%),
        linear-gradient(145deg, #272333, #111116 75%);
}
.burn-frame::before {
    content: "";
    position: absolute;
    inset: 24px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
}
.scan-line {
    position: absolute;
    inset: 0;
    opacity: .22;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 6px);
}
.burn-frame strong {
    position: relative;
    z-index: 2;
    color: var(--sub-purple);
    font-size: 32px;
}
.burn-frame p {
    position: relative;
    z-index: 2;
    max-width: 270px;
    margin: 9px 0 0;
    padding: 9px 12px;
    border-radius: 9px;
    color: #fff;
    background: rgba(0,0,0,.7);
    text-shadow: 0 1px 2px #000;
    font: 700 13px "Yume Quicksand",sans-serif;
}
.hardsub-risks {
    display: grid;
    gap: 10px;
}
.hardsub-risks article {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 13px;
    padding: 17px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255,255,255,.018);
}
.hardsub-risks span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    color: var(--sub-purple);
    background: rgba(177,139,244,.12);
    font: 700 10px "Yume Quicksand",sans-serif;
}
.hardsub-risks h3 { margin: 0 0 4px; font-size: 14px; }
.hardsub-risks p { margin: 0; color: #938e98; font-size: 12px; line-height: 1.55; }

.subtitle-table th:first-child { min-width: 145px; }
.subtitle-table td { min-width: 185px; }
.subtitle-page .table-tag.yes { color: var(--sub-green); background: rgba(100,211,161,.1); }
.subtitle-page .table-tag.no { color: var(--sub-purple); background: rgba(177,139,244,.1); }

.choice-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
    margin: 28px 0;
}
.choice-grid article {
    min-height: 205px;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(255,255,255,.018);
}
.choice-grid span {
    color: var(--sub-cyan);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
}
.choice-grid article:nth-child(1) span { color: var(--sub-amber); }
.choice-grid article:nth-child(2) span { color: var(--sub-green); }
.choice-grid article:nth-child(3) span { color: var(--sub-purple); }
.choice-grid h3 { margin: 16px 0 8px; font-size: 15px; line-height: 1.35; }
.choice-grid p { margin: 0; color: #918d96; font-size: 12px; line-height: 1.62; }
.subtitle-takeaway { border-color: rgba(98,181,243,.17); background: rgba(98,181,243,.045); }
.subtitle-takeaway svg { stroke: var(--sub-cyan); }
.subtitle-takeaway strong { color: var(--sub-cyan); }

.subtitle-conclusion { border-color: rgba(98,181,243,.19); background: linear-gradient(145deg,rgba(98,181,243,.09),rgba(177,139,244,.03) 62%),var(--surface); }
.subtitle-conclusion .conclusion-mark,
.subtitle-conclusion > p:first-of-type { color: var(--sub-cyan)!important; }
.subtitle-conclusion a { background: var(--sub-cyan); box-shadow: 0 8px 22px rgba(98,181,243,.18); }

@media (max-width: 640px) {
    .format-trio,
    .raw-panel,
    .softsub-demo,
    .hardsub-demo,
    .choice-grid { grid-template-columns: 1fr; }
    .format-trio article,
    .choice-grid article { min-height: auto; }
    .raw-screen,
    .player-panel,
    .burn-frame { min-height: 230px; }
}