/* ==========================================================================
   Mugilan93 – main stylesheet (minimal)
   ========================================================================== */

:root {
	--ink: #111111;
	--text: #3d3d3d;
	--muted: #777777;
	--line: #e9e9e6;
	--bg: #ffffff;
	--bg-alt: #f6f6f3;
	--surface: #ffffff;
	--accent: #2450e6;
	--accent-soft: #eef1fd;
	--code-bg: #16181d;
	--code-text: #e6e6e6;
	--good: #15803d;
	--bad: #c62828;
	--warn: #b45309;
	--wa: #128c4a;
	--radius: 14px;
	--radius-sm: 10px;
	--font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
	--header-h: 72px;
	color-scheme: light;
}
:root[data-theme="dark"] {
	--ink: #f2f2f2;
	--text: #c9c9c9;
	--muted: #8d8d8d;
	--line: #262626;
	--bg: #0e0e0e;
	--bg-alt: #151515;
	--surface: #131313;
	--accent: #85a3ff;
	--accent-soft: #171d30;
	--code-bg: #18191d;
	--good: #4ade80;
	--bad: #f87171;
	--warn: #fbbf24;
	--wa: #34d17a;
	color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ink: #f2f2f2; --text: #c9c9c9; --muted: #8d8d8d; --line: #262626; --bg: #0e0e0e; --bg-alt: #151515; --surface: #131313;
		--accent: #85a3ff; --accent-soft: #171d30; --code-bg: #18191d; --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --wa: #34d17a;
		color-scheme: dark;
	}
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html.mg-noscroll { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 .9375rem/1.7 var(--font); -webkit-font-smoothing: antialiased; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--ink); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); font-family: var(--font); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; word-spacing: .03em; }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--ink); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed !important; z-index: 1000; top: 8px; left: 8px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--surface); border-radius: 8px; }
.icon { flex: none; width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.container { width: min(960px, 100% - 40px); margin-inline: auto; }
.container-mid { width: min(880px, 100% - 40px); margin-inline: auto; }
.container-narrow { width: min(680px, 100% - 40px); margin-inline: auto; }
.lesson-layout.container { width: min(1160px, 100% - 40px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- Buttons & small parts ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 42px; padding: .55em 1.1em; border: 1px solid transparent; border-radius: 10px; font: 500 .93rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-sm { min-height: 34px; padding: .4em .85em; font-size: .85rem; }
.btn-lg { min-height: 48px; padding: .7em 1.3em; font-size: 1rem; }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 82%, var(--bg)); color: var(--bg); }
.btn-ghost { border-color: var(--line); background: transparent; color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-track { background: var(--track, var(--ink)); color: #fff; }
.btn-track:hover { color: #fff; filter: brightness(1.08); }
.btn-wa .icon { color: var(--wa); }
.btn-primary.btn-wa .icon { color: inherit; }
.link-arrow { display: inline-flex; align-items: center; gap: .35em; color: var(--ink); font-weight: 500; text-decoration: none; }
.link-arrow .icon { transition: transform .15s; }
.link-arrow:hover { color: var(--accent); }
.link-arrow:hover .icon { transform: translateX(3px); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--bg-alt); }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.tags li, .tags a { display: inline-block; padding: .28em .75em; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .85rem; line-height: 1.4; text-decoration: none; }
.tags a:hover { border-color: var(--ink); color: var(--ink); }
.tags li:has(a) { padding: 0; border: 0; }
.tags-spaced { margin: 2rem 0; }
.chip { display: inline-flex; align-items: center; padding: .15em .65em; border-radius: 999px; background: var(--bg-alt); color: var(--text); font-size: .78rem; font-weight: 500; text-decoration: none; }
.filter-list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 1.5rem 0 0; padding: 0; list-style: none; font-size: .93rem; }
.filter-list a { color: var(--muted); text-decoration: none; }
.filter-list a:hover, .filter-list a.is-active { color: var(--ink); }
.filter-list a.is-active { text-decoration: underline; text-underline-offset: 6px; }
.eyebrow { margin: 0 0 .4rem; color: var(--muted); font-size: .85rem; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; padding: 12px 0 0; }
.header-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 54px; padding: 0 .5rem 0 1.25rem; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 6px 24px rgba(0, 0, 0, .04); }
.site-header.is-scrolled .header-inner { box-shadow: 0 8px 28px rgba(0, 0, 0, .08); }
.logo { color: var(--ink); font-size: 1.02rem; font-weight: 700; letter-spacing: -.03em; text-decoration: none; }
.logo:hover { color: var(--ink); }
.logo-dot { color: var(--accent); }
.main-nav .menu { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.main-nav { margin-inline: auto; }
.main-nav .menu a { display: block; padding: .35em .65em; border-radius: 999px; color: var(--muted); font-size: .86rem; font-weight: 500; text-decoration: none; }
.main-nav .menu a:hover { color: var(--ink); }
.main-nav .current-menu-item > a, .main-nav .current-menu-ancestor > a, .main-nav .current_page_parent > a, .main-nav .current-menu-parent > a { color: var(--ink); }
.main-nav .nav-contact { display: none; }
.header-tools { display: flex; align-items: center; gap: .15rem; }
.contact-icons { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.contact-icons a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 36px; height: 36px; border-radius: 999px; color: var(--ink); text-decoration: none; }
.contact-icons a:hover { background: var(--bg-alt); color: var(--ink); }
.header-contact { padding-right: .4rem; margin-right: .3rem; border-right: 1px solid var(--line); }
.when-dark, .when-open { display: none; }
:root[data-theme="dark"] .when-dark { display: inline; }
:root[data-theme="dark"] .when-light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .when-dark { display: inline; } :root:not([data-theme="light"]) .when-light { display: none; } }
.nav-toggle { display: none; }
.header-search { padding: 0 0 1rem; }
.search-form { display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.search-form:focus-within { border-color: var(--ink); }
.search-form .icon { color: var(--muted); }
.search-field { flex: 1; min-width: 0; padding: .5rem 0; border: 0; background: transparent; color: var(--ink); font: inherit; outline: none; }
@media (max-width: 900px) {
	.header-inner { gap: .75rem; }
	.nav-toggle { display: inline-grid; }
	.header-contact { display: none; }
	.header-tools { margin-left: auto; }
	.header-inner { position: relative; }
	.main-nav { position: absolute; inset: calc(100% + 8px) 0 auto 0; display: none; max-height: calc(100vh - var(--header-h) - 24px); overflow: auto; margin: 0; padding: .5rem 1.25rem 1.25rem; background: var(--bg); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 40px rgba(0, 0, 0, .12); }
	.nav-open .main-nav { display: block; }
	.nav-open .when-closed { display: none; }
	.nav-open .when-open { display: inline; }
	.main-nav .menu { flex-direction: column; gap: 0; }
	.main-nav .menu a { padding: .7rem 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); font-size: 1.05rem; }
	.main-nav .nav-contact { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
	.main-nav .nav-contact a { padding: 0 .9rem; border: 1px solid var(--line); }
}

/* ---------- Sections & page heads ---------- */
.section { padding: clamp(2.75rem, 6vw, 4.25rem) 0; }
.section-tight { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.section-line { border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-alt); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.section-title { margin: 0 0 1.5rem; font-size: clamp(1.5rem, 2.8vw, 1.9rem); letter-spacing: -.035em; }
.section-head .section-title { margin: 0; }
.section-lead { max-width: 640px; color: var(--muted); }
.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1rem, 2vw, 1.5rem); }
.page-title { margin: 0 0 .5rem; font-size: clamp(1.75rem, 3.6vw, 2.35rem); letter-spacing: -.035em; }
.page-lead { max-width: 600px; margin: 0; color: var(--muted); font-size: 1rem; }
.page-search { max-width: 520px; margin-top: 1.25rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; padding: 0; list-style: none; color: var(--muted); font-size: .85rem; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .5; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }
.empty-note { max-width: 560px; padding: 1.5rem 0; color: var(--muted); }

/* ---------- Home ---------- */
.mono-label { margin: 0; color: var(--muted); font: 500 .72rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.mono-link { display: inline-flex; align-items: center; gap: .3em; color: var(--muted); font: 500 .8rem var(--mono); text-decoration: none; }
.mono-link:hover { color: var(--ink); }
.mono-link .icon { width: .95em; height: .95em; }
.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; }
.hello { margin: 0 0 1.1rem; color: var(--ink); font-size: 1.35rem; font-weight: 500; }
.hero-title { margin: 0 0 2rem; font-size: clamp(1.65rem, 3.3vw, 2.25rem); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; word-spacing: .06em; }
.hero-title .u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.btn-open { gap: .65em; padding-inline: 1.15em 1.3em; border-radius: 999px; background: var(--ink); color: var(--bg); }
.btn-open:hover { background: color-mix(in srgb, var(--ink) 82%, var(--bg)); color: var(--bg); }
.pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #22c55e; opacity: 0; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.btn-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); }
.btn-icon:hover { border-color: var(--ink); color: var(--ink); }
.hero-side { display: grid; justify-items: center; gap: .9rem; }
.hero-photo { width: 100%; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: 28px; background: var(--bg-alt); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.avatar-initials { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 4rem; font-weight: 700; }
.worked-with { display: grid; gap: 1.1rem; padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 5vw, 3.5rem); }
.wordmarks { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; }
.wordmarks small { font-size: .7em; font-weight: 500; }
#about, #skills, #works { border-top: 1px solid var(--line); }
.about-text { max-width: 760px; margin: 0 0 2.5rem; color: var(--muted); font-size: 1.08rem; line-height: 1.75; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.stats li { display: grid; gap: .2rem; }
.stats strong { color: var(--ink); font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; }
.stats span { color: var(--muted); font-size: .82rem; }
.skill-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.skill-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-alt); }
.skill-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 1rem; border-radius: 12px; background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.skill-card h3 { margin: 0 0 .2rem; font-size: 1.02rem; }
.skill-card p { margin: 0 0 1rem; color: var(--muted); font-size: .86rem; }
.skill-card .tags { gap: .35rem; }
.skill-card .tags li { padding: .2em .65em; background: var(--bg); font-size: .78rem; }
.section-flush { padding-top: 0; }
.cta-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: 18px; }
.cta-title { margin: 0; color: var(--ink); font-weight: 600; }
.cta-text { margin: 0; color: var(--muted); font-size: .88rem; }
.cta-card .btn { border-radius: 999px; font-size: .86rem; }
@media (max-width: 760px) {
	.hero-grid { grid-template-columns: 1fr; }
	.hero-side { order: -1; justify-items: start; }
	.hero-photo { width: 120px; border-radius: 50%; }
	.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.skill-cards { grid-template-columns: 1fr; }
	.wordmarks { justify-content: flex-start; font-size: 1.05rem; }
}
/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 2.5rem 1.75rem; }
.grid-post, .grid-course, .grid-video { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid-track { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.grid-project { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
@media (max-width: 860px) { .grid-project { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid-project { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; min-width: 0; }
.card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--bg-alt); }
.card-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-media-empty { display: grid; place-items: center; height: 100%; color: var(--muted); }
.card-media-empty .icon { width: 2.5rem; height: 2.5rem; opacity: .5; }
.card-body { display: flex; flex: 1; flex-direction: column; padding-top: 1rem; }
.card-meta { margin: 0 0 .4rem; color: var(--muted); font-size: .83rem; }
.card-meta a { color: inherit; text-decoration: none; }
.card-title { margin: 0 0 .4rem; font-size: 1.02rem; font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-text { margin: 0; color: var(--muted); font-size: .9rem; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: auto 0 0; padding-top: 1rem; }
.price { color: var(--ink); font-weight: 600; }
.card-project .card-media { border: 1px solid var(--line); }
.card-project .card-title { font-size: 1.05rem; }
.card-project .card-meta { margin: .6rem 0 0; }
.card-track { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s; }
.card-track:hover { border-color: var(--track, var(--ink)); }
.card-track .card-media { aspect-ratio: 16 / 7; border-radius: 0; }
.card-track .card-body { padding: 1.3rem 1.4rem 1.4rem; }
.card-track .card-text { margin-bottom: 1.1rem; }
.card-track .link-arrow { margin-top: auto; font-size: .93rem; }
.track-badge { display: inline-grid; place-items: center; align-self: flex-start; min-width: 40px; height: 26px; margin-bottom: 1rem; padding: 0 .55rem; border-radius: 7px; background: color-mix(in srgb, var(--track, var(--ink)) 14%, transparent); color: var(--track, var(--ink)); font: 600 .74rem var(--mono); }
:root[data-theme="dark"] .track-badge { background: color-mix(in srgb, var(--track, var(--ink)) 24%, transparent); color: color-mix(in srgb, var(--track, var(--ink)) 60%, #fff); }
.track-badge-lg { min-width: 56px; height: 34px; font-size: .9rem; }
.progress { position: relative; display: grid; gap: .35rem; margin-bottom: 1.1rem; }
.progress::before { content: ""; height: 4px; border-radius: 2px; background: var(--line); }
.progress i { position: absolute; top: 0; left: 0; width: 0; height: 4px; border-radius: 2px; background: var(--track, var(--ink)); transition: width .4s; }
.progress span { color: var(--muted); font-size: .78rem; }
.progress-sm { margin: .6rem 0 .8rem; }
.empty-state { max-width: 560px; padding: 2rem 0; }
.service-icon { display: none; }

/* ---------- Pagination ---------- */
.pagination { margin-top: 3rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; }
.page-numbers { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 .55rem; border-radius: 10px; color: var(--muted); font-weight: 500; text-decoration: none; }
.page-numbers:hover { background: var(--bg-alt); color: var(--ink); }
.page-numbers.current { background: var(--ink); color: var(--bg); }

/* ---------- Article ---------- */
.read-progress { position: fixed; top: 0; left: 0; z-index: 60; width: 100%; height: 2px; }
.read-progress span { display: block; width: 0; height: 100%; background: var(--accent); }
.article-head { padding: clamp(2rem, 5vw, 3.5rem) 0 1.75rem; }
.article-title { font-size: clamp(1.75rem, 3.8vw, 2.4rem); letter-spacing: -.035em; }
.article-lead { margin: 0; color: var(--muted); font-size: 1.05rem; }
.article-cover { margin-block: 0 2.5rem; }
.article-cover img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--radius); }
.article-cover figcaption { margin-top: .5rem; color: var(--muted); font-size: .78rem; }
.article-cover figcaption a { color: inherit; }
.article-layout { width: min(680px, 100% - 40px); padding-bottom: 3rem; }
.article-layout.has-side { display: grid; grid-template-columns: minmax(0, 680px) 300px; justify-content: center; gap: 3rem; width: min(1060px, 100% - 40px); }
.article-main { min-width: 0; }
.side-sticky { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 1100px) { .article-layout.has-side { display: block; width: min(680px, 100% - 40px); } .article-side { display: none; } }

/* ---------- Entry content ---------- */
.entry-content { color: var(--text); font-size: 1rem; line-height: 1.75; }
.entry-content > * { margin-block: 0 1.25em; }
.entry-content h2 { margin-top: 2.2em; font-size: clamp(1.3rem, 2.6vw, 1.5rem); }
.entry-content h3 { margin-top: 1.8em; font-size: 1.12rem; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content li { margin-bottom: .45em; }
.entry-content li::marker { color: var(--muted); }
.entry-content a { color: var(--accent); }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content :not(pre) > code { padding: .1em .38em; border-radius: 5px; background: var(--bg-alt); color: var(--ink); font-size: .86em; overflow-wrap: anywhere; }
.entry-content kbd { padding: .1em .45em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); font-size: .85em; }
.entry-content table, .lesson-box table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content th, .entry-content td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.entry-content th { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.entry-content blockquote { margin-inline: 0; padding: .2rem 1.2rem; border-left: 2px solid var(--ink); color: var(--ink); }
.entry-content { overflow-wrap: break-word; }
.callout { display: flex; gap: .75rem; padding: 1rem 1.15rem; border-radius: var(--radius-sm); background: var(--bg-alt); font-size: .97rem; }
.callout .icon { margin-top: .25em; }
.callout p { margin: 0; }
.callout-note .icon { color: var(--accent); }
.callout-warning { background: color-mix(in srgb, var(--warn) 9%, var(--bg)); }
.callout-warning .icon { color: var(--warn); }
.toc { margin: 0 0 2rem; padding: 0; border-left: 2px solid var(--line); }
.toc summary { padding: 0 0 .5rem 1rem; color: var(--ink); font-weight: 600; font-size: .95rem; cursor: pointer; }
.toc ol { margin: 0; padding: 0 0 0 2.2rem; font-size: .93rem; }
.toc li { margin-bottom: .25em; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.wp-block-details { margin-bottom: 0; border-top: 1px solid var(--line); }
.wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
.wp-block-details summary { padding: .9rem 0; color: var(--ink); font-weight: 600; cursor: pointer; }
.wp-block-details > :not(summary) { margin: 0 0 1rem; }

/* Share + author */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 2rem 0; }
.share-label { margin-right: .5rem; color: var(--muted); font-size: .85rem; }
.share a, .share button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; }
.share a:hover, .share button:hover { background: var(--bg-alt); color: var(--ink); }
.author-box { display: flex; gap: 1.1rem; margin-top: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.author-photo { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; background: var(--bg-alt); font-size: 1.2rem; }
.author-name { margin: 0; color: var(--ink); font-weight: 600; }
.author-role { margin: 0 0 .4rem; color: var(--muted); font-size: .88rem; }
.author-bio { margin-bottom: .5rem; color: var(--text); font-size: .95rem; }
.author-box .contact-icons { margin-left: -.6rem; }
.social { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.social a { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--ink); }
.social a:hover { background: var(--bg-alt); }

/* ---------- Code blocks (lessons and posts) ---------- */
.mg-code { margin: 1.5rem 0; overflow: hidden; border-radius: var(--radius-sm); background: var(--code-bg); }
.mg-code-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .45rem .5rem .45rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #9a9a9a; font-size: .78rem; }
.mg-code-lang { color: #bdbdbd; font: 600 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.mg-code-title { color: #e6e6e6; font-weight: 500; }
.mg-code-tools { display: flex; gap: .35rem; margin-left: auto; }
.mg-btn-ghost, .mg-btn-try, .mg-btn-run { padding: .32rem .75rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px; background: transparent; color: #e6e6e6; font: 500 .78rem var(--font); cursor: pointer; }
.mg-btn-ghost:hover { background: rgba(255, 255, 255, .08); }
.mg-btn-try, .mg-btn-run { border-color: transparent; background: #fff; color: #111; }
.mg-btn-try:hover, .mg-btn-run:hover { background: #dcdcdc; }
.mg-code pre { margin: 0; padding: 1rem 1.1rem; overflow-x: auto; color: var(--code-text); font-size: .86rem; line-height: 1.65; tab-size: 2; }
.mg-code pre code { padding: 0; background: none; color: inherit; font-size: inherit; }
.mg-output { border-top: 1px dashed rgba(255, 255, 255, .14); }
.mg-output-head { padding: .45rem 1rem 0; color: #9be3b4; font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mg-output pre { color: #d9f7e4; }
.mg-output-note { margin: 0; padding: .1rem 1rem .9rem; color: #9a9a9a; font-size: .82rem; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #737373; font-style: italic; }
.token.punctuation { color: #a3a3a3; }
.token.tag, .token.deleted, .token.keyword, .token.important { color: #f39ac7; }
.token.attr-name, .token.property, .token.selector, .token.builtin { color: #8fd0f5; }
.token.string, .token.attr-value, .token.char, .token.inserted { color: #a5e3a5; }
.token.number, .token.boolean, .token.constant, .token.symbol { color: #f5b97f; }
.token.function, .token.class-name { color: #c8b6f7; }
.token.operator, .token.entity, .token.url, .token.variable { color: #f2d17a; }
.token.atrule, .token.regex { color: #f5a8cf; }

/* ---------- Editor (Try it Yourself) ---------- */
.mg-editor { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #111214; color: #e6e6e6; }
.mg-editor[hidden] { display: none; }
.mg-editor-top { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: .6rem 1rem; border-bottom: 1px solid #26272b; }
.mg-editor-title { font-size: .95rem; font-weight: 500; }
.mg-editor-actions { display: flex; gap: .5rem; margin-left: auto; }
.mg-editor-close { font-size: 1rem; }
.mg-editor-body { display: grid; flex: 1; grid-template-columns: 1fr 1fr; min-height: 0; }
.mg-editor-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #26272b; }
.mg-pane-head { padding: .45rem 1rem; background: #17181b; color: #9a9a9a; font: 600 .72rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.mg-pane-head small { font-weight: 400; text-transform: none; letter-spacing: 0; }
.mg-editor textarea { flex: 1; width: 100%; padding: 1rem; resize: none; border: 0; background: #16181d; color: #e6e6e6; font: 400 .9rem/1.65 var(--mono); tab-size: 2; outline: none; }
.mg-editor-result { flex: 1; min-height: 0; overflow: auto; background: #fff; color: #111; }
.mg-editor-result iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.mg-sql-meta { margin: 0; padding: .6rem 1rem; color: #555; font-size: .85rem; }
.mg-sql-scroll { overflow: auto; }
.mg-sql-table { width: 100%; border-collapse: collapse; font: .85rem var(--mono); }
.mg-sql-table th, .mg-sql-table td { padding: .45rem .7rem; border-bottom: 1px solid #ececec; text-align: left; white-space: nowrap; }
.mg-sql-table th { position: sticky; top: 0; background: #f4f4f4; color: #111; }
.mg-sql-table em { color: #999; }
.mg-sql-ok { margin: 1rem; color: #166534; }
.mg-sql-error { margin: 1rem; padding: .8rem 1rem; border-radius: 8px; background: #fef2f2; color: #991b1b; font-family: var(--mono); font-size: .88rem; }
@media (max-width: 800px) { .mg-editor-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; } .mg-editor-pane { border-right: 0; border-bottom: 1px solid #26272b; } }

/* ---------- Lessons ---------- */
.lesson-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px; gap: 3rem; padding-block: 2rem 4rem; }
.lesson-menu-box { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; }
.lesson-menu-box > summary { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.lesson-menu-box > summary::-webkit-details-marker { display: none; }
.lesson-menu-box > summary .track-badge { margin: 0; }
.lesson-list { margin: 0 0 1rem; padding: 0; list-style: none; }
.lesson-list a { display: flex; gap: .6rem; padding: .4rem .5rem; border-radius: 8px; color: var(--muted); font-size: .9rem; line-height: 1.35; text-decoration: none; }
.lesson-list a:hover { color: var(--ink); }
.lesson-list a.is-current { background: var(--bg-alt); color: var(--ink); font-weight: 500; }
.lesson-list .num, .track-lessons .num { display: inline-grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--muted); font: 500 .72rem var(--mono); }
.lesson-list a.is-done .num, .track-lessons a.is-done .num { background: var(--good); color: #fff; }
.lesson-menu-box .link-arrow { font-size: .9rem; }
.lesson-count { margin: 0 0 .4rem; color: var(--muted); font-size: .85rem; }
.lesson-title { font-size: clamp(1.7rem, 3.6vw, 2.2rem); letter-spacing: -.035em; }
.lesson-main { min-width: 0; }
.lesson-cover { margin: 1.25rem 0 0; }
.lesson-cover img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: var(--radius); }
.lesson-pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0; }
.lesson-pager-top { margin: 1rem 0 2rem; }
.lesson-pager .btn { max-width: 48%; text-align: left; }
.lesson-pager .btn span { display: grid; line-height: 1.25; }
.lesson-pager small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.lesson-pager .btn-primary small { color: inherit; opacity: .7; }
.lesson-pager-top .btn { min-height: 36px; }
.lesson-pager-top .btn span { display: inline; }
.lesson-pager-top small { display: none; }
.lesson-box { margin: 2.5rem 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); }
.lesson-box h2 { display: flex; align-items: center; gap: .5rem; margin-top: 0; font-size: 1.2rem; }
.lesson-summary { background: var(--bg-alt); border-color: transparent; }
.checklist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: .6rem; }
.checklist .icon { margin-top: .3em; color: var(--good); }
.checklist-2col { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mg-quiz-q { margin-bottom: 1.4rem; }
.quiz-q { margin-bottom: .6rem; color: var(--ink); }
.quiz-options { display: grid; gap: .45rem; }
.quiz-option { padding: .65rem .95rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); font: 400 .95rem var(--font); text-align: left; cursor: pointer; }
.quiz-option:hover:not(:disabled) { border-color: var(--ink); }
.quiz-option.is-right { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--bg)); color: var(--ink); }
.quiz-option.is-wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, var(--bg)); }
.quiz-option:disabled { cursor: default; }
.mg-quiz-explain { margin: .6rem 0 0; padding: .7rem 1rem; border-radius: 10px; background: var(--bg-alt); font-size: .93rem; }
.quiz-score { margin: 0; color: var(--ink); font-weight: 600; }
.reveal-box { margin-top: .8rem; border: 1px solid var(--line); border-radius: 10px; }
.reveal-box summary { padding: .65rem 1rem; color: var(--ink); font-weight: 500; cursor: pointer; }
.reveal-box > :not(summary) { margin: 0 1rem 1rem; }
.reveal-box .mg-code { margin: 0 0 1rem; border-radius: 0 0 10px 10px; }
.lesson-refs ul { padding-left: 1.2em; font-size: .93rem; }
.lesson-refs h2 { font-size: 1.05rem; }
.lesson-complete { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin: 2rem 0 0; }
.lesson-complete small { color: var(--muted); }
[data-mg-complete].is-done { border-color: var(--good); color: var(--good); }
.side-box { padding: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); }
.side-title { margin-bottom: .8rem; font-size: .95rem; }
.side-tracks { display: grid; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.side-tracks a { display: flex; align-items: center; gap: .6rem; padding: .3rem; border-radius: 8px; color: var(--text); font-size: .92rem; text-decoration: none; }
.side-tracks a:hover { background: var(--bg-alt); color: var(--ink); }
.side-tracks .track-badge { min-width: 38px; height: 24px; margin: 0; font-size: .68rem; }
.mg-ad { margin: 2rem 0; text-align: center; }
.mg-ad-label { display: block; margin-bottom: .3rem; color: var(--muted); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.lesson-side .side-sticky { display: grid; gap: 1.25rem; }
@media (max-width: 1200px) { .lesson-layout { grid-template-columns: 220px minmax(0, 1fr); } .lesson-side { display: none; } }
@media (max-width: 860px) {
	.lesson-layout { grid-template-columns: 1fr; gap: 1rem; padding-top: 1rem; }
	.lesson-menu-box { position: static; max-height: none; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
	.lesson-pager .btn { max-width: none; flex: 1; }
	.lesson-pager-top { display: none; }
}

/* Track page */
.track-hero .track-badge { margin-bottom: 1rem; }
.track-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.track-hero-actions .progress { width: min(260px, 100%); margin: 0; }
.track-intro { margin-bottom: 2rem; }
.track-lessons { display: grid; margin: 0; padding: 0; list-style: none; }
.track-lessons li { border-top: 1px solid var(--line); }
.track-lessons li:last-child { border-bottom: 1px solid var(--line); }
.track-lessons a { display: flex; align-items: center; gap: 1rem; padding: 1rem .25rem; color: var(--text); text-decoration: none; }
.track-lessons a:hover .track-lesson-text strong { color: var(--accent); }
.track-lessons .num { width: 30px; height: 30px; border: 1px solid var(--line); font-size: .8rem; }
.track-lesson-text { display: grid; flex: 1; }
.track-lesson-text strong { color: var(--ink); font-weight: 600; }
.track-lesson-text small { color: var(--muted); font-size: .88rem; }
.done-mark { color: var(--line); }
.track-lessons a.is-done .done-mark { color: var(--good); }

/* Courses */
.course-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 3rem; align-items: start; }
.fact-chips { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.fact-chips li { display: grid; color: var(--ink); font-weight: 500; }
.fact-chips small { color: var(--muted); font-size: .8rem; font-weight: 400; }
.course-card-cta { display: grid; gap: .7rem; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); }
.course-cta-img { width: 100%; border-radius: 10px; }
.course-price { margin: .25rem 0 0; color: var(--ink); font-size: 1.35rem; font-weight: 600; }
@media (max-width: 860px) { .course-hero-grid { grid-template-columns: 1fr; } }

/* Projects */
.facts { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 1.75rem 0 0; }
.facts div { display: grid; }
.facts dt { color: var(--muted); font-size: .82rem; }
.facts dd { margin: 0; color: var(--ink); font-weight: 500; }
.facts a { display: inline-flex; align-items: center; gap: .3em; color: var(--accent); text-decoration: none; }
.project-shot { margin-block: 1.5rem 3rem; }
.project-shot img { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--radius); }

/* Videos */
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.channel { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.channel-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: color-mix(in srgb, #ff0000 10%, transparent); color: #ff0000; }
.channel-text { display: grid; flex: 1; line-height: 1.35; }
.channel-text strong { color: var(--ink); font-weight: 600; }
.channel-text small { color: var(--muted); }
.video-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; border-radius: var(--radius); background: #000; cursor: pointer; }
.video-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play { position: absolute; top: 50%; left: 50%; width: 60px; height: 42px; border-radius: 12px; background: rgba(0, 0, 0, .7); transform: translate(-50%, -50%); transition: background .15s; }
.video-play::after { content: ""; position: absolute; top: 50%; left: 54%; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; transform: translate(-50%, -50%); }
.video-thumb:hover .video-play { background: #ff0000; }
.video-body { padding-top: .9rem; }
.video-title { margin: 0 0 .3rem; font-size: 1rem; font-weight: 600; }
.video-title a { color: var(--ink); text-decoration: none; }
.video-meta { margin: 0; color: var(--muted); font-size: .82rem; }
.page-extra { margin-top: 2.5rem; }

/* Search & 404 */
.search-results { margin: 0; padding: 0; list-style: none; }
.search-results li { padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.search-results h2 { margin: .2rem 0 .4rem; font-size: 1.2rem; font-weight: 600; }
.search-results h2 a { text-decoration: none; }
.result-type { margin: 0; color: var(--muted); font-size: .8rem; }
.big-404 { margin: 0; color: var(--ink); font-size: clamp(5rem, 15vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.actions-center { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.5rem; }
.center .page-lead, .center .page-search { margin-inline: auto; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 2rem; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; padding-block: 1.75rem 2.25rem; border-top: 1px solid var(--line); color: var(--muted); font: 400 .74rem var(--mono); }
.footer-copy { margin: 0 auto 0 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--ink); }
.to-top { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; }
.to-top:hover { border-color: var(--ink); }
@media (max-width: 700px) { .footer-inner { flex-direction: column; align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
	.site-header, .site-footer, .lesson-menu, .lesson-side, .article-side, .mg-ad, .share, .to-top { display: none !important; }
}
.hero-side .mono-label { white-space: nowrap; font-size: .66rem; }
.cta-card > div { flex: 1 1 320px; min-width: 0; }
.cta-card .btn { white-space: nowrap; }
@media (max-width: 560px) { .cta-card .btn { white-space: normal; } }
.hero-title .nowrap { white-space: nowrap; }
.cta-card + .cta-card { margin-top: .75rem; }
/* Tools marquee (home) */
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex: none; gap: 2.75rem; margin: 0; padding: 0 2.75rem 0 0; list-style: none; animation: marquee 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-size: 1rem; font-weight: 600; white-space: nowrap; transition: color .2s; }
.marquee-track li:hover { color: var(--ink); }
.marquee-track .icon { width: 1.6rem; height: 1.6rem; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
	.marquee { mask-image: none; }
	.marquee-track { flex-wrap: wrap; gap: 1rem 2rem; flex: 1; }
	.marquee-track[aria-hidden="true"] { display: none; }
}
code, kbd, pre, textarea, .mg-editor textarea { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ---------- Learning extras: tools, quizzes, cheat sheets, playground, My learning ---------- */
.container-wide { width: min(1320px, 100% - 40px); margin-inline: auto; }
.page-head-sm { padding-bottom: .5rem; }
.track-links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem; margin-top: auto; font-size: .9rem; }
.track-links a:not(.link-arrow) { color: var(--muted); text-decoration: none; }
.track-links a:not(.link-arrow):hover { color: var(--ink); }
.practice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 2rem; }
.practice-card { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); color: var(--text); text-decoration: none; transition: border-color .15s; }
.practice-card:hover { border-color: var(--ink); color: var(--text); }
.practice-card .skill-icon { flex: none; margin: 0; }
.practice-card strong { display: block; color: var(--ink); font-weight: 600; }
.practice-card small { color: var(--muted); font-size: .84rem; }
.grid-tool { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card-tool { padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s; }
.card-tool:hover { border-color: var(--ink); }
.card-tool .skill-icon { background: var(--bg-alt); box-shadow: none; }
.tools-more { margin-top: 2rem; }

/* Tool widgets */
.tool { display: grid; gap: 1.25rem; padding: clamp(1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: 18px; background: var(--bg-alt); }
.tool:not(.tool-ready) { min-height: 200px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; align-items: end; }
.tool-grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.tool-grid-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tool-grid-5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tool-field { display: grid; gap: .35rem; }
.tool-field label { color: var(--ink); font-size: .85rem; font-weight: 500; }
.tool-field small, .tool-note { color: var(--muted); font-size: .8rem; }
.tool-field-end { align-self: end; }
.tool input[type="text"], .tool input[type="number"], .tool select, .tool-textarea { width: 100%; min-height: 40px; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.tool input:focus, .tool select:focus, .tool-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.tool input[type="range"] { width: 100%; accent-color: var(--ink); }
.tool .is-invalid { border-color: var(--bad); }
.tool-textarea { min-height: 220px; line-height: 1.6; resize: vertical; }
.tool-mono { font-family: var(--mono); font-size: .88rem; }
.tool-color { display: flex; gap: .5rem; }
.tool-swatch { flex: none; width: 44px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); cursor: pointer; }
.tool-swatch-lg { width: 100%; height: 56px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
.tool-row .tool-field { flex: 1 1 220px; }
.tool-preview { padding: 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.contrast-preview .cp-normal { margin: 0 0 .5rem; font-size: 16px; }
.contrast-preview .cp-large { margin: 0; font-size: 24px; font-weight: 600; }
.color-swatch { height: 120px; margin-top: .75rem; }
.gradient-preview { height: 200px; }
.shadow-stage { display: grid; place-items: center; min-height: 220px; background: var(--bg); }
.shadow-card { display: grid; place-items: center; width: 180px; height: 120px; border-radius: 16px; background: #fff; color: #555; font-size: .9rem; }
.clamp-sample { margin: 0; color: var(--ink); font-weight: 600; line-height: 1.2; }
.tool-big { margin: 0; color: var(--ink); font-size: 1.5rem; font-weight: 600; }
.tool-big span { color: var(--muted); font-size: .9rem; font-weight: 400; }
output.tool-big { display: block; margin: .5rem 0; }
.tool-code { display: block; flex: 1 1 320px; padding: .7rem .9rem; border-radius: 10px; background: var(--code-bg); color: var(--code-text); overflow-x: auto; white-space: pre; }
.tool-results { display: grid; gap: .4rem; }
.tool-result { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .8rem; border-radius: 10px; background: var(--bg); font-size: .9rem; }
.tool-result b { font-weight: 600; }
.tool-result .pass, .tool-msg.ok { color: var(--good); }
.tool-result .fail, .tool-msg.err { color: var(--bad); }
.tool-card { padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.tool-card h3, .tool-sub { margin: 0 0 .6rem; font-size: 1rem; }
.tool-table-wrap { overflow-x: auto; }
.tool-table { width: 100%; max-width: 420px; border-collapse: collapse; font-size: .9rem; }
.tool-table th, .tool-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.tool-stops { display: grid; gap: .5rem; }
.tool-stop { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tool-stop input[type="number"] { width: 90px; }
.tool-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.tool-tab { padding: .35rem .9rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: 500 .85rem var(--font); cursor: pointer; }
.tool-tab.is-active { border-color: var(--ink); color: var(--ink); }
.tool-check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.tool-msg { margin: 0; font-size: .9rem; font-weight: 500; }
.tool-out { max-height: 420px; margin: 0; padding: 1rem; overflow: auto; border-radius: 12px; background: var(--code-bg); color: var(--code-text); font-size: .85rem; white-space: pre-wrap; }
.tool-out:empty { display: none; }
.tool-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; }
.tool-stat { padding: .8rem; border-radius: 12px; background: var(--bg); }
.tool-stat strong { display: block; color: var(--ink); font-size: 1.3rem; font-weight: 600; }
.tool-stat span { color: var(--muted); font-size: .8rem; }
.tool-keywords { display: grid; gap: .3rem; max-width: 360px; margin: 0; padding-left: 1.2rem; }
.tool-keywords li span { margin-right: .5rem; }
.tool-keywords li b { color: var(--muted); font-weight: 500; }
.tool-privacy { display: flex; align-items: center; gap: .4rem; margin: .8rem 0 0; color: var(--muted); font-size: .82rem; }
.tool-privacy .icon { color: var(--good); }
.tool-related-title { margin-top: 2.5rem; font-size: 1.2rem; }
.link-list { display: grid; gap: .4rem; padding-left: 1.2rem; }

/* Quiz */
.quiz-intro { display: grid; justify-items: start; gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-alt); }
.quiz-intro[hidden] { display: none; }
.quiz-facts { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.quiz-facts li { display: grid; }
.quiz-facts strong { color: var(--ink); font-size: 1.3rem; font-weight: 600; }
.quiz-facts span { color: var(--muted); font-size: .82rem; }
.quiz-box { display: grid; gap: 1rem; padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--line); border-radius: 18px; scroll-margin-top: calc(var(--header-h) + 20px); }
.quiz-box[hidden] { display: none; }
.quiz-head { display: flex; justify-content: space-between; }
.quiz-bar { height: 4px; border-radius: 2px; background: var(--line); }
.quiz-bar i { display: block; height: 100%; border-radius: 2px; background: var(--track, var(--ink)); transition: width .3s; }
.quiz-question { margin: .25rem 0 0; font-size: 1.2rem; line-height: 1.45; }
.quiz-from { margin: .5rem 0 1rem; color: var(--muted); font-size: .88rem; }
.quiz-score-big { margin: 0; color: var(--ink); font-size: 2.6rem; font-weight: 600; letter-spacing: -.03em; }
.quiz-score-big span { color: var(--muted); font-size: 1.1rem; font-weight: 500; }
.quiz-sub { margin: 1rem 0 .25rem; font-size: 1rem; }
.quiz-review { display: grid; gap: .7rem; padding-left: 1.2rem; }
.quiz-review li span { display: block; color: var(--ink); }
.quiz-review small { color: var(--muted); }
.quiz-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }

/* Cheat sheet */
.cheat-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.cheat { columns: 2 420px; column-gap: 1.25rem; }
.cheat-card { display: inline-block; width: 100%; margin: 0 0 1.25rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: 16px; break-inside: avoid; }
.cheat-card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .6rem; font-size: 1.05rem; }
.cheat-lesson { display: inline-flex; align-items: center; gap: .2em; color: var(--muted); font: 500 .75rem var(--mono); text-decoration: none; white-space: nowrap; }
.cheat-card table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cheat-card td { padding: .4rem .3rem; border-top: 1px solid var(--line); vertical-align: top; }
.cheat-card td:first-child { width: 46%; padding-right: .8rem; }
.cheat-card td code { padding: .1em .35em; border-radius: 5px; background: var(--bg-alt); color: var(--ink); font-size: .82rem; overflow-wrap: anywhere; }
.cheat-note { margin: .6rem 0 0; color: var(--muted); font-size: .82rem; }

/* Playground */
.pg { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg); }
.pg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.pg-tabs { display: none; gap: .3rem; }
.pg-tabs button { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--muted); font: 500 .82rem var(--font); cursor: pointer; }
.pg-tabs button[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.pg-libs { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; }
.pg-libs label { display: inline-flex; align-items: center; gap: .35rem; }
.pg-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.pg-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: min(72vh, 760px); min-height: 460px; }
.pg-editors { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); border-right: 1px solid var(--line); }
.pg-pane { display: flex; flex-direction: column; min-height: 0; }
.pg-pane + .pg-pane { border-top: 1px solid var(--line); }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .8rem; background: var(--bg-alt); color: var(--muted); font: 600 .7rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.pg-pane textarea { flex: 1; width: 100%; min-height: 0; padding: .7rem .8rem; border: 0; resize: none; background: var(--code-bg); color: var(--code-text); font: 400 .86rem/1.6 var(--mono); tab-size: 2; outline: none; }
.pg-output { display: grid; grid-template-rows: auto minmax(0, 1fr) auto 130px; min-height: 0; }
.pg-output iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pg-status { color: var(--muted); font: 400 .72rem var(--font); letter-spacing: 0; text-transform: none; }
.pg-console { overflow: auto; padding: .4rem .8rem; background: var(--code-bg); color: var(--code-text); font: .8rem/1.5 var(--mono); }
.pg-line { padding: .15rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); white-space: pre-wrap; }
.pg-warn { color: #f2d17a; }
.pg-error { color: #ff9b9b; }
.pg-clear { padding: .1rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--muted); font: 500 .7rem var(--font); cursor: pointer; }
@media (max-width: 900px) {
	.pg-tabs { display: flex; }
	.pg-main { display: block; height: 70vh; }
	.pg-editors { display: block; height: 100%; border: 0; }
	.pg-pane, .pg-output { display: none; height: 100%; }
	.pg[data-pane="html"] [data-pane-name="html"], .pg[data-pane="css"] [data-pane-name="css"], .pg[data-pane="js"] [data-pane-name="js"] { display: flex; }
	.pg[data-pane="result"] .pg-editors { display: none; }
	.pg[data-pane="result"] .pg-output { display: grid; }
	.pg-pane + .pg-pane { border: 0; }
}

/* My learning */
.learning-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; margin-bottom: 1.5rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-alt); }
.learning-summary strong { display: block; color: var(--ink); font-size: 1.5rem; font-weight: 600; }
.learning-summary span { color: var(--muted); font-size: .82rem; }
.learning-last { display: grid; gap: .2rem; margin-left: auto; }
.learning-last a { font-weight: 500; text-decoration: none; }
.learning-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.learning-card { display: grid; gap: .6rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; }
.learning-top { display: flex; align-items: center; gap: .6rem; }
.learning-top .track-badge { margin: 0; }
.learning-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.learning-card .progress { margin: 0; }
.learning-meta { margin: 0; color: var(--muted); font-size: .85rem; }
.learning-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.learning-done { color: var(--good); font-size: .88rem; font-weight: 500; }
.learning-note { margin: 1.5rem 0 .75rem; color: var(--muted); font-size: .85rem; }

@media print {
	.page-head .breadcrumbs, .cheat-actions, .mg-ad, .cheat-lesson, .site-footer { display: none !important; }
	.page-head { padding: 0 0 1rem; }
	.cheat { columns: 2; column-gap: 12px; }
	.cheat-card { padding: 8px 10px; border-color: #ccc; }
	.cheat-card td { padding: 3px; font-size: 10.5px; }
	.cheat-card td code { padding: 0; background: none; }
	body { background: #fff; color: #000; }
}
.pg-pane textarea, .mg-editor textarea, .tool-code, .tool-out, .tool textarea { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ---------- Tools round 2: files, PDF, calculators, business, developer ---------- */
.tool-filter { max-width: 420px; margin-top: 1.25rem; }
.tool-filter input { width: 100%; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; }
.tool-group { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--header-h) + 20px); }
.tool-group-title { margin: 0 0 1rem; font-size: 1.15rem; }
.tool-group[hidden] { display: none; }
.tool-drop { display: grid; place-items: center; gap: .25rem; padding: 1.75rem 1rem; border: 2px dashed var(--line); border-radius: 16px; background: var(--bg); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.tool-drop:hover, .tool-drop.is-over { border-color: var(--ink); background: var(--surface); }
.tool-drop strong { color: var(--ink); }
.tool-drop span { color: var(--muted); font-size: .85rem; }
.tool-files, .tool-results { display: grid; gap: .5rem; }
.tool-file { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem .8rem; border-radius: 12px; background: var(--bg); font-size: .9rem; }
.tool-file-name { flex: 1 1 200px; min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.tool-file-meta { color: var(--muted); }
.tool-file .pass { color: var(--good); }
.tool-file.is-error { color: var(--bad); }
.tool-img-preview { overflow: auto; text-align: center; }
.tool-canvas { max-width: 100%; height: auto; border-radius: 8px; }
.bg-checker { background-color: #fff; background-image: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; text-align: center; }
.tool-favicons { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.tool-favicons figure { display: grid; justify-items: center; gap: .3rem; margin: 0; }
.tool-favicons figcaption { color: var(--muted); font-size: .75rem; }
.favicon-prev { image-rendering: pixelated; border: 1px solid var(--line); background: #fff; }
.tool-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
.tool-page { display: grid; gap: .4rem; margin: 0; }
.tool-page img { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.tool-page figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem; color: var(--muted); font-size: .78rem; }
.tool-sortable { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.tool-sort-item { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: 12px; background: var(--bg); }
.tool-sort-item img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; }
.tool-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.tool-chip { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font: 500 .85rem var(--font); cursor: pointer; }
.tool-chip.is-active, .tool-chip:hover { border-color: var(--ink); }
.tool-stat-big { grid-column: 1 / -1; background: var(--ink); }
.tool-stat-big strong, .tool-stat-big span { color: var(--bg); }
.tool-stat-big strong { font-size: 1.7rem; }
.tool-split-bar { height: 12px; overflow: hidden; border-radius: 6px; background: #f59e0b; }
.tool-split-bar i { display: block; height: 100%; background: var(--ink); }
.tool-table-wide { max-width: none; }
.tool-table-wide td, .tool-table-wide th { font-variant-numeric: tabular-nums; }
.tool-calcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.tool-result-copy { align-items: center; }
.tool-result-copy > span { display: grid; min-width: 0; gap: .15rem; }
.tool-result-copy small { color: var(--muted); font-size: .75rem; }
.tool-result-copy strong { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.tool-pass { font-size: 1rem; overflow-wrap: anywhere; }
.tool-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.tool-b64-prev img { max-width: 220px; max-height: 160px; border-radius: 8px; }
.qr-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.qr-preview { display: grid; place-items: center; min-width: 200px; min-height: 200px; }
.qr-preview canvas { max-width: 100%; height: auto; }
@media (max-width: 640px) { .qr-wrap { grid-template-columns: 1fr; } }
.tool-fieldset { display: grid; gap: .8rem; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.tool-fieldset legend { padding: 0 .4rem; color: var(--ink); font-weight: 600; }
.tool-textarea-sm { min-height: 70px; font-family: var(--font); }
.invoice-form, .resume-form { display: grid; gap: 1rem; }
.invoice-items { display: grid; gap: .4rem; overflow-x: auto; }
.invoice-item { display: grid; grid-template-columns: minmax(160px, 3fr) minmax(80px, 1fr) 70px 110px 70px 40px; gap: .4rem; align-items: center; min-width: 600px; }
.invoice-item-head span { color: var(--muted); font-size: .78rem; font-weight: 500; }
.invoice-doc, .resume-doc { padding: 2rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #111; font-size: 14px; line-height: 1.5; }
.invoice-doc h1, .invoice-doc h2, .invoice-doc h3, .resume-doc h1, .resume-doc h2 { color: #111; }
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid #111; }
.inv-head h2 { margin: .3rem 0; font-size: 1.2rem; }
.inv-head p, .inv-bill p, .inv-note p { margin: 0 0 .3rem; }
.inv-logo { max-width: 140px; max-height: 60px; }
.inv-meta { text-align: right; }
.inv-meta h1 { margin: 0 0 .4rem; font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; }
.inv-bill { margin: 1rem 0; }
.inv-bill h3, .inv-note h3 { margin: 0 0 .3rem; color: #666 !important; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.inv-table, .inv-totals { width: 100%; border-collapse: collapse; }
.inv-table th, .inv-table td { padding: .45rem .5rem; border-bottom: 1px solid #ddd; text-align: left; vertical-align: top; }
.inv-table th { background: #f4f4f2; font-size: .78rem; }
.invoice-doc .num { text-align: right; white-space: nowrap; }
.inv-totals { width: auto; min-width: 260px; margin: 1rem 0 0 auto; }
.inv-totals td { padding: .3rem .5rem; }
.inv-grand td { border-top: 2px solid #111; font-size: 1.1rem; font-weight: 700; }
.inv-words { margin: 1rem 0; }
.inv-note { margin-top: 1rem; }
.resume-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: start; }
.resume-layout .resume-doc { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; }
@media (max-width: 960px) { .resume-layout { grid-template-columns: 1fr; } .resume-layout .resume-doc { position: static; max-height: none; } }
.resume-entry { display: grid; gap: .6rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--line); }
.resume-doc h1 { margin: 0; font-size: 1.7rem; }
.resume-doc h2 { margin: 1.1rem 0 .4rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.resume-doc p, .resume-doc ul { margin: 0 0 .4rem; }
.resume-doc ul { padding-left: 1.1rem; }
.r-title { color: #444; font-size: 1rem; }
.r-contact { color: #555; font-size: .85rem; }
.r-entry { margin-bottom: .6rem; }
.r-entry-head { display: flex; justify-content: space-between; gap: 1rem; }
.r-entry-head span, .r-entry-sub { color: #555; font-size: .88rem; }
.r-skills { display: flex; flex-wrap: wrap; gap: .3rem .5rem; padding: 0 !important; list-style: none; }
.r-skills li { padding: .1rem .5rem; border: 1px solid #ccc; border-radius: 4px; font-size: .85rem; }
.resume-classic h2 { padding-bottom: .2rem; border-bottom: 1px solid #111; }
.resume-modern .r-head { margin: -2rem -2rem 1rem; padding: 1.6rem 2rem; background: #111; color: #fff; }
.resume-modern .r-head h1, .resume-modern .r-title, .resume-modern .r-contact { color: #fff; }
.resume-modern h2 { color: #2450e6 !important; }
@media print {
	.single-tool .print-area { visibility: visible; }
	body.single-tool:has(.print-area) * { visibility: hidden; }
	body.single-tool:has(.print-area) .print-area, body.single-tool:has(.print-area) .print-area * { visibility: visible; }
	body.single-tool:has(.print-area) .print-area { position: absolute; top: 0; left: 0; width: 100%; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; }
	.resume-modern .r-head { margin: 0 0 1rem; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	@page { margin: 12mm; }
}
.card-tool[hidden] { display: none; }
.tool [hidden], .tool-field[hidden] { display: none !important; }

/* ==========================================================================
   Games & Apps (1.6.0)
   ========================================================================== */
.grid-mg_app { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .grid-mg_app { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-mg_app { grid-template-columns: 1fr; } }
.card-app { position: relative; flex-direction: row; gap: 1rem; align-items: flex-start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s; }
.card-app:hover { border-color: var(--ink); }
.card-app .card-body { padding-top: 0; }
.card-app .card-title a::after { content: ""; position: absolute; inset: 0; }
.app-icon { display: block; flex: none; width: 64px; height: 64px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-alt); }
.app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.app-icon .icon { width: 100%; height: 100%; padding: 16px; color: var(--muted); }
.app-icon-lg { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.app-hero { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; }
.app-hero .page-title { margin-bottom: .35rem; }
.app-hero .mono-label a { color: inherit; text-decoration: none; }
.app-hero-sm { gap: 1rem; }
.app-hero-sm .app-icon { width: 56px; height: 56px; border-radius: 14px; }
@media (max-width: 560px) { .app-hero { grid-template-columns: 1fr; } .app-icon-lg { width: 88px; height: 88px; border-radius: 22px; } }
.app-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
.play-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem .45rem .75rem; border-radius: 10px; background: #000; color: #fff !important; text-decoration: none; transition: transform .15s; }
.play-badge:hover { transform: translateY(-1px); }
.play-badge .icon { width: 1.45rem; height: 1.45rem; }
.play-badge small { display: block; font-size: .62rem; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.play-badge b { display: block; font-size: 1rem; font-weight: 600; line-height: 1.15; }
.play-badge.is-soon { border: 1px dashed #555; opacity: .75; cursor: default; }
.play-badge.is-soon:hover { transform: none; }
:root[data-theme="dark"] .play-badge { border: 1px solid #333; }
.app-shots-wrap { margin-bottom: 2rem; }
.app-shots { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.app-shots img { flex: none; width: auto; height: 420px; max-width: none; border: 1px solid var(--line); border-radius: 18px; scroll-snap-align: start; }
@media (max-width: 600px) { .app-shots img { height: 340px; } }
.app-h2 { margin: 2.25rem 0 .9rem; font-size: 1.2rem; }
.app-features { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.app-features li { display: flex; gap: .6rem; align-items: flex-start; }
.app-features .icon { flex: none; margin-top: .25em; color: var(--accent); }
.app-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
.app-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.app-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); }
.app-policy-links { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.app-policy-links a { color: var(--muted); }
.app-policy-links a:hover { color: var(--ink); }
.app-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.25rem; }
.app-tabs a { padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: .85rem; text-decoration: none; }
.app-tabs a:hover { border-color: var(--ink); color: var(--ink); }
.app-tabs a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.app-policy { padding-bottom: 3rem; }
.apps-empty { display: grid; justify-items: center; gap: .4rem; padding: 3rem 1.5rem; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.apps-empty .icon { width: 2.5rem; height: 2.5rem; color: var(--muted); }