/* ==========================================================================
   电研社 · 主题样式
   1. 字体与变量  2. 基础  3. 通用组件  4. 页眉页脚  5. 首页各区块
   6. 普通页面与文章  7. 小黑猫  8. 动效开关
   ========================================================================== */

/* 1. 字体与变量 ----------------------------------------------------------- */

/* 标题字体:站酷快乐体(SIL OFL)。core 只含主题自带文案用到的字,体积很小;
   ext 是其余常用字,只有当标题里出现 core 以外的字时浏览器才会去下载。
   下面这段由 tools/build-fonts.py 生成,请勿手改。 */
/* fonts:start */
@font-face {
	font-family: "DYS Display";
	src: url(../fonts/dys-display-ext.woff2) format("woff2");
	font-display: swap;
	unicode-range: U+A0-24FF,U+2E80-9FFF,U+FE30-FE4F,U+FF00-FFEF;
}

@font-face {
	font-family: "DYS Display";
	src: url(../fonts/dys-display-core.woff2) format("woff2");
	font-display: swap;
	unicode-range: U+20-7E,U+A9,U+B7,U+2014,U+2026,U+3001-3002,U+300C-300D,U+3010-3011,U+4E00,U+4E09-4E0B,U+4E0D-4E0E,U+4E1C,U+4E22,U+4E24,U+4E2A,U+4E3A-4E3B,U+4E48,U+4E5F,U+4E86,U+4E8B-4E8C,U+4E8E,U+4EAE,U+4EBA,U+4EC0,U+4ECA-4ECB,U+4EE5,U+4EEC,U+4EF6,U+4F17,U+4F19-4F1A,U+4F34,U+4F46,U+4F4D,U+4F4F,U+4F5C,U+4F60,U+4F8B,U+4F9D,U+4FA7,U+4FDD,U+4FE1,U+5019,U+503C,U+505A,U+50CF,U+5145,U+5148-5149,U+514D,U+5165,U+5168,U+516C,U+5173-5174,U+5176-5177,U+5185,U+518D,U+5199,U+51C6,U+51CF,U+51D1,U+51E0,U+51FA-51FB,U+5207,U+521B,U+5230,U+524D,U+5269,U+529B,U+52A0,U+52A8,U+533A,U+534F,U+5360-5361,U+536B,U+5370,U+5373,U+5389,U+53BB,U+53CB-53CC,U+53D1,U+53D8,U+53E5,U+53EA,U+53EF-53F0,U+53F3,U+53F7,U+53FC,U+540C-540E,U+5411,U+5417,U+5427,U+5440,U+547C,U+548C,U+54B3,U+54E6,U+54EA,U+559C,U+55B5,U+56DB,U+56DE,U+56E2,U+5728,U+5730,U+573A,U+5750,U+5757,U+57FA,U+5806,U+586B,U+5907,U+590D,U+5916,U+591A,U+591C,U+591F,U+5927,U+5929,U+5934,U+5947,U+5957,U+5979,U+597D,U+5982,U+59CB,U+5A18,U+5B50,U+5B57,U+5B66,U+5B83,U+5B8C,U+5B9A,U+5B9E,U+5BA2,U+5BB3,U+5BB9,U+5BF8,U+5BFC,U+5C0F,U+5C11,U+5C31,U+5C3A,U+5C3D-5C3E,U+5C4F,U+5DE5,U+5DF2,U+5E08,U+5E26,U+5E38,U+5E73,U+5F00,U+5F04,U+5F0F,U+5F20,U+5F80-5F81,U+5F85,U+5F88,U+5F97,U+5FC3,U+6001,U+6015,U+601D,U+6027,U+6062,U+606F,U+60F3,U+610F,U+611F,U+6162,U+61C2,U+61D2,U+6210-6211,U+6216,U+6233-6234,U+6240,U+624B,U+624D,U+6253,U+6280,U+628A,U+6298,U+62A5,U+62B1,U+62C6,U+62DB,U+62E9,U+6301,U+6307,U+6311,U+6325,U+6362,U+638C,U+63A2,U+63A5,U+63D2,U+6512,U+653E,U+6548,U+6559,U+6570,U+6572,U+65B0,U+65B9,U+65E5,U+65E9,U+65F6,U+660E,U+662F,U+66F4,U+6700,U+6709,U+670B,U+672C,U+672F,U+6765,U+677F,U+67E5,U+6807,U+680F,U+6821,U+6837,U+683C,U+6848,U+6863,U+6982,U+6A21,U+6B22,U+6BB5,U+6BCF,U+6BD4,U+6C14,U+6CA1,U+6CD5,U+6CE1,U+6D3B,U+7075,U+70B9,U+7231,U+7247-7248,U+7279,U+732B,U+73A9,U+73B0,U+7422,U+751F,U+7528,U+7535,U+753B,U+7565,U+767D,U+7684,U+76F4,U+76F8,U+7709,U+770B,U+771F,U+7740,U+77ED,U+7814,U+7840,U+78E8,U+793E,U+79D1,U+79F0,U+7A7F,U+7ACB,U+7AD9,U+7B11,U+7B28,U+7B2C,U+7B49,U+7B56,U+7BA1,U+7BB1,U+7CBE,U+7CFB,U+7D20,U+7D22,U+7ECD,U+7ECF,U+7ED3,U+7ED9,U+7F15,U+7F51,U+7F6E,U+7F8E,U+7FA4,U+8001,U+800C,U+8033,U+8054,U+80C6,U+80F8,U+80FD,U+811A,U+8138,U+817E,U+822A,U+8272,U+84DD,U+85CF,U+884C,U+8863,U+8865,U+88AB,U+897F,U+8981,U+89C1,U+89D2,U+8BA4,U+8BB2,U+8BBE-8BBF,U+8BC6,U+8BCD,U+8BD5,U+8BDD,U+8BF4,U+8BF7,U+8C22,U+8D28,U+8D56,U+8D70,U+8D77,U+8DA3,U+8DD1,U+8DF3,U+8F6E,U+8F7D,U+8FB9,U+8FC7,U+8FCE,U+8FD8-8FD9,U+9009,U+901A-901B,U+9020,U+907F-9080,U+90A3,U+90AE,U+90E8,U+90FD,U+9177,U+91CC,U+94FE,U+9519,U+95EA,U+95EE,U+95F4,U+9650,U+966A,U+968F-9690,U+9700,U+9762,U+9875-9876,U+9898,U+98CE,U+9996,U+9A71,U+9A7B,U+9B54,U+9ED1,U+9ED8,U+9F13,U+FF01,U+FF08-FF09,U+FF0C,U+FF1A-FF1B,U+FF1F;
}
/* fonts:end */

:root {
	--dys-bg: var(--wp--preset--color--base, #f5f8ff);
	--dys-surface: var(--wp--preset--color--surface, #fff);
	--dys-ink: var(--wp--preset--color--ink, #141a2e);
	--dys-ink-soft: var(--wp--preset--color--ink-soft, #4c5673);
	--dys-blue: var(--wp--preset--color--blue, #2a5fe8);
	--dys-cyan: var(--wp--preset--color--cyan, #2cc4ff);
	--dys-sky: var(--wp--preset--color--sky, #dce8ff);
	--dys-blush: var(--wp--preset--color--blush, #ffc4d0);

	--dys-on-blue: #fff;
	--dys-line: #141a2e;
	--dys-shadow: #141a2e;
	--dys-sticker: #fff;
	--dys-dot: rgba(42, 95, 232, 0.13);
	--dys-mark: #bfe9ff;
	--dys-panel: #141a2e;
	--dys-panel-ink: #fff;
	--dys-glass: rgba(255, 255, 255, 0.82);
	--dys-todo-bg: #fff6cf;
	--dys-todo-line: #d19a00;
	--dys-todo-ink: #5b4300;
	--dys-cat-glow: #3fd2ff;

	--dys-display: var(--wp--preset--font-family--display, sans-serif);
	--dys-mono: var(--wp--preset--font-family--mono, monospace);
	--dys-radius: 22px;
	--dys-gutter: clamp(1rem, 4vw, 2.5rem);
	--dys-wide: 1120px;
	--dys-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html[data-theme="dark"] {
	--wp--preset--color--base: #0c1124;
	--wp--preset--color--surface: #161d3a;
	--wp--preset--color--ink: #eef3ff;
	--wp--preset--color--ink-soft: #aab6da;
	--wp--preset--color--blue: #86abff;
	--wp--preset--color--cyan: #4fd2ff;
	--wp--preset--color--sky: #1d2952;
	--wp--preset--color--blush: #ff9fb4;

	--dys-on-blue: #0c1124;
	--dys-line: #4a5c9e;
	--dys-shadow: #04060f;
	--dys-sticker: #e6eeff;
	--dys-dot: rgba(134, 171, 255, 0.12);
	--dys-mark: #23408f;
	--dys-panel: #1b2654;
	--dys-glass: rgba(22, 29, 58, 0.84);
	--dys-todo-bg: #33290a;
	--dys-todo-line: #c79a1e;
	--dys-todo-ink: #ffe7a1;
	color-scheme: dark;
}

/* 2. 基础 ----------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: var(--dys-bg);
	background-image: radial-gradient(circle, var(--dys-dot) 1.2px, transparent 1.7px);
	background-size: 26px 26px;
	color: var(--dys-ink);
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

[id] {
	scroll-margin-top: 6rem;
}

h1,
h2,
h3 {
	font-synthesis: none;
	text-wrap: balance;
}

a {
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 3px solid var(--dys-cyan);
	outline-offset: 3px;
	border-radius: 6px;
}

::selection {
	background: var(--dys-blue);
	color: var(--dys-on-blue);
}

[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* 首页各区块自己管理间距,不用 WordPress 默认的块间距。 */
.wp-site-blocks > *,
.wp-block-group.dys-main > * {
	margin-block: 0;
}

/* 3. 通用组件 ------------------------------------------------------------- */

.wp-block-group.dys-wrap {
	max-width: var(--dys-wide);
	margin-inline: auto;
}

.wp-block-group.dys-section {
	padding: clamp(3rem, 7vw, 5rem) var(--dys-gutter);
}

/* 标题下的荧光笔划线，换行时每一行都有 */
.dys-section h2 {
	margin-block: 0.75rem 1.25rem;
	text-decoration: underline;
	text-decoration-color: var(--dys-mark);
	text-decoration-thickness: 0.4em;
	text-underline-offset: -0.14em;
	text-decoration-skip-ink: none;
}

.dys-section p {
	color: var(--dys-ink-soft);
}

.wp-block-group.dys-section__head {
	max-width: 40rem;
	margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* 小标签:>_ hello / 01 · 关于 */
p.dys-kicker,
.wp-block-post-date.dys-kicker {
	width: fit-content;
	margin: 0;
	padding: 0.1rem 0.75rem;
	border: 1.5px solid var(--dys-line);
	border-radius: 999px;
	background: var(--dys-surface);
	color: var(--dys-blue);
	font-family: var(--dys-mono);
	font-size: 0.8125rem;
	line-height: 1.7;
	letter-spacing: 0.04em;
}

/* 按钮 */
.wp-block-button > .wp-block-button__link {
	padding: 0.65rem 1.6rem;
	border: 2px solid var(--dys-line);
	border-radius: 999px;
	background: var(--dys-blue);
	color: var(--dys-on-blue);
	box-shadow: 0 4px 0 var(--dys-shadow);
	font-family: var(--dys-display);
	font-size: 1.125rem;
	line-height: 1.5;
	text-decoration: none;
	transition: translate 0.18s var(--dys-ease), box-shadow 0.18s var(--dys-ease);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.65rem 1.6rem;
	border: 2px solid var(--dys-line);
	background: var(--dys-surface);
	color: var(--dys-ink);
}

.wp-block-button > .wp-block-button__link:hover {
	translate: 0 -2px;
	box-shadow: 0 6px 0 var(--dys-shadow);
}

.wp-block-button > .wp-block-button__link:active {
	translate: 0 3px;
	box-shadow: 0 1px 0 var(--dys-shadow);
}

/* 贴纸感的插画:白色描边 + 一点落影 */
.wp-block-image.dys-mascot {
	margin: 0;
}

.dys-mascot img {
	display: block;
	width: 100%;
	height: auto;
	filter:
		drop-shadow(3px 0 0 var(--dys-sticker))
		drop-shadow(-3px 0 0 var(--dys-sticker))
		drop-shadow(0 3px 0 var(--dys-sticker))
		drop-shadow(0 -3px 0 var(--dys-sticker))
		drop-shadow(0 10px 14px rgba(20, 26, 46, 0.18));
}

/* 对话气泡 */
p.dys-bubble {
	position: relative;
	width: fit-content;
	max-width: 13em;
	margin: 0;
	padding: 0.55rem 1rem;
	border: 2px solid var(--dys-line);
	border-radius: 18px;
	background: var(--dys-surface);
	color: var(--dys-ink);
	box-shadow: 0 4px 0 var(--dys-shadow);
	font-family: var(--dys-display);
	font-size: 1.05rem;
	line-height: 1.45;
}

p.dys-bubble::after {
	content: "";
	position: absolute;
	left: 1.6rem;
	bottom: -9px;
	width: 14px;
	height: 14px;
	border: solid var(--dys-line);
	border-width: 0 2px 2px 0;
	background: var(--dys-surface);
	rotate: 45deg;
}

/* 卡片 */
.wp-block-group.dys-cards {
	display: grid;
	gap: 1.5rem;
}

.wp-block-group.dys-cards > * {
	margin: 0;
}

.wp-block-group.dys-card {
	padding: 1.5rem 1.4rem 1.6rem;
	border: 2px solid var(--dys-line);
	border-radius: var(--dys-radius);
	background: var(--dys-surface);
	box-shadow: 0 6px 0 var(--dys-shadow);
	transition: translate 0.25s var(--dys-ease), rotate 0.25s var(--dys-ease), box-shadow 0.25s var(--dys-ease);
}

.dys-card > * {
	margin-block: 0;
}

.dys-card > * + * {
	margin-top: 0.6rem;
}

.dys-card h3 {
	color: var(--dys-ink);
	font-size: 1.5rem;
}

.dys-card p {
	font-size: 1rem;
	line-height: 1.75;
}

p.dys-card__icon {
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border: 2px solid var(--dys-line);
	border-radius: 16px;
	background: var(--dys-sky);
	color: var(--dys-ink);
	font-family: var(--dys-mono);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	rotate: -6deg;
}

.dys-card:nth-child(4n + 2) .dys-card__icon {
	background: var(--dys-cyan);
	color: #0c1124;
	rotate: 5deg;
}

.dys-card:nth-child(4n + 3) .dys-card__icon {
	background: var(--dys-blush);
	color: #0c1124;
}

.dys-card:nth-child(4n + 4) .dys-card__icon {
	background: var(--dys-blue);
	color: var(--dys-on-blue);
	rotate: 6deg;
}

@media (min-width: 640px) {
	.wp-block-group.dys-cards--four {
		grid-template-columns: repeat(2, 1fr);
	}

	.wp-block-group.dys-cards--three {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1000px) {
	.wp-block-group.dys-cards--four {
		grid-template-columns: repeat(4, 1fr);
	}

	.dys-cards--four > .dys-card:nth-child(odd) {
		rotate: -1.2deg;
	}

	.dys-cards--four > .dys-card:nth-child(even) {
		rotate: 1.2deg;
		translate: 0 0.75rem;
	}
}

@media (hover: hover) {
	.dys-cards > .dys-card:hover {
		rotate: 0deg;
		translate: 0 -4px;
		box-shadow: 0 10px 0 var(--dys-shadow);
	}
}

/* 「待补充」:显眼的便签样式,提醒这里还缺真实信息 */
.is-style-todo {
	border: 2px dashed var(--dys-todo-line);
	border-radius: 14px;
	background: var(--dys-todo-bg);
	color: var(--dys-todo-ink) !important;
}

p.is-style-todo,
h3.is-style-todo {
	padding: 0.45rem 0.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
}

ul.is-style-todo {
	margin-block: 1rem 0;
	padding: 0.6rem 0.9rem;
	list-style: none;
	font-size: 0.95rem;
}

ul.is-style-todo li + li {
	margin-top: 0.3rem;
	padding-top: 0.3rem;
	border-top: 1px dashed var(--dys-todo-line);
}

/* 左右分栏 */
.wp-block-group.dys-split {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

.wp-block-group.dys-split > * {
	margin: 0;
}

.dys-split__text > * {
	margin-block: 0;
}

.dys-split__text > * + * {
	margin-top: 1rem;
}

@media (min-width: 820px) {
	.wp-block-group.dys-split {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	}

	.wp-block-group.dys-split--flip {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
	}

	.dys-split--flip > :first-child {
		order: 2;
	}
}

/* 4. 页眉页脚 ------------------------------------------------------------- */

header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
	padding: 0.6rem var(--dys-gutter) 0;
}

.wp-block-group.dys-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	max-width: var(--dys-wide);
	margin-inline: auto;
	padding: 0.4rem 0.5rem 0.4rem 0.6rem;
	border: 2px solid var(--dys-line);
	border-radius: 999px;
	background: var(--dys-glass);
	box-shadow: 0 4px 0 var(--dys-shadow);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.wp-block-group.dys-header > * {
	margin: 0;
}

.dys-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-family: var(--dys-display);
	font-size: 1.35rem;
	line-height: 1;
	white-space: nowrap;
}

.dys-brand::before {
	content: "";
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border: 2px solid var(--dys-line);
	border-radius: 50%;
	background: #111 url(../img/logo.webp) center / cover;
}

.dys-brand a {
	color: var(--dys-ink);
	text-decoration: none;
}

.dys-nav.wp-block-navigation {
	font-family: var(--dys-display);
	font-size: 1.05rem;
}

.dys-nav .wp-block-navigation__container {
	gap: 0.1rem;
}

.dys-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
	display: block;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	color: var(--dys-ink);
	transition: background-color 0.15s;
}

.dys-nav .wp-block-navigation-item__content:hover {
	background: var(--dys-sky);
}

@media (max-width: 480px) {
	header.wp-block-template-part {
		padding-inline: 0.5rem;
	}

	/* 窄屏只留头像,把位置让给导航;文字仍可被读屏读到 */
	.dys-header .dys-brand {
		position: relative;
	}

	.dys-header .dys-brand a {
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: 50%;
		text-indent: -99rem;
	}

	.dys-nav.wp-block-navigation {
		font-size: 1rem;
	}

	.dys-nav .wp-block-navigation-item__content.wp-block-navigation-item__content {
		padding-inline: 0.55rem;
	}
}

.wp-block-group.dys-footer {
	display: grid;
	justify-items: center;
	gap: 0.6rem;
	padding: 3rem var(--dys-gutter) 6rem;
	text-align: center;
}

.wp-block-group.dys-footer > * {
	margin: 0;
}

.dys-footer__slogan {
	font-family: var(--dys-display);
	font-size: 1.15rem;
	color: var(--dys-blue);
}

.dys-footer__meta {
	color: var(--dys-ink-soft);
	font-size: 0.875rem;
}

/* 5. 首页各区块 ----------------------------------------------------------- */

/* 首屏 */
.wp-block-group.dys-hero {
	position: relative;
	overflow: clip;
	padding-top: clamp(1.5rem, 4vw, 3rem);
}

.wp-block-group.dys-hero__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
	max-width: var(--dys-wide);
	margin-inline: auto;
	padding-inline: var(--dys-gutter);
}

.wp-block-group.dys-hero__inner > * {
	margin: 0;
}

.dys-hero__text > * {
	margin-block: 0;
}

h1.dys-hero__title {
	margin-top: 0.75rem;
	color: var(--dys-ink);
	font-size: clamp(4.25rem, 17vw, 8.5rem);
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-shadow: 0.05em 0.05em 0 var(--dys-cyan);
}

p.dys-hero__tagline {
	margin-top: 0.5rem;
	color: var(--dys-blue);
	font-family: var(--dys-display);
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	line-height: 1.3;
}

p.dys-hero__lead {
	max-width: 30em;
	margin-top: 1rem;
	color: var(--dys-ink-soft);
}

.wp-block-buttons.dys-hero__actions {
	gap: 0.9rem;
	margin-top: 1.75rem;
}

/* 社娘的舞台:猫头形状的底色 + 一圈虚线轨道 */
.wp-block-group.dys-stage {
	position: relative;
	display: grid;
	justify-items: center;
	padding-top: 2.5rem;
}

.wp-block-group.dys-stage > * {
	margin: 0;
}

.dys-stage::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 6%;
	width: min(112%, 34rem);
	aspect-ratio: 400 / 360;
	translate: -50% 0;
	background: linear-gradient(160deg, var(--dys-sky), var(--dys-mark));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 360'%3E%3Cpath d='M60 150 50 30q0-16 16-8l84 48q50-12 100 0l84-48q16-8 16 8l-10 120q32 50 20 100-24 90-160 90T40 250q-12-50 20-100Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 360'%3E%3Cpath d='M60 150 50 30q0-16 16-8l84 48q50-12 100 0l84-48q16-8 16 8l-10 120q32 50 20 100-24 90-160 90T40 250q-12-50 20-100Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dys-stage::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 30%;
	width: min(124%, 38rem);
	aspect-ratio: 5 / 2;
	translate: -50% 0;
	border: 2px dashed var(--dys-blue);
	border-radius: 50%;
	opacity: 0.35;
	rotate: -14deg;
}

.dys-stage .dys-mascot--wave {
	position: relative;
	z-index: 1;
	width: min(74vw, 21rem);
	animation: dys-float 6s ease-in-out infinite;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.dys-stage .dys-mascot--wave img {
	transition: rotate 0.4s var(--dys-ease);
	transform-origin: 50% 90%;
}

.dys-stage .dys-mascot--wave.is-poked img {
	animation: dys-poke 0.5s var(--dys-ease);
}

.dys-stage p.dys-bubble {
	position: absolute;
	z-index: 2;
	top: 0;
	right: max(0px, calc(50% - 11.5rem));
	max-width: 9.5em;
	animation: dys-pop 0.5s var(--dys-ease) 0.4s both;
}

.dys-stage p.dys-bubble::after {
	left: 1.2rem;
}

/* 漂浮的小装饰 */
.dys-mascot--wave::before,
.dys-mascot--wave::after {
	position: absolute;
	z-index: -1;
	display: grid;
	place-items: center;
	border: 2px solid var(--dys-line);
	font-family: var(--dys-mono);
	font-weight: 700;
	line-height: 1;
}

.dys-mascot--wave::before {
	content: ">_";
	left: -8%;
	bottom: 20%;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 14px;
	background: var(--dys-panel);
	color: var(--dys-cat-glow);
	font-size: 1.15rem;
	rotate: -10deg;
	animation: dys-float 5s ease-in-out -2s infinite;
}

.dys-mascot--wave::after {
	content: "✦";
	right: -9%;
	top: 16%;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--dys-blush);
	color: #0c1124;
	font-size: 1.1rem;
	rotate: 12deg;
	animation: dys-float 4.5s ease-in-out -1s infinite;
}

@media (min-width: 860px) {
	.wp-block-group.dys-hero__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		gap: 2rem;
	}

	.dys-stage .dys-mascot--wave {
		width: min(100%, 24rem, 44vh);
		min-width: 17rem;
	}

	.dys-stage p.dys-bubble {
		right: max(0px, calc(50% - 15rem));
	}
}

/* 滚动字条 */
p.dys-ticker {
	position: relative;
	z-index: 2;
	width: 104%;
	margin: -1.5rem 0 0 -2%;
	padding: 0.55rem 0;
	overflow: hidden;
	border-block: 2px solid var(--dys-line);
	background: var(--dys-panel);
	color: var(--dys-panel-ink);
	font-family: var(--dys-display);
	font-size: 1.15rem;
	line-height: 1.5;
	text-align: center;
	white-space: nowrap;
	rotate: -1.2deg;
}

.dys-ticker__track {
	display: inline-flex;
	animation: dys-marquee 40s linear infinite;
}

.dys-ticker__track > span {
	padding-right: 0.6em;
}

/* 关于 */
.dys-about .dys-mascot--chibi {
	position: relative;
	width: min(78%, 22rem);
	margin-inline: auto;
}

.dys-mascot--chibi::before {
	content: "";
	position: absolute;
	inset: 12% -6% -2%;
	z-index: -1;
	border-radius: 46% 54% 50% 50% / 55% 50% 50% 45%;
	background: var(--dys-sky);
}

.wp-block-group.dys-file {
	position: relative;
	margin-top: 2.25rem;
	padding: 1.4rem 1.1rem 1.1rem;
	border: 2px solid var(--dys-line);
	border-radius: 4px var(--dys-radius) var(--dys-radius) var(--dys-radius);
	background: var(--dys-surface);
	box-shadow: 0 5px 0 var(--dys-shadow);
}

.dys-file > * {
	margin: 0;
}

h3.dys-file__title {
	position: absolute;
	top: 0;
	left: -2px;
	translate: 0 -100%;
	padding: 0.2rem 1rem 0.1rem;
	border: 2px solid var(--dys-line);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: var(--dys-sky);
	color: var(--dys-ink);
	font-size: 1.05rem;
}

.dys-file ul.is-style-todo {
	margin: 0;
}

/* 气质:一整块天空蓝的圆角底 */
.wp-block-group.dys-spirit {
	margin-inline: clamp(0.5rem, 2vw, 1.5rem);
	border-radius: clamp(28px, 5vw, 56px);
	background: var(--dys-sky);
}

.dys-spirit h2 {
	text-decoration-color: var(--dys-surface);
}

/* 方向:占位卡片 */
.wp-block-group.dys-card--slot {
	border-style: dashed;
	box-shadow: none;
}

.dys-card--slot h3.is-style-todo {
	font-size: 1.05rem;
}

/* 社娘:一个小小的像素窗口 */
.wp-block-group.dys-window {
	position: relative;
	width: min(100%, 22rem);
	margin-inline: auto;
	padding: 3.5rem 1.5rem 1.25rem;
	overflow: hidden;
	border: 2px solid var(--dys-line);
	border-radius: var(--dys-radius);
	background-color: var(--dys-surface);
	background-image:
		linear-gradient(var(--dys-dot) 1px, transparent 1px),
		linear-gradient(90deg, var(--dys-dot) 1px, transparent 1px);
	background-size: 16px 16px;
	box-shadow: 8px 8px 0 var(--dys-shadow);
}

.dys-window::before {
	content: "● ● ●";
	position: absolute;
	inset: 0 0 auto;
	padding: 0.35rem 0.9rem;
	border-bottom: 2px solid var(--dys-line);
	background: var(--dys-panel);
	color: var(--dys-cat-glow);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	line-height: 1.6;
}

.dys-window .dys-mascot--pixel {
	width: min(62%, 12rem);
	margin-inline: auto;
}

.dys-mascot--pixel img {
	animation: dys-hop 2.4s steps(2, jump-none) infinite;
}

ul.dys-traits {
	padding: 0;
	list-style: none;
	color: var(--dys-ink-soft);
}

ul.dys-traits li {
	position: relative;
	padding-left: 1.6em;
}

ul.dys-traits li + li {
	margin-top: 0.4rem;
}

ul.dys-traits li::before {
	content: "✦";
	position: absolute;
	left: 0;
	color: var(--dys-blue);
}

/* 加入 */
.wp-block-group.dys-join__panel {
	display: grid;
	gap: 2rem;
	align-items: center;
	padding: clamp(1.75rem, 5vw, 3.5rem);
	border: 2px solid var(--dys-line);
	border-radius: clamp(24px, 4vw, 40px);
	background-color: var(--dys-panel);
	background-image: radial-gradient(circle, rgba(63, 210, 255, 0.16) 1.2px, transparent 1.7px);
	background-size: 22px 22px;
	box-shadow: 0 8px 0 var(--dys-shadow);
	color: var(--dys-panel-ink);
}

.wp-block-group.dys-join__panel > * {
	margin: 0;
}

.dys-join__text > * {
	margin-block: 0;
}

.dys-join__text > * + * {
	margin-top: 1rem;
}

.dys-join h2 {
	text-decoration: none;
	color: var(--dys-panel-ink);
	font-size: clamp(2.2rem, 7vw, 3.25rem);
}

.dys-join p:not(.dys-kicker):not(.dys-bubble) {
	color: #c9d6fb;
}

.wp-block-group.dys-join__side {
	display: grid;
	justify-items: center;
	gap: 1.1rem;
}

.wp-block-group.dys-join__side > * {
	margin: 0;
}

.dys-join__side p.dys-bubble::after {
	left: calc(50% - 7px);
}

.wp-block-image.dys-avatar {
	width: clamp(8rem, 30vw, 11rem);
	margin: 0;
	rotate: 5deg;
	transition: rotate 0.3s var(--dys-ease);
}

.dys-avatar img {
	display: block;
	width: 100%;
	height: auto;
	border: 4px solid #fff;
	border-radius: 28%;
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
}

.dys-avatar:hover {
	rotate: -3deg;
}

@media (min-width: 760px) {
	.wp-block-group.dys-join__panel {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 3rem;
	}
}

/* 404 */
.wp-block-group.dys-lost {
	display: grid;
	justify-items: center;
	gap: 1rem;
	min-height: 70vh;
	align-content: center;
	text-align: center;
}

.wp-block-group.dys-lost > * {
	margin: 0;
}

.dys-lost .dys-mascot--pixel {
	width: 9rem;
}

.dys-lost h1 {
	font-size: var(--wp--preset--font-size--x-large);
}

/* 6. 普通页面与文章 ------------------------------------------------------- */

.wp-block-group.dys-page {
	padding: clamp(2.5rem, 7vw, 5rem) var(--dys-gutter) clamp(3rem, 8vw, 6rem);
}

.dys-page__title {
	margin-block: 0.75rem 2rem;
}

.dys-page .wp-block-post-featured-image img {
	border: 2px solid var(--dys-line);
	border-radius: var(--dys-radius);
}

.dys-post-card h2 {
	margin: 0.6rem 0 0;
}

.dys-post-card h2 a {
	color: var(--dys-ink);
	text-decoration: none;
}

.dys-post-card h2 a:hover {
	color: var(--dys-blue);
}

/* 7. 小黑猫 --------------------------------------------------------------- */

.dys-cat {
	position: fixed;
	right: max(0.6rem, env(safe-area-inset-right));
	bottom: max(0.4rem, env(safe-area-inset-bottom));
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
	pointer-events: none;
}

.dys-cat > * {
	pointer-events: auto;
}

.dys-cat__button {
	display: block;
	padding: 4px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: #12141f;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: translate 0.2s var(--dys-ease);
}

.dys-cat__button:hover,
.dys-cat__button[aria-expanded="true"] {
	translate: 0 -3px;
}

.dys-cat__svg {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	overflow: visible;
	filter:
		drop-shadow(1.5px 0 0 var(--dys-sticker))
		drop-shadow(-1.5px 0 0 var(--dys-sticker))
		drop-shadow(0 1.5px 0 var(--dys-sticker))
		drop-shadow(0 -1.5px 0 var(--dys-sticker))
		drop-shadow(0 3px 4px rgba(20, 26, 46, 0.25));
}

.dys-cat__tail {
	transform-origin: 45px 54px;
	animation: dys-tail 3.2s ease-in-out infinite;
}

.dys-cat__head {
	transform-origin: 32px 44px;
	transition: rotate 0.25s var(--dys-ease);
}

.dys-cat__button:hover .dys-cat__head,
.dys-cat__button[aria-expanded="true"] .dys-cat__head {
	rotate: -7deg;
}

.dys-cat__eyes {
	translate: var(--dys-eye-x, 0px) var(--dys-eye-y, 0px);
	transform-origin: 32px 29px;
	animation: dys-blink 5.5s infinite;
}

.dys-cat__panel {
	width: min(15rem, calc(100vw - 1.2rem));
	padding: 0.6rem;
	border: 2px solid var(--dys-line);
	border-radius: 18px;
	background: var(--dys-surface);
	color: var(--dys-ink);
	box-shadow: 0 5px 0 var(--dys-shadow);
	transform-origin: 90% 100%;
	animation: dys-pop 0.22s var(--dys-ease);
}

.dys-cat__title {
	margin: 0 0 0.3rem;
	padding: 0.15rem 0.55rem 0;
	font-family: var(--dys-display);
	font-size: 1rem;
	line-height: 1.6;
}

.dys-cat__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 44px;
	padding: 0.4rem 0.55rem;
	border: 0;
	border-radius: 12px;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
}

.dys-cat__item:hover {
	background: var(--dys-sky);
}

.dys-cat__track {
	position: relative;
	flex: none;
	width: 2.6rem;
	height: 1.5rem;
	border: 2px solid var(--dys-line);
	border-radius: 999px;
	background: var(--dys-bg);
	transition: background-color 0.2s;
}

.dys-cat__track::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(1.5rem - 8px);
	height: calc(1.5rem - 8px);
	border-radius: 50%;
	background: var(--dys-ink);
	transition: translate 0.2s var(--dys-ease);
}

.dys-cat__item[aria-checked="true"] .dys-cat__track {
	background: var(--dys-cyan);
}

.dys-cat__item[aria-checked="true"] .dys-cat__track::after {
	translate: 1.1rem 0;
	background: #0c1124;
}

.dys-cat__arrow {
	width: 2.6rem;
	font-family: var(--dys-mono);
	font-weight: 700;
	text-align: center;
}

.dys-cat__hint {
	position: relative;
	margin: 0 0.3rem 0 0;
	padding: 0.3rem 0.7rem;
	border: 2px solid var(--dys-line);
	border-radius: 14px;
	background: var(--dys-surface);
	color: var(--dys-ink);
	font-family: var(--dys-display);
	font-size: 0.9rem;
	line-height: 1.5;
	pointer-events: none;
	animation: dys-pop 0.3s var(--dys-ease);
}

/* 8. 动效 ----------------------------------------------------------------- */

.dys-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.7s var(--dys-ease);
	transition-delay: var(--dys-delay, 0s);
}

.dys-reveal.is-in {
	opacity: 1;
	transform: none;
}

@keyframes dys-float {
	50% {
		transform: translateY(-10px);
	}
}

@keyframes dys-poke {
	30% {
		transform: rotate(-4deg) scale(1.03);
	}

	65% {
		transform: rotate(3deg);
	}
}

@keyframes dys-pop {
	from {
		opacity: 0;
		transform: scale(0.8) translateY(8px);
	}
}

@keyframes dys-marquee {
	to {
		transform: translateX(-50%);
	}
}

@keyframes dys-hop {
	50% {
		transform: translateY(-6px);
	}
}

@keyframes dys-tail {
	50% {
		transform: rotate(14deg);
	}
}

@keyframes dys-blink {
	0%,
	94%,
	100% {
		transform: scaleY(1);
	}

	97% {
		transform: scaleY(0.1);
	}
}

/* 访客在小黑猫那里选了「减少动效」,或系统本身要求减少动效(由脚本同步到 data-motion) */
html[data-motion="reduce"] {
	scroll-behavior: auto;
}

html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
	animation: none !important;
	transition: none !important;
}

html[data-motion="reduce"] .dys-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.js) *,
	html:not(.js) *::before,
	html:not(.js) *::after {
		animation: none !important;
		transition: none !important;
	}
}