:root {
  --color-bg: #faf9f5;
  --color-primary: #8ec9df;
  --color-primary-light: #ddeff5;
  --color-blue: #355e76;
  --color-text: #444b50;
  --color-muted: #71777a;
  --color-border: #e8e4dc;
  --color-card: #fff;
  --color-accent: #d9c2a4;
  --color-leaf: #8da997;
  --font-body: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-heading: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --shadow: 0 4px 18px rgb(37 64 78 / 4%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; color: var(--color-text); background: linear-gradient(#f5fbfd 0, #fff 155px, var(--color-bg) 950px); font: 15px/1.85 var(--font-body); -webkit-text-size-adjust: 100%; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-blue); }
img { display: block; max-width: 100%; object-fit: cover; }
svg { flex-shrink: 0; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 3px solid #4386a5; outline-offset: 4px; }
[hidden] { display: none !important; }
.icon { display: inline-block; width: 22px; height: 22px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 20; transform: translateY(-150%); background: #fff; padding: 10px 20px; border-radius: 5px; }
.skip-link:focus { transform: translateY(0); }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { color: var(--color-blue); font-weight: 600; }
.site-header { max-width: 1240px; margin: auto; padding: 0 20px; position: relative; }
.header-inner { min-height: 106px; display: flex; align-items: center; gap: 14px; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; white-space: nowrap; }
.brand-bird { width: 40px; height: 47px; transform: rotate(-8deg); }
.brand-title { display: block; font: 600 29px/1.5 var(--font-heading); letter-spacing: .06em; color: #365770; }
.brand-subtitle { display: block; font-size: 11px; color: #6c7e8c; letter-spacing: .045em; }
.desktop-nav { display: flex; align-items: center; gap: 25px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.desktop-nav a { position: relative; min-height: 44px; display: flex; align-items: center; color: #66737e; }
.desktop-nav a.active { color: #39799c; }
.desktop-nav a.active::after { content: ""; position: absolute; bottom: 3px; left: 0; right: 0; height: 2px; background: #84b8cf; }
.icon-button { width: 40px; height: 40px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--color-blue); background: var(--color-primary-light); padding: 0; }
.search-toggle { margin-left: 8px; }
.menu-toggle { display: none; }
.header-search { background: #fff; border: 1px solid var(--color-border); padding: 20px; border-radius: 12px; margin: 0 0 20px; box-shadow: var(--shadow); }
.header-search label { font-size: 13px; color: var(--color-blue); }
.header-search>div { display: flex; gap: 12px; margin-top: 8px; }
.header-search input { min-width: 0; flex: 1; border: 1px solid #b5ced6; border-radius: 8px; padding: 9px 14px; background: #fcfefe; }
.mobile-menu { display: none; }
.site-main { max-width: 1240px; margin: auto; padding: 0 20px 25px; }
.hero { position: relative; height: 416px; overflow: hidden; border-radius: 16px; background: #e5f2f5; isolation: isolate; }
.hero-image { width: 100%; height: 100%; position: absolute; inset: 0; object-position: 55% 55%; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(250 253 250 / 83%) 0%, rgb(250 253 250 / 54%) 31%, transparent 65%); z-index: -1; }
.hero-content { position: absolute; left: 6%; top: 16%; max-width: 58%; color: #375c70; }
.eyebrow { display: block; color: #698d9e; font: 10px/1.7 var(--font-body); letter-spacing: .14em; margin-bottom: 13px; }
.eyebrow .icon { width: 14px; height: 14px; margin-right: 7px; }
.hero h1 { font: 600 33px/1.65 var(--font-heading); letter-spacing: .055em; margin-bottom: 20px; }
.hero-content>p:not(.eyebrow) { font-size: 14px; line-height: 2; letter-spacing: .025em; }
.hero-link { display: inline-flex; align-items: center; gap: 17px; border-bottom: 1px solid #8bb1c0; padding-bottom: 4px; font-size: 12px; }
.hero-link .icon { width: 18px; height: 18px; }
.hero-handwritten { position: absolute; right: 6%; bottom: 24px; color: #fff; font: 15px var(--font-heading); letter-spacing: .07em; transform: rotate(-4deg); text-shadow: 0 1px 5px #3d5459; }
.category-ribbon { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 13px; padding: 18px 12px 26px; }
.category-ribbon a { min-height: 49px; background: #eaf4f6; color: #456d83; display: flex; justify-content: center; align-items: center; gap: 9px; border-radius: 30px; font-size: 12px; transition: background .18s; }
.category-ribbon a:nth-child(2), .category-ribbon a:nth-child(5) { background: #f5f1e9; color: #746858; }
.category-ribbon .icon { width: 23px; height: 23px; }
.category-ribbon a:hover { background: #dbeef2; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 28px; align-items: start; }
.main-column { min-width: 0; }
.main-column>section { margin-bottom: 37px; }
.welcome-card { background: linear-gradient(115deg,#fff,#fcfaf6); border: 1px solid var(--color-border); border-radius: 15px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.welcome-card h2 { display: flex; align-items: center; gap: 12px; font: 600 21px var(--font-heading); letter-spacing: .1em; margin-bottom: 16px; }
.welcome-card h2 .icon { color: var(--color-leaf); width: 25px; height: 29px; }
.welcome-card p { font-size: 13px; line-height: 2.1; margin-bottom: 10px; }
.welcome-card a { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #5587a0; }
.welcome-card a .icon { width: 16px; }
.welcome-doodle { width: 145px; flex-shrink: 0; text-align: center; }
.mascot { width: 125px; height: 130px; }
.welcome-doodle span { display: block; color: #8e877e; font: 12px var(--font-heading); transform: rotate(-8deg); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #dceaf0; margin-bottom: 17px; padding: 0 0 9px; }
.section-heading h2 { display: flex; gap: 10px; align-items: center; margin: 0; font: 600 22px/1.5 var(--font-heading); letter-spacing: .06em; }
.section-heading h2 .icon { color: var(--color-leaf); width: 23px; height: 27px; }
.section-heading>div>p { margin: 1px 0 0 33px; color: #87949b; font: italic 11px/1.5 Georgia,serif; letter-spacing: .035em; }
.section-heading>a { display: inline-flex; align-items: center; color: #477a93; font-size: 11px; gap: 8px; white-space: nowrap; }
.section-heading>a .icon { width: 16px; height: 16px; }
.post-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
.post-card { background: var(--color-card); border: 1px solid #eceae4; border-radius: 13px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; transition: transform .18s; }
.post-card:hover { transform: translateY(-2px); }
.post-cover { display: block; aspect-ratio: 16/10; overflow: hidden; margin: 4px 4px 0; border-radius: 9px; }
.post-cover img { width: 100%; height: 100%; object-position: center; }
.post-card-body { padding: 13px 16px 15px; flex: 1; display: flex; flex-direction: column; }
.post-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.post-meta time { color: var(--color-muted); letter-spacing: .02em; }
.category-badge { display: inline-block; background: #e3f1f5; color: #38697f; border-radius: 20px; padding: 2px 9px; font-size: 10px; font-weight: 500; line-height: 1.8; white-space: nowrap; }
.category-items { background: #f1eadf; color: #796a53; }
.category-notes { background: #edece8; color: #706e65; }
.category-story { background: #edeaf4; color: #746281; }
.category-beginner { background: #e7f0e8; color: #516f57; }
.post-card h3 { font-size: 15px; line-height: 1.8; color: #404f59; margin: 0 0 10px; }
.post-card h3>a { display: block; }
.post-card-body>p { font-size: 12px; line-height: 1.95; color: #697078; margin-bottom: 15px; }
.read-more { color: #3d6d85; display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11px; margin-top: auto; min-height: 27px; }
.read-more .icon { width: 16px; height: 16px; }
.sample-line { color: #7b8385; font-size: 11px; margin: 12px 0 0; }
.sample-line .icon { width: 15px; height: 15px; margin-right: 6px; color: #8da997; }
.story-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; }
.story-card { position: relative; overflow: hidden; border-radius: 9px; height: 144px; background: #e5f0f4; display: flex; align-items: end; isolation: isolate; }
.story-card>img, .story-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.story-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent, rgb(32 57 63 / 78%)); }
.story-label { padding: 14px 7px 11px; text-align: center; width: 100%; }
.story-label h3 { color: #fff; font: 600 16px var(--font-heading); margin: 0 0 4px; letter-spacing: .03em; }
.story-label span { font: 9px/1.4 Georgia,serif; color: #f3f4f4; display: block; }
.story-label small { font-size: 9px; color: #edf2f4; display: block; margin-top: 8px; }
.story-placeholder { display: flex; align-items: start; justify-content: center; padding-top: 20px; background: linear-gradient(140deg,#eff5f8,#d9e6ed); }
.story-placeholder .icon { width: 39px; height: 39px; color: #98b2bf; stroke-width: 1; }
.story-awaiting::after { display: none; }
.story-awaiting h3 { color: #627c8e; }
.story-awaiting span, .story-awaiting small { color: #6c818e; }
.story-stormblood .story-placeholder { background: linear-gradient(140deg,#f9f3e8,#eddfcf); }
.story-stormblood .icon { color: #b7a68a; }
.story-shadowbringers .story-placeholder { background: linear-gradient(140deg,#f0eff6,#e0dfea); }
.story-endwalker .story-placeholder { background: linear-gradient(140deg,#eef3f6,#dee8ed); }
.story-dawntrail .story-placeholder { background: linear-gradient(140deg,#f7f6e6,#e9e8cb); }
.quiet-note { color: #788184; font-size: 11px; line-height: 1.8; margin: 10px 0 0; }
.beginner-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.beginner-tile { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 21px 21px 17px 60px; }
.beginner-tile>.icon { position: absolute; left: 21px; top: 22px; width: 24px; height: 24px; color: #77a6b8; }
.beginner-tile h3 { font-size: 14px; margin-bottom: 7px; }
.beginner-tile p { font-size: 12px; color: #71797b; margin-bottom: 10px; }
.beginner-tile>span { font-size: 11px; color: #4e7b93; }
.beginner-tile>span .icon { width: 15px; }
.popular-list { list-style: none; padding: 0; margin: 0; }
.popular-list li { display: flex; align-items: center; gap: 13px; padding: 12px 4px; border-bottom: 1px dashed #e2e6e4; }
.list-number { width: 22px; height: 26px; border-radius: 3px; background: #a8becc; color: #fff; text-align: center; line-height: 26px; font-family: Georgia,serif; }
.popular-list li:first-child .list-number { background: #b4a083; }
.popular-list a { font-size: 13px; flex: 1; }
.sidebar { display: flex; flex-direction: column; gap: 20px; }
.profile-card { padding: 13px 9px 9px; background: #eaf6f9; border-radius: 15px; }
.profile-card>h2 { display: flex; align-items: center; gap: 9px; color: #3f6c83; font-size: 14px; font-weight: 500; margin: 0 8px 11px; }
.profile-card>h2 .icon { width: 24px; height: 26px; color: #7caaad; }
.profile-card-inner { background: #fff; border-radius: 12px; padding: 21px 19px 15px; }
.avatar { width: 125px; height: 125px; border-radius: 50%; margin: 0 auto 12px; object-position: 92% 60%; }
.profile-card h3 { text-align: center; font: 600 19px var(--font-heading); margin-bottom: 15px; letter-spacing: .12em; }
.profile-card h3 .icon { width: 19px; height: 23px; color: #96b5a0; }
.profile-card p { font-size: 12px; line-height: 1.95; margin-bottom: 10px; color: #667178; }
.profile-card .profile-small { margin-bottom: 5px; }
.profile-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; }
.profile-tags span { font-size: 10px; color: #566e70; background: #f0f6f5; padding: 3px 8px; border-radius: 20px; }
.soft-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 20px; min-height: 42px; background: #deeff5; color: #3a6b83; border-radius: 25px; border: 0; font-size: 12px; }
.soft-button:hover { background: #cce5ef; }
.soft-button .icon { width: 18px; height: 18px; }
.profile-card .soft-button { color: #315d74; width: 100%; font-size: 11px; padding: 8px 5px; background: #c6e4ef; }
.welcome-banner { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #e9e3d9; border-radius: 12px; min-height: 90px; background: linear-gradient(125deg,#eff6ee,#fffcf6 70%); }
.welcome-banner>.icon:first-child { width: 32px; height: 32px; color: #9aafa0; }
.welcome-banner span { font: 16px/1.7 var(--font-heading); letter-spacing: .07em; color: #726856; }
.welcome-banner small { display: block; font-size: 11px; text-align: center; }
.welcome-banner>.icon:last-child { width: 16px; height: 16px; color: #9cadb2; }
.little-note { padding: 18px 15px; background: #edf5f8; border-radius: 12px; text-align: center; }
.little-note .mascot { width: 90px; height: 94px; }
.little-note p { color: #486779; font: 15px/1.8 var(--font-heading); margin-bottom: 0; letter-spacing: .06em; }
.little-note p span { font-size: 11px; color: #536b78; }
.side-categories { padding: 20px; border: 1px solid var(--color-border); border-radius: 12px; background: #fffdfa; }
.side-categories h2 { font: 17px var(--font-heading); margin-bottom: 14px; }
.side-categories a { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 9px 0; border-bottom: 1px solid #eeeee9; }
.side-categories a:last-child { border-bottom: 0; }
.side-categories .icon { width: 18px; height: 18px; color: #84a8b7; }
.side-categories .icon:last-child { width: 13px; margin-left: auto; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 11px; color: #738792; padding: 16px 0 25px; }
.breadcrumb .icon { width: 12px; height: 12px; }
.breadcrumb span { color: #858c8e; }
.page-heading { text-align: center; padding: 20px 0 35px; }
.page-heading .eyebrow { margin-bottom: 9px; }
.page-heading h1 { font: 600 30px/1.7 var(--font-heading); letter-spacing: .05em; margin-bottom: 15px; }
.page-heading>p { color: #73818a; font-size: 13px; }
.archive-search { max-width: 620px; margin: 0 auto 27px; display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #dce8eb; border-radius: 30px; padding: 6px 7px 6px 18px; }
.archive-search label { color: #799fad; }
.archive-search input { min-width: 0; flex: 1; border: 0; background: transparent; padding: 7px 2px; color: var(--color-text); font-size: 13px; }
.archive-search .soft-button { white-space: nowrap; }
.filter-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 23px; }
.filter-tabs a { font-size: 12px; min-height: 40px; border: 1px solid var(--color-border); padding: 7px 19px; border-radius: 25px; background: #fff; }
.filter-tabs a.selected { color: #fff; background: #54859e; border-color: #54859e; }
.results-summary { color: #6c7e87; font-size: 12px; border-bottom: 1px solid #e4ecee; padding-bottom: 12px; margin-bottom: 25px; }
.results-summary span { float: right; font-size: 10px; color: #838d91; }
.archive-grid { gap: 25px; padding-bottom: 30px; }
.archive-grid .post-cover { aspect-ratio: 16/9; }
.archive-grid .post-card-body { padding: 17px 22px 20px; }
.archive-grid h3 { font-size: 17px; }
.archive-grid .post-card-body>p { font-size: 13px; }
.story-index { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.story-index .story-card { height: 230px; }
.story-index .story-placeholder { padding-top: 35px; }
.story-index .story-placeholder .icon { width: 65px; height: 65px; }
.story-index .story-label { padding-bottom: 23px; }
.story-index .story-label h3 { font-size: 23px; margin-bottom: 8px; }
.story-index .story-label span { font-size: 12px; }
.story-index .story-label small { font-size: 11px; }
.story-disclaimer { text-align: center; margin-top: 22px; }
.story-results { margin-top: 45px; }
.empty-state { padding: 35px 20px 65px; text-align: center; }
.empty-state h1, .empty-state h2 { font: 600 24px/1.8 var(--font-heading); }
.empty-state p { color: #78858a; font-size: 14px; }
.empty-state .soft-button { margin-top: 15px; }
.error-page { padding-top: 80px; }
.article-layout { grid-template-columns: minmax(0,1fr) 285px; }
.article-paper { border: 1px solid var(--color-border); background: #fff; border-radius: 14px; overflow: hidden; padding: 35px 40px 25px; min-width: 0; }
.article-heading h1 { font: 600 28px/1.65 var(--font-heading); margin: 14px 0 16px; color: #334f5f; }
.article-heading .post-meta { font-size: 12px; }
.article-heading .category-badge { font-size: 11px; }
.demo-label { color: #7b837f; font-size: 10px; margin-left: auto; }
.article-subtitle { font-size: 14px; color: #73808a; line-height: 1.9; margin-bottom: 25px; }
.article-body { font-size: 17px; line-height: 1.9; max-width: 800px; margin: auto; }
.article-body>p { margin: 24px 0; }
.article-body>h2 { font: 600 22px/1.7 var(--font-heading); border-bottom: 1px solid #d4e6ed; padding-bottom: 9px; margin: 43px 0 23px; display: flex; align-items: center; gap: 9px; }
.article-body>h2 .icon { color: #8fac92; }
.article-figure { margin: 25px 0 30px; }
.image-zoom { display: block; padding: 0; border: 0; border-radius: 10px; width: 100%; position: relative; background: #e3eef0; overflow: hidden; }
.image-zoom img { width: 100%; height: auto; aspect-ratio: 16/9; }
.image-zoom>span { position: absolute; bottom: 11px; right: 11px; background: rgb(255 255 255 / 92%); color: #47728a; border-radius: 20px; font-size: 10px; padding: 3px 9px; opacity: 0; transition: opacity .15s; }
.image-zoom>span .icon { width: 12px; height: 12px; }
.image-zoom:hover>span, .image-zoom:focus-visible>span { opacity: 1; }
.article-figure figcaption { text-align: center; color: #626a67; font-size: 11px; margin-top: 9px; }
.beginner-note { margin: 28px 0; padding: 21px 24px; border-radius: 10px; background: #eaf5fa; color: #486979; }
.beginner-note h3 { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 10px; }
.beginner-note ul { padding-left: 20px; margin: 0; font-size: 14px; line-height: 2; }
.article-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 35px 0 15px; }
.article-tags a { padding: 3px 10px; color: #40687e; background: #f1f7f8; border-radius: 20px; font-size: 11px; }
.article-body .sample-disclaimer, .sample-disclaimer { font-size: 11px; color: #7f8889; padding-top: 17px; border-top: 1px dashed #e1e7e5; line-height: 1.9; }
.sample-disclaimer .icon { width: 16px; height: 16px; margin-right: 6px; color: #92a998; }
.article-navigation { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #e4ecef; gap: 20px; padding: 22px 0 0; margin-top: 30px; }
.article-navigation a { display: flex; gap: 10px; align-items: center; max-width: 48%; color: #527c93; font-size: 12px; }
.article-navigation a:last-child { text-align: right; }
.article-navigation .icon { width: 18px; height: 18px; }
.article-navigation small { color: #8e9b9f; display: block; margin-bottom: 5px; font-size: 10px; }
.profile-hero { position: relative; height: 290px; border-radius: 15px; overflow: hidden; }
.profile-hero>img { width: 100%; height: 100%; object-position: center 60%; }
.profile-hero::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgb(37 57 63 / 9%), rgb(37 57 63 / 33%)); }
.profile-hero h1 { position: absolute; z-index: 1; top: 50%; right: 7%; color: #fff; font: 600 25px/1.9 var(--font-heading); letter-spacing: .08em; transform: translateY(-50%); text-shadow: 0 2px 5px #476576; }
.profile-hero .profile-subtitle { display: block; font: 12px/1.8 var(--font-body); letter-spacing: .06em; margin-top: 8px; }
.profile-paper { max-width: 820px; margin: 28px auto; padding: 35px 58px 45px; background: #fff; border: 1px solid var(--color-border); border-radius: 13px; }
.center-heading { text-align: center; margin-bottom: 25px; }
.center-heading h2 { font: 600 23px var(--font-heading); letter-spacing: .07em; margin-bottom: 8px; }
.center-heading p { font: italic 12px Georgia,serif; color: #83949d; }
.profile-avatar { width: 140px; height: 140px; }
.profile-name { display: flex; align-items: center; justify-content: center; gap: 13px; font: 600 20px var(--font-heading); margin: 10px 0; }
.profile-name .icon { width: 17px; height: 17px; color: #b4a78c; }
.profile-paper>.quiet-note { text-align: center; }
.profile-text { font-size: 15px; margin-top: 30px; line-height: 2; }
.profile-bio-heading { font: 600 20px/1.8 var(--font-heading); margin: 0 0 20px; }
.profile-details { background: #f6f9f8; padding: 12px 20px; border-radius: 10px; margin: 27px 0; }
.profile-details>div { display: grid; grid-template-columns: 42% 1fr; gap: 10px; border-bottom: 1px solid #e5eded; padding: 12px 0; }
.profile-details>div:last-child { border: 0; }
.profile-details dt { color: #65818d; font-size: 12px; }
.profile-details dt .icon { width: 17px; height: 17px; margin-right: 8px; color: #94b1a2; }
.profile-details dd { margin: 0; font-size: 12px; color: #637078; }
.profile-greeting { display: flex; align-items: center; justify-content: center; gap: 25px; padding: 20px 0; border-bottom: 1px solid #eaeae3; }
.profile-greeting>span { font: 16px/1.8 var(--font-heading); color: #8b7c6d; transform: rotate(-4deg); letter-spacing: .08em; }
.profile-social { margin-top: 28px; }
.profile-social h2 { font-size: 17px; }
.profile-social .soft-button { margin-top: 16px; }
.beginner-intro { display: flex; align-items: center; gap: 20px; padding: 20px 30px; border: 1px solid var(--color-border); background: #fffdf7; border-radius: 13px; margin-bottom: 24px; }
.beginner-intro h2 { font: 600 21px var(--font-heading); }
.beginner-intro p { font-size: 13px; color: #7a8180; }
.topic-note { background: #fff; border-radius: 13px; border: 1px solid var(--color-border); padding: 26px 30px; margin-bottom: 16px; }
.topic-note h2 { font-size: 18px; display: flex; gap: 10px; align-items: center; }
.topic-note h2 .icon { color: #80a8b5; }
.topic-note p { font-size: 15px; line-height: 2; margin-bottom: 0; }
.topic-selected { border-color: #86b5c7; background: #f5fbfc; }
.main-column>.sample-line { margin-bottom: 35px; }
.plain-paper { max-width: 820px; margin: 12px auto 35px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 42px 60px; font-size: 16px; line-height: 2; }
.plain-paper h1 { font: 600 28px/1.7 var(--font-heading); margin-bottom: 25px; }
.plain-paper h2 { font: 600 21px/1.7 var(--font-heading); margin: 32px 0 16px; }
.plain-paper p { margin-bottom: 22px; }
.plain-paper p a { text-decoration: underline; text-underline-offset: 3px; color: #56839a; }
.about-illustration { float: right; margin: -15px 0 10px 20px; }
.contact-mascot { display: block; margin: auto; }
.text-link { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #5f8696; margin-top: 25px; }
.footer-meadow { position: relative; max-width: 1240px; padding: 18px 20px 40px; margin: auto; text-align: center; }
.footer-meadow p { color: #9c968a; font: 15px/1.8 var(--font-heading); letter-spacing: .08em; margin-bottom: 0; }
.footer-meadow p span { font-size: 12px; }
.meadow-line { display: flex; gap: 35px; justify-content: center; align-items: end; color: #afc7b7; margin-bottom: 5px; }
.meadow-line>.icon { width: 28px; height: 38px; }
.meadow-line>.icon:nth-child(2) { color: #c8dce5; width: 18px; }
.footer-mascot { width: 73px; height: 75px; }
.site-footer { border-top: 1px solid #d9e8eb; background: #f1f8fa; padding: 32px max(20px, calc((100% - 1200px) / 2)) 20px; }
.footer-inner { display: flex; justify-content: space-between; align-items: start; gap: 35px; }
.footer-brand { font: 600 20px var(--font-heading); letter-spacing: .04em; color: #3d667e; }
.footer-inner p { font-size: 10px; color: #586f7e; margin-top: 7px; }
.footer-inner nav { display: flex; justify-content: end; gap: 12px 18px; flex-wrap: wrap; max-width: 58%; font-size: 10px; color: #526d7e; padding-top: 7px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #e3eef0; padding-top: 15px; margin-top: 16px; color: #566e7b; }
.footer-bottom small { font-size: 9px; }
.footer-bottom small:last-child { text-align: right; }
.rights-notice { display: block; white-space: nowrap; }
.back-top { position: fixed; right: 22px; bottom: 22px; z-index: 5; width: 39px; height: 39px; display: flex; justify-content: center; align-items: center; border: 1px solid #cee3eb; background: rgb(224 241 247 / 94%); color: #4d7a92; border-radius: 50%; }
.back-top .icon { width: 18px; height: 18px; }
.image-dialog { width: min(1100px, 94vw); border: 0; border-radius: 12px; padding: 44px 18px 15px; background: #fff; box-shadow: 0 10px 70px #24374450; max-height: 95vh; }
.image-dialog::backdrop { background: rgb(35 49 58 / 68%); }
.image-dialog>img { width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.image-dialog>img:not([src]) { display: none; }
.image-dialog>p { margin: 10px 5px 0; font-size: 12px; color: #73848d; text-align: center; }
.dialog-close { position: absolute; right: 10px; top: 6px; width: 32px; height: 32px; }
@media (min-width: 1400px) { .hero { height: 450px; } .hero-content { top: 17%; } }
@media (max-width: 1150px) {
  .brand-title { font-size: 24px; } .brand-bird { width: 32px; } .brand { gap: 7px; }
  .desktop-nav { gap: 17px; font-size: 11px; } .header-inner { gap: 8px; }
  .content-layout { grid-template-columns: minmax(0,1fr) 250px; gap: 23px; }
  .welcome-card { padding: 24px; } .welcome-doodle { width: 105px; } .welcome-doodle .mascot { width: 95px; height: 100px; }
  .post-grid { gap: 13px; } .post-card-body { padding: 12px; }
  .category-ribbon { gap: 8px; padding-left: 0; padding-right: 0; } .category-ribbon a { font-size: 11px; gap: 7px; }
  .article-paper { padding: 30px; } .article-heading h1 { font-size: 24px; }
  .story-grid { gap: 7px; } .story-card { height: 135px; } .story-label h3 { font-size: 14px; }
  .story-index { gap: 20px; }
}
@media (max-width: 960px) {
  .desktop-nav { display: none; } .menu-toggle { display: inline-flex; }
  .header-inner { min-height: 94px; gap: 11px; } .brand-title { font-size: 27px; } .brand-subtitle { font-size: 11px; }
  .mobile-menu { display: grid; position: absolute; top: 83px; right: 20px; width: min(330px,calc(100vw - 40px)); z-index: 10; border: 1px solid #d6e6eb; padding: 15px 20px 20px; background: #fff; border-radius: 13px; box-shadow: 0 8px 40px #29495618; }
  .mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; color: #708b98; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid #e2edf1; }
  .mobile-menu-heading .icon-button { width: 32px; height: 32px; }
  .mobile-menu>a { display: flex; gap: 13px; align-items: center; padding: 13px 3px; font-size: 14px; color: #486e82; }
  .mobile-menu>a.active { background: #edf6f8; border-radius: 7px; }
  .mobile-menu>a .icon { color: #7eabc0; }
  .content-layout { grid-template-columns: minmax(0,1fr); } .sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; }
  .profile-card { grid-row: span 2; } .side-categories { grid-column: span 2; }
  .hero { height: 340px; } .hero h1 { font-size: 28px; } .hero-content { top: 14%; left: 5%; }
  .hero-content>p:not(.eyebrow) { font-size: 13px; }
  .category-ribbon { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 16px 0 23px; }
  .category-ribbon a { font-size: 12px; }
  .archive-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .article-paper { padding: 35px; } .article-heading h1 { font-size: 28px; }
  .profile-hero h1 { font-size: 22px; } .footer-inner { display: block; } .footer-inner nav { max-width: none; justify-content: start; }
}
@media (max-width: 600px) {
  body { font-size: 14px; background: linear-gradient(#f4fbfd,#fff 105px,#faf9f5 550px); }
  .site-header { padding: 0 16px; } .site-main { padding: 0 18px 20px; }
  .header-inner { min-height: 81px; gap: 7px; }
  .brand { gap: 6px; white-space: normal; } .brand-bird { width: 25px; height: 33px; }
  .brand-title { font-size: clamp(15px,4.5vw,21px); letter-spacing: .025em; line-height: 1.65; }
  .brand-subtitle { font-size: 8px; letter-spacing: 0; }
  .icon-button { width: 34px; height: 34px; } .search-toggle { margin-left: 0; } .icon-button .icon { width: 20px; height: 20px; }
  .header-search { padding: 15px; font-size: 13px; } .header-search>div { gap: 7px; } .header-search input { width: 100px; padding: 8px 10px; font-size: 16px; }
  .header-search button { padding: 8px 12px; min-width: 66px; } .header-search button .icon { display: none; }
  .mobile-menu { right: 16px; top: 72px; }
  .hero { height: 352px; border-radius: 12px; }
  .hero-image { object-position: 80% 50%; }
  .hero::after { background: linear-gradient(180deg,rgb(252 254 251 / 91%), rgb(252 254 251 / 58%) 43%, transparent 77%); }
  .hero-content { left: 23px; top: 26px; max-width: calc(100% - 40px); }
  .hero-content .eyebrow { font-size: 8px; letter-spacing: .09em; margin-bottom: 10px; }
  .hero h1 { font-size: 23px; letter-spacing: .02em; line-height: 1.7; margin-bottom: 11px; }
  .hero-content>p:not(.eyebrow) { font-size: 12px; line-height: 1.9; margin-bottom: 13px; }
  .hero-link { font-size: 10px; gap: 9px; } .hero-handwritten { font-size: 11px; right: 17px; bottom: 15px; }
  .category-ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 15px 0 22px; gap: 8px; }
  .category-ribbon a { font-size: 11px; min-height: 44px; }
  .category-ribbon .icon { width: 21px; height: 21px; }
  .content-layout { gap: 25px; } .main-column>section { margin-bottom: 30px; }
  .welcome-card { padding: 24px 20px; gap: 6px; align-items: end; }
  .welcome-card h2 { font-size: 19px; letter-spacing: .06em; margin-bottom: 13px; }
  .welcome-card h2 .icon { width: 22px; }
  .welcome-card p { font-size: 12px; line-height: 2; }
  .welcome-card p br { display: none; }
  .welcome-doodle { width: 63px; flex-shrink: 0; } .welcome-doodle .mascot { width: 63px; height: 66px; }
  .welcome-doodle span { font-size: 8px; }
  .section-heading { gap: 6px; align-items: start; } .section-heading h2 { font-size: 20px; gap: 7px; }
  .section-heading h2 .icon { width: 21px; height: 25px; } .section-heading>div>p { margin-left: 28px; font-size: 10px; }
  .section-heading>a { font-size: 10px; gap: 3px; padding: 5px 0; min-height: 30px; } .section-heading>a .icon { width: 13px; }
  .post-grid { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .post-cover { aspect-ratio: 16/9; }
  .post-card-body { padding: 16px 19px; } .post-card h3 { font-size: 17px; margin-bottom: 10px; }
  .post-card-body>p { font-size: 13px; } .post-meta { font-size: 11px; gap: 10px; } .category-badge { font-size: 11px; }
  .read-more { font-size: 12px; min-height: 36px; }
  .story-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; } .story-card { height: 139px; }
  .story-label h3 { font-size: 15px; } .story-label small { font-size: 9px; }
  .story-label span { font-size: 8px; } .story-placeholder .icon { width: 32px; }
  .beginner-grid { grid-template-columns: minmax(0,1fr); gap: 12px; } .beginner-tile { padding: 21px 20px 17px 58px; }
  .beginner-tile h3 { font-size: 15px; } .beginner-tile p { font-size: 13px; }
  .popular-list li { gap: 10px; padding: 14px 1px; } .popular-list a { font-size: 12px; }
  .popular-list .category-badge { font-size: 8px; padding: 2px 6px; }
  .list-number { flex-shrink: 0; width: 20px; height: 24px; line-height: 24px; }
  .sidebar { display: flex; align-items: stretch; gap: 18px; } .profile-card-inner { padding: 23px 27px; } .profile-card p { font-size: 13px; }
  .profile-card .soft-button { font-size: 12px; } .side-categories { padding: 22px 26px; }
  .little-note { display: flex; align-items: center; justify-content: center; gap: 15px; } .little-note p { font-size: 14px; }
  .breadcrumb { font-size: 10px; padding: 12px 0 20px; gap: 4px; }
  .page-heading { padding: 12px 0 22px; } .page-heading h1 { font-size: 24px; } .page-heading>p { font-size: 12px; line-height: 1.9; }
  .archive-search { gap: 8px; border-radius: 10px; padding: 6px 7px 6px 10px; }
  .archive-search input { font-size: 16px; width: 110px; } .archive-search .soft-button { font-size: 11px; padding: 6px 12px; }
  .filter-tabs { gap: 7px; } .filter-tabs a { font-size: 11px; padding: 8px 14px; min-height: 41px; }
  .results-summary { font-size: 11px; }
  .archive-grid { grid-template-columns: minmax(0,1fr); } .archive-grid .post-card-body { padding: 16px 19px; }
  .story-index { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; } .story-index .story-card { height: 195px; }
  .story-index .story-label h3 { font-size: 21px; } .story-index .story-label span { font-size: 10px; } .story-index .story-placeholder .icon { width: 49px; height: 49px; }
  .empty-state { padding: 25px 7px 40px; } .empty-state h2,.empty-state h1 { font-size: 21px; } .empty-state p { font-size: 13px; }
  .article-paper { padding: 24px 17px 20px; border-radius: 12px; }
  .article-heading h1 { font-size: 24px; line-height: 1.7; margin: 14px 0; }
  .article-heading .post-meta { gap: 7px; font-size: 10px; } .article-heading .category-badge { font-size: 10px; }
  .demo-label { font-size: 9px; }
  .article-subtitle { font-size: 13px; }
  .article-body { font-size: 16px; line-height: 1.9; } .article-body>p { margin: 23px 0; }
  .article-body>h2 { font-size: 20px; gap: 7px; margin-top: 33px; }
  .article-body>h2 .icon { width: 20px; }
  .article-figure { margin: 20px 0 26px; } .image-zoom>span { opacity: 1; font-size: 9px; bottom: 7px; right: 7px; }
  .beginner-note { padding: 20px 17px; } .beginner-note ul { font-size: 14px; line-height: 1.9; }
  .article-navigation { gap: 13px; } .article-navigation a { font-size: 10px; gap: 5px; } .article-navigation .icon { width: 14px; }
  .profile-hero { height: 230px; } .profile-hero h1 { right: 16px; left: 16px; font-size: 19px; top: auto; bottom: 10px; transform: none; text-align: center; margin: 0; }
  .profile-hero>img { object-position: 66% center; }
  .profile-paper { padding: 30px 22px; } .profile-text { font-size: 16px; line-height: 1.95; }
  .profile-details { padding: 7px 14px; } .profile-details>div { display: block; padding: 14px 0; } .profile-details dt { margin-bottom: 5px; } .profile-details dd { font-size: 13px; padding-left: 25px; }
  .profile-greeting { gap: 10px; } .profile-greeting>span { font-size: 14px; } .profile-greeting .mascot { width: 90px; height: 93px; }
  .profile-social .soft-button { font-size: 11px; }
  .beginner-intro { gap: 10px; padding: 20px 16px; } .beginner-intro .mascot { width: 72px; height: 75px; }
  .beginner-intro h2 { font-size: 18px; } .beginner-intro p { font-size: 12px; } .beginner-intro p br { display: none; }
  .topic-note { padding: 23px 21px; } .topic-note h2 { font-size: 17px; gap: 8px; } .topic-note p { font-size: 16px; }
  .plain-paper { padding: 27px 22px; font-size: 16px; line-height: 1.95; } .plain-paper h1 { font-size: 24px; } .plain-paper h2 { font-size: 20px; }
  .about-illustration { float: none; text-align: center; margin: 0; }
  .footer-meadow { padding-top: 10px; padding-bottom: 30px; } .footer-meadow p { font-size: 13px; }
  .site-footer { padding: 25px 20px; } .footer-brand { font-size: 20px; } .footer-inner nav { gap: 15px 20px; margin-top: 20px; font-size: 11px; }
  .footer-inner nav a { min-height: 30px; }
  .footer-bottom { display: block; } .footer-bottom small { display: block; font-size: 9px; margin-bottom: 10px; } .footer-bottom small:last-child { text-align: left; }
  .back-top { right: 12px; bottom: 12px; width: 35px; height: 35px; }
  .image-dialog { padding: 42px 10px 15px; } .image-dialog>p { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

/* 日常・SSの追加。既存の配色、フォント、カード、プロフィールは継承する。 */
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-bottom: 28px; }
.gallery-preview { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 10px; }
.gallery-card { margin: 0; min-width: 0; border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-card); box-shadow: var(--shadow); }
.gallery-image { width: 100%; display: block; aspect-ratio: 16/9; position: relative; padding: 0; border: 0; background: var(--color-primary-light); }
.gallery-image>img { width: 100%; height: 100%; object-fit: cover; }
.gallery-image>span { position: absolute; right: 9px; bottom: 9px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgb(255 255 255 / 88%); border-radius: 50%; color: var(--color-blue); }
.gallery-image>span .icon { width: 17px; height: 17px; }
.gallery-card figcaption { padding: 13px 15px; font-size: 13px; line-height: 1.9; }
.gallery-card figcaption p { margin: 0; }
.gallery-card figcaption small { display: block; color: var(--color-muted); font-size: 11px; }
.gallery-card-compact figcaption { padding: 9px 10px; font-size: 11px; }
.gallery-card-compact .gallery-demo { font-size: 9px; }
.gallery-intro { max-width: 740px; margin: 0 auto 30px; color: #6b7981; line-height: 2; }
.section-intro { color: #72818a; font-size: 13px; margin: 0 0 16px; }
.scope-tabs { margin-bottom: 13px; }
.scope-tabs a { min-width: 90px; text-align: center; }
.category-tabs a { font-size: 11px; }
.pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px; margin: 22px 0 40px; font-size: 13px; }
.related-section { margin-top: 36px; border-top: 1px solid var(--color-border); padding-top: 28px; }
.related-section .post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.post-author { color: #426b80; }
.image-dialog { padding: 0; background: transparent; border-radius: 12px; max-height: 95svh; overflow-y: auto; }
.dialog-panel { position: relative; padding: 58px 18px 20px; background: #24333a; border-radius: 12px; color: #f7fafb; }
.dialog-media { position: relative; display: flex; align-items: center; justify-content: center; }
.dialog-media>img { width: 100%; height: auto; max-height: 65svh; object-fit: contain; }
.dialog-media>img:not([src]) { display: none; }
.dialog-panel .icon-button { width: 46px; height: 46px; background: rgb(245 251 253 / 94%); }
.dialog-close { right: 10px; top: 6px; }
.dialog-prev, .dialog-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; }
.dialog-prev { left: 6px; } .dialog-next { right: 6px; }
.dialog-panel>p { text-align: center; font-size: 13px; line-height: 1.8; margin: 12px 6px 0; overflow-wrap: anywhere; }
.dialog-panel>.dialog-details { color: #d6e4e9; font-size: 12px; }
.dialog-panel>.dialog-count { font-size: 11px; color: #c6d9e1; }
.gallery-filters a { min-height: 44px; }
@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .gallery-preview { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
  .gallery-intro { font-size: 15px; }
}
@media (max-width: 600px) {
  .gallery-grid, .gallery-preview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .gallery-card figcaption { padding: 10px 11px; font-size: 12px; }
  .gallery-card figcaption small { font-size: 10px; }
  .gallery-intro { font-size: 16px; }
  .gallery-card-compact figcaption { font-size: 11px; }
  .related-section .post-grid { grid-template-columns: minmax(0,1fr); }
  .gallery-filters a { padding: 8px 14px; }
  .results-summary span { float: none; display: block; margin-top: 5px; }
  .dialog-panel { padding: 58px 10px 17px; }
  .dialog-media>img { max-height: 60svh; }
  .dialog-panel .icon-button { width: 44px; height: 44px; }
  .dialog-prev { left: 2px; } .dialog-next { right: 2px; }
}
@media (max-width: 350px) { .gallery-grid:not(.gallery-preview) { grid-template-columns: minmax(0,1fr); } }

/* Private message box: keep the existing public palette and card styles. */
.message-paper{max-width:760px;margin:20px auto 64px}.message-paper h1,.admin-paper h1{font-size:clamp(24px,4vw,32px)}
.message-lead{font-size:18px;color:var(--ink)}.message-form{display:grid;gap:24px;margin-top:32px;min-width:0}.form-field{display:grid;gap:8px;min-width:0}
.form-field label{font-weight:600;color:var(--ink)}.form-field input,.form-field textarea,.form-field select{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);padding:12px 14px;border:1px solid #d7e2e3;background:#fff;border-radius:10px;line-height:1.5}.form-field textarea{resize:vertical;min-height:180px}
.form-field small{font-size:14px;color:var(--muted)}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:3px solid #b8dce7;outline-offset:2px}
.required-mark,.optional-mark{display:inline-block;font-size:12px;font-weight:400;margin-left:8px;border-radius:5px;padding:2px 7px;background:#e5f2f6}.optional-mark{background:#f1ede5;color:#716c65}
.checkbox-label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}.checkbox-label input{width:20px;height:20px;accent-color:#6b9cb7}.reply-choice .quiet-note{margin-top:4px}.message-submit{justify-self:start;min-height:48px}.message-privacy{font-size:14px;color:var(--muted)}
.form-errors{padding:18px;background:#fff1ed;border:1px solid #e7cdc3;border-radius:12px;margin:20px 0}.form-errors h2{font-size:18px;margin:0 0 8px}.form-errors ul{margin:0;padding-left:24px}.form-errors a{color:#79584e}.message-success{text-align:center}.message-success .mascot{width:110px}
.honeypot{display:none!important}.reply-fields[hidden]{display:none!important}.message-submit:disabled{opacity:.65;cursor:wait}.community-section{padding-top:28px;margin-top:24px;border-top:1px solid var(--line)}.community-link{display:block;text-align:center;font-size:14px;margin-top:16px}.community-section p{line-height:1.9}
.admin-paper{max-width:960px;margin:20px auto 64px}.admin-heading{display:flex;justify-content:space-between;align-items:start;gap:16px}.admin-heading h1{margin-top:0}.admin-filters{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.admin-filters a{padding:10px 14px;border-radius:8px;background:#f2f5f4;min-height:44px;display:inline-flex;align-items:center}.admin-filters .active{background:#dceff5;color:#39748e}.inbox-list{display:grid;gap:16px}.inbox-card{padding:20px;background:#fff;border:1px solid var(--line);border-radius:12px;min-width:0}.inbox-meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted)}.inbox-card h2{font-size:20px;margin:12px 0 6px}.inbox-card p{margin:8px 0}.status-unread{color:#38758f}.inbox-preview,.message-body{white-space:pre-wrap;overflow-wrap:anywhere}.message-body{background:#fafbf9;border-radius:12px;padding:20px;font-size:16px;line-height:1.9}.message-details{display:grid;gap:12px;margin:24px 0}.message-details>div{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}.message-details dt{color:var(--muted)}.message-details dd{margin:0;overflow-wrap:anywhere}.reply-tools{padding:20px;background:#eaf5f8;border-radius:12px;margin:24px 0}.reply-address{overflow-wrap:anywhere}.reply-tools .soft-button{margin:0 8px 8px 0}.admin-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.danger-button{background:#f6e5df;color:#865e54}.admin-empty{padding:40px 0;text-align:center}.admin-login{max-width:560px}.copy-fallback{position:fixed;left:-9999px;top:0}
@media(max-width:600px){.message-paper,.admin-paper{padding:24px 18px;margin-top:8px}.message-form{gap:22px}.message-details>div{grid-template-columns:1fr;gap:5px}.admin-heading{flex-direction:column}.admin-filters{gap:8px}.inbox-card{padding:16px}.admin-actions .soft-button{min-height:44px}.reply-tools{padding:16px}.message-submit{justify-self:stretch}}