@font-face {
	font-family: "LekeSymbols";
	src: url("/skin/webfonts/fa-solid-900.woff2") format("woff2");
	font-style: normal;
	font-weight: 900;
}

:root {
	--primary: #e55679;
	--primary-dark: #b7355d;
	--primary-light: #ffe8ef;
	--ink: #223247;
	--text: #4e6074;
	--text-light: #68788a;
	--border: #dfe8f0;
	--bg-light: #f4f8fb;
	--blue: #4f88b5;
	--yellow: #f4c95d;
	--max-width: 1180px;
}

body {
	background: #ffffff;
	color: var(--ink);
	font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.site-shell {
	width: min(calc(100% - 44px), var(--max-width));
}

.refresh-header {
	position: sticky;
	background: rgba(255, 255, 255, .97);
	border-bottom: 1px solid #e6edf3;
	box-shadow: 0 4px 18px rgba(34, 50, 71, .05);
}

.refresh-header .nav-wrap {
	min-height: 82px;
	gap: 18px;
}

.refresh-header .brand {
	gap: 10px;
	color: var(--ink);
	font-size: 20px;
	letter-spacing: .5px;
}

.refresh-header .brand img {
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 12px;
}

.refresh-header .main-nav {
	margin-left: auto;
}

.refresh-header .main-nav ul {
	gap: 7px;
}

.refresh-header .main-nav a {
	padding: 12px 10px;
	color: #526579;
	font-size: 14px;
	line-height: 1.2;
}

.refresh-header .main-nav a::after {
	display: none;
}

.refresh-header .main-nav a:hover,
.refresh-header .main-nav a.active {
	color: var(--primary-dark);
	background: var(--primary-light);
	border-radius: 6px;
}

.nav-index {
	display: inline-block;
	margin-right: 5px;
	color: #9aabba;
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}

.nav-arrow {
	display: inline-grid;
	width: 16px;
	height: 16px;
	margin-left: 5px;
	place-items: center;
	color: var(--primary);
	font-family: Arial, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
}

.refresh-header .nav-item {
	position: relative;
}

.refresh-header .nav-sub {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	display: block;
	min-width: 158px;
	padding: 8px;
	border: 1px solid #e1eaf2;
	background: #fff;
	box-shadow: 0 14px 30px rgba(34, 50, 71, .11);
	opacity: 0;
	pointer-events: none;
	transform: translateY(5px);
	transition: opacity .18s, transform .18s;
}

.refresh-header .nav-item:hover .nav-sub,
.refresh-header .nav-item:focus-within .nav-sub {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.refresh-header .nav-sub a {
	padding: 10px 11px;
	border-radius: 4px;
}

.header-cta {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	padding: 11px 15px;
	border: 1px solid #9cc9dc;
	border-radius: 6px;
	color: #356d91;
	background: #eaf6fb;
	font-size: 13px;
	font-weight: 700;
}

.header-cta:hover {
	color: #fff;
	border-color: #3f789c;
	background: #3f789c;
}

.header-cta span {
	font-size: 17px;
}

.home-refresh .hero {
	padding: 104px 0 94px;
	background: #f4f8fb;
	border-bottom: 1px solid #e2ebf2;
}

.home-refresh .hero-grid {
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
	gap: 70px;
}

.home-refresh .hero h1 {
	max-width: 650px;
	color: var(--ink);
	font-size: clamp(42px, 5.5vw, 72px);
	font-weight: 800;
	letter-spacing: -1px;
}

.home-refresh .hero h1 br {
	display: none;
}

.home-refresh .hero-copy > p:not(.eyebrow) {
	max-width: 580px;
	color: var(--text);
	font-size: 18px;
}

.home-refresh .hero-art {
	min-height: 360px;
	border: 1px solid #d9e8f1;
	background: #e9f4fa;
	box-shadow: 16px 16px 0 #d6e9f2;
}

.home-refresh .hero-art img {
	width: min(82%, 330px);
	border-radius: 22px;
	box-shadow: 0 20px 34px rgba(53, 91, 119, .2);
}

.home-refresh .hero-rings {
	width: 265px;
	height: 265px;
	border: 1px solid #b8d6e5;
}

.home-refresh .hero-rings::after {
	inset: -18px;
	border-color: #c9e2ed;
}

.home-refresh .sound-chip {
	border: 1px solid #d7e9f1;
	border-radius: 5px;
	color: var(--blue);
	box-shadow: none;
}

.home-refresh .trust-strip {
	background: #fff;
	border-color: #e4edf3;
}

.home-refresh .trust-list {
	justify-content: space-between;
	padding: 20px 4px;
	color: var(--text-light);
}

.home-refresh .trust-list b {
	color: var(--primary-dark);
}

.home-refresh .section {
	padding: 100px 0;
}

.home-refresh .section-heading h2,
.home-refresh .scene-copy h2,
.home-refresh .faq-layout h2 {
	color: var(--ink);
	font-weight: 800;
}

.home-refresh .feature-section,
.home-refresh .picks-section,
.home-refresh .voices-section,
.home-refresh .news-section {
	background: #fff;
}

.home-refresh .feature-grid,
.home-refresh .program-grid,
.home-refresh .pick-grid,
.home-refresh .voice-grid {
	gap: 20px;
}

.home-refresh .feature-card,
.home-refresh .pick-card,
.home-refresh .voice-grid blockquote {
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(40, 75, 99, .05);
}

.home-refresh .feature-card-accent,
.home-refresh .pick-card.featured {
	border-color: var(--blue);
	background: var(--blue);
}

.home-refresh .program-card {
	min-height: 260px;
	border: 1px solid var(--border);
	border-radius: 8px;
}

.home-refresh .program-card.lavender { background: #fff1f4; }
.home-refresh .program-card.peach { background: #fff7e3; }
.home-refresh .program-card.yellow { background: #eef8fc; }
.home-refresh .program-card.blue { background: #f0f2ff; }

.home-refresh .scene-visual {
	border: 1px solid #e3eaf0;
	background: #f5e7d6;
}

.home-refresh .voices-section {
	background: #fff5f7;
}

.home-refresh .voice-grid blockquote {
	position: relative;
}

.home-refresh .voice-grid blockquote::before {
	content: "\201C";
	position: absolute;
	top: 12px;
	right: 22px;
	color: #f2c4d0;
	font-family: Georgia, serif;
	font-size: 54px;
	line-height: 1;
}

.home-refresh .faq-section {
	background: #f4f8fb;
}

.home-refresh .news-row:hover h3 {
	color: var(--primary-dark);
}

.button.button-outline {
	border-color: #8ebed5;
	color: #356d91;
	background: #eef8fc;
}

.button.button-outline:hover {
	border-color: #3f789c;
	color: #fff;
	background: #3f789c;
}

.page-hero {
	padding: 92px 0 76px;
	color: var(--ink);
	background: #eef7fb;
	border-bottom: 1px solid #dceaf1;
}

.page-hero .eyebrow {
	color: var(--primary-dark);
}

.page-hero h1 {
	max-width: 820px;
	color: var(--ink);
	font-weight: 800;
}

.page-hero p:not(.eyebrow) {
	color: var(--text);
}

.breadcrumb {
	padding: 18px 0;
	color: #8394a4;
}

.breadcrumb a {
	color: var(--primary-dark);
}

.recommend-grid article,
.guide-grid article,
.values-grid article,
.content-note,
.side-note,
.guide-callout,
.split-detail aside {
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(40, 75, 99, .05);
}

.recommend-grid article,
.guide-grid article,
.values-grid article {
	background: #fff;
}

.recommend-grid article:nth-child(2),
.guide-grid article:nth-child(2),
.values-grid article:nth-child(2) {
	background: #f5f9fc;
}

.content-note {
	background: #fff8ec;
	border-left: 4px solid var(--yellow);
}

.guide-callout {
	color: #fff;
	background: var(--blue);
}

.about-practice,
.faq-section {
	background: #f4f8fb;
}

.site-footer {
	background: #26384b;
}

.footer-cta {
	background: var(--primary);
}

.atlas-home {
	background: #fff;
}

.atlas-hero {
	position: relative;
	overflow: hidden;
	padding: 108px 0 96px;
	background:
		linear-gradient(122deg, #f7fafc 0%, #eaf4f7 54%, #f7f1e8 100%);
	border-bottom: 1px solid #e3edf3;
}

.atlas-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(78, 123, 144, .11) 1px, transparent 1px),
		linear-gradient(90deg, rgba(78, 123, 144, .11) 1px, transparent 1px);
	background-size: 48px 48px;
	pointer-events: none;
}

.atlas-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, .78fr);
	align-items: center;
	gap: 88px;
}

.atlas-hero-copy h1 {
	max-width: 680px;
	margin: 0 0 22px;
	color: #203347;
	font-size: clamp(44px, 6vw, 78px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -1px;
}

.atlas-hero-copy > p:not(.eyebrow) {
	max-width: 570px;
	margin: 0;
	color: #50657a;
	font-size: 17px;
}

.atlas-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.atlas-console {
	position: relative;
	min-height: 370px;
	padding: 25px;
	color: #eaf5fb;
	background: #24394d;
	box-shadow: 15px 15px 0 #d6e9f2;
	transform: rotate(1.5deg);
}

.atlas-console-top,
.atlas-console-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	letter-spacing: 1.5px;
}

.atlas-console-top i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #e55679;
	box-shadow: 0 0 0 4px rgba(229, 86, 121, .18);
}

.atlas-console-top b {
	color: #b7ddec;
	font-size: 10px;
}

.atlas-dial {
	display: grid;
	width: 180px;
	height: 180px;
	margin: 48px auto 30px;
	place-items: center;
	align-content: center;
	border: 1px solid #6d91a5;
	border-radius: 50%;
	text-align: center;
}

.atlas-dial span {
	color: #a9c8d8;
	font-size: 10px;
	letter-spacing: 2px;
	line-height: 1.5;
}

.atlas-dial strong {
	color: #fff;
	font-size: 57px;
	line-height: 1;
}

.atlas-dial em {
	color: #f2c95f;
	font-size: 11px;
	font-style: normal;
	letter-spacing: 2px;
}

.atlas-wave {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 42px;
}

.atlas-wave i {
	display: block;
	width: 4px;
	height: 16px;
	border-radius: 4px;
	background: #e55679;
}

.atlas-wave i:nth-child(2n) { height: 27px; background: #71aec8; }
.atlas-wave i:nth-child(3n) { height: 36px; background: #f2c95f; }

.atlas-console-bottom {
	margin-top: 20px;
	padding-top: 17px;
	border-top: 1px solid rgba(213, 236, 246, .2);
	color: #9fb9c8;
}

.atlas-console-bottom b {
	color: #fff;
	font-size: 13px;
}

.atlas-quick {
	background: #fff;
	border-bottom: 1px solid #e3edf3;
}

.atlas-quick-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.atlas-quick-grid a {
	position: relative;
	min-height: 126px;
	padding: 24px 28px;
	border-right: 1px solid #e3edf3;
}

.atlas-quick-grid a:first-child { border-left: 1px solid #e3edf3; }
.atlas-quick-grid a:hover { background: #fff6f8; }

.atlas-quick-grid span,
.atlas-quick-grid small,
.atlas-quick-grid em {
	display: block;
}

.atlas-quick-grid span {
	color: #9aaebe;
	font-size: 11px;
	letter-spacing: 1px;
}

.atlas-quick-grid b {
	display: block;
	margin: 8px 0 2px;
	color: #24394d;
	font-size: 18px;
}

.atlas-quick-grid small {
	color: #77899a;
	font-size: 13px;
}

.atlas-quick-grid em {
	position: absolute;
	right: 26px;
	bottom: 23px;
	color: #e55679;
	font-size: 21px;
	font-style: normal;
}

.atlas-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 45px;
	margin-bottom: 38px;
}

.atlas-heading h2,
.atlas-rhythm-grid h2,
.atlas-journal-grid h2 {
	margin: 0;
	color: #24394d;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.2;
}

.atlas-heading > p,
.atlas-rhythm-grid p,
.atlas-journal-grid > div > p:not(.eyebrow) {
	max-width: 410px;
	margin: 0;
	color: #667b8d;
}

.atlas-map-section { background: #fff; }

.atlas-map-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.atlas-map-grid a {
	position: relative;
	min-height: 148px;
	padding: 25px;
	border: 1px solid #dce8ef;
	background: #fbfdfe;
}

.atlas-map-grid a:hover {
	border-color: #e55679;
	background: #fff5f7;
	transform: translateY(-3px);
}

.atlas-map-grid b,
.atlas-map-grid span {
	display: block;
}

.atlas-map-grid b {
	margin-bottom: 12px;
	color: #24394d;
	font-size: 19px;
}

.atlas-map-grid span {
	max-width: 180px;
	color: #77899a;
	font-size: 13px;
}

.atlas-map-grid i {
	position: absolute;
	right: 20px;
	bottom: 17px;
	color: #b9cbd6;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
}

.atlas-daily-section { background: #f4f8fb; }
.atlas-date { color: #8397a8; font-size: 13px; letter-spacing: 1px; }

.atlas-list { border-top: 1px solid #dce8ef; }

.atlas-list article {
	display: grid;
	grid-template-columns: 110px 1fr 45px;
	align-items: center;
	gap: 25px;
	padding: 23px 8px;
	border-bottom: 1px solid #dce8ef;
}

.atlas-list article:hover { background: #fff; }
.atlas-list-time { color: #e55679; font-size: 20px; font-weight: 700; }
.atlas-list p { margin: 0 0 4px; color: #7790a2; font-size: 12px; }
.atlas-list h3 { margin: 0 0 5px; color: #263d51; font-size: 20px; }
.atlas-list small,
.atlas-list article div > span { color: #7b8d9d; font-size: 13px; }
.atlas-list article > b { color: #b4c6d0; font-size: 20px; text-align: right; }

.atlas-rhythm-section { background: #fff; }
.atlas-rhythm-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; align-items: center; }
.atlas-rhythm-grid > div > p:not(.eyebrow) { margin: 22px 0 25px; }
.atlas-rhythm { display: grid; gap: 25px; }
.atlas-rhythm > div { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; }
.atlas-rhythm span { color: #e55679; font-size: 13px; font-weight: 700; }
.atlas-rhythm b { color: #3a5165; font-size: 15px; font-weight: 600; }
.atlas-rhythm i { grid-column: 2; display: block; height: 7px; background: #e5f1f6; }
.atlas-rhythm i::after { content: ""; display: block; width: 100%; height: 100%; background: #71aec8; }

.atlas-voices { background: #fff5f7; }
.atlas-voice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.atlas-voice-grid blockquote { min-height: 190px; margin: 0; padding: 26px; border: 1px solid #f1d7df; background: #fff; }
.atlas-voice-grid blockquote p { margin: 0; color: #4b6174; font-size: 15px; line-height: 1.9; }
.atlas-voice-grid footer { display: flex; justify-content: space-between; margin-top: 32px; font-size: 13px; }
.atlas-voice-grid footer b { color: #b7355d; }
.atlas-voice-grid footer span { color: #8d9ca8; }

.atlas-journal-section { background: #24394d; }
.atlas-journal-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 100px; align-items: start; }
.atlas-journal-grid h2 { color: #fff; }
.atlas-journal-grid > div > p:not(.eyebrow) { margin: 20px 0 26px; color: #b9ccd8; }
.atlas-journal-grid .eyebrow { color: #f2c95f; }
.atlas-journal-list { border-top: 1px solid rgba(225, 240, 247, .2); }
.atlas-journal-list a { display: grid; grid-template-columns: 90px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(225, 240, 247, .2); }
.atlas-journal-list time { color: #f2c95f; font-size: 12px; }
.atlas-journal-list h3 { margin: 0; color: #fff; font-size: 17px; font-weight: 500; }
.atlas-journal-list span { color: #a8c1ce; font-size: 12px; }

.drama-showcase,
.drama-catalogue { background: #f4f8fb; }

.drama-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.drama-grid-home {
	grid-template-columns: repeat(4, 1fr);
}

.drama-card {
	display: grid;
	grid-template-columns: 124px 1fr;
	gap: 17px;
	min-height: 178px;
	padding: 14px;
	border: 1px solid #dce8ef;
	background: #fff;
	box-shadow: 0 8px 22px rgba(40, 75, 99, .05);
}

.drama-card img {
	width: 124px;
	height: 150px;
	object-fit: cover;
}

.drama-card div {
	align-self: end;
	padding-bottom: 2px;
}

.drama-card span {
	color: #e55679;
	font-size: 11px;
	font-weight: 700;
}

.drama-card h3 {
	margin: 8px 0 7px;
	color: #24394d;
	font-size: 20px;
}

.drama-card p {
	margin: 0;
	color: #718596;
	font-size: 13px;
	line-height: 1.65;
}

.drama-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 12px;
}

.drama-meta small {
	color: #8698a5;
	font-size: 11px;
}

.fake-play {
	padding: 5px 10px;
	border: 1px solid #9cc9dc;
	border-radius: 4px;
	color: #356d91;
	background: #eef8fc;
	font-size: 11px;
	cursor: default;
}

.fake-play:hover {
	border-color: #3f789c;
	color: #fff;
	background: #3f789c;
}

.drama-grid-home .drama-card {
	grid-template-columns: 102px 1fr;
	min-height: 148px;
	padding: 11px;
}

.drama-grid-home .drama-card img {
	width: 102px;
	height: 124px;
}

.drama-grid-home .drama-card h3 {
	font-size: 18px;
}

.drama-grid-home .drama-card p {
	font-size: 12px;
}

.drama-grid-home .drama-meta {
	margin-top: 8px;
}

.drama-hero {
	background: #24394d;
	border-bottom: 0;
}

.drama-hero h1,
.drama-hero p:not(.eyebrow) {
	color: #fff;
}

.drama-hero .eyebrow {
	color: #f2c95f;
}

.atlas-faq {
	background: #fff;
}

.atlas-faq-grid {
	display: grid;
	grid-template-columns: .78fr 1.22fr;
	gap: 100px;
	align-items: start;
}

.atlas-faq-grid h2 {
	margin: 0;
	color: #24394d;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.2;
}

.atlas-faq-grid > div > p:not(.eyebrow) {
	margin: 20px 0 25px;
	color: #687c8e;
}

.atlas-faq-list {
	border-top: 1px solid #dce8ef;
}

.atlas-faq-list details {
	padding: 18px 0;
	border-bottom: 1px solid #dce8ef;
}

.atlas-faq-list summary {
	color: #24394d;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.atlas-faq-list p {
	max-width: 650px;
	margin: 12px 0 0;
	color: #687c8e;
	font-size: 14px;
}

@media (max-width: 900px) {
	.atlas-hero { padding: 76px 0 68px; }
	.atlas-hero-grid,
	.atlas-rhythm-grid,
	.atlas-journal-grid { grid-template-columns: 1fr; gap: 48px; }
	.atlas-console { max-width: 480px; width: 100%; margin: 0 auto; }
	.atlas-map-grid { grid-template-columns: repeat(2, 1fr); }
	.atlas-voice-grid { grid-template-columns: 1fr; }
	.drama-grid { grid-template-columns: repeat(2, 1fr); }
	.drama-grid-home { grid-template-columns: repeat(2, 1fr); }
	.atlas-faq-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 560px) {
	.atlas-hero-copy h1 { font-size: 45px; letter-spacing: 0; }
	.atlas-quick-grid { grid-template-columns: 1fr; }
	.atlas-quick-grid a,
	.atlas-quick-grid a:first-child { min-height: 102px; border: 0; border-bottom: 1px solid #e3edf3; }
	.atlas-map-grid { grid-template-columns: 1fr; }
	.drama-grid,
	.drama-grid-home { grid-template-columns: 1fr; }
	.atlas-heading { display: block; }
	.atlas-heading > p,
	.atlas-date { display: block; margin-top: 15px; }
	.atlas-list article { grid-template-columns: 65px 1fr; gap: 13px; }
	.atlas-list article > b { display: none; }
	.atlas-journal-list a { grid-template-columns: 1fr auto; }
	.atlas-journal-list time { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
	.refresh-header .main-nav ul { gap: 0; }
	.refresh-header .main-nav a { padding-left: 7px; padding-right: 7px; }
	.header-cta { display: none; }
}

@media (max-width: 900px) {
	.refresh-header .nav-wrap { min-height: 72px; }
	.refresh-header .menu-toggle { display: block; }
	.refresh-header .main-nav {
		top: 72px;
		padding: 10px 22px 18px;
		border-bottom: 1px solid var(--border);
		box-shadow: 0 12px 24px rgba(34, 50, 71, .08);
	}
	.refresh-header .main-nav a { padding: 12px 8px; }
	.refresh-header .nav-sub {
		position: static;
		padding: 0 0 4px 18px;
		border: 0;
		box-shadow: none;
		op: auto;
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
	.refresh-header .nav-item:hover .nav-sub { transform: none; }
	.home-refresh .hero { padding: 72px 0 62px; }
}

@media (max-width: 480px) {
	.site-shell { width: min(calc(100% - 28px), var(--max-width)); }
	.refresh-header .brand { font-size: 17px; }
	.refresh-header .brand img { width: 36px; height: 36px; }
	.home-refresh .hero h1 { font-size: 44px; letter-spacing: 0; }
	.home-refresh .hero-art { min-height: 290px; box-shadow: 9px 9px 0 #d6e9f2; }
	.home-refresh .hero-art img { width: 250px; }
	.home-refresh .section { padding: 68px 0; }
}
