/* SmartYard case: narrative, operational context and clean interface evidence. */
.smartyard-case { --sy-blue:#8ebaff; --sy-line:color-mix(in srgb,var(--sy-blue) 28%,var(--color-border)); }
[data-theme="light"] .smartyard-case { --sy-blue:#2457c5; }
.smartyard-case [id] { scroll-margin-top:94px; }
.smartyard-case .case-section-label { color:var(--color-text-muted); }
.smartyard-case .case-body,.smartyard-case .case-decision-item__a p { color:color-mix(in srgb,var(--color-text) 72%,var(--color-bg)); }
.smartyard-case .case-body a { text-decoration:underline; text-underline-offset:4px; }
.smartyard-case .case-intro { padding-top:50px; padding-bottom:40px; }
.smartyard-case .case-back { display:inline-block; color:var(--color-text-muted); font-size:13px; margin-bottom:36px; }
.smartyard-case .case-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.smartyard-case .case-title { margin-bottom:10px; font-size:clamp(38px,4.4vw,66px); font-weight:500; letter-spacing:-.05em; }
.sy-kicker { color:var(--color-text-muted); font-size:14px; line-height:1.5; }
.sy-analogy { margin-top:48px; border-top:1px solid var(--sy-line); border-bottom:1px solid var(--sy-line); padding:36px 0; }
.sy-analogy__lead { max-width:25ch; font-size:clamp(30px,3.9vw,58px); font-weight:500; line-height:1.16; letter-spacing:-.045em; text-wrap:pretty; }
.sy-analogy__lead > span { color:var(--sy-blue); }
.sy-analogy__bottom { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-top:28px; }
.sy-analogy__bottom > p { max-width:35ch; font-size:clamp(17px,1.7vw,23px); line-height:1.5; color:var(--color-text-muted); letter-spacing:-.02em; }
.sy-puzzle { flex:0 0 210px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; transform:rotate(-4deg); }
.sy-puzzle i { height:28px; border:1px solid var(--sy-line); border-radius:3px; background:repeating-linear-gradient(90deg,transparent 0 10px,var(--sy-line) 11px 12px),color-mix(in srgb,var(--sy-blue) 10%,var(--color-bg)); }
.sy-puzzle i:nth-child(3),.sy-puzzle i:nth-child(8) { opacity:.25; border-style:dashed; background:none; transform:translate(9px,-9px); }
.sy-puzzle i:nth-child(10) { background:var(--sy-blue); }
.sy-intro-copy { max-width:790px; margin-top:28px; font-size:18px; line-height:1.65; }
.smartyard-case .case-meta-row { margin-top:32px; margin-bottom:20px; gap:clamp(28px,6vw,90px); }
.sy-chapters { display:flex; flex-wrap:wrap; gap:12px 30px; color:var(--color-text-muted); font-size:12px; padding-top:8px; }
.sy-chapters a:hover { color:var(--sy-blue); }
.sy-hero { max-width:1440px; padding:20px 60px 40px; margin:auto; }
.sy-hero > a { display:block; padding:32px; border:1px solid #dbe7f8; border-radius:14px; background:linear-gradient(135deg,#edf5ff,#c8dcf6); }
.sy-hero img { width:100%; height:auto; border-radius:7px; box-shadow:0 16px 36px #263d5b1f; }
.sy-hero figcaption { font-size:12px; color:var(--color-text-muted); line-height:1.6; margin-top:16px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 30px; }
.sy-hero figcaption a,.sy-screen figcaption a { text-decoration:underline; text-underline-offset:3px; }
.smartyard-case .case-numbers { background:none; border-block:1px solid var(--color-border); }
.smartyard-case .case-number { font-weight:500; }
.smartyard-case .case-number-desc { max-width:24ch; }
.sy-global-flow { margin-top:36px; border:1px solid var(--color-border); border-radius:12px; padding:30px 24px 22px; background:var(--color-surface); }
.sy-global-flow ol { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); list-style:none; gap:20px; }
.sy-global-flow li { position:relative; min-width:0; }
.sy-route-icon { display:flex; align-items:center; width:100%; height:42px; color:var(--color-text-muted); font:12px/1 ui-monospace,SFMono-Regular,monospace; margin-bottom:18px; }
.sy-route-icon::after { content:''; flex:1; height:1px; margin-left:14px; background:var(--color-border); }
.sy-global-flow li:not(:last-child)::after { content:'→'; position:absolute; top:13px; right:-14px; font-size:13px; color:var(--color-text-muted); }
.sy-global-flow strong { display:block; font-size:14px; font-weight:500; }
.sy-global-flow li p { font-size:12px; line-height:1.65; color:var(--color-text-muted); margin-top:10px; }
.sy-route-terminal .sy-route-icon,.sy-route-terminal strong { color:var(--sy-blue); }
.sy-global-flow figcaption,.sy-fragmentation figcaption { padding-top:24px; margin-top:28px; border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:12px; line-height:1.6; }
.sy-source { font-size:11px; line-height:1.6; color:var(--color-text-muted); margin-top:16px; }
.sy-source a { text-decoration:underline; text-underline-offset:3px; }
.sy-fragmentation { margin-top:36px; }
.sy-data-sources { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.sy-source-card { min-width:0; border:1px solid var(--color-border); border-radius:12px; padding:26px; background:var(--color-surface); }
.sy-source-card h3 { margin-top:24px; font-size:18px; font-weight:500; letter-spacing:-.02em; }
.sy-source-card p { margin-top:12px; font-size:14px; line-height:1.6; color:var(--color-text-muted); }
.sy-sheet,.sy-memory,.sy-radio { height:114px; }
.sy-sheet { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:24px repeat(3,1fr); border:1px solid var(--sy-line); border-radius:4px; overflow:hidden; transform:rotate(-3deg); }
.sy-sheet span { display:grid; align-items:center; font:7px/1 ui-monospace,monospace; padding-left:6px; color:var(--sy-blue); background:color-mix(in srgb,var(--sy-blue) 8%,transparent); }
.sy-sheet i { border-top:1px solid var(--sy-line); border-right:1px solid var(--sy-line); position:relative; }
.sy-sheet i:after { content:''; position:absolute; top:12px; left:10px; width:40%; border-top:2px solid var(--sy-line); }
.sy-sheet i:nth-last-child(2) { background:color-mix(in srgb,var(--sy-blue) 15%,transparent); }
.sy-memory { display:flex; justify-content:center; align-items:center; position:relative; }
.sy-memory span { display:block; border:1px solid var(--sy-line); padding:16px 25px; border-radius:32px; color:var(--sy-blue); font-size:14px; line-height:1.4; transform:rotate(3deg); }
.sy-memory i { position:absolute; bottom:10px; right:25%; width:9px; height:9px; border:1px solid var(--sy-line); border-radius:50%; }
.sy-memory i:nth-of-type(2) { bottom:0; right:21%; width:5px; height:5px; }
.sy-memory i:nth-of-type(3) { bottom:-6px; right:18%; width:3px; height:3px; }
.sy-radio { display:flex; align-items:center; justify-content:center; gap:8px; }
.sy-radio i { display:block; flex:0 1 6px; height:26px; border-radius:8px; background:var(--sy-blue); opacity:.55; }
.sy-radio i:nth-child(3n) { height:64px; opacity:1; }.sy-radio i:nth-child(4n) { height:42px; }.sy-radio i:nth-child(5n) { height:86px; opacity:.8; }
.sy-data-gap { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; padding:28px 12px 0; font-size:12px; color:var(--color-text-muted); }
.sy-data-gap i { width:80px; border-top:1px dashed var(--sy-line); position:relative; }
.sy-data-gap i::after { content:'×'; position:absolute; top:-11px; left:30px; background:var(--color-bg); padding:0 7px; color:var(--sy-blue); font-size:17px; }
.sy-data-gap strong { color:var(--color-text); font-weight:500; }
.sy-fragmentation figcaption { text-align:center; }
.sy-guess { margin-top:64px; padding:46px 0 16px; border-top:1px solid var(--sy-line); }
.sy-guess > p { font-size:clamp(36px,5.3vw,76px); font-weight:500; letter-spacing:-.055em; line-height:1.13; margin:22px 0; }
.sy-guess em { font-style:normal; color:var(--sy-blue); }
.sy-guess > span:last-child { color:var(--color-text-muted); font-size:14px; line-height:1.6; }
.sy-mission { border-block:1px solid var(--color-border); }
.sy-mission h2 { max-width:24ch; font-size:clamp(26px,3.2vw,44px); letter-spacing:-.035em; font-weight:500; line-height:1.2; margin-bottom:24px; }
.sy-roles { margin-top:38px; }
.smartyard-case .case-decision-item__q { color:var(--sy-blue); }
.smartyard-case .case-decision-item__a p+p { margin-top:14px; }
.smartyard-case .case-decision-item__a strong { color:var(--color-text); font-weight:500; }
.sy-screen-section { padding-top:36px; padding-bottom:44px; }
.sy-screen-heading > span { display:block; font:11px/1.4 ui-monospace,SFMono-Regular,monospace; color:var(--sy-blue); margin-bottom:16px; }
.sy-screen-heading .case-body { max-width:760px; }
.sy-screen { margin-top:32px; }
.sy-screen > a { display:block; border:1px solid #e1e8f1; border-radius:10px; overflow:hidden; background:#f4f7fc; }
.sy-screen img { width:100%; height:auto; display:block; }
.sy-screen figcaption { color:var(--color-text-muted); font-size:12px; line-height:1.7; padding-top:16px; max-width:100ch; }
.sy-screen figcaption strong { color:var(--color-text); font-weight:500; }
.sy-screen figcaption a { white-space:nowrap; }
.sy-refinements { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin-top:36px; }
.sy-refinements article { padding-top:20px; border-top:1px solid var(--sy-line); }
.sy-refinements article > span { font-size:11px; color:var(--sy-blue); }
.sy-refinements h3 { margin-top:14px; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-.02em; }
.sy-refinements p { margin-top:14px; font-size:14px; color:var(--color-text-muted); line-height:1.7; }
.smartyard-case a:focus-visible { outline:2px solid var(--sy-blue); outline-offset:5px; }
@media(max-width:1399px) { .sy-hero { padding-inline:48px; } }
@media(max-width:900px) { .sy-global-flow ol { grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }.sy-global-flow li::after { display:none; }.sy-data-sources { gap:12px; }.sy-source-card { padding:18px; }.sy-memory span { padding:14px; font-size:12px; }.sy-refinements { gap:22px; } }
@media(max-width:767px) {
  .smartyard-case .case-intro { padding-top:32px; }
  .sy-analogy { margin-top:32px; padding-block:28px; }
  .sy-analogy__bottom { align-items:flex-start; gap:22px; }
  .sy-analogy__bottom > p { font-size:16px; }
  .sy-puzzle { flex-basis:100px; gap:4px; margin-top:10px; }.sy-puzzle i { height:17px; }
  .sy-intro-copy { font-size:16px; }
  .smartyard-case .case-meta-row { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .sy-chapters { gap:12px 20px; }
  .sy-hero { padding:0 24px 28px; }.sy-hero > a { padding:12px; border-radius:9px; }.sy-hero img { border-radius:3px; }.sy-hero figcaption { font-size:11px; }
  .smartyard-case .case-numbers { display:grid; grid-template-columns:1fr; gap:24px; padding-block:32px!important; }
  .smartyard-case .case-number-card { flex-direction:row; align-items:center; padding:0; gap:24px; }.smartyard-case .case-number { font-size:38px; min-width:120px; }.smartyard-case .case-number-desc { font-size:12px; }.smartyard-case .case-number-divider { display:none; }
  .sy-global-flow { padding:12px 20px 22px; }.sy-global-flow ol { grid-template-columns:1fr; gap:0; }.sy-global-flow li { display:grid; grid-template-columns:32px 1fr; column-gap:14px; padding-block:18px; border-bottom:1px solid var(--color-border); }.sy-global-flow li:last-child { border-bottom:none; }.sy-route-icon { grid-row:1 / 3; height:24px; margin:0; }.sy-route-icon:after { display:none; }.sy-global-flow li p { margin-top:6px; }.sy-global-flow figcaption { margin-top:12px; }
  .sy-data-sources { grid-template-columns:1fr; gap:16px; }.sy-source-card { padding:24px; }.sy-source-card h3 { margin-top:20px; }.sy-sheet { max-width:260px; }.sy-memory { justify-content:flex-start; }.sy-memory span { padding:16px 28px; font-size:14px; }.sy-radio { justify-content:flex-start; gap:10px; }.sy-radio i { flex-basis:7px; }.sy-memory i { right:38%; }.sy-memory i:nth-of-type(2) { right:34%; }.sy-memory i:nth-of-type(3) { right:31%; }
  .sy-data-gap { display:grid; justify-items:center; gap:20px; }.sy-data-gap i { width:62px; }
  .sy-guess { margin-top:38px; padding-top:32px; }.sy-guess > p { font-size:42px; }
  .sy-screen-section { padding-top:24px; padding-bottom:32px; }.sy-screen { margin-top:24px; }.sy-screen > a { border-radius:5px; }.sy-screen figcaption { font-size:11px; }
  .sy-refinements { grid-template-columns:1fr; gap:28px; }
}
@media(prefers-reduced-motion:reduce) { .smartyard-case [data-animate] { opacity:1; transform:none; transition:none; } }