:root {
  color: #111111;
  background: #f7f7f5;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: #f7f7f5; }
a { color: inherit; }

.portfolio-shell, .case-shell { width: min(1020px, calc(100% - 48px)); margin: 0 auto; }

.portfolio-shell { min-height: 100svh; padding: clamp(72px, 10vw, 132px) 0 34px; display: flex; flex-direction: column; }
.hero { text-align: center; max-width: 820px; margin: 0 auto; }
.eyebrow { margin: 0 0 18px; color: #6654d4; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.28; letter-spacing: -.045em; }
.intro { max-width: 700px; margin: 36px auto 0; color: #5469d8; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; }

.project-list { display: grid; gap: 26px; margin: clamp(76px, 10vw, 108px) 0 42px; }
.project-entry { min-height: 82px; padding: 18px 28px; display: grid; grid-template-columns: 54px 1fr 40px; align-items: center; background: #8750d8; color: #fff; text-decoration: none; font-size: clamp(21px, 2.5vw, 28px); font-weight: 700; text-align: center; transition: transform .18s ease, background .18s ease; }
.project-entry:hover { background: #7240bd; transform: translateY(-3px); }
.project-entry:focus-visible, .back-link:focus-visible, .edit-toggle button:focus-visible { outline: 3px solid #182bb5; outline-offset: 4px; }
.project-index { justify-self: start; font-size: 13px; font-weight: 500; opacity: .75; }
.entry-arrow { justify-self: end; font-size: 25px; opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.project-entry:hover .entry-arrow { opacity: 1; transform: translate(2px, -2px); }
.site-footer { margin-top: auto; display: flex; justify-content: center; gap: 8px; color: #757575; font-size: 13px; }

.case-shell { padding: clamp(36px, 6vw, 80px) 0 80px; }
.back-link { display: inline-block; margin-bottom: clamp(64px, 10vw, 110px); color: #5945c7; font-size: 15px; text-underline-offset: 4px; }
.case-hero { max-width: 780px; }
.case-hero h1 { font-size: clamp(40px, 6vw, 72px); }
.internship-page .case-hero h1 { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.15; }
.case-summary { max-width: 640px; margin: 24px 0 0; color: #4d4d4d; font-size: 20px; line-height: 1.65; }
.case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 72px; background: #d7d7d3; border: 1px solid #d7d7d3; }
.case-block { min-height: 190px; margin: 0; padding: 28px; background: #fbfbfa; }
.case-block p:last-child { margin: 18px 0 0; color: #4f4f4f; line-height: 1.7; }
.block-label { margin: 0; color: #624ac4; font-size: 13px; font-weight: 700; letter-spacing: .07em; }
.demo-placeholder { min-height: 260px; margin-top: 54px; padding: 30px; display: grid; place-items: center; align-content: center; border: 1px dashed #9c8bdc; background: #f0edff; color: #5d4caf; text-align: center; }
.demo-placeholder span { font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.demo-placeholder p { max-width: 430px; margin: 14px 0 0; line-height: 1.6; }

.material-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 68px; }
.gallery-card { min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
a.gallery-card { transition: transform .2s ease; }
a.gallery-card:hover { transform: translateY(-5px); }
.gallery-cover { aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: #f0efed; }
.gallery-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
a.gallery-card:hover .gallery-cover img { transform: scale(1.035); }
.gallery-copy { padding-top: 17px; }
.material-type { margin: 0; color: #664dcb; font-size: 11px; font-weight: 700; letter-spacing: .075em; }
.material-type span { margin-right: 9px; color: #1d1d1d; }
.gallery-card h2 { margin: 9px 0; font-size: clamp(23px, 2vw, 29px); letter-spacing: -.035em; }
.gallery-card p:not(.material-type) { min-height: 46px; margin: 0; color: #5b5b5b; line-height: 1.55; }
.gallery-action { display: inline-block; margin-top: 17px; color: #5f48bf; font-size: 14px; font-weight: 700; }
.video-cover { display: grid; place-items: center; background: #252122; }
.video-cover span { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; font-size: 22px; padding-left: 3px; }
.is-placeholder { color: #85808f; }
.confidential-note { margin: 24px 0 0; color: #818181; font-size: 13px; line-height: 1.6; }

.report-page { min-height: 100svh; overflow: hidden; }
.report-shell { width: min(1240px, calc(100% - 48px)); height: 100svh; min-height: 100svh; margin: 0 auto; padding: 24px 0 20px; display: flex; flex-direction: column; }
.report-header { display: grid; gap: 10px; align-items: end; }
.report-header .back-link { grid-column: 1 / -1; margin: 0; }
.report-heading .eyebrow { margin-bottom: 8px; }
.report-heading h1 { font-size: clamp(28px, 3.3vw, 42px); line-height: 1.15; }
.report-reader { margin-top: 12px; display: flex; flex: 1; min-height: 0; flex-direction: column; align-items: center; }
.report-stage { width: min(100%, calc((100svh - 240px) * 1.777)); aspect-ratio: 1706 / 960; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #d7d7d3; background: #ffffff; box-shadow: 0 16px 40px rgba(17,17,17,.10); }
.report-stage img { width: 100%; height: 100%; display: block; object-fit: cover; }
.report-controls { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.report-controls button { min-width: 104px; border: 1px solid #d0cac0; padding: 10px 13px; background: #fbfbfa; color: #242424; font: inherit; font-size: 14px; cursor: pointer; }
.report-controls button:hover:not(:disabled) { border-color: #7b5cd2; color: #5d43bd; }
.report-controls button:disabled { cursor: not-allowed; opacity: .4; }
.report-controls label { color: #555; font-size: 14px; }
.report-controls input { width: 48px; border: 0; border-bottom: 1px solid #8d8d8d; background: transparent; color: inherit; font: inherit; text-align: center; }
.reader-help { margin: 15px 0 0; color: #777; text-align: center; font-size: 13px; }

.edit-hotzone { position: fixed; z-index: 20; top: 0; left: 0; width: 56px; height: 56px; }
.edit-toggle { position: fixed; z-index: 21; top: 12px; left: 12px; display: flex; gap: 6px; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.edit-hotzone:hover + .edit-toggle, .edit-toggle:hover, .edit-toggle.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.edit-toggle button { border: 0; padding: 8px 11px; background: #171717; color: #fff; border-radius: 5px; font: inherit; font-size: 12px; cursor: pointer; }
[contenteditable="true"] { outline: 2px dashed #6d55cf; outline-offset: 4px; border-radius: 2px; }

@media (max-width: 600px) {
  .portfolio-shell, .case-shell { width: min(100% - 32px, 1020px); }
  .portfolio-shell { padding-top: 74px; }
  .intro { margin-top: 24px; }
  .project-list { gap: 14px; margin-top: 62px; }
  .project-entry { min-height: 68px; padding: 15px 18px; grid-template-columns: 35px 1fr 25px; }
  .entry-arrow { display: block; opacity: .9; font-size: 20px; }
  .case-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .case-block { min-height: auto; }
  .material-gallery { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .gallery-card p:not(.material-type) { min-height: 0; }
  .report-page { overflow: auto; }
  .report-shell { width: min(100% - 32px, 1240px); height: auto; min-height: auto; padding-top: 24px; }
  .report-header { grid-template-columns: 1fr; align-items: start; }
  .report-reader { min-height: 520px; margin-top: 28px; }
  .report-stage { width: 100%; }
  .report-controls { gap: 9px; }
  .report-controls button { min-width: 84px; padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }

.ai-case-page { background: #f7f7f5; }
.ai-case-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 92px; }
.ai-case-hero { max-width: 850px; padding: 82px 0 58px; }
.ai-case-hero h1 { margin: 0; font-size: clamp(52px, 8vw, 104px); line-height: .9; letter-spacing: -.075em; }
.ai-case-hero h1 span { color: #6d52d4; }
.ai-case-lead { max-width: 650px; margin: 30px 0 0; color: #4e4e4e; font-size: clamp(18px, 2vw, 23px); line-height: 1.55; }
.ai-principle { margin-top: 38px; display: inline-flex; flex-direction: column; gap: 7px; padding: 17px 19px; border-left: 4px solid #7a54d8; background: #ede8ff; color: #352665; font-size: 18px; font-weight: 700; }
.ai-principle small { color: #675b88; font-size: 13px; font-weight: 500; }
.case-toc { position: sticky; top: 0; z-index: 2; display: flex; gap: 18px; overflow-x: auto; padding: 14px 0; border-top: 1px solid #d8d6d1; border-bottom: 1px solid #d8d6d1; background: rgba(247,247,245,.92); backdrop-filter: blur(10px); }
.case-toc a { color: #565656; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.case-toc a:hover { color: #6345c6; }
.case-section { padding: 76px 0 0; scroll-margin-top: 65px; }
.section-kicker { margin: 0 0 15px; color: #6b50cc; font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.case-section h2 { max-width: 850px; margin: 0; font-size: clamp(30px, 4.3vw, 54px); line-height: 1.15; letter-spacing: -.052em; }
.case-two-col { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(270px, .65fr); gap: 54px; margin-top: 34px; }
.case-two-col > p { margin: 0; color: #4e4e4e; font-size: 18px; line-height: 1.85; }
.case-note { padding: 22px; border: 1px solid #d5d1e5; background: #f0edff; color: #4a3f7b; line-height: 1.65; }
.case-note strong, .case-note span { display: block; }.case-note span { margin-top: 10px; font-size: 14px; }
.insight-grid, .scope-grid, .validation-grid, .roadmap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 34px; }
.insight-grid article, .scope-grid article, .roadmap article { min-height: 178px; padding: 22px; border: 1px solid #d8d6d1; background: #fbfbfa; }
.insight-grid span { color: #6850c5; font-size: 13px; font-weight: 800; }.insight-grid p, .scope-grid p, .roadmap p { margin: 12px 0 0; color: #545454; line-height: 1.68; }
.evidence-table-wrap { overflow-x: auto; margin-top: 34px; border: 1px solid #d8d6d1; }.case-table { width: 100%; border-collapse: collapse; min-width: 680px; background: #fbfbfa; }.case-table th, .case-table td { padding: 17px 18px; border-bottom: 1px solid #deddd9; text-align: left; vertical-align: top; color: #4e4e4e; font-size: 14px; line-height: 1.65; }.case-table th { color: #292929; background: #f0efec; font-size: 13px; }.case-table tr:last-child td { border-bottom: 0; }
.case-footnote { margin: 15px 0 0; color: #838383; font-size: 13px; line-height: 1.6; }
.journey-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }.journey-compare article { padding: 26px; border: 1px solid #d8d6d1; }.journey-compare h3 { margin: 0; font-size: 20px; }.journey-compare ol { display: grid; gap: 10px; margin: 23px 0; padding: 0; list-style: none; counter-reset: journey; }.journey-compare li { counter-increment: journey; display: flex; align-items: center; gap: 10px; color: #505050; }.journey-compare li::before { content: counter(journey); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #e8e6e2; color: #4f4f4f; font-size: 11px; font-weight: 800; }.journey-new { background: #f0edff; border-color: #cfc6f4 !important; }.journey-new h3 { color: #563db9; }.journey-new li::before { background: #7355d4; color: #fff; }.journey-compare article > p { margin: 0; color: #6b6b6b; font-size: 14px; line-height: 1.6; }
.core-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; padding: 23px; background: #19171c; color: #fff; }.core-flow span { padding: 8px 10px; border: 1px solid #5e5a64; font-size: 13px; }.core-flow b { color: #b8a6ff; }
.scope-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.scope-grid h3 { margin: 0; color: #5e43bd; font-size: 16px; }.not-in-scope { display: flex; gap: 20px; margin-top: 18px; padding: 19px 22px; border: 1px solid #e1d1d1; background: #fff7f7; color: #745757; line-height: 1.65; }.not-in-scope strong { white-space: nowrap; }
.architecture-flow { display: flex; align-items: stretch; gap: 9px; margin-top: 34px; padding: 25px; overflow-x: auto; background: #202024; }.architecture-flow div { min-width: 145px; padding: 16px; background: #34323a; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; }.architecture-flow div small { display: block; margin-top: 8px; color: #c6c2cb; font-size: 11px; font-weight: 500; }.architecture-flow .accent { background: #6c4dce; }.architecture-flow i { align-self: center; color: #b9a6ff; font-style: normal; }
.validation-grid { grid-template-columns: 1fr 1fr; }.validation-grid article { padding: 25px; border-top: 4px solid #6c4dce; background: #fbfbfa; }.validation-grid article:last-child { border-color: #9c9c9c; }.validation-grid span { color: #664bc6; font-size: 12px; font-weight: 800; letter-spacing: .08em; }.validation-grid h3 { margin: 11px 0 15px; font-size: 22px; }.validation-grid ul { margin: 0; padding-left: 18px; color: #555; line-height: 1.75; }.roadmap article { min-height: 170px; }.roadmap b { color: #6148bd; }.prd-details { margin-top: 28px; padding: 20px 22px; border: 1px dashed #bcb4db; color: #585269; line-height: 1.7; }.prd-details summary { color: #573cb9; font-weight: 800; cursor: pointer; }
@media (max-width: 760px) { .ai-case-shell { width: min(100% - 32px, 1120px); padding-top: 24px; }.ai-case-hero { padding: 54px 0 42px; }.ai-case-hero h1 { font-size: clamp(47px, 15vw, 72px); }.case-two-col, .journey-compare, .validation-grid { grid-template-columns: 1fr; }.insight-grid, .scope-grid, .roadmap { grid-template-columns: 1fr; }.case-section { padding-top: 56px; }.not-in-scope { flex-direction: column; gap: 8px; }.architecture-flow { padding: 16px; }.case-toc { gap: 14px; } }

/* Homepage — Apple product-gallery direction. Internal project pages retain their own style. */
.apple-home { background: #ffffff; color: #1d1d1f; }
.apple-home .portfolio-shell { width: min(1280px, calc(100% - 48px)); padding: 18px 0 30px; }
.apple-nav { min-height: 44px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4px; font-size: 12px; }
.apple-mark { color: #1d1d1f; font-size: 16px; font-weight: 800; letter-spacing: -.06em; text-decoration: none; }
.apple-nav-links { display: flex; align-items: center; gap: 28px; }
.apple-nav-links a { color: #424245; text-decoration: none; transition: color .2s ease; }
.apple-nav-links a:hover { color: #0071e3; }
.apple-status { justify-self: end; padding: 6px 11px; border-radius: 999px; background: #f5f5f7; color: #424245; }
.apple-home .hero { max-width: 1020px; padding: clamp(86px, 11vw, 148px) 0 clamp(78px, 10vw, 122px); }
.apple-home .eyebrow { margin-bottom: 17px; color: #6e6e73; font-size: 12px; letter-spacing: .14em; }
.apple-home h1 { font-size: clamp(46px, 7.1vw, 88px); line-height: 1.04; letter-spacing: -.075em; font-weight: 750; }
.apple-home .intro { max-width: 700px; margin-top: 28px; color: #6e6e73; font-size: clamp(18px, 2vw, 24px); line-height: 1.42; }
.apple-home .project-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin: 0 0 44px; }
.project-list-heading { grid-column: 1 / -1; display: flex; align-items: end; justify-content: space-between; margin: 0 2px 12px; }
.project-list-heading p { margin: 0; color: #6e6e73; font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.project-list-heading h2 { margin: 0; color: #1d1d1f; font-size: clamp(25px, 3vw, 38px); letter-spacing: -.055em; }
.apple-home .project-entry { position: relative; min-height: 310px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; overflow: hidden; border-radius: 22px; background: #f5f5f7; color: #1d1d1f; font-size: clamp(25px, 2.6vw, 36px); font-weight: 700; text-align: left; isolation: isolate; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.apple-home .project-entry::before { content: ""; position: absolute; z-index: -1; width: 75%; aspect-ratio: 1; border-radius: 50%; right: -18%; bottom: -57%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.94), rgba(255,255,255,.18) 38%, transparent 65%); transition: transform .5s ease; }
.apple-home .project-entry:hover { transform: scale(1.012); background: #f0f0f3; box-shadow: 0 16px 36px rgba(0,0,0,.09); }
.apple-home .project-entry:hover::before { transform: scale(1.25) translate(-5%, -5%); }
.apple-home .project-entry:nth-of-type(1), .apple-home .project-entry:nth-of-type(2) { grid-column: span 6; }
.apple-home .project-entry:nth-of-type(3) { grid-column: span 12; min-height: 250px; background: #0f0f10; color: #f5f5f7; }
.apple-home .project-entry:nth-of-type(3)::before { width: 52%; right: 5%; bottom: -90%; background: radial-gradient(circle, #2788e8 0%, #172c83 34%, transparent 68%); opacity: .92; }
.apple-home .project-entry:nth-of-type(4), .apple-home .project-entry:nth-of-type(5) { grid-column: span 6; }
.apple-home .project-entry:nth-of-type(4) { background: linear-gradient(135deg, #edf5ff 0%, #e7effd 62%, #dce8ff 100%); }
.apple-home .project-entry:nth-of-type(5) { background: linear-gradient(135deg, #fff2e9 0%, #f7e4d7 100%); }
.apple-home .project-index { align-self: flex-start; color: currentColor; font-size: 13px; font-weight: 600; opacity: .58; }
.apple-home .entry-arrow { align-self: flex-end; color: currentColor; font-size: 28px; line-height: 1; opacity: 1; transform: none; }
.apple-home .project-entry:hover .entry-arrow { transform: translate(4px, -4px); }
.apple-home .site-footer { margin-top: auto; padding: 28px 0 0; border-top: 1px solid #d2d2d7; color: #6e6e73; font-size: 12px; }
.apple-home .project-entry:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }

@media (max-width: 760px) {
  .apple-home .portfolio-shell { width: min(100% - 32px, 1280px); }
  .apple-nav { grid-template-columns: 1fr auto; }
  .apple-nav-links { display: none; }
  .apple-home .hero { padding: 76px 0 76px; text-align: left; }
  .apple-home h1 { font-size: clamp(42px, 12vw, 62px); }
  .apple-home .intro { margin-left: 0; font-size: 18px; }
  .apple-home .project-list { grid-template-columns: 1fr; gap: 12px; }
  .project-list-heading { display: block; margin-bottom: 6px; }
  .project-list-heading h2 { margin-top: 9px; }
  .apple-home .project-entry, .apple-home .project-entry:nth-of-type(n) { grid-column: 1; min-height: 210px; padding: 24px; border-radius: 18px; }
  .apple-home .project-entry:nth-of-type(4) { min-height: 210px; }
}

/* AI Project 02 — RAG case, built from the supplied research screenshots. */
.project-two-page { --rag-blue: #2949dd; --rag-cyan: #2197f6; background: #f5f5f5; color: #171717; }
.rag-case-shell { width: min(1260px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 94px; }
.rag-back { margin: 0; color: #2949dd; }
.rag-hero { padding: clamp(92px, 13vw, 172px) 0 clamp(112px, 14vw, 180px); max-width: 980px; }
.rag-kicker { margin: 0 0 18px; color: var(--rag-blue); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.rag-hero h1 { margin: 0; color: var(--rag-blue); font-size: clamp(56px, 8vw, 112px); line-height: .95; letter-spacing: -.075em; }
.rag-lead { max-width: 830px; margin: 38px 0 0; color: #3150d8; font-size: clamp(21px, 2.4vw, 31px); line-height: 1.45; text-decoration: underline; text-decoration-color: #169cf9; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.rag-section { padding: 30px 0 0; border-top: 2px solid #181818; }
.section-title-row { display: grid; grid-template-columns: 114px 1fr; gap: 25px; align-items: start; }
.section-index { margin: 2px 0 0; color: var(--rag-blue); font-size: 48px; line-height: 1; font-weight: 800; letter-spacing: -.06em; }
.section-label { margin: 0 0 9px; color: var(--rag-blue); font-size: 12px; font-weight: 800; letter-spacing: .1em; }
.section-title-row h2 { margin: 0; font-size: clamp(38px, 5vw, 68px); line-height: 1; letter-spacing: -.07em; }
.rag-subsection { margin-top: 96px; }
.rag-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; border-bottom: 1px solid #cfcfcf; padding-bottom: 13px; }
.rag-subhead p { margin: 0; color: #171717; font-size: 18px; font-weight: 800; }
.rag-subhead span { color: #747474; font-size: 13px; }
.scene-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #dadada; border: 1px solid #dadada; }
.scene-card { min-height: 312px; padding: 24px; background: #fff; }
.scene-number { margin: 0; color: var(--rag-blue); font-size: 13px; font-weight: 800; }
.scene-card h3 { margin: 42px 0 14px; font-size: 23px; letter-spacing: -.04em; }
.scene-card > p:not(.scene-number) { margin: 0; color: #535353; font-size: 14px; line-height: 1.72; }
.scene-card blockquote { margin: 18px 0 0; padding-left: 12px; border-left: 2px solid var(--rag-blue); color: #292929; font-size: 13px; line-height: 1.6; }
.problem-area { padding-top: 6px; }
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 84px; align-items: start; }
.problem-card { min-height: 330px; padding: 30px; background: #fff; border: 1px solid #e9e9e9; }
.problem-card-featured { border: 4px solid #2496ee; }
.problem-code { margin: 0 0 22px; color: #171717; font-size: 14px; font-weight: 800; }
.problem-card h3 { margin: 0; font-size: clamp(22px, 2.2vw, 29px); line-height: 1.25; letter-spacing: -.045em; }
.problem-card h4 { margin: 30px 0 13px; font-size: 16px; }
.problem-card > p { margin: 25px 0 0; color: #3f3f3f; line-height: 1.65; }
.problem-card ul { display: grid; gap: 8px; margin: 13px 0 0; padding-left: 20px; color: #4d4d4d; font-size: 14px; line-height: 1.55; }
.diagnosis-flow { display: grid; gap: 8px; margin: 16px 0 0; padding: 17px 20px 17px 43px; background: #f7f7f7; color: #3b3b3b; line-height: 1.4; }
.diagnosis-flow li::marker { color: var(--rag-blue); font-weight: 800; }
.problem-card blockquote { margin: 25px 0 0; padding: 12px 0 12px 14px; border-left: 3px solid var(--rag-blue); color: #252525; font-size: 18px; font-weight: 650; }
.insight { margin-top: 31px; padding-left: 13px; border-left: 3px solid #9a76ff; }
.insight span, .insight strong { display: block; }
.insight span { margin-bottom: 9px; color: #4d4d4d; font-size: 13px; font-weight: 800; }
.insight strong { color: #262626; font-size: 14px; line-height: 1.6; }
.rag-more { margin: 92px 0 0; color: #7a7a7a; font-size: 13px; text-align: center; }

@media (max-width: 860px) {
  .rag-case-shell { width: min(100% - 32px, 1260px); }
  .rag-hero { padding: 80px 0 100px; }
  .rag-hero h1 { font-size: clamp(50px, 13vw, 82px); }
  .rag-lead { margin-top: 28px; font-size: 20px; }
  .section-title-row { grid-template-columns: 1fr; gap: 14px; }
  .section-index { font-size: 35px; }
  .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .problem-grid { gap: 24px; }
}
@media (max-width: 580px) {
  .rag-case-shell { padding-top: 24px; }
  .rag-subsection { margin-top: 60px; }
  .rag-subhead { display: block; }
  .rag-subhead span { display: block; margin-top: 8px; }
  .scene-grid, .problem-grid { grid-template-columns: 1fr; }
  .scene-card { min-height: 0; }
  .problem-card { min-height: 0; padding: 23px; }
  .rag-more { margin-top: 64px; }
}

/* Horizontal research cards for the evidence module. */
.project-two-page .rag-section { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 72px max(24px, calc((100vw - 1260px) / 2)) 0; overflow: hidden; border-top: 0; background: #fff; }
.project-two-page .section-title-row { grid-template-columns: auto auto; justify-content: center; gap: 24px; align-items: center; }
.project-two-page .section-index { margin: 0; color: #111; font-size: clamp(64px, 7vw, 94px); }
.project-two-page .section-label { display: none; }
.project-two-page .section-title-row h2 { font-size: clamp(34px, 4vw, 56px); }
.project-two-page .rag-subsection { margin-top: 78px; }
.project-two-page .rag-subhead { justify-content: center; margin-bottom: 52px; padding: 0; border: 0; text-align: center; }
.project-two-page .rag-subhead p { display: none; }
.project-two-page .rag-subhead span { color: #2949dd; font-size: 16px; }
.project-two-page .scene-grid, .project-two-page .problem-grid { display: flex; width: max-content; max-width: none; gap: 56px; margin-left: max(0px, calc((100vw - 1260px) / 2)); padding: 0 max(24px, calc((100vw - 1260px) / 2)) 18px 0; overflow-x: auto; overflow-y: hidden; background: transparent; border: 0; scroll-snap-type: x proximity; scrollbar-width: thin; }
.project-two-page .scene-grid::-webkit-scrollbar, .project-two-page .problem-grid::-webkit-scrollbar { display: none; }
.project-two-page .scene-grid, .project-two-page .problem-grid { -ms-overflow-style: none; scrollbar-width: none; }
.project-two-page .scene-grid { width: calc(100vw - max(24px, calc((100vw - 1260px) / 2))); }
.project-two-page .scene-card { flex: 0 0 min(392px, calc(100vw - 88px)); min-height: 548px; padding: 31px; border-radius: 30px; background: #d8d8d8; scroll-snap-align: start; }
.project-two-page .scene-number { display: none; }
.project-two-page .scene-card h3 { margin: 0; color: #2949dd; text-align: center; font-size: clamp(26px, 2.2vw, 36px); }
.project-two-page .scene-card > p:not(.scene-number), .project-two-page .scene-card blockquote { display: none; }
.project-two-page .problem-area { margin-top: 102px; padding-top: 0; }
.project-two-page .problem-area .rag-subhead { justify-content: flex-end; margin: 0 0 48px; }
.project-two-page .problem-area .rag-subhead span { font-size: 14px; }
.project-two-page .problem-grid { width: calc(100vw - max(24px, calc((100vw - 1260px) / 2))); gap: 32px; padding-bottom: 90px; }
.project-two-page .problem-card, .project-two-page .problem-card-featured { position: relative; flex: 0 0 min(290px, calc(100vw - 88px)); min-height: 250px; padding: 25px; overflow: visible; border: 0; border-radius: 28px; background: #d8d8d8; scroll-snap-align: start; }
.project-two-page .problem-card .problem-code { margin: 0; color: #2949dd; font-size: clamp(24px, 2vw, 31px); text-align: center; }
.project-two-page .problem-card h3 { display: none; }
.project-two-page .problem-card > h4, .project-two-page .problem-card > p, .project-two-page .problem-card > ul, .project-two-page .problem-card > ol, .project-two-page .problem-card > blockquote { display: none; }
.project-two-page .problem-card .insight { position: absolute; top: calc(100% + 23px); right: 2px; left: 2px; margin: 0; padding-left: 10px; border-left: 2px solid #9a76ff; }
.project-two-page .problem-card .insight span { display: none; }
.project-two-page .problem-card .insight strong { font-size: 12px; font-weight: 600; line-height: 1.45; }
@media (max-width: 860px) {
  .project-two-page .rag-section { padding-top: 58px; }
  .project-two-page .rag-subsection { margin-top: 54px; }
  .project-two-page .scene-grid, .project-two-page .problem-grid { gap: 20px; }
  .project-two-page .scene-card { min-height: 410px; }
}

/* AI Project 02 v2 — Apple Mac-inspired editorial product case. */
.rag-case-v2 { --mac-blue: #0071e3; --mac-ink: #1d1d1f; --mac-muted: #6e6e73; --mac-line: #d2d2d7; background: #fff; color: var(--mac-ink); }
.mac-case-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0 40px; }
.mac-back { color: #1d1d1f; font-size: 13px; font-weight: 600; text-decoration: none; }.mac-back:hover { color: var(--mac-blue); }
.mac-hero { padding: clamp(104px, 13vw, 190px) 0 58px; text-align: center; }.mac-eyebrow, .mac-label { margin: 0; color: var(--mac-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }.mac-hero h1 { margin: 18px 0 0; font-size: clamp(56px, 9vw, 128px); line-height: .93; letter-spacing: -.078em; }.mac-hero h1 span { color: var(--mac-blue); }.mac-hero-lead { max-width: 720px; margin: 34px auto 0; color: #424245; font-size: clamp(20px, 2.3vw, 29px); line-height: 1.42; letter-spacing: -.035em; }.mac-hero-visual { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 62px; padding: 13px; border-radius: 999px; background: #f5f5f7; color: #424245; font-size: 14px; font-weight: 700; }.mac-hero-visual span, .mac-hero-visual strong { padding: 9px 13px; border-radius: 999px; background: #fff; }.mac-hero-visual strong { background: var(--mac-blue); color: #fff; }.mac-hero-visual i { color: var(--mac-blue); font-size: 18px; font-style: normal; }.mac-hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin: 94px auto 0; border-top: 1px solid var(--mac-line); border-bottom: 1px solid var(--mac-line); text-align: left; }.mac-hero-meta div { min-height: 108px; padding: 21px 24px; border-right: 1px solid var(--mac-line); }.mac-hero-meta div:last-child { border-right: 0; }.mac-hero-meta dt { margin-bottom: 17px; color: var(--mac-muted); font-size: 11px; font-weight: 700; }.mac-hero-meta dd { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; }
.mac-toc { position: sticky; z-index: 4; top: 0; display: flex; justify-content: center; gap: 22px; overflow-x: auto; padding: 15px 0; border-top: 1px solid var(--mac-line); border-bottom: 1px solid var(--mac-line); background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(16px); }.mac-toc a { flex: 0 0 auto; color: #424245; font-size: 13px; text-decoration: none; }.mac-toc a:hover { color: var(--mac-blue); }
.mac-section { padding: clamp(92px, 12vw, 155px) 0; border-bottom: 1px solid var(--mac-line); }.mac-section h2 { max-width: 940px; margin: 18px 0 0; font-size: clamp(40px, 6vw, 82px); line-height: 1.05; letter-spacing: -.07em; }.mac-two-col { display: grid; grid-template-columns: 1.08fr .92fr; gap: 90px; margin-top: 70px; }.mac-two-col > p { max-width: 600px; margin: 0; color: #424245; font-size: 20px; line-height: 1.65; letter-spacing: -.02em; }.mac-two-col > div { padding: 24px; border-radius: 22px; background: #f5f5f7; }.mac-two-col b { display: block; color: var(--mac-blue); font-size: 13px; }.mac-two-col div p { margin: 17px 0 22px; color: #424245; font-size: 14px; line-height: 1.7; }.mac-two-col small { color: var(--mac-muted); font-size: 12px; }
.mac-wash { margin: 0 calc(50% - 50vw); padding-right: max(24px, calc((100vw - 1180px) / 2)); padding-left: max(24px, calc((100vw - 1180px) / 2)); background: #f5f5f7; }.mac-method { max-width: 680px; margin: 30px 0 0; color: var(--mac-muted); font-size: 14px; line-height: 1.7; }.mac-scene-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; margin-top: 65px; }.mac-scene { min-height: 420px; padding: 31px; border-radius: 28px; background: #fff; }.mac-scene.is-blue { background: var(--mac-blue); color: #fff; }.mac-scene > span { color: var(--mac-muted); font-size: 12px; font-weight: 700; }.mac-scene.is-blue > span { color: #d7eaff; }.mac-scene h3 { margin: 62px 0 16px; font-size: clamp(24px, 2.3vw, 32px); letter-spacing: -.055em; }.mac-scene p { margin: 0; color: #515154; font-size: 14px; line-height: 1.7; }.mac-scene.is-blue p { color: #f4f8ff; }.mac-scene blockquote { margin: 22px 0 0; font-size: 14px; line-height: 1.65; }.mac-scene b { display: block; margin-top: 27px; color: var(--mac-blue); font-size: 12px; }.mac-scene.is-blue b { color: #d7eaff; }.mac-insight-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 90px; border-top: 1px solid var(--mac-line); border-left: 1px solid var(--mac-line); }.mac-insight-grid article { min-height: 225px; padding: 25px; border-right: 1px solid var(--mac-line); border-bottom: 1px solid var(--mac-line); }.mac-insight-grid b { color: var(--mac-blue); font-size: 12px; }.mac-insight-grid h3 { margin: 40px 0 10px; font-size: 17px; letter-spacing: -.035em; }.mac-insight-grid p { margin: 0; color: #515154; font-size: 13px; line-height: 1.65; }.mac-placeholder { display: block; margin-top: 20px; color: var(--mac-muted); font-size: 12px; }
.mac-journey { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 66px; }.mac-journey article { padding: 32px; border-radius: 24px; background: #f5f5f7; }.mac-journey .mac-journey-new { background: #e8f2ff; }.mac-journey span, .mac-value-pair span, .mac-feature-grid span, .mac-config span, .mac-demo-grid span, .mac-roadmap-grid span { color: var(--mac-blue); font-size: 11px; font-weight: 700; letter-spacing: .09em; }.mac-journey h3 { margin: 20px 0 31px; font-size: 27px; letter-spacing: -.05em; }.mac-journey ol { display: grid; gap: 14px; margin: 0; padding-left: 20px; color: #515154; line-height: 1.5; }.mac-statement { max-width: 820px; margin: 60px 0 0; font-size: clamp(23px, 2.6vw, 37px); font-weight: 700; line-height: 1.4; letter-spacing: -.055em; }
.mac-value-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 65px; }.mac-value-pair article { padding: 33px; border-radius: 26px; background: #fff; }.mac-value-pair strong { display: block; margin-top: 16px; font-size: 30px; letter-spacing: -.05em; }.mac-value-pair p { max-width: 380px; margin: 16px 0 0; color: #515154; font-size: 14px; line-height: 1.65; }.mac-scope { margin-top: 52px; border-top: 1px solid var(--mac-line); }.mac-scope div { display: grid; grid-template-columns: 150px 1fr; gap: 30px; padding: 23px 0; border-bottom: 1px solid var(--mac-line); }.mac-scope b { color: var(--mac-blue); font-size: 14px; }.mac-scope p { margin: 0; color: #424245; line-height: 1.6; }
.mac-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; margin-top: 65px; }.mac-feature-grid h3 { margin: 18px 0; font-size: 29px; letter-spacing: -.05em; }.mac-feature-grid p { max-width: 460px; margin: 0; color: #515154; line-height: 1.75; }.mac-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 76px; background: var(--mac-line); }.mac-roles article { min-height: 200px; padding: 28px; background: #fff; }.mac-roles b { color: var(--mac-blue); }.mac-roles p { margin: 38px 0 0; color: #515154; font-size: 14px; line-height: 1.65; }
.mac-dark { margin: 0 calc(50% - 50vw); padding-right: max(24px, calc((100vw - 1180px) / 2)); padding-left: max(24px, calc((100vw - 1180px) / 2)); border: 0; background: #000; color: #f5f5f7; }.mac-dark .mac-label { color: #86868b; }.mac-dark h2 { color: #fff; }.mac-ku { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 65px; }.mac-ku article { padding: 33px; border-radius: 28px; background: #08368d; }.mac-ku article span { color: #b9d8ff; font-size: 11px; font-weight: 700; letter-spacing: .1em; }.mac-ku article p { margin: 29px 0 0; font-size: 17px; font-weight: 700; line-height: 1.45; }.mac-ku > div { display: grid; gap: 20px; padding: 7px 28px; }.mac-ku > div p { margin: 0; color: #d2d2d7; line-height: 1.7; }.mac-ku b { color: #fff; }.mac-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 74px; border-top: 1px solid #424245; border-left: 1px solid #424245; }.mac-sources article { padding: 25px; border-right: 1px solid #424245; border-bottom: 1px solid #424245; }.mac-sources b { color: #6eb4ff; font-size: 12px; }.mac-sources p { margin: 34px 0 8px; color: #fff; font-size: 17px; font-weight: 700; }.mac-sources span { color: #a1a1a6; font-size: 13px; line-height: 1.5; }
.mac-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 63px; padding: 26px; border-radius: 26px; background: #f5f5f7; }.mac-flow span { padding: 10px 13px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 700; }.mac-flow i { color: var(--mac-blue); font-style: normal; }.mac-config { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }.mac-config article { min-height: 190px; padding: 26px; border-radius: 22px; background: #f5f5f7; }.mac-config b { display: block; margin-top: 31px; font-size: 16px; line-height: 1.55; letter-spacing: -.02em; }
.mac-blue { margin: 0 calc(50% - 50vw); padding-right: max(24px, calc((100vw - 1180px) / 2)); padding-left: max(24px, calc((100vw - 1180px) / 2)); border: 0; background: #e9f2ff; }.mac-demo-note { margin: 27px 0 0; color: #515154; font-size: 14px; }.mac-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 61px; }.mac-demo-grid article { position: relative; min-height: 270px; padding: 30px; overflow: hidden; border-radius: 26px; background: #003f8f; color: #fff; }.mac-demo-grid article:nth-child(2) { background: #0066cc; }.mac-demo-grid article:nth-child(3) { background: #1d1d1f; }.mac-demo-grid article:nth-child(4) { background: #1d4e89; }.mac-demo-grid article::after { position: absolute; right: -36px; bottom: -66px; width: 235px; height: 235px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; content: ""; }.mac-demo-grid span { position: relative; z-index: 1; color: #dcecff; }.mac-demo-grid h3 { position: relative; z-index: 1; max-width: 400px; margin: 37px 0 12px; font-size: 25px; line-height: 1.3; letter-spacing: -.04em; }.mac-demo-grid p { position: relative; z-index: 1; margin: 0; color: #edf5ff; font-size: 14px; line-height: 1.6; }.mac-demo-grid em { position: absolute; z-index: 1; bottom: 28px; font-size: 12px; font-style: normal; font-weight: 700; }
.mac-validation-note { max-width: 700px; margin: 28px 0 0; color: #515154; line-height: 1.7; }.mac-scores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 62px; border-top: 1px solid var(--mac-line); border-left: 1px solid var(--mac-line); }.mac-scores article { min-height: 220px; padding: 24px; border-right: 1px solid var(--mac-line); border-bottom: 1px solid var(--mac-line); }.mac-scores b { display: block; color: var(--mac-blue); font-size: clamp(33px, 3vw, 50px); letter-spacing: -.07em; }.mac-scores span { display: block; margin-top: 39px; font-size: 12px; font-weight: 700; }.mac-scores p { margin: 9px 0 0; color: #515154; font-size: 12px; line-height: 1.55; }.mac-failure { display: grid; grid-template-columns: 210px 1fr; gap: 32px; margin-top: 65px; padding: 29px; border-radius: 24px; background: #f5f5f7; }.mac-failure > span { color: var(--mac-blue); font-size: 12px; font-weight: 700; letter-spacing: .09em; }.mac-failure h3 { margin: 0; font-size: 23px; letter-spacing: -.05em; }.mac-failure p { max-width: 720px; margin: 14px 0 0; color: #515154; line-height: 1.65; }.mac-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }.mac-checks article { padding: 29px; border-radius: 24px; background: #f5f5f7; }.mac-checks b { color: var(--mac-blue); }.mac-checks p { margin: 24px 0 0; color: #515154; font-size: 14px; line-height: 1.65; }
.mac-roadmap { background: #000; color: #f5f5f7; }.mac-roadmap .mac-label { color: #86868b; }.mac-roadmap h2 { color: #fff; }.mac-roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 63px; }.mac-roadmap-grid article { min-height: 290px; padding: 29px; border-radius: 26px; background: #1d1d1f; }.mac-roadmap-grid span { color: #6eb4ff; }.mac-roadmap-grid h3 { margin: 39px 0 12px; font-size: 29px; letter-spacing: -.05em; }.mac-roadmap-grid p { margin: 0; color: #d2d2d7; font-size: 14px; line-height: 1.7; }.mac-roadmap blockquote { max-width: 870px; margin: 84px 0 0; color: #fff; font-size: clamp(24px, 2.7vw, 38px); font-weight: 700; line-height: 1.4; letter-spacing: -.055em; }.mac-footer { display: flex; justify-content: space-between; gap: 20px; padding: 34px 0 0; color: #86868b; font-size: 13px; }.mac-footer a { color: var(--mac-blue); font-weight: 700; text-decoration: none; }
@media (max-width: 820px) { .mac-hero-meta, .mac-insight-grid, .mac-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mac-two-col, .mac-feature-grid, .mac-ku { grid-template-columns: 1fr; gap: 32px; }.mac-scene-grid, .mac-value-pair, .mac-journey, .mac-checks, .mac-demo-grid { grid-template-columns: 1fr; }.mac-scene { min-height: 0; }.mac-roles, .mac-sources, .mac-config, .mac-roadmap-grid { grid-template-columns: 1fr; }.mac-flow { padding: 20px; }.mac-roles article, .mac-sources article { min-height: 0; } }
@media (max-width: 560px) { .mac-case-shell { width: min(100% - 32px, 1180px); }.mac-hero { padding-top: 80px; }.mac-hero h1 { font-size: clamp(54px, 15vw, 78px); }.mac-hero-visual { border-radius: 24px; }.mac-hero-meta { margin-top: 60px; }.mac-hero-meta div { min-height: 92px; padding: 16px; }.mac-hero-meta dd { font-size: 13px; }.mac-toc { justify-content: flex-start; gap: 18px; }.mac-section { padding: 76px 0; }.mac-section h2 { font-size: clamp(38px, 11vw, 56px); }.mac-scope div { grid-template-columns: 72px 1fr; gap: 18px; }.mac-failure { grid-template-columns: 1fr; gap: 20px; }.mac-footer { flex-direction: column; } }