:root {
  color-scheme: dark;
  --bg: #050714; --bg-2: #081022; --panel: #0b1326; --text: #f7fbff; --muted: #aab7cc;
  --line: rgba(255,255,255,.11); --cyan: #62ecff; --blue: #6e87ff; --violet: #a985ff;
  --pink: #ff7fc6; --orange: #ffad66; --gold: #ffd976; --green: #78e8b5; --red: #ff7c86;
  --shadow: 0 22px 70px rgba(0,0,0,.28); --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; }
body { margin: 0; color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif; background: radial-gradient(circle at 15% -5%,rgba(98,236,255,.09),transparent 28%), radial-gradient(circle at 92% 8%,rgba(169,133,255,.1),transparent 25%), linear-gradient(180deg,var(--bg),#060a18 45%,var(--bg)); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(var(--wrap), calc(100% - 38px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; border-radius: 10px; background: white; color: #07101e; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(5,7,20,.8); backdrop-filter: blur(16px); }
.nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { min-height: 44px; display: inline-flex; align-items: center; font-size: 16px; font-weight: 900; letter-spacing: -.02em; }
.nav-links { display: flex; gap: 22px; color: var(--muted); font-size: 13px; }
.nav-links a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: 9px; }
.hero { position: relative; min-height: 82svh; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.aurora { position: absolute; inset: -24%; z-index: -2; background: radial-gradient(circle at 26% 42%,rgba(98,236,255,.22),transparent 27%), radial-gradient(circle at 72% 35%,rgba(169,133,255,.2),transparent 29%), radial-gradient(circle at 55% 76%,rgba(255,127,198,.09),transparent 25%); filter: blur(72px); animation: breathe 14s ease-in-out infinite; }
.ribbon-wrap { position: absolute; inset-inline: -5%; top: 24%; z-index: -1; overflow: hidden; transform: rotate(-3deg); opacity: .42; }
.ribbon { width: max-content; white-space: nowrap; color: #dce8fa; font-size: 17px; font-weight: 800; animation: marquee 46s linear infinite; }
.knowledge { position: absolute; z-index: -1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(9,17,35,.6); backdrop-filter: blur(11px); box-shadow: 0 14px 40px rgba(0,0,0,.22); font-size: 12px; font-weight: 820; animation: float 7s ease-in-out infinite; }
.knowledge small { display: block; margin-bottom: 3px; color: var(--muted); font-size: 8px; letter-spacing: .13em; }
.k1 { left: 4%; top: 14%; color: var(--cyan); }.k2 { right: 4%; top: 17%; color: var(--violet); animation-delay: 1s; }.k3 { right: 8%; bottom: 13%; color: var(--green); animation-delay: 2s; }
.hero-inner { max-width: 870px; padding-block: 96px 82px; text-align: center; }
.eyebrow { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
h1 { margin: 16px 0 18px; font-size: clamp(44px,7.7vw,84px); line-height: 1.04; letter-spacing: -.055em; text-wrap: balance; }
h1 span { color: var(--cyan); text-shadow: 0 0 30px rgba(98,236,255,.18); }
.hero-lead { max-width: 660px; margin: 0 auto 28px; color: #c3cee0; font-size: clamp(16px,2vw,20px); line-height: 1.85; }
.hero-lead strong { color: white; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 1px solid var(--line); border-radius: 14px; font-weight: 880; }
.button-primary { color: #04111b; background: linear-gradient(135deg,var(--cyan),#87d9ff 42%,var(--violet)); box-shadow: 0 0 30px rgba(98,236,255,.18); }
.button-secondary { background: rgba(255,255,255,.045); }
.subject-bar { position: relative; z-index: 8; margin-top: -24px; }
.subject-bar-inner { display: flex; gap: 9px; overflow-x: auto; padding: 9px; border: 1px solid var(--line); border-radius: 17px; background: rgba(8,14,29,.9); box-shadow: var(--shadow); scrollbar-width: none; }
.subject-bar-inner::-webkit-scrollbar { display: none; }
.subject-pill { flex: 1 0 auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); font-size: 12px; font-weight: 850; }
.subject-pill.chemistry { color: var(--cyan); }.subject-pill.mathematics { color: var(--violet); }.subject-pill.physics { color: var(--green); }.subject-pill.english { color: var(--pink); }.subject-pill.classics { color: var(--gold); }
.section { padding: 72px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-heading h2 { margin: 7px 0 0; font-size: clamp(28px,4vw,40px); letter-spacing: -.045em; }
.section-heading > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.shelf { margin-bottom: 58px; }
.shelf-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.shelf-heading h3 { margin: 0; font-size: 23px; }.shelf-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.product-rail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }
.product-card, .empty-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(150deg,rgba(255,255,255,.055),rgba(255,255,255,.016)); box-shadow: 0 16px 40px rgba(0,0,0,.17); }
.product-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.product-card:hover { transform: translateY(-4px); }
.cover { position: relative; aspect-ratio: 4/5; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; isolation: isolate; }
.cover::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,transparent 45%,rgba(1,4,12,.58)); }
.cover-chemistry { background: radial-gradient(circle at 18% 14%,rgba(98,236,255,.23),transparent 27%), radial-gradient(circle at 82% 22%,rgba(255,173,102,.18),transparent 24%), #0a1830; }
.cover-head,.cover-body,.cover-foot { position: relative; z-index: 2; }.cover-head,.cover-foot { display: flex; justify-content: space-between; gap: 8px; color: #dbe7f7; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.cover-body h4 { margin: 0 0 10px; color: var(--cyan); font-size: 24px; line-height: 1.15; letter-spacing: -.04em; }.cover-body p { margin: 0; color: #b7dce5; font-size: 11px; line-height: 1.55; }
.cover-visual { position: absolute; inset: 0; z-index: -1; opacity: .85; }.cover-formula { position: absolute; color: var(--cyan); font-weight: 900; opacity: .25; white-space: nowrap; }.formula-1 { top: 25%; left: 8%; font-size: 24px; transform: rotate(-8deg); }.formula-2 { top: 47%; right: 4%; color: var(--orange); font-size: 15px; transform: rotate(8deg); }
.product-info { padding: 13px 4px 3px; }.product-top { display: flex; justify-content: space-between; margin-bottom: 8px; }.status-badge { padding: 5px 8px; border: 1px solid rgba(98,236,255,.34); border-radius: 999px; color: var(--cyan); background: rgba(98,236,255,.08); font-size: 9px; font-weight: 900; }
.product-info h4 { margin: 0 0 5px; color: var(--cyan); font-size: 16px; line-height: 1.35; }.product-info p { margin: 0; color: #b7dce5; font-size: 12px; line-height: 1.65; }
.empty-card { min-height: 120px; display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; }
.loading-copy,.notice { padding: 20px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.025); }
.trust-section { padding-top: 34px; }.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.trust-card { padding: 26px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.025); }.trust-card h2 { margin: 8px 0 10px; font-size: 24px; }.trust-card p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
footer { padding: 30px 0 46px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }.footer-inner { display: flex; justify-content: space-between; gap: 20px; }.footer-inner strong { color: var(--text); }
@keyframes marquee { to { transform: translateX(-50%); } } @keyframes float { 50% { transform: translateY(-8px); } } @keyframes breathe { 50% { transform: translate(2%,4%) scale(1.06); } }
@media (max-width: 980px) { .product-rail { grid-template-columns: repeat(2,minmax(0,1fr)); }.trust-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .wrap { width: min(100% - 28px,var(--wrap)); }.nav-links { gap: 12px; }.nav-links a:nth-child(2) { display: none; }.hero { min-height: 76svh; }.hero-inner { padding-block: 86px 72px; }.knowledge { font-size: 9px; opacity: .62; }.k1 { left: -18%; }.k2 { right: -24%; }.k3 { right: -20%; }.section { padding: 56px 0; }.section-heading { align-items: flex-start; flex-direction: column; }.shelf-heading { align-items: flex-start; flex-direction: column; }.product-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -14px; padding: 2px 14px 13px; gap: 12px; scrollbar-width: none; }.product-card,.empty-card { flex: 0 0 82%; scroll-snap-align: start; }.footer-inner { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .aurora,.ribbon,.knowledge,.detail-knowledge { animation: none !important; } .product-card { transition: none; } }

.subject-chemistry { --subject-main:#7feeff; --subject-secondary:#ffb56f; --subject-soft:#b7dce5; --subject-glow:rgba(98,236,255,.15); }
.subject-mathematics { --subject-main:#c1a5ff; --subject-secondary:#72a4ff; --subject-soft:#d1c7ea; --subject-glow:rgba(169,133,255,.16); }
.subject-physics { --subject-main:#8cf0bf; --subject-secondary:#71e4f1; --subject-soft:#b7ded3; --subject-glow:rgba(120,232,181,.15); }
.subject-english { --subject-main:#ff96d2; --subject-secondary:#ff818e; --subject-soft:#edbfd8; --subject-glow:rgba(255,127,198,.15); }
.subject-classics { --subject-main:#ffe08a; --subject-secondary:#ffb86b; --subject-soft:#e9d7ad; --subject-glow:rgba(255,217,118,.14); }
.shelf-heading h3,.subject-mathematics .product-info h4,.subject-physics .product-info h4,.subject-english .product-info h4,.subject-classics .product-info h4 { color: var(--subject-main); }
.shelf-heading p,.subject-mathematics .product-info p,.subject-physics .product-info p,.subject-english .product-info p,.subject-classics .product-info p { color: var(--subject-soft); }
.shelf .product-card { border-color: color-mix(in srgb,var(--subject-main) 24%,rgba(255,255,255,.08)); box-shadow: 0 16px 42px rgba(0,0,0,.18),0 0 26px var(--subject-glow); }
.shelf .product-card:hover { border-color: color-mix(in srgb,var(--subject-main) 48%,rgba(255,255,255,.12)); box-shadow: 0 22px 54px rgba(0,0,0,.26),0 0 34px var(--subject-glow); }
.shelf .status-badge,.product-card[class*="subject-"] .status-badge { color: var(--subject-main); border-color: color-mix(in srgb,var(--subject-main) 34%,transparent); background: color-mix(in srgb,var(--subject-main) 8%,rgba(255,255,255,.02)); }
.cover-mathematics { background: radial-gradient(circle at 20% 15%,rgba(169,133,255,.24),transparent 28%), radial-gradient(circle at 82% 76%,rgba(110,135,255,.18),transparent 28%), #111329; }
.cover-physics { background: radial-gradient(circle at 18% 16%,rgba(120,232,181,.22),transparent 28%), radial-gradient(circle at 80% 74%,rgba(98,236,255,.15),transparent 26%), #0c1d1d; }
.cover-english { background: radial-gradient(circle at 18% 18%,rgba(255,127,198,.24),transparent 28%), radial-gradient(circle at 78% 78%,rgba(255,124,134,.16),transparent 25%), #211024; }
.cover-classics { background: radial-gradient(circle at 18% 16%,rgba(255,217,118,.22),transparent 27%), radial-gradient(circle at 80% 75%,rgba(255,173,102,.16),transparent 26%), #201710; }
.subject-mathematics .cover-body h4,.subject-physics .cover-body h4,.subject-english .cover-body h4,.subject-classics .cover-body h4,.detail-hero-copy h1 { color: var(--subject-main); text-shadow: 0 0 22px var(--subject-glow); }
.subject-mathematics .cover-body p,.subject-physics .cover-body p,.subject-english .cover-body p,.subject-classics .cover-body p { color: var(--subject-soft); }
.subject-mathematics .cover-formula,.subject-physics .cover-formula,.subject-english .cover-formula,.subject-classics .cover-formula { color: var(--subject-main); }
.subject-mathematics .formula-2,.subject-physics .formula-2,.subject-english .formula-2,.subject-classics .formula-2,.formula-3 { color: var(--subject-secondary); }
.formula-3 { left: 7%; bottom: 12%; font-size: 31px; opacity: .14; transform: rotate(-4deg); }
.card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.card-meta span { padding: 5px 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--subject-soft,#c7d2e3); background: rgba(255,255,255,.025); font-size: 9px; }
.price-badge { padding: 5px 10px; border: 1px solid rgba(255,179,82,.42); border-radius: 999px; color: #ffd06a; background: linear-gradient(135deg,rgba(255,139,61,.18),rgba(255,205,92,.1)); box-shadow: 0 0 18px rgba(255,145,65,.12); font-size: 14px; font-weight: 950; }
.empty-card { background: radial-gradient(circle at 12% 20%,color-mix(in srgb,var(--subject-main) 8%,transparent),transparent 35%), rgba(255,255,255,.018); border-color: color-mix(in srgb,var(--subject-main) 16%,var(--line)); }
.empty-card strong,.empty-card span { display: block; }.empty-card strong { color: var(--subject-main); }.empty-card span { max-width: 260px; margin-top: 7px; color: var(--subject-soft); line-height: 1.6; }

.updates-section { padding-top: 24px; }.compact-heading { margin-bottom: 22px; }.recent-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; }.recent-empty { grid-column: 1/-1; display: flex; align-items: center; gap: 18px; min-height: 128px; padding: 24px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.022); }.recent-empty p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }.empty-mark { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(98,236,255,.28); border-radius: 50%; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.bundle-section { padding-top: 20px; }.bundle-card { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; align-items: center; padding: 29px; border: 1px solid rgba(255,255,255,.15); border-radius: 25px; background: radial-gradient(circle at 4% 15%,rgba(98,236,255,.1),transparent 25%), radial-gradient(circle at 92% 80%,rgba(169,133,255,.1),transparent 26%), rgba(255,255,255,.026); }.bundle-card h2 { margin: 8px 0 10px; font-size: clamp(28px,4vw,38px); letter-spacing: -.04em; }.bundle-card > div > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }.bundle-status { text-align: right; }.bundle-status span { display: inline-block; padding: 7px 10px; border: 1px solid rgba(255,217,118,.25); border-radius: 999px; color: var(--gold); background: rgba(255,217,118,.12); font-size: 10px; font-weight: 900; }.bundle-status strong,.bundle-status small { display: block; }.bundle-status strong { margin-top: 12px; color: var(--gold); font-size: 24px; }.bundle-status small { margin-top: 6px; color: var(--muted); line-height: 1.5; }
.free-section { padding-top: 22px; }.free-card { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; padding: 30px; border: 1px solid rgba(98,236,255,.17); border-radius: 25px; background: linear-gradient(150deg,rgba(98,236,255,.05),rgba(169,133,255,.035)); }.free-card h2 { margin: 8px 0 10px; font-size: clamp(30px,4vw,39px); letter-spacing: -.04em; }.free-card p { max-width: 640px; margin: 0 0 20px; color: var(--muted); line-height: 1.8; }.free-preview { position: relative; aspect-ratio: 4/5; width: min(100%,260px); max-height: 330px; margin-left: auto; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(circle at 25% 18%,rgba(98,236,255,.2),transparent 34%), radial-gradient(circle at 80% 62%,rgba(169,133,255,.18),transparent 32%), #0b1730; }.free-ribbon { position: absolute; top: 28px; right: -42px; width: 160px; padding: 7px; transform: rotate(37deg); color: #05101b; background: linear-gradient(135deg,var(--cyan),var(--violet)); font-size: 9px; font-weight: 950; text-align: center; }.sample-equation { position: absolute; top: 27%; left: 17px; color: var(--cyan); font-size: 18px; opacity: .72; }.free-preview strong { font-size: 26px; line-height: 1.16; }.free-preview small { margin-top: 13px; color: var(--cyan); }
.button-disabled { cursor: not-allowed; color: #8491a5; background: rgba(255,255,255,.04); border-color: var(--line); }.button-price { color: #1a0c02; background: linear-gradient(135deg,var(--orange),var(--gold)); box-shadow: 0 0 28px rgba(255,173,102,.18); }
.floating-feedback { position: fixed; right: max(14px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); z-index: 45; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid rgba(98,236,255,.25); border-radius: 999px; color: #cae9ee; background: rgba(8,16,34,.88); box-shadow: 0 14px 36px rgba(0,0,0,.3); backdrop-filter: blur(14px); font-size: 11px; font-weight: 800; }.floating-feedback[aria-disabled="true"] { color: #8795aa; border-color: var(--line); cursor: not-allowed; }
.footer-inner p { margin: 8px 0 0; }.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 18px; max-width: 720px; }.footer-links a { color: #d8e2f1; }.footer-links span { color: #748196; }

.product-page { min-height: 72vh; }.detail-hero { position: relative; overflow: hidden; padding: 68px 0 76px; border-bottom: 1px solid var(--line); isolation: isolate; }.detail-hero::before { content:''; position:absolute; inset:-20%; z-index:-2; background: radial-gradient(circle at 22% 35%,var(--subject-glow),transparent 27%), radial-gradient(circle at 80% 24%,rgba(169,133,255,.1),transparent 28%); filter: blur(45px); }.detail-hero-grid { display: grid; grid-template-columns: minmax(250px,390px) minmax(0,1fr); gap: clamp(38px,7vw,92px); align-items: center; }.detail-cover-wrap { width: min(100%,360px); }.cover-large { width: 100%; box-shadow: 0 28px 80px rgba(0,0,0,.36),0 0 36px var(--subject-glow); }.cover-image { width: 100%; aspect-ratio: 4/5; display: block; object-fit: cover; border-radius: 16px; }.cover-image-large { box-shadow: 0 28px 80px rgba(0,0,0,.36); }.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; color: var(--muted); font-size: 11px; }.breadcrumbs a { color: var(--subject-main); }.detail-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }.type-label { color: var(--subject-soft); font-size: 11px; font-weight: 800; }.detail-hero-copy h1 { margin: 16px 0 10px; font-size: clamp(38px,6vw,66px); }.detail-tagline { margin: 0 0 16px; color: var(--subject-soft); font-size: clamp(17px,2vw,22px); font-weight: 750; line-height: 1.6; }.detail-description { max-width: 700px; margin: 0; color: var(--muted); line-height: 1.85; }.detail-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 24px 0; }.meta-item { padding: 11px 13px; border: 1px solid color-mix(in srgb,var(--subject-main) 16%,var(--line)); border-radius: 12px; background: rgba(255,255,255,.022); }.meta-item dt { color: var(--muted); font-size: 9px; }.meta-item dd { margin: 4px 0 0; color: var(--subject-soft); font-size: 12px; font-weight: 750; }.detail-cta-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }.detail-cta-box small { color: var(--muted); }
.detail-knowledge { position: absolute; z-index: -1; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--subject-main) 18%,var(--line)); border-radius: 12px; color: var(--subject-main); background: rgba(9,17,35,.5); font-size: 11px; font-weight: 850; opacity: .46; animation: float 9s ease-in-out infinite; }.detail-k1 { top: 14%; left: 3%; }.detail-k2 { top: 20%; right: 3%; animation-delay: 2s; }.detail-k3 { right: 7%; bottom: 9%; animation-delay: 4s; }
.detail-body { padding-block: 72px 96px; }.detail-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 68px; }.detail-copy-card,.feedback-card { padding: 26px; border: 1px solid var(--line); border-radius: 21px; background: rgba(255,255,255,.024); }.detail-copy-card h2,.feedback-card h2 { margin: 0 0 14px; font-size: 23px; }.detail-list { margin: 0; padding-left: 20px; color: var(--subject-soft); line-height: 1.85; }.detail-section { margin-top: 72px; }.detail-section > h2 { margin: 8px 0 22px; font-size: clamp(28px,4vw,38px); letter-spacing: -.04em; }.preview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }.preview-image,.preview-placeholder { width: 100%; aspect-ratio: 3/4; border: 1px solid var(--line); border-radius: 18px; }.preview-image { object-fit: cover; }.preview-placeholder { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; background: radial-gradient(circle at 18% 18%,var(--subject-glow),transparent 34%),linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012)); }.preview-placeholder > span { position: absolute; top: 17px; right: 18px; color: var(--subject-main); font-size: 11px; }.preview-placeholder strong { color: var(--subject-main); font-size: 17px; }.preview-placeholder small { margin-top: 6px; color: var(--muted); line-height: 1.5; }.series-empty { padding: 22px; border: 1px dashed color-mix(in srgb,var(--subject-main) 24%,var(--line)); border-radius: 17px; color: var(--subject-soft); background: var(--subject-glow); }.changelog-list { margin: 0; padding: 0; list-style: none; border-left: 1px solid color-mix(in srgb,var(--subject-main) 32%,var(--line)); }.changelog-list li { position: relative; display: grid; grid-template-columns: 100px 70px 1fr; gap: 13px; padding: 0 0 26px 25px; }.changelog-list li::before { content:''; position:absolute; top:4px; left:-5px; width:9px; height:9px; border-radius:50%; background:var(--subject-main); box-shadow:0 0 14px var(--subject-glow); }.changelog-list time,.changelog-list p { color: var(--muted); font-size: 12px; }.changelog-list p { margin: 0; }.feedback-card { margin-top: 72px; display: flex; align-items: center; justify-content: space-between; gap: 26px; border-color: color-mix(in srgb,var(--subject-main) 20%,var(--line)); }.feedback-card h2 { margin-top: 8px; }.feedback-card p:last-child { max-width: 680px; margin: 0; color: var(--muted); line-height: 1.75; }.not-found { min-height: 68vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }.not-found h1 { margin-bottom: 10px; }.not-found > p:not(.eyebrow) { max-width: 600px; margin: 0 0 26px; color: var(--muted); line-height: 1.8; }
@media (max-width: 980px) { .recent-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.bundle-card,.free-card,.detail-hero-grid { grid-template-columns: 1fr; }.bundle-status { text-align: left; }.free-preview { margin: 8px auto 0; }.detail-cover-wrap { width: min(72vw,360px); margin-inline: auto; }.detail-hero-copy { max-width: 720px; margin-inline: auto; }.detail-copy-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .nav-links a:nth-child(3) { display:none; }.recent-grid { grid-template-columns: 1fr; }.recent-empty { align-items: flex-start; }.bundle-card,.free-card { padding: 22px; }.bundle-status strong { font-size: 21px; }.footer-links { justify-content: flex-start; flex-direction: column; }.floating-feedback { max-width: calc(100vw - 28px); }.detail-hero { padding: 42px 0 58px; }.detail-hero-grid { gap: 32px; }.detail-cover-wrap { width: min(74vw,310px); }.detail-hero-copy h1 { font-size: clamp(36px,12vw,54px); }.detail-knowledge { font-size: 8px; opacity: .28; }.detail-k1 { left: -17%; }.detail-k2 { right: -24%; }.detail-k3 { right: -20%; }.detail-body { padding-block: 54px 84px; }.detail-copy-grid,.detail-section,.feedback-card { margin-top: 54px; }.preview-grid { display: flex; overflow-x: auto; margin-inline: -14px; padding: 2px 14px 12px; scroll-snap-type: x mandatory; scrollbar-width:none; }.preview-image,.preview-placeholder { flex: 0 0 76%; scroll-snap-align:start; }.feedback-card { align-items:flex-start; flex-direction:column; }.changelog-list li { grid-template-columns: 1fr; gap: 5px; }.detail-meta { grid-template-columns: 1fr 1fr; } }
@media (max-width: 390px) { .nav-links a:nth-child(4) { display:none; }.brand { font-size:15px; }.hero-inner { padding-top:78px; }.detail-meta { grid-template-columns:1fr; }.detail-cta-box .button { width:100%; }.footer-inner { padding-right:6px; } }
.detail-hero-copy h1 { word-break: keep-all; }
@media (max-width: 700px) { .nav-links a { display:none; }.nav-links a:nth-child(2) { display:inline-flex; } }