:root {
  --brand: #2765b0;
  --brand-dark: #173f77;
  --accent: #e7f0fb;
  --work-warm: #fff7e8;
}

.work-brand { align-items: center; display: inline-flex; gap: 10px; }
.work-brand img, .work-hero img, .work-sidebar > img { border-radius: 24%; box-shadow: 0 12px 32px rgb(24 65 116 / 18%); }
.work-hero { background: radial-gradient(circle at 82% 18%, rgb(247 185 83 / 24%), transparent 26rem), linear-gradient(145deg, #fff 8%, #eaf3ff 100%); overflow: hidden; padding: 78px 0; }
.work-hero-inner { align-items: center; display: grid; gap: 42px; grid-template-columns: auto minmax(0, 1fr); }
.work-hero h1 { font-size: clamp(3rem, 8vw, 5.4rem); letter-spacing: -.06em; line-height: 1; margin: 0 0 20px; }
.work-quick-links { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 24px; }
.work-quick-links a { border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; font-weight: 750; padding: 8px 16px; text-decoration: none; }
.work-quick-links a:hover { background: var(--accent); border-color: #91b7e1; }
.breadcrumbs { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: .86rem; gap: 9px; padding-block: 24px 0; }
.breadcrumbs a { color: var(--brand-dark); font-weight: 700; }
.work-page-head { background: linear-gradient(145deg, #fff, var(--work-warm)); margin-top: 24px; padding: 58px 0 64px; }
.work-page-head h1 { font-size: clamp(2.25rem, 6vw, 4.2rem); letter-spacing: -.05em; line-height: 1.14; margin: 0 0 18px; max-width: 920px; }
.work-page-head p:last-child { color: var(--muted); margin: 0; max-width: 760px; }
.work-article { align-items: start; display: grid; gap: 56px; grid-template-columns: minmax(0, 780px) minmax(220px, 1fr); }
.work-content { min-width: 0; }
.content-kicker { color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.work-content h2, .work-content h3, .work-content h4 { line-height: 1.4; scroll-margin-top: 96px; }
.work-content h2 { border-top: 1px solid var(--line); font-size: clamp(1.55rem, 4vw, 2.2rem); margin: 3.2rem 0 1.2rem; padding-top: 2.2rem; }
.work-content h3 { font-size: clamp(1.25rem, 3vw, 1.65rem); margin: 2.6rem 0 1rem; }
.work-content p, .work-content li { overflow-wrap: anywhere; }
.work-content a { color: var(--brand-dark); font-weight: 700; text-underline-offset: 3px; }
.work-content figure { margin: 30px 0 46px; }
.work-content img { border: 1px solid var(--line); border-radius: 22px; display: block; height: auto; max-height: 820px; max-width: min(100%, 520px); width: auto !important; }
.work-content figcaption { color: var(--muted); font-size: .86rem; margin-top: 8px; }
.page-toc { background: #f4f8fd; border: 1px solid #c7d9ed; border-radius: 18px; margin: 32px 0 44px; padding: 22px 24px; }
.page-toc strong { display: block; font-size: 1.05rem; margin-bottom: 10px; }
.page-toc ol { margin: 0; padding-left: 1.25rem; }
.page-toc li + li { margin-top: 6px; }
.work-sidebar { border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 13px; padding: 22px; position: sticky; top: 92px; }
.work-sidebar > strong { font-size: 1.08rem; }
.work-sidebar a { color: var(--brand-dark); font-size: .9rem; font-weight: 700; }
.work-sidebar .store-link { background: var(--brand-dark); border-radius: 999px; color: #fff; margin-bottom: 10px; padding: 9px 13px; text-align: center; text-decoration: none; }
.sidebar-label { color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.work-screenshots { display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 24px; scroll-snap-type: x mandatory; }
.work-screenshots figure { margin: 0; min-width: min(76vw, 280px); scroll-snap-align: start; }
.work-screenshots img { border: 1px solid var(--line); border-radius: 26px; display: block; height: auto; width: 100%; }
.work-screenshots figcaption { color: var(--muted); font-size: .88rem; margin-top: 8px; }
.work-index-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-index-card { border: 1px solid var(--line); border-radius: 18px; display: grid; min-height: 160px; padding: 22px; text-decoration: none; }
.work-index-card:hover { border-color: #91b7e1; box-shadow: var(--shadow); transform: translateY(-2px); }
.work-index-card span { color: var(--brand); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.work-index-card strong { font-size: 1.1rem; line-height: 1.45; margin: 8px 0; }
.work-index-card small { align-self: end; color: var(--brand); }
.support-grid { align-items: start; display: grid; gap: 26px; grid-template-columns: minmax(0, 820px); justify-content: center; }
.contact-notice { background: #fff8e8; border: 1px solid #e7ce91; border-radius: 16px; padding: 18px 20px; }
.contact-notice p { margin-bottom: 0; }
.support-form { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 9px; padding: 30px; }
.support-form h2 { font-size: 1.7rem; margin: 0 0 12px; }
.support-form label { font-weight: 700; margin-top: 10px; }
.support-form input, .support-form textarea { background: #fff; border: 1px solid #aebac1; border-radius: 12px; color: var(--ink); font: inherit; padding: 12px 14px; width: 100%; }
.support-form textarea { resize: vertical; }
.support-form input:focus, .support-form textarea:focus { border-color: var(--brand); outline: 3px solid #d8e7f8; }
.support-form .button { border: 0; cursor: pointer; justify-content: center; }
.contact-honeypot { left: -10000px; position: absolute; }
.contact-agreement { align-items: start; display: flex; gap: 10px; }
.contact-agreement input { margin-top: .45em; width: auto; }
.contact-result { min-height: 60vh; }
.contact-result > div { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-inline: auto; max-width: 680px; padding: 36px; }
.contact-result-error { background: #fff2da; border-color: #dfad55 !important; }
.contact-result-success { background: #eef7ff; border-color: #90b9e3 !important; }
.embed-page { background: #fff; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif; margin: 0; padding: 12px; }
.embed-page article { align-items: start; border: 1px solid #dfe4ea; border-radius: 14px; display: grid; gap: 14px; grid-template-columns: auto 1fr; padding: 16px; }
.embed-page img { border-radius: 11px; }
.embed-page a { color: #173f77; text-decoration: none; }
.embed-page p { color: #657083; font-size: .85rem; line-height: 1.5; margin: 4px 0; }
.embed-page small { color: #7b8797; }
.status-page { min-height: 62vh; padding-block: 100px; text-align: center; }
.status-code { color: var(--brand); font-size: 4rem; font-weight: 850; margin: 0; }
@media (max-width: 980px) { .work-article { grid-template-columns: 1fr; } .work-sidebar { position: static; } .work-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .work-hero { padding: 54px 0; } .work-hero-inner { grid-template-columns: 1fr; } .work-hero img { height: 112px; width: 112px; } .work-page-head { padding: 42px 0 48px; } .work-index-grid { grid-template-columns: 1fr; } .support-form { padding: 20px; } }