:root { --ink:#111114; --muted:#6e6e73; --line:#dedee3; --soft:#f5f5f7; --blue:#2450f0; --blue-ink:#1638ad; --paper:#fff; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body.fullcase-page { margin:0; background:var(--paper); color:var(--ink); font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif; -webkit-font-smoothing:antialiased; } button,summary { font:inherit; }.fullcase-page a { color:inherit; }.case-topbar,.case-footer { width:min(1320px,calc(100% - 64px)); margin:0 auto; }.case-topbar { display:flex; justify-content:space-between; align-items:center; min-height:72px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:650; letter-spacing:.04em; }.case-topbar a { color:var(--ink); text-decoration:none; }.case-topbar a:last-child { color:var(--blue); }
.case-hero { width:min(1320px,calc(100% - 64px)); margin:0 auto; padding:clamp(90px,13vw,188px) 0 clamp(78px,10vw,142px); }.case-kicker { margin:0 0 22px; color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.14em; }.case-hero h1 { max-width:1190px; margin:0; font-size:clamp(60px,10.2vw,156px); font-weight:760; line-height:.88; letter-spacing:-.085em; }.case-hero h1 span { color:var(--blue); }.case-hero-copy { max-width:790px; margin:54px 0 0; font-size:clamp(26px,3.3vw,48px); font-weight:650; letter-spacing:-.055em; line-height:1.18; }.hero-route { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:48px; font-size:13px; font-weight:700; }.hero-route span,.hero-route strong { padding:12px 15px; border:1px solid #dfe4ff; border-radius:999px; background:#f8faff; }.hero-route strong { border-color:var(--blue); background:var(--blue); color:#fff; }.hero-route i { color:var(--blue); font-size:19px; font-style:normal; }.hero-note { max-width:560px; margin:28px 0 0; color:var(--muted); font-size:14px; line-height:1.75; }
.module-nav { position:sticky; z-index:10; top:0; display:flex; gap:0; overflow-x:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.9); backdrop-filter:blur(16px) saturate(160%); scrollbar-width:none; }.module-nav::-webkit-scrollbar { display:none; }.module-nav a { display:flex; flex:0 0 auto; align-items:center; gap:8px; min-height:60px; padding:0 19px; border-right:1px solid var(--line); color:#45454a; text-decoration:none; font-size:13px; font-weight:650; transition:color .18s ease,background .18s ease; }.module-nav a b { color:var(--blue); font-size:11px; letter-spacing:.05em; }.module-nav a:hover,.module-nav a:focus-visible { color:var(--blue); background:#f5f7ff; outline:0; }
.case-module { padding:clamp(84px,11vw,155px) max(32px,calc((100vw - 1240px)/2)); border-bottom:1px solid var(--line); scroll-margin-top:60px; }.case-module.tone-soft { background:var(--soft); }.module-heading { display:grid; grid-template-columns:minmax(170px,.5fr) minmax(0,2.15fr) minmax(100px,.35fr); gap:30px; align-items:start; padding-bottom:70px; border-bottom:1px solid var(--line); }.module-heading>p { margin:-11px 0 0; color:var(--ink); font-size:clamp(68px,10vw,142px); font-weight:760; line-height:.88; letter-spacing:-.1em; }.module-heading span { display:block; margin:4px 0 15px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.11em; }.module-heading h2 { max-width:780px; margin:0; font-size:clamp(42px,5.9vw,86px); font-weight:740; line-height:1.02; letter-spacing:-.075em; }.module-heading em { padding-top:12px; color:var(--muted); font-size:12px; font-style:normal; text-align:right; }.module-parts { max-width:1050px; margin-left:auto; }.case-part { padding:64px 0; border-bottom:1px solid var(--line); }.case-part:last-child { border-bottom:0; padding-bottom:0; }.part-heading { display:grid; grid-template-columns:110px 1fr; gap:22px; align-items:baseline; }.part-heading>span { color:var(--blue); font-size:15px; font-weight:800; letter-spacing:.02em; }.part-heading h3 { max-width:850px; margin:0; font-size:clamp(30px,4vw,55px); font-weight:700; line-height:1.1; letter-spacing:-.065em; }.part-summary { max-width:720px; margin:24px 0 0 132px; color:#5d5d63; font-size:clamp(17px,1.75vw,21px); line-height:1.65; letter-spacing:-.025em; }
.part-detail { margin:37px 0 0 132px; border-top:1px solid #cfcfd6; }.part-detail summary { display:flex; justify-content:space-between; align-items:center; padding:18px 0; color:var(--blue); cursor:pointer; font-size:14px; font-weight:750; list-style:none; }.part-detail summary::-webkit-details-marker { display:none; }.part-detail summary i { color:var(--ink); font-size:19px; font-style:normal; }.detail-content { max-width:790px; padding:3px 0 8px; color:#38383d; font-size:16px; line-height:1.85; }.detail-content p { margin:0 0 22px; }.detail-content h5 { margin:48px 0 17px; color:var(--ink); font-size:23px; line-height:1.28; letter-spacing:-.035em; }.detail-content h6 { margin:34px 0 13px; color:var(--blue-ink); font-size:17px; line-height:1.45; }.detail-content strong { color:var(--ink); }.detail-content code { padding:.15em .35em; border-radius:4px; background:#eeeef1; color:#24242a; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; }.detail-content blockquote { margin:28px 0; padding:6px 0 6px 21px; border-left:3px solid var(--blue); color:#24242a; font-size:18px; font-weight:600; line-height:1.7; }.detail-content ul,.detail-content ol { margin:4px 0 28px; padding-left:1.35em; }.detail-content li { margin:8px 0; padding-left:.25em; }.detail-content pre { margin:28px 0; padding:21px 23px; overflow-x:auto; border:1px solid #e1e1e5; border-radius:10px; background:#f7f7f8; color:#25252a; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.6; white-space:pre; }.detail-content pre code { padding:0; background:transparent; font-size:inherit; }.detail-content hr { margin:42px 0; border:0; border-top:1px solid var(--line); }.table-scroll { margin:30px 0; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:#fff; }.table-scroll table { width:100%; min-width:590px; border-collapse:collapse; text-align:left; }.table-scroll th,.table-scroll td { padding:15px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); vertical-align:top; font-size:14px; line-height:1.65; }.table-scroll th { color:#5f6067; font-size:12px; font-weight:800; letter-spacing:.03em; }.table-scroll tr:last-child td { border-bottom:0; }.table-scroll th:last-child,.table-scroll td:last-child { border-right:0; }.case-footer { display:flex; justify-content:space-between; gap:24px; padding:32px 0 50px; color:var(--muted); font-size:12px; }.case-footer a { color:var(--blue); font-weight:700; text-decoration:none; }
.fullcase-page .edit-hotzone { position:fixed; z-index:30; top:0; left:0; width:80px; height:50px; }.fullcase-page .edit-toggle { position:fixed; z-index:31; top:10px; left:10px; display:flex; gap:6px; padding:6px; border:1px solid #d8d8dc; border-radius:10px; background:rgba(255,255,255,.95); box-shadow:0 5px 18px rgba(0,0,0,.08); opacity:0; transform:translateY(-8px); pointer-events:none; transition:.2s; }.fullcase-page .edit-hotzone:hover+.edit-toggle,.fullcase-page .edit-toggle:hover,.fullcase-page .edit-toggle.is-open { opacity:1; transform:none; pointer-events:auto; }.fullcase-page .edit-toggle button { border:0; border-radius:6px; padding:7px 9px; background:#202024; color:#fff; cursor:pointer; font-size:12px; }.fullcase-page [contenteditable="true"] { outline:2px dashed var(--blue); outline-offset:4px; }
@media (max-width:760px) { .case-topbar,.case-footer,.case-hero { width:min(100% - 36px,1320px); }.case-topbar span,.case-topbar a:last-child { display:none; }.case-topbar { min-height:60px; }.case-hero { padding:80px 0 78px; }.case-hero h1 { font-size:clamp(55px,17vw,82px); line-height:.91; }.case-hero-copy { margin-top:37px; font-size:27px; }.hero-route { margin-top:38px; }.hero-route i { display:none; }.module-nav a { min-height:52px; padding:0 13px; font-size:12px; }.case-module { padding:76px 22px; }.module-heading { grid-template-columns:1fr; gap:12px; padding-bottom:48px; }.module-heading>p { margin:0; font-size:80px; }.module-heading span { margin:0 0 9px; }.module-heading h2 { font-size:47px; }.module-heading em { padding:0; text-align:left; }.case-part { padding:46px 0; }.part-heading { grid-template-columns:1fr; gap:10px; }.part-heading h3 { font-size:34px; }.part-summary,.part-detail { margin-left:0; }.part-summary { margin-top:17px; font-size:17px; }.part-detail { margin-top:28px; }.detail-content { font-size:15px; line-height:1.78; }.detail-content h5 { margin-top:39px; font-size:21px; }.detail-content pre { margin-right:-2px; padding:17px; font-size:12px; }.case-footer { padding:26px 0 38px; }.case-footer span { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }.module-nav a { transition:none; } }

/* Dense editorial reading mode: side navigation and deliberately restrained scale. */
@media (min-width:1180px) {
  .fullcase-page { --sidebar-left:max(28px,calc((100vw - 1360px) / 2)); --content-left:max(268px,calc((100vw - 1360px) / 2 + 230px)); --content-right:max(54px,calc((100vw - 1360px) / 2 + 28px)); }
  .case-topbar,.case-hero,.case-footer { width:min(1080px,calc(100% - 330px)); margin-right:var(--content-right); margin-left:var(--content-left); }
  .module-nav { position:fixed; z-index:20; top:50%; left:var(--sidebar-left); display:flex; flex-direction:column; width:184px; max-height:calc(100vh - 110px); transform:translateY(-50%); overflow-y:auto; overflow-x:hidden; border:0; border-left:1px solid var(--line); background:transparent; backdrop-filter:none; scrollbar-width:none; }
  .module-nav::before { content:"MODULES"; display:block; padding:0 14px 10px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.13em; }
  .module-nav a { min-height:auto; gap:9px; padding:9px 13px; border:0; border-left:2px solid transparent; color:#797980; font-size:11px; line-height:1.25; white-space:normal; }
  .module-nav a b { min-width:18px; font-size:10px; }.module-nav a:hover,.module-nav a:focus-visible { border-left-color:var(--blue); background:transparent; color:var(--ink); }
  .case-module { padding-top:94px; padding-right:var(--content-right); padding-bottom:104px; padding-left:var(--content-left); }
  .module-heading { grid-template-columns:92px minmax(0,1fr) 74px; gap:18px; padding-bottom:44px; }.module-heading>p { margin:0; font-size:62px; line-height:.8; }.module-heading span { margin:0 0 10px; font-size:10px; }.module-heading h2 { font-size:clamp(42px,3.7vw,58px); letter-spacing:-.065em; }.module-heading em { padding-top:5px; font-size:11px; }
  .module-parts { max-width:850px; }.case-part { padding:46px 0; }.part-heading { grid-template-columns:78px 1fr; gap:16px; }.part-heading>span { font-size:12px; }.part-heading h3 { font-size:clamp(27px,2.5vw,38px); letter-spacing:-.05em; }.part-summary { max-width:650px; margin:18px 0 0 94px; font-size:17px; line-height:1.62; }.part-detail { margin:27px 0 0 94px; }.part-detail summary { padding:14px 0; font-size:13px; }.detail-content { max-width:700px; font-size:15px; line-height:1.78; }.detail-content h5 { margin:39px 0 14px; font-size:20px; }.detail-content h6 { margin:27px 0 11px; font-size:16px; }.detail-content blockquote { margin:23px 0; font-size:16px; }.detail-content pre { margin:24px 0; padding:18px 20px; font-size:12px; }.table-scroll th,.table-scroll td { padding:13px 14px; font-size:13px; }
  .case-hero { padding-top:116px; padding-bottom:94px; }.case-kicker { margin-bottom:15px; font-size:11px; }.case-hero h1 { max-width:920px; font-size:clamp(68px,6.6vw,96px); line-height:.94; letter-spacing:-.073em; }.case-hero-copy { margin-top:32px; font-size:clamp(25px,2.35vw,34px); }.hero-route { margin-top:30px; }.hero-note { margin-top:20px; font-size:13px; }.case-topbar { min-height:60px; }
}

/* Information-dense card treatments for research evidence. */
.user-scenario-grid,.user-problem-grid,.data-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:30px 0; }
.user-scenario-card,.user-problem-card,.data-card { position:relative; min-width:0; padding:20px; border:1px solid var(--line); background:#fff; }
.user-scenario-card { min-height:270px; }.user-problem-card { min-height:260px; }.data-card { min-height:185px; }
.card-index,.user-problem-card h6,.data-card h6 { display:block; margin:0; color:var(--blue-ink); font-size:16px; font-weight:760; line-height:1.45; }
.card-number { display:block; margin-bottom:42px; color:var(--blue); font-size:49px; font-weight:520; line-height:.75; letter-spacing:-.07em; }
.card-facts { margin-top:38px; }.card-facts p { margin:0; padding:10px 0; border-top:1px solid #ececf0; font-size:13px; line-height:1.55; }.card-facts p:first-child { border-top:0; }
.card-facts b { display:block; margin-bottom:3px; color:#1d1d21; font-size:11px; }.card-facts span { color:#606066; }
.user-problem-card h6 { padding-right:40px; }.problem-body { margin-top:26px; color:#505057; font-size:14px; line-height:1.75; }.problem-body p,.problem-body ul,.problem-body ol { margin-bottom:15px; }.problem-body blockquote { margin:16px 0; padding:4px 0 4px 13px; border-left:2px solid var(--blue); font-size:14px; }.problem-body pre { margin:16px 0; padding:14px; font-size:11px; }.data-card h6 { margin-bottom:18px; }.data-card>div { color:#5d5d64; font-size:14px; line-height:1.7; }
.validation-matrix { overflow:visible; border:0; border-radius:0; background:transparent; }.validation-matrix table { min-width:0; }.validation-matrix th,.validation-matrix td { padding:17px 13px; border-right:0; border-bottom:1px solid #e5e5e9; }.validation-matrix th { color:#888890; font-weight:700; }.validation-matrix td:not(:first-child),.validation-matrix th:not(:first-child) { text-align:center; }.status-ok,.status-no { display:inline-grid; width:19px; height:19px; place-items:center; border-radius:50%; font-weight:800; line-height:1; }.status-ok { background:#39b85a; color:#fff; }.status-no { color:#b7b7bd; font-size:21px; }

/* Quiet module labels and a centred reading rhythm. */
.module-heading { grid-template-columns:auto minmax(0,1fr) auto; gap:14px; padding-bottom:30px; }.module-heading>p { margin:0; color:var(--blue); font-size:clamp(32px,4vw,52px); line-height:.82; letter-spacing:-.085em; }.module-heading span { margin:0 0 6px; font-size:10px; }.module-heading h2 { max-width:none; font-size:clamp(29px,3.15vw,43px); font-weight:700; line-height:1.1; letter-spacing:-.052em; }.module-heading em { padding-top:3px; font-size:10px; }
.module-parts { max-width:810px; margin-right:auto; margin-left:auto; }.case-part { padding:46px 0; }.part-heading { grid-template-columns:1fr; gap:7px; text-align:center; }.part-heading>span { font-size:12px; }.part-heading h3 { max-width:760px; margin:0 auto; font-size:clamp(27px,2.6vw,37px); }.part-summary { max-width:680px; margin:16px auto 0; text-align:center; font-size:17px; }.part-detail { max-width:730px; margin:28px auto 0; }.part-detail summary { min-height:35px; justify-content:flex-end; padding:8px 0; }.detail-content { max-width:730px; }.part-detail summary i { font-size:18px; }

@media (min-width:1180px) {
  .module-nav { width:44px; overflow:visible; border-left:1px solid var(--line); }
  .module-nav::before { display:none; }
  .module-nav a { position:relative; justify-content:center; gap:0; padding:10px 0; border-left:2px solid transparent; white-space:nowrap; }
  .module-nav a b { min-width:0; font-size:10px; }.module-nav a span { display:none; }
  .module-nav a::after { position:absolute; left:48px; top:50%; z-index:2; width:max-content; max-width:240px; padding:8px 10px; border:1px solid var(--line); background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.08); color:var(--ink); content:attr(data-title); font-size:12px; font-weight:650; line-height:1.25; opacity:0; pointer-events:none; transform:translate(-5px,-50%); transition:opacity .16s ease,transform .16s ease; }
  .module-nav a:hover::after,.module-nav a:focus-visible::after { opacity:1; transform:translate(0,-50%); }
  .module-heading { grid-template-columns:auto 1fr auto; gap:13px; padding-bottom:28px; }.module-heading>p { font-size:42px; }.module-heading h2 { font-size:clamp(27px,2.25vw,34px); }.module-heading em { font-size:10px; }
  .module-parts { max-width:810px; margin-right:auto; margin-left:auto; }.case-part { max-width:800px; margin:0 auto; }.part-heading { grid-template-columns:1fr; }.part-summary { margin-right:auto; margin-left:auto; }.part-detail { margin-right:auto; margin-left:auto; }
}

@media (max-width:760px) {
  .module-heading { grid-template-columns:1fr; gap:8px; padding-bottom:30px; }.module-heading>p { font-size:36px; }.module-heading h2 { font-size:29px; }.module-heading em { text-align:left; }
  .part-heading h3 { font-size:28px; }.part-summary { font-size:16px; }.user-scenario-grid,.user-problem-grid,.data-card-grid { grid-template-columns:1fr; }.user-scenario-card,.user-problem-card { min-height:auto; }.validation-matrix { overflow-x:auto; }.validation-matrix table { min-width:560px; }
}

/* Apple-inspired wide canvas: preserve every source block while reducing empty side space. */
@media (min-width:1180px) {
  .fullcase-page {
    --page-gutter:clamp(48px,5vw,112px);
  }
  .case-topbar,
  .case-hero,
  .case-footer {
    width:calc(100% - (var(--page-gutter) * 2));
    max-width:1440px;
    margin-right:auto;
    margin-left:auto;
  }
  .module-nav {
    left:22px;
    width:34px;
    max-height:calc(100vh - 88px);
    border-left-color:rgba(17,17,20,.18);
  }
  .module-nav a { min-height:32px; padding:8px 0; }
  .module-nav a::after { left:40px; border-radius:8px; }

  .case-module {
    padding:clamp(72px,7.5vw,118px) var(--page-gutter) clamp(88px,8vw,132px);
  }
  .module-heading {
    width:100%;
    max-width:1440px;
    margin:0 auto;
    grid-template-columns:72px minmax(0,1fr) auto;
    gap:20px;
    padding-bottom:34px;
  }
  .module-heading > p { font-size:clamp(38px,3.3vw,52px); }
  .module-heading h2 { font-size:clamp(31px,2.45vw,42px); }
  .module-heading em { padding-top:5px; }

  .module-parts {
    width:100%;
    max-width:1240px;
    margin:0 auto;
  }
  .case-part { max-width:none; padding:60px 0; }
  .part-heading { max-width:980px; margin:0 auto; }
  .part-summary { max-width:900px; font-size:18px; line-height:1.68; }
  .part-detail { max-width:1160px; margin-top:32px; }
  .detail-content { max-width:1160px; font-size:16px; line-height:1.82; }
  .detail-content h5 { font-size:22px; }

  .user-scenario-grid,
  .user-problem-grid,
  .data-card-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    margin:36px 0;
  }
  .user-scenario-card,
  .user-problem-card,
  .data-card {
    padding:24px;
    border-color:#d9d9df;
    border-radius:18px;
    box-shadow:0 1px 0 rgba(0,0,0,.025);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  }
  .user-scenario-card:hover,
  .user-problem-card:hover,
  .data-card:hover {
    transform:translateY(-3px);
    border-color:#c6d1ff;
    box-shadow:0 16px 36px rgba(26,42,110,.08);
  }
  .user-scenario-card { min-height:300px; }
  .user-problem-card { min-height:280px; }
  .data-card { min-height:205px; }
  .card-number { margin-bottom:54px; font-size:56px; }
  .card-facts { margin-top:42px; }
  .card-facts p { padding:11px 0; }
  .problem-body { font-size:14px; line-height:1.78; }
  .table-scroll { border-radius:14px; }
  .validation-matrix { margin-top:34px; }
  .validation-matrix th,.validation-matrix td { padding:19px 18px; }
}

@media (min-width:1180px) and (max-width:1460px) {
  .user-scenario-grid,.user-problem-grid,.data-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:760px) {
  .user-scenario-card,.user-problem-card,.data-card { border-radius:14px; }
}