:root {
  --paper:#f8f8fc;
  --ink:#272c40;
  --muted:#5d6478;
  --purple:#6545a0;
  --line:#e1e2ef;
  --mint:#e7f5ee;
  --white:#fff;
  --radius:18px;
}
* { box-sizing:border-box; }
html { scroll-padding-top:22px; }
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:15px;
  line-height:1.8;
}
a { color:inherit; text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:4px; }
a:focus-visible,summary:focus-visible { outline:3px solid #7658a5; outline-offset:4px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.5; letter-spacing:.01em; }
p+p { margin-top:12px; }
.wrap { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.header { min-height:76px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:24px; font-weight:750; letter-spacing:-.035em; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid #d9cfe6; border-radius:12px; background:linear-gradient(145deg,#f0e6ff,#e4f4ee); font-size:24px; color:var(--purple); box-shadow:0 3px 10px #65518a0c; }
.brand-mark span { color:#3e866e; }
.header nav,.footer nav { display:flex; gap:20px; flex-wrap:wrap; }
.header .main-nav { justify-self:end; font-size:12px; font-weight:650; }
.header .main-nav a:hover { color:var(--purple); }
.header .language-switch { justify-self:end; align-items:center; gap:7px; font-size:11px; white-space:nowrap; }
.language-switch [aria-current] { font-weight:750; }
.language-switch a { color:var(--purple); }
.skip { position:absolute; top:-100px; left:16px; z-index:5; padding:10px; background:white; }
.skip:focus { top:12px; }
.hero { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:34px; align-items:center; position:relative; padding:28px 0 34px; }
.hero::before { content:""; position:absolute; z-index:-1; inset:4px -20px 12px; border-radius:30px; background:radial-gradient(ellipse at 10% 0%,#ebe0fa9c,transparent 55%),radial-gradient(ellipse at 95% 80%,#d8f0eaad,transparent 60%); }
.eyebrow { margin-bottom:9px; font-size:10px; font-weight:750; letter-spacing:.13em; color:var(--purple); }
.hero h1,html[lang=en] .hero h1 { margin-bottom:15px; font-size:clamp(29px,3.15vw,40px); line-height:1.35; letter-spacing:-.035em; }
.hero h1 span { color:var(--purple); }
.hero .lead { margin-bottom:10px; font-size:16px; font-weight:650; line-height:1.75; }
.hero-copy>p:not(.eyebrow):not(.lead):not(.hero-note) { font-size:13px; color:var(--muted); }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:19px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:13px; min-height:44px; padding:10px 16px; border:1px solid transparent; border-radius:10px; font-size:12px; font-weight:650; line-height:1.65; }
.button:hover { text-decoration:none; filter:brightness(.96); }
.primary { color:white; background:linear-gradient(115deg,#7652af,#5a4490); box-shadow:0 4px 12px #6545a020; }
.secondary { background:#ffffffd9; border-color:#d5cde3; }
.dark { margin-top:16px; color:white; background:#365e50; }
.hero-note { margin-top:12px; font-size:10px; color:var(--muted); }
.how-card { border:1px solid #dcd3ec; border-radius:22px; padding:23px; background:linear-gradient(135deg,#eee5fb,#edf4fc 70%,#e8f7f0); box-shadow:0 8px 28px #48446609; }
.how-card h2 { font-size:21px; line-height:1.55; }
.how-card ol { list-style:none; margin:15px 0 0; padding:0; }
.how-card li { display:flex; gap:12px; padding:12px 0; border-top:1px solid #d8d4e8; }
.how-card li:last-child { padding-bottom:0; }
.step { display:flex; flex-shrink:0; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9px; background:#fff9; color:var(--purple); font-size:11px; font-weight:750; }
.how-card li:nth-child(2) .step { background:#d8eee9; color:#316857; }
.how-card li:nth-child(3) .step { background:#fde9d9; color:#855128; }
.how-card strong { font-size:13px; }
.how-card li p { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.65; }
.section { padding-top:29px; padding-bottom:29px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:17px; }
.section-heading h2 { font-size:23px; }
.section-heading .eyebrow { margin-bottom:5px; }
.section-heading>p { max-width:310px; color:var(--muted); font-size:12px; }
.section-heading>a { flex-shrink:0; font-size:12px; }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.service-card { display:flex; flex-direction:column; align-items:start; padding:22px; border:1px solid #dfd2ee; border-radius:var(--radius); background:linear-gradient(120deg,#eee4fb,#faf7ff); box-shadow:0 4px 16px #6b4b8e06; }
.service-card:hover { text-decoration:none; border-color:#a68bbd; }
.service-card h3 { margin:8px 0; font-size:21px; }
.service-card h3>span { margin-left:6px; font-size:17px; }
.service-card p { color:var(--muted); font-size:13px; }
.service-card .text-link { margin-top:13px; }
.diagnosis { border-color:#c9e2d5; background:linear-gradient(120deg,#e0f3e9,#f6fbf8); }
.diagnosis .category,.diagnosis .text-link { color:#32634f; }
.category { font-size:10px; font-weight:700; color:var(--purple); }
.text-link { font-size:12px; font-weight:700; color:var(--purple); }
html[lang=en] .services-grid { grid-template-columns:1fr; }
html[lang=en] .service-card.lab { display:grid; grid-template-columns:minmax(190px,.7fr) minmax(0,1.5fr) auto; gap:4px 24px; align-items:center; }
html[lang=en] .service-card.lab .category { grid-column:1; grid-row:1; }
html[lang=en] .service-card.lab h3 { grid-column:1; grid-row:2; margin:0; }
html[lang=en] .service-card.lab p { grid-column:2; grid-row:1/3; }
html[lang=en] .service-card.lab .text-link { grid-column:3; grid-row:1/3; margin:0; }
.tools-section { margin-top:8px; border-block:1px solid #e1e3f0; background:linear-gradient(120deg,#f0eef9,#edf5f6); }
.tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.tool-card,.tool-tip { --accent:#70509b; --tint:#eee6f7; display:flex; flex-direction:column; align-items:start; padding:18px; border:1px solid var(--line); border-top:3px solid var(--accent); border-radius:14px; background:white; box-shadow:0 3px 12px #292c3905; }
.tool-card:nth-child(2) { --accent:#348375; --tint:#e3f2ed; }
.tool-card:nth-child(3) { --accent:#ad5c3f; --tint:#f9ebe2; }
.tool-card:nth-child(4) { --accent:#3d76ae; --tint:#e7f0fa; }
.tool-card:nth-child(5) { --accent:#946b26; --tint:#f9f0db; }
.tool-card:nth-child(6) { --accent:#8c537b; --tint:#f5e7f0; }
.tool-number { margin-bottom:10px; padding:3px 8px; border-radius:6px; color:var(--accent); background:var(--tint); font-size:9px; font-weight:750; letter-spacing:.065em; }
.tool-card h3,.tool-tip h3 { margin-bottom:8px; font-size:17px; }
.tool-card p,.tool-tip p { color:var(--muted); font-size:12px; line-height:1.8; }
.tool-tip { background:#f2edf7; }
.tool-links { display:flex; align-items:center; flex-wrap:wrap; gap:13px; margin-top:auto; padding-top:14px; }
.tool-guide { color:var(--muted); text-decoration:underline; font-size:11px; }
.section-note { margin-top:14px; color:var(--muted); font-size:11px; line-height:1.8; }
.playstyle-panel { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:30px; align-items:center; padding:25px; border:1px solid #cce0d6; border-radius:20px; background:linear-gradient(120deg,#e3f2e8,#eef8ed); }
.playstyle-panel h2 { margin-bottom:10px; font-size:25px; }
.playstyle-panel .eyebrow { color:#366451; }
.playstyle-panel>div>p:not(.eyebrow) { color:#4c6257; font-size:13px; }
.axis-box { padding:17px; background:#ffffffb3; border:1px solid #d3e2d9; border-radius:13px; }
.axis-title { font-size:12px; font-weight:700; }
.axis-box ul { padding:0; margin:9px 0 0; list-style:none; }
.axis-box li { display:grid; grid-template-columns:1fr auto 1fr; gap:9px; padding:8px 0; border-bottom:1px solid #d9e4dc; font-size:11px; }
.axis-box li span:last-child { text-align:right; }
.axis-dot { color:#618c76; }
.axis-box .section-note { margin-top:10px; }
.section-intro { max-width:830px; margin-bottom:16px; color:var(--muted); font-size:13px; }
.articles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.article-card { display:flex; flex-direction:column; align-items:start; padding:21px; border:1px solid #ddd5eb; border-radius:15px; background:linear-gradient(145deg,#fff,#f3effa); }
.article-card:nth-child(2n) { border-color:#d0e2e6; background:linear-gradient(145deg,#fff,#eef6f8); }
.article-card:hover { border-color:#a695bc; text-decoration:none; }
.article-card h3 { margin:8px 0; font-size:17px; }
.article-card p { color:var(--muted); font-size:12px; }
.article-card .text-link { margin-top:auto; padding-top:13px; }
.development { display:grid; grid-template-columns:1fr 1.55fr; gap:30px; border-top:1px solid var(--line); }
.development h2 { font-size:23px; }
.development>div>p { color:var(--muted); font-size:13px; }
.development .text-link { display:inline-block; margin-top:12px; }
.english-section { display:flex; justify-content:space-between; align-items:center; gap:24px; border-top:1px solid var(--line); }
.english-section h2 { margin-bottom:7px; font-size:23px; letter-spacing:-.025em; }
.english-section p:not(.eyebrow) { max-width:650px; color:var(--muted); font-size:12px; }
.english-section .button { flex-shrink:0; max-width:100%; }
.footer { margin-top:15px; padding:24px 0; border-top:1px solid var(--line); background:#eeedf5; }
.footer-top { display:flex; justify-content:space-between; align-items:start; gap:25px; margin-bottom:16px; }
.footer .brand { font-size:20px; }
.footer nav { max-width:800px; justify-content:end; gap:10px 18px; font-size:11px; }
.footer p { max-width:1030px; font-size:10px; line-height:1.9; color:var(--muted); }
.footer p+p { margin-top:7px; }
.footer .copyright { margin-top:15px; }
/* A short, editable release history on the homepage. */
.updates-section { padding-top:18px; padding-bottom:23px; }
.updates-list { padding:0; margin:0; list-style:none; border:1px solid var(--line); border-radius:15px; overflow:hidden; background:white; }
.update-item { display:grid; grid-template-columns:92px minmax(0,1fr); align-items:start; gap:17px; padding:13px 18px; border-bottom:1px solid #ebebf3; }
.update-item:last-child { border-bottom:0; }
.update-date { font-size:11px; font-weight:650; color:var(--purple); font-variant-numeric:tabular-nums; padding-top:2px; }
.update-copy h3 { font-size:13px; line-height:1.6; }
.update-copy p { margin-top:3px; font-size:12px; line-height:1.75; color:var(--muted); }
.update-link { color:var(--purple); text-decoration:underline; text-underline-offset:3px; }
.updates-more { margin-top:9px; border:1px solid var(--line); border-radius:12px; background:#ffffffb3; }
.updates-more summary { padding:10px 16px; font-size:12px; color:var(--purple); font-weight:650; cursor:pointer; }
.updates-more .updates-list { border:none; border-top:1px solid var(--line); border-radius:0 0 12px 12px; }
/* Reading pages retain a comfortable measure and paragraph spacing. */
.guide-index { padding-block:34px 50px; min-height:60vh; }
.guide-index h1 { margin-bottom:16px; font-size:clamp(27px,3vw,36px); }
.guide-index .section-intro { margin-top:14px; }
.breadcrumbs { max-width:850px; margin:18px auto; font-size:12px; color:var(--muted); }
.breadcrumbs a { text-decoration:underline; }
.reading-article { max-width:850px; margin:0 auto 50px; padding:clamp(24px,4.5vw,50px); border:1px solid var(--line); border-radius:20px; background:white; overflow-wrap:anywhere; }
.reading-article h1 { font-size:clamp(26px,3vw,35px); letter-spacing:-.025em; line-height:1.6; }
.guide-date { margin:14px 0 28px; color:var(--muted); font-size:12px; }
.reading-article h2 { margin:36px 0 14px; font-size:22px; line-height:1.6; }
.reading-article p { font-size:15px; line-height:2; }
.reading-article p+p { margin-top:18px; }
.reading-article p a:not(.button),.reading-article li a { color:var(--purple); text-decoration:underline; text-underline-offset:4px; }
.reading-article ol { padding-left:24px; }
.reading-article li { margin:10px 0; }
.guide-table { margin:24px 0; overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
.guide-table table { width:100%; border-collapse:collapse; table-layout:fixed; line-height:1.85; font-size:13px; }
.guide-table th,.guide-table td { padding:14px; text-align:left; vertical-align:top; overflow-wrap:anywhere; border-bottom:1px solid var(--line); }
.guide-table th { background:#f0ebf6; font-weight:650; }
.guide-table th:first-child { width:30%; }
.guide-table tr:last-child th,.guide-table tr:last-child td { border-bottom:0; }
.guide-toc { padding:18px 22px; margin:26px 0; background:#f1edf6; border-radius:12px; }
.guide-toc strong { font-size:13px; color:var(--purple); }
.guide-toc ul { padding-left:18px; margin:12px 0 0; }
.guide-toc li { font-size:13px; line-height:1.8; margin:7px 0; }
.guide-toc a { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1000px) {
  .wrap { width:calc(100% - 48px); }
  .header { gap:18px; }
  .header .main-nav { gap:14px; }
  .hero { gap:24px; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); }
  .hero h1,html[lang=en] .hero h1 { font-size:32px; }
  .how-card { padding:20px; }
  .how-card h2 { font-size:19px; }
  .section-heading { align-items:start; }
  .section-heading>p { max-width:240px; }
  .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[lang=en] .service-card.lab { grid-template-columns:minmax(150px,.6fr) minmax(0,1.4fr); gap:5px 20px; }
  html[lang=en] .service-card.lab .text-link { grid-column:2; grid-row:3; }
  .english-section { align-items:start; }
}
@media(max-width:760px) {
  .header { min-height:72px; grid-template-columns:1fr auto; gap:10px; padding-block:14px; }
  .header .brand { grid-column:1; grid-row:1; }
  .header .language-switch { grid-column:2; grid-row:1; }
  .header .main-nav { grid-column:1/-1; grid-row:2; justify-self:start; gap:11px 18px; }
  .hero { grid-template-columns:1fr; padding-top:19px; padding-bottom:23px; gap:21px; }
  .hero::before { inset:0 -10px 8px; }
  .hero h1,html[lang=en] .hero h1 { font-size:34px; }
  .hero .lead { font-size:15px; }
  .how-card h2 br { display:none; }
  .how-card ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .how-card li { flex-direction:column; gap:6px; padding:10px 0 0; }
  .how-card strong { font-size:12px; }
  .how-card li p { font-size:11px; }
  .section { padding-block:25px; }
  .section-heading { flex-wrap:wrap; gap:9px 14px; }
  .section-heading>p { max-width:none; }
  .section-heading h2 { font-size:22px; }
  .services-grid { gap:13px; }
  .service-card { padding:18px; }
  .service-card h3 { font-size:19px; }
  .playstyle-panel { grid-template-columns:1fr 1fr; gap:20px; padding:22px; }
  .playstyle-panel h2 { font-size:22px; }
  .development { grid-template-columns:1fr; gap:15px; }
  .development h2 { font-size:22px; }
  .english-section { flex-direction:column; gap:15px; }
  .footer-top { flex-direction:column; gap:14px; }
  .footer nav { justify-content:start; }
  .reading-page.wrap { width:calc(100% - 28px); }
  .reading-article { padding:24px 20px; border-radius:14px; }
  .reading-article h2 { font-size:20px; }
  .reading-article p { font-size:14px; }
  .guide-table th,.guide-table td { padding:10px 8px; }
  .guide-table table { font-size:12px; }
  .guide-table th:first-child { width:33%; }
}
@media(max-width:540px) {
  body { font-size:14px; }
  .wrap { width:calc(100% - 36px); }
  .header .brand { font-size:22px; }
  .brand-mark { width:33px; height:33px; font-size:22px; border-radius:10px; }
  .header .language-switch { gap:5px; font-size:10px; }
  .header .main-nav { font-size:11px; gap:9px 17px; }
  .hero h1,html[lang=en] .hero h1 { font-size:clamp(27px,7.6vw,34px); margin-bottom:13px; }
  .hero .lead { font-size:14px; }
  .hero-copy>p:not(.eyebrow):not(.lead):not(.hero-note) { font-size:12px; }
  .hero .actions { gap:9px; }
  .button { padding:10px 12px; gap:10px; font-size:11px; }
  .how-card { padding:18px; border-radius:16px; }
  .how-card h2 { font-size:18px; }
  .how-card .eyebrow { font-size:9px; }
  .how-card ol { grid-template-columns:1fr; gap:0; margin-top:12px; }
  .how-card li { flex-direction:row; padding:9px 0; gap:10px; }
  .how-card li:last-child { padding-bottom:0; }
  .section { padding-block:22px; }
  .section-heading { margin-bottom:14px; }
  .section-heading h2 { font-size:21px; }
  .services-grid,.tools-grid,.articles-grid { grid-template-columns:1fr; gap:12px; }
  html[lang=en] .service-card.lab { display:flex; gap:0; }
  html[lang=en] .service-card.lab h3 { margin:7px 0; }
  html[lang=en] .service-card.lab .text-link { margin-top:12px; }
  .service-card p,.tool-card p,.article-card p { font-size:12px; }
  .tool-card { padding:17px; }
  .tool-card h3 { font-size:17px; }
  .tool-links { padding-top:12px; gap:16px; }
  .tool-links a { min-height:30px; display:inline-flex; align-items:center; }
  .playstyle-panel { grid-template-columns:1fr; padding:20px; gap:18px; border-radius:16px; }
  .axis-box { padding:15px; }
  .article-card { padding:18px; }
  .update-item { grid-template-columns:1fr; gap:3px; padding:12px 15px; }
  .update-copy h3 { font-size:13px; }
  .update-copy p { font-size:12px; }
  .footer { padding-top:22px; }
  .guide-index { padding-block:25px 40px; }
}
@media(prefers-reduced-motion:no-preference) {
  .service-card,.article-card,.tool-card { transition:border-color .15s ease,box-shadow .15s ease; }
  .service-card:hover,.article-card:hover,.tool-card:hover { box-shadow:0 5px 20px #62508b12; }
}
.update-kind { display:inline-block; margin-bottom:3px; padding:1px 7px; border-radius:5px; background:#eee7f8; color:#62438d; font-size:9px; font-weight:700; line-height:1.8; }
.update-item[data-kind=article] .update-kind { background:#e5f1f7; color:#396681; }
.update-item[data-kind=guide] .update-kind { background:#e4f1e9; color:#3b6b51; }
.update-item[data-kind=site] .update-kind { background:#f8eddc; color:#805e27; }
.update-copy h3 { display:inline; }
.update-copy .update-kind { margin:0 8px 0 0; vertical-align:baseline; }
/* The main site keeps the original Pokemas Lab identity; the room is tools-first. */
:root { --paper:#fff8ef; --ink:#493a54; --muted:#75667e; --purple:#613e92; --line:#e8dfea; }
body { background:linear-gradient(110deg,#fbe9f0 0%,#fff8ef 55%,#edf6ef 100%); background-attachment:fixed; }
.header { min-height:86px; border-bottom:1px solid #e7dce78c; }
.header .brand { min-width:0; gap:10px; }
.brand>img { flex:none; object-fit:contain; }
.brand-text { min-width:0; }
.brand-text strong { display:block; font-size:25px; line-height:1.4; font-weight:750; color:var(--purple); }
.brand-text small { display:block; font-size:10px; font-weight:500; letter-spacing:.02em; margin-top:3px; color:var(--muted); }
.header .main-nav { align-items:center; gap:16px; }
.nav-room { background:#6b459b; color:white; padding:8px 13px; border-radius:100px; }
.header .main-nav .nav-room:hover { color:white; background:#5a3789; text-decoration:none; }
.hero { grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr); gap:30px; padding-top:25px; padding-bottom:29px; }
.hero::before { display:none; }
.hero h1,html[lang=en] .hero h1 { color:var(--purple); font-size:clamp(30px,3.2vw,42px); margin-bottom:13px; line-height:1.5; }
.hero .lead { font-size:14px; margin-bottom:8px; }
.hero-copy>p:not(.eyebrow):not(.lead):not(.hero-note) { max-width:670px; font-size:12px; }
.hero .actions { margin-top:15px; }
.primary { background:#684093; box-shadow:0 4px 12px #76528118; }
.mascot-stamp { display:flex; align-items:center; justify-content:center; gap:12px; position:relative; padding:10px; }
.mascot-stamp>img { width:132px; height:132px; object-fit:contain; transform:rotate(-4deg); }
.mascot-stamp>span { padding:15px 18px; border:2px solid #e9c9e2; border-radius:23px; font-size:15px; font-weight:650; color:#a66692; background:#fffafbd9; transform:rotate(-3deg); white-space:nowrap; }
.mascot-stamp>i { position:absolute; left:14px; top:5px; font-style:normal; color:#dfb84a; font-size:29px; }
.home-portals { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:start; padding-bottom:26px; }
.home-portals .section-heading { margin-bottom:15px; align-items:center; gap:12px; }
.home-portals .section-heading h2 { font-size:21px; }
.home-portals .section-heading>a { color:#9873b2; font-size:11px; white-space:nowrap; }
.quick-tools .section-heading h2::before { content:'✦'; display:inline-flex; align-items:center; justify-content:center; width:29px; height:29px; margin-right:9px; border-radius:9px; background:#f3dbe9; color:#bc7b9e; font-size:18px; vertical-align:middle; }
.shortcut-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.shortcut-card { --shortcut-tint:#e4f2ed; --shortcut-ink:#649180; display:grid; grid-template-columns:48px minmax(0,1fr) 11px; gap:11px; align-items:center; min-height:106px; padding:16px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 4px 16px #785d7e04; }
.shortcut-card[data-tone=pink] { --shortcut-tint:#fae4ef; --shortcut-ink:#b7789e; }
.shortcut-card[data-tone=purple] { --shortcut-tint:#eee5f8; --shortcut-ink:#9471b6; }
.shortcut-card[data-tone=blue] { --shortcut-tint:#e5eefc; --shortcut-ink:#6b93b9; }
.shortcut-card[data-tone=yellow] { --shortcut-tint:#fff3d8; --shortcut-ink:#b7984c; }
.shortcut-card:hover { text-decoration:none; border-color:#bca1cf; box-shadow:0 5px 19px #73578e0d; }
.shortcut-icon { width:48px; height:52px; padding:10px; border-radius:14px; background:var(--shortcut-tint); color:var(--shortcut-ink); }
.shortcut-copy { min-width:0; }
.shortcut-copy strong { display:block; font-size:15px; line-height:1.6; font-weight:650; }
.shortcut-copy small { display:block; margin-top:4px; font-size:11px; line-height:1.75; color:var(--muted); }
.shortcut-arrow { color:#b19ac2; font-size:16px; }
.latest-reading { padding:19px 22px; border:1px solid var(--line); border-radius:22px; background:white; }
.latest-reading .section-heading { margin-bottom:7px; }
.latest-reading .section-heading h2 { font-size:18px; }
.recent-item { display:grid; grid-template-columns:auto 1fr auto; gap:5px 8px; align-items:center; padding:12px 0; border-bottom:1px dashed #e8e0ec; }
.recent-item:last-child { border-bottom:0; padding-bottom:3px; }
.recent-item time { font-size:10px; font-weight:600; color:#908198; font-variant-numeric:tabular-nums; }
.recent-category { justify-self:start; padding:2px 8px; border-radius:100px; background:#e3f1ee; color:#598d82; font-size:9px; line-height:1.7; font-weight:650; }
.recent-item:nth-child(4) .recent-category { color:#a18134; background:#fff1cc; }
.recent-item:nth-child(5) .recent-category { color:#8e71ae; background:#f0e9fa; }
.recent-item strong { grid-column:1/3; font-size:12px; font-weight:550; line-height:1.75; }
.recent-item>.shortcut-arrow { grid-column:3; grid-row:1/3; }
.recent-item:hover { text-decoration:none; color:var(--purple); }
#guides { border-top:1px solid #e4dbe68c; }
.footer { background:#f4edf1cf; }
.footer-brand { color:var(--purple); }
.footer-brand small { font-size:10px; color:var(--muted); font-weight:500; }
@media(max-width:1080px) {
  .header { column-gap:16px; }
  .header .main-nav { gap:11px; font-size:11px; }
  .brand-text strong { font-size:23px; }
  .header .brand img { width:40px; height:40px; }
  .home-portals { gap:18px; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .home-portals .section-heading { flex-wrap:wrap; }
  .home-portals .section-heading h2 { font-size:19px; }
  .shortcut-card { grid-template-columns:39px minmax(0,1fr); padding:13px; gap:9px; }
  .shortcut-icon { width:39px; height:43px; padding:8px; border-radius:11px; }
  .shortcut-card>.shortcut-arrow { display:none; }
  .shortcut-copy strong { font-size:14px; }
  .latest-reading { padding:17px; }
  .hero h1,html[lang=en] .hero h1 { font-size:34px; }
  .mascot-stamp { gap:5px; padding:0; }
  .mascot-stamp>img { width:104px; height:104px; }
  .mascot-stamp>span { font-size:12px; padding:13px; }
}
@media(max-width:900px) {
  .header { grid-template-columns:minmax(0,1fr) auto; gap:9px; padding-block:13px; }
  .header .brand { grid-column:1; grid-row:1; }
  .header .language-switch { grid-column:2; grid-row:1; }
  .header .main-nav { grid-column:1/-1; grid-row:2; justify-self:start; flex-wrap:wrap; }
  .hero { grid-template-columns:minmax(0,1.7fr) minmax(170px,.8fr); padding-block:22px; gap:15px; }
  .mascot-stamp { flex-direction:column; gap:0; }
  .mascot-stamp>img { width:84px; height:84px; }
  .mascot-stamp>span { font-size:11px; line-height:1.5; padding:9px 12px; }
  .mascot-stamp>span br { display:none; }
  .mascot-stamp>i { left:25px; top:0; font-size:20px; }
}
@media(max-width:700px) {
  .home-portals { grid-template-columns:1fr; gap:22px; padding-bottom:22px; }
  .shortcut-card { grid-template-columns:43px minmax(0,1fr) 10px; min-height:96px; padding:14px; }
  .shortcut-icon { width:43px; height:47px; }
  .shortcut-card>.shortcut-arrow { display:block; }
  .latest-reading .section-heading { flex-wrap:nowrap; }
  .recent-item strong { font-size:13px; }
  .recent-item time { font-size:11px; }
}
@media(max-width:540px) {
  .header .brand img { width:35px; height:35px; }
  .brand-text strong { font-size:20px; }
  .brand-text small { font-size:9px; line-height:1.5; }
  .header .main-nav { gap:8px 13px; font-size:11px; }
  .nav-room { padding:5px 10px; }
  .hero { grid-template-columns:minmax(0,1fr) 66px; gap:10px; padding-top:18px; }
  .hero h1,html[lang=en] .hero h1 { font-size:clamp(24px,6vw,30px); margin-bottom:10px; line-height:1.5; }
  .hero .lead { font-size:13px; }
  .hero-copy>p:not(.eyebrow):not(.lead):not(.hero-note) { font-size:12px; }
  .hero-copy .eyebrow { font-size:9px; letter-spacing:.04em; }
  .mascot-stamp { align-self:start; padding-top:24px; }
  .mascot-stamp>img { width:65px; height:65px; }
  .mascot-stamp>span { display:none; }
  .mascot-stamp>i { left:0; top:12px; font-size:16px; }
  .home-portals .section-heading h2 { font-size:19px; }
  .home-portals .section-heading>a { font-size:10px; }
  .shortcut-card { grid-template-columns:34px minmax(0,1fr); min-height:108px; padding:12px; gap:8px; border-radius:15px; }
  .shortcut-icon { width:34px; height:39px; padding:7px; border-radius:10px; }
  .shortcut-card>.shortcut-arrow { display:none; }
  .shortcut-copy strong { font-size:13px; }
  .shortcut-copy small { font-size:10px; }
  .latest-reading { padding:17px; border-radius:18px; }
  .latest-reading .section-heading h2 { font-size:17px; }
  .recent-item strong { font-size:12px; }
  .footer-brand { flex-wrap:wrap; }
}
@media(max-width:360px) {
  .brand-text strong { font-size:18px; }
  .brand-text small { max-width:145px; font-size:8px; }
  .header .main-nav { gap:7px 10px; font-size:10px; }
  .hero { grid-template-columns:minmax(0,1fr) 50px; }
  .mascot-stamp>img { width:50px; height:50px; }
  .hero h1,html[lang=en] .hero h1 { font-size:23px; }
  .shortcut-grid { grid-template-columns:1fr; gap:9px; }
  .shortcut-card { min-height:78px; grid-template-columns:40px minmax(0,1fr) 12px; }
  .shortcut-icon { width:40px; height:44px; }
  .shortcut-card>.shortcut-arrow { display:block; }
  .shortcut-copy strong { font-size:14px; }
  .shortcut-copy small { font-size:11px; }
  .latest-reading .section-heading { flex-wrap:wrap; }
}
@media(max-width:540px) {
  .header .main-nav { gap:8px 10px; }
  .nav-room { padding:4px 8px; }
  .hero { display:block; position:relative; }
  .hero h1 { padding-right:58px; }
  .hero-copy .eyebrow { padding-right:58px; }
  .mascot-stamp { position:absolute; right:0; top:50px; width:58px; height:65px; padding:0; }
  .mascot-stamp>img { width:58px; height:58px; }
  .mascot-stamp>i { left:0; top:-9px; }
}
@media(max-width:360px) {
  .hero h1,html[lang=en] .hero h1 { font-size:22px; }
  .header .main-nav { font-size:10px; gap:6px 9px; }
}

/* Article-first home preview: short reading rows, then updates and tool tiles. */
[hidden] { display:none !important; }
.article-home .header { grid-template-columns:auto auto 1fr auto; gap:19px; padding-block:15px; min-height:100px; }
.article-home .header .brand img { width:43px; height:43px; }
.article-home .brand-text strong { font-size:24px; }
.article-home .brand-text small { font-size:10px; }
.site-switch { display:flex; padding:4px; border:1px solid #e2d6e9; border-radius:15px; background:#ffffffa3; gap:3px; }
.site-switch a { display:flex; flex-direction:column; align-items:center; min-width:91px; padding:6px 11px; border-radius:11px; line-height:1.55; color:var(--purple); }
.site-switch a:hover { background:#f3ecf8; text-decoration:none; }
.site-switch a[aria-current] { color:white; background:var(--purple); box-shadow:0 3px 9px #6545a017; }
.site-switch strong { font-size:13px; font-weight:750; white-space:nowrap; }
.site-switch small { font-size:9px; opacity:.8; white-space:nowrap; }
.article-home .main-nav { gap:17px; justify-self:end; font-size:12px; }
.article-home .language-switch { font-size:11px; white-space:nowrap; }
.article-home .hero { padding-block:22px 24px; grid-template-columns:minmax(0,1fr) 265px; }
.article-home .hero h1,html[lang=en] .article-home .hero h1 { font-size:clamp(30px,3.2vw,40px); margin-bottom:9px; }
.article-home .hero h1 { display:flex; flex-wrap:wrap; }
.hero-phrase { white-space:nowrap; }
html[lang=en] .article-home .hero h1 { column-gap:.2em; }
.article-home .hero .lead { font-size:14px; }
.article-home .hero-copy>p:not(.eyebrow):not(.lead) { max-width:730px; font-size:12px; line-height:1.8; margin-top:7px; }
.article-home .hero .actions { margin-top:15px; }
.article-home .mascot-stamp { padding:0; gap:8px; }
.article-home .mascot-stamp>img { width:112px; height:112px; }
.article-home .mascot-stamp>span { font-size:12px; padding:14px; }
.article-home .section { padding-block:22px; }
.article-home .section-heading { margin-bottom:13px; gap:16px; }
.article-home .section-heading h2 { font-size:25px; }
.article-home .section-heading>p { color:var(--muted); font-size:12px; }
.article-home .section-heading .eyebrow { margin-bottom:3px; font-size:10px; }
.article-browser { border:1px solid #e4daeb; border-radius:19px; background:#fff; overflow:hidden; box-shadow:0 4px 22px #63507604; }
.article-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 18px; border-bottom:1px solid #eee8f2; background:#fdfbfe; }
.article-filters { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.article-filters button,.article-reset { font:inherit; cursor:pointer; border:0; }
.article-filters button { padding:5px 11px; border:1px solid transparent; border-radius:100px; color:#746283; background:#f4eef7; font-size:11px; line-height:1.6; transition:background .15s,color .15s; }
.article-filters button:hover { background:#e8def2; }
.article-filters button[aria-pressed=true] { background:var(--purple); color:white; }
button:focus-visible,input:focus-visible { outline:3px solid #9471bd; outline-offset:3px; }
.article-search { margin-left:auto; display:flex; gap:8px; align-items:center; min-width:180px; flex:0 1 210px; padding:7px 11px; border:1px solid #e3dbe9; border-radius:10px; background:white; color:#a18db2; }
.article-search svg { width:16px; height:16px; flex-shrink:0; }
.article-search input { border:0; background:none; padding:0; width:100%; min-width:0; font:inherit; font-size:12px; color:var(--ink); }
.article-search input::placeholder { color:#7d6b89; }
.article-list { list-style:none; margin:0; padding:0; }
.article-row { display:grid; grid-template-columns:88px minmax(0,1fr); gap:18px; align-items:start; padding:15px 20px; border-bottom:1px solid #ede7f0; }
.article-row:hover { background:#fdfbff; }
.article-row:last-child { border-bottom:0; }
.article-date { padding-top:3px; font-size:11px; font-variant-numeric:tabular-nums; color:#7c698b; font-weight:650; }
.article-row-heading { display:flex; align-items:start; gap:11px; }
.article-tag { display:inline-block; flex-shrink:0; padding:2px 9px; border-radius:6px; background:#e8f3ee; color:#487461; font-size:10px; font-weight:650; line-height:1.8; margin-top:1px; }
.article-tag[data-tone=gold] { background:#fff1d3; color:#866322; }
.article-tag[data-tone=purple] { background:#efe7f8; color:#775493; }
.article-copy { min-width:0; }
.article-copy h3 { flex:1; min-width:0; font-size:14px; line-height:1.8; }
.article-title { display:flex; justify-content:space-between; align-items:start; gap:14px; font-weight:650; }
.article-title>span:last-child { flex-shrink:0; color:#baa6ca; font-size:16px; font-weight:400; }
.article-title:hover { color:var(--purple); text-decoration:none; }
.article-title:hover>span:first-child { text-decoration:underline; text-underline-offset:4px; }
.article-summary { color:#776b82; margin:4px 0 0 !important; font-size:11px; line-height:1.7; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; }
.article-more { border-top:1px solid #e9e0ef; }
.article-more summary { display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 18px; color:var(--purple); background:#fbf8fd; font-size:12px; font-weight:650; list-style:none; cursor:pointer; }
.article-more summary::-webkit-details-marker { display:none; }
.article-more summary:hover { background:#f4edf9; }
.article-more-count { padding:0 7px; border-radius:100px; background:#ece1f5; font-size:10px; font-variant-numeric:tabular-nums; }
.article-chevron { margin-left:4px; font-size:15px; transition:transform .15s; }
.article-more[open] .article-chevron { transform:rotate(180deg); }
.article-more[open] summary { border-bottom:1px solid #e9e0ef; }
.article-list-footer { display:flex; justify-content:space-between; align-items:center; min-height:33px; padding:6px 20px; border-top:1px solid #f0ebf4; }
.article-results { color:#7c698b; font-size:11px; }
.article-reset { padding:0; background:none; color:var(--purple); text-decoration:underline; text-underline-offset:3px; font-size:10px; }
.article-empty { padding:28px 20px; text-align:center; color:var(--muted); font-size:13px; }
.article-home .updates-section { padding-block:17px 20px; }
.article-home .update-item { grid-template-columns:88px minmax(0,1fr); gap:18px; padding:12px 20px; }
.article-home .updates-list { border-radius:18px; }
.article-home .update-copy h3 { font-size:12px; }
.article-home .update-copy p { font-size:11px; line-height:1.7; }
.article-home .updates-more { border-radius:11px; margin-top:8px; }
.article-home .updates-more summary { padding-block:8px; font-size:11px; }
.room-entrance { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; padding:9px 14px; border:1px solid #dacee7; border-radius:100px; color:var(--purple); background:#ffffff9c; font-size:12px; font-weight:650; }
.room-entrance:hover { background:white; text-decoration:none; }
.square-tools-section .section-heading { margin-bottom:4px; }
.square-tools-section .section-intro { font-size:12px; margin-bottom:14px; }
.square-tools { display:grid; grid-template-columns:repeat(6,minmax(138px,1fr)); gap:10px; min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:thin; padding:7px; }
.square-tools:focus-visible { outline:2px solid #7658a5; outline-offset:2px; border-radius:15px; }
.square-tool { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:140px; padding:10px 8px; border:1px solid #e5deea; border-radius:16px; text-align:center; background:linear-gradient(145deg,#fff,#faf7fd); scroll-snap-align:start; transition:transform .15s,box-shadow .15s; }
.square-tool:hover { transform:translateY(-3px); text-decoration:none; box-shadow:0 9px 20px #6650770d; }
.square-tool svg { width:30px; height:30px; padding:6px; border-radius:11px; box-sizing:content-box; color:#679786; background:#e8f4ed; }
.square-tool strong { font-size:12px; line-height:1.5; font-weight:650; }
.square-tool small { font-size:10px; line-height:1.5; color:#7d6b89; }
.square-tool[data-tone=pink] svg { background:#fce5ef; color:#c27f9d; }
.square-tool[data-tone=purple] svg { background:#eee6fa; color:#9b79bf; }
.square-tool[data-tone=blue] svg { background:#e5f0ff; color:#6f9ec6; }
.square-tool[data-tone=yellow] svg { background:#fff3d5; color:#b39b52; }
.square-tool-arrow { position:absolute; top:11px; right:13px; font-size:13px; color:#baa7ca; }
.article-home #guides { border-top:0; }
html[lang=en] .article-home .site-switch a { min-width:88px; }
html[lang=en] .article-home .article-filters button { padding-inline:9px; font-size:10px; }
html[lang=en] .article-home .square-tool { min-height:160px; }
html[lang=en] .article-home .square-tool strong { font-size:11.5px; }
@media(max-width:1100px) {
  .article-home .header { grid-template-columns:1fr auto auto; gap:15px; padding-block:13px; }
  .article-home .header .brand { grid-column:1; grid-row:1; }
  .article-home .header .site-switch { grid-column:2; grid-row:1; }
  .article-home .header .language-switch { grid-column:3; grid-row:1; }
  .article-home .header .main-nav { grid-column:1/-1; grid-row:2; justify-self:start; }
  .article-controls { gap:10px; }
  .article-search { flex-grow:1; }
}
@media(max-width:700px) {
  .article-home .header { grid-template-columns:1fr auto; gap:11px; }
  .article-home .header .site-switch { grid-column:1/-1; grid-row:2; justify-self:stretch; }
  .article-home .site-switch a { flex:1; flex-direction:column; gap:0; padding:5px 6px; }
  .site-switch small { font-size:9px; }
  .article-home .header .language-switch { grid-column:2; grid-row:1; }
  .article-home .header .main-nav { grid-row:3; gap:18px; font-size:11px; }
  .article-home .brand-text strong { font-size:21px; }
  .article-home .brand-text small { font-size:9px; }
  .article-home .header .brand img { width:37px; height:37px; }
  .article-home .hero { display:block; position:relative; padding-block:20px 14px; }
  .article-home .hero h1 { padding-right:68px; }
  .article-home .hero h1,html[lang=en] .article-home .hero h1 { font-size:26px; }
  .article-home .mascot-stamp { position:absolute; right:0; top:28px; width:62px; height:65px; }
  .article-home .mascot-stamp>img { width:62px; height:62px; }
  .article-home .mascot-stamp>span { display:none; }
  .article-home .hero .lead { font-size:12px; }
  .article-home .hero-copy>p:not(.eyebrow):not(.lead) { font-size:11px; }
  .article-home .section { padding-block:18px; }
  .article-home .section-heading h2 { font-size:22px; }
  .article-home .section-heading>p { font-size:11px; }
  .article-controls { padding:12px; gap:10px; }
  .article-filters { gap:5px; }
  .article-filters button { font-size:10px; padding:5px 9px; }
  .article-search { flex-basis:100%; }
  .article-row { grid-template-columns:1fr; gap:5px; padding:12px 14px; }
  .article-date { font-size:10px; padding:0; }
  .article-row-heading { gap:8px; }
  .article-copy h3 { font-size:12px; }
  .article-tag { font-size:9px; padding-inline:7px; }
  .article-summary { font-size:10px; -webkit-line-clamp:2; }
  .article-list-footer { padding-inline:14px; }
  .article-home .update-item { grid-template-columns:74px minmax(0,1fr); gap:10px; padding:11px 14px; }
  .article-home .update-date { font-size:10px; }
  .article-home .update-copy h3 { font-size:11px; }
  .article-home .update-copy p { font-size:10px; }
  .room-entrance { padding:7px 11px; font-size:10px; }
}
@media(max-width:360px) {
  .article-home .brand-text strong { font-size:18px; }
  .article-home .brand-text small { font-size:8px; }
  .article-home .header .language-switch { font-size:10px; }
  .article-home .hero h1,html[lang=en] .article-home .hero h1 { font-size:25px; }
}