/* Wallpaper AI Workflow case page — inherits site tokens */
@font-face{font-family:"tiktok";src:url("/fonts/TikTokSans.ttf") format("truetype");font-weight:100 900;font-display:swap;}
@font-face{font-family:"mono";src:url("/fonts/GeistMono[wght].ttf") format("truetype");font-weight:100 900;font-display:swap;}
@font-face{font-family:"tronica-mono";src:url("/fonts/DepartureMono-Regular.otf") format("opentype");font-weight:400;font-display:swap;}

html,body{margin:0;padding:0;background:var(--background-1);color:var(--label-1);font-family:var(--font-sans);}
html{height:auto!important;overflow:visible!important;}
body{min-height:100vh!important;height:auto!important;overflow:visible!important;overflow-y:auto!important;scrollbar-width:thin;}

.shell-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.75rem;font-family:var(--font-mono-2);font-size:.875rem;color:var(--label-1);pointer-events:none;}
.shell-header a,.shell-header button{pointer-events:auto;color:inherit;text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:.5rem;text-transform:uppercase;}
.shell-header a:hover,.shell-header button:hover{color:var(--label-1);}
.shell-header a:focus-visible,.shell-header button:focus-visible{outline:2px solid var(--selection-bg);outline-offset:2px;}
.shell-brand{font-family:var(--font-sans);font-weight:700;font-variation-settings:"wght" 700,"wdth" 120;text-transform:uppercase;}
.shell-nav{display:flex;gap:.5rem 1rem;flex-wrap:wrap;}
@media (max-width:1023px){.shell-nav .hide-sm{display:none;}}

.article{max-width:880px;margin:0 auto;padding:7.5rem 1.5rem 6rem;color:var(--label-1);}
/* aDrive article header: large bold title → gray date → rule → gray summary */
.article-title{
  margin:0;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.2;
  letter-spacing:-0.03em;
  color:#000;
}
.article-date{
  margin:1rem 0 0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:26px;
  color:rgba(54,54,48,.6);
  font-variant-numeric:tabular-nums;
}
.article-meta .tag-row{
  margin:1rem 0 0;
}
.article-rule{margin:1.25rem 0 0;border:0;border-bottom:1px solid var(--line);height:0;}
.article-summary{
  margin:1.25rem 0 0;
  color:rgba(54,54,48,.6);
  font-size:16px;
  line-height:26px;
}
.article-meta{margin-bottom:3.5rem;}
.article-meta + .lead,
.article-meta + p,
.article-meta + .chapter,
.article-meta + figure{
  margin-top:0;
}
.article-meta p.article-sub{margin:0;font-family:inherit;font-size:16px;line-height:26px;color:rgba(54,54,48,.6);}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 1.25rem;margin:1.25rem 0 0;padding:0;list-style:none;}
@media (min-width:640px){.meta-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.meta-grid li{font-family:var(--font-mono);font-size:.8125rem;line-height:1.5;color:var(--label-2);}
.meta-grid b{display:block;font-family:var(--font-mono-2);font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--label-3);margin-bottom:.25rem;font-weight:400;}
.meta-grid span{color:var(--label-1);}

.lead{margin:1.5rem 0 0;color:#3c3c36;font-size:16px;line-height:26px;}
.lead + .lead{margin-top:1rem;}
.tag-row{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.25rem 0 0;padding:0;list-style:none;}
.tag-row li{font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;color:var(--label-2);border:1px solid var(--line);padding:.25rem .5rem;}

.chapter{margin:3.25rem 0 0;padding-top:.25rem;border-top:1px solid var(--line);}
@media (min-width:1024px){.chapter{margin-top:4rem;}}
.chapter-index{margin:24px 0 8px;font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--label-3);}
/* adrive article metrics: black body 16/26, mb 16; h2 24/30 w600; h3 20/27.5 w600 */
.chapter h2.insight,.insight{
  margin:0 0 16px;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:24px;
  line-height:30px;
  letter-spacing:-0.6px;
  color:#2f2f2b;
  scroll-margin-top:6rem;
}
.chapter h3{
  margin:40px 0 16px;
  font-family:var(--font-sans);
  font-weight:600;
  font-size:20px;
  line-height:27.5px;
  letter-spacing:-0.5px;
  color:#2f2f2b;
  scroll-margin-top:6rem;
}
.chapter p{
  margin:0 0 16px;
  color:#3c3c36;
  font-size:16px;
  line-height:26px;
  font-weight:400;
  letter-spacing:normal;
}
.chapter p strong,.chapter p b{color:#2f2f2b;font-weight:600;}
.chapter a{color:#2f2f2b;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--label-3);transition:text-decoration-color .15s ease;}
.chapter a:hover{text-decoration-color:var(--label-2);}
.chapter a:focus-visible{outline:2px solid var(--selection-bg);outline-offset:2px;}
/* Site Tailwind preflight sets ol/ul{list-style:none}; restore content-list bullets. */
.chapter > ul,
.chapter > ol,
.panel > ul,
.split-card > ul{
  margin:0 0 16px;
  padding:0;
  list-style:none;
  color:#3c3c36;
  font-size:16px;
  line-height:26px;
}
.chapter > ul:not(.field-list):not(.site-list) > li,
.chapter > ol > li,
.panel > ul > li,
.split-card > ul > li{
  position:relative;
  padding-left:1.05rem;
  margin:.35rem 0 0;
}
.chapter > ul:not(.field-list):not(.site-list) > li:first-child,
.chapter > ol > li:first-child,
.panel > ul > li:first-child,
.split-card > ul > li:first-child{margin-top:0;}
.chapter > ul:not(.field-list):not(.site-list) > li::before,
.chapter > ol > li::before,
.panel > ul > li::before,
.split-card > ul > li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--selection-bg);
}
.chapter > ol{counter-reset:path-item;}
.chapter > ol > li{counter-increment:path-item;}
.chapter > ol > li::before{
  content:counter(path-item);
  top:.15em;
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
  color:var(--selection-bg);
  font-family:var(--font-mono-2);
  font-size:.72rem;
  font-weight:600;
  line-height:1.6;
}
.chapter > ol.path-dots > li::before{
  content:"";
  top:.68em;
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--selection-bg);
}
.chapter code{
  font-family:var(--font-mono);
  font-size:.88em;
  color:var(--label-1);
  background:rgba(54,54,48,.07);
  padding:.12em .4em;
  border-radius:3px;
  border:0;
}

/* no quote boxes — plain body text */

.figure{margin:1.5rem 0 0;}
.figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:#fff;}
.figure figcaption{margin:.5rem 0 0;font-family:var(--font-mono);font-size:.8125rem;line-height:1.6;color:var(--label-2);}
.figure--hero{margin-top:1.75rem;}
.figure--pair{display:grid;gap:1.25rem;margin:1.5rem 0 0;}
@media (min-width:720px){.figure--pair{grid-template-columns:1fr 1fr;}}
.figure--pair .figure{margin:0;}

.flow-block{margin:1.35rem 0 2rem;border:1px solid var(--line);background:rgba(var(--label-d),.03);padding:1rem 1rem .85rem;overflow-x:auto;}
.flow-block + p,
.flow-block + h3,
.flow-block + ul,
.flow-block + ol,
.flow-block + figure,
.flow-block + .diagram,
.flow-block + .flow-block{
  margin-top:2rem;
}
.flow-block .flow-label{margin:0 0 .65rem;font-family:var(--font-mono-2);font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--label-3);}
.flow-block pre{margin:0;font-family:var(--font-mono);font-size:.8125rem;line-height:1.7;color:var(--label-1);white-space:pre;}
.flow-block .flow-caption{margin:.75rem 0 0;font-family:var(--font-mono);font-size:.75rem;color:var(--label-2);}

.diagram{margin:1.35rem 0 0;border:1px solid var(--line);padding:1rem .85rem;background:rgba(var(--label-d),.03);overflow-x:auto;color:var(--label-1);}
.diagram svg{display:block;width:100%;min-width:280px;height:auto;}
.diagram svg text{fill:var(--label-1);}
.diagram svg text[fill^="rgba"]{fill:var(--label-2);}
.diagram svg rect[fill="#c0fe04"]{fill:var(--selection-bg);stroke:var(--label-3);}
.diagram svg line,.diagram svg marker path{stroke:var(--label-3);}
.diagram-caption{margin:0 0 .65rem;font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--label-2);}

.data-table-wrap{margin:1.25rem 0 0;overflow-x:auto;border:1px solid var(--line);}
.data-table{width:100%;border-collapse:collapse;font-size:.875rem;}
.data-table th,.data-table td{padding:.7rem .85rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.data-table th{font-family:var(--font-mono-2);font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--label-3);font-weight:400;background:rgba(54,54,48,.03);}
.data-table td{color:var(--label-2);line-height:1.55;}
.data-table tr:last-child td{border-bottom:0;}
.data-table td:first-child{color:var(--label-1);font-weight:600;white-space:nowrap;}

.pill-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.65rem;}
.pill-list li{border:1px solid var(--line);padding:.85rem 1rem;}
.pill-list b{display:block;font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;color:var(--label-2);margin-bottom:.35rem;font-weight:400;}
.pill-list span{font-size:.875rem;line-height:1.65;color:var(--label-2);}

.two-col{display:grid;gap:.85rem;margin:1.25rem 0 1.75rem;}
.two-col + p,
.two-col + h3,
.split-table + p,
.split-table + h3,
.skill-grid + p,
.skill-grid + h3,
.skill-grid + ul,
.split-table + ul,
.two-col + ul,
.two-col + .flow-block,
.split-table + .flow-block,
.skill-grid + .flow-block,
.two-col + figure,
.split-table + figure,
.skill-grid + figure{
  margin-top:1.75rem;
}
@media (min-width:720px){.two-col{grid-template-columns:1fr 1fr;}}
.panel{
  border:1px solid var(--line);
  background:rgba(var(--label-d),.02);
  padding:1rem 1.1rem 1.05rem;
  border-radius:0;
}
.panel h3{margin:0 0 12px;font-family:var(--font-sans);font-size:18px;line-height:26px;font-weight:600;color:#2f2f2b;}
.panel p{margin:0 0 12px;color:#3c3c36;font-size:15px;line-height:24px;}
.panel p:last-child{margin-bottom:0;}
.panel ul{margin:0 0 12px;padding-left:1.1rem;color:#3c3c36;font-size:15px;line-height:24px;}
.panel ul:last-child{margin-bottom:0;}
.panel .panel-line{margin:12px 0 0;color:#2f2f2b;font-size:15px;line-height:24px;font-weight:600;}

.field-list,
.site-list{
  list-style:none;
  margin:1rem 0 0;
  padding:0;
  display:grid;
  gap:.5rem;
  align-items:stretch;
}
.field-list{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.site-list{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}

.chapter > ul.field-list > li,
.chapter > ul.site-list > li,
ul.field-list > li,
ul.site-list > li{
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  height:2.5rem;
  min-height:2.5rem;
  max-height:2.5rem;
  margin:0;
  border:1px solid var(--line);
  background:rgba(var(--label-d),.02);
  line-height:1.25;
  color:var(--label-1);
}
.chapter > ul.field-list > li::before,
.chapter > ul.site-list > li::before,
ul.field-list > li::before,
ul.site-list > li::before{
  content:"";
  position:absolute;
  left:.55rem;
  top:50%;
  width:.4rem;
  height:.4rem;
  margin:0;
  border-radius:50%;
  background:var(--selection-bg);
  transform:translateY(-50%);
}
ul.field-list > li{
  padding:0 .65rem 0 1.35rem;
  font-family:var(--font-mono);
  font-size:.75rem;
}
ul.site-list > li{
  justify-content:center;
  padding:0 1.25rem;
  font-family:var(--font-mono-2);
  font-size:.75rem;
  text-transform:uppercase;
  text-align:center;
}

.skill-grid{display:grid;gap:.85rem;margin:1.25rem 0 1.75rem;}
@media (min-width:720px){.skill-grid{grid-template-columns:1fr 1fr 1fr;}}
.skill-card{
  border:1px solid var(--line);
  background:rgba(var(--label-d),.02);
  padding:1rem 1.1rem 1.05rem;
}
.skill-card b{display:block;font-family:var(--font-sans);font-weight:700;font-size:1rem;color:#2f2f2b;margin:.25rem 0 .55rem;font-variation-settings:"wdth" 120;}
.skill-card span{display:block;font-family:var(--font-mono-2);font-size:.6875rem;text-transform:uppercase;color:var(--label-3);letter-spacing:.04em;}
.skill-card p{margin:0;color:#3c3c36;font-size:.875rem;line-height:1.6;}

.split-table{display:grid;gap:.85rem;margin:1.25rem 0 1.75rem;}
@media (min-width:640px){.split-table{grid-template-columns:1fr 1fr;}}
.split-card{
  border:1px solid var(--line);
  background:rgba(var(--label-d),.02);
  padding:1rem 1.1rem 1.05rem;
}
.split-card h3{margin:0 0 .65rem;font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;color:var(--label-2);font-weight:400;}
.split-card ul{margin:0;padding-left:1.1rem;color:#3c3c36;font-size:.9375rem;line-height:1.7;}

.info-grid{display:grid;gap:.75rem;margin:1.25rem 0 0;padding:0;}
@media (min-width:720px){.info-grid{grid-template-columns:1fr 1fr;}}
.info-item{border:1px solid var(--line);padding:.9rem 1rem;}
.info-item b{display:block;font-family:var(--font-mono-2);font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em;color:var(--label-3);margin-bottom:.4rem;font-weight:400;}
.info-item span{display:block;font-size:.875rem;line-height:1.65;color:var(--label-1);}
.info-item--wide{grid-column:1/-1;}

/* Metadata panel — aligned with haoqi.design article footer card */
.page-meta{
  margin:3.5rem 0 0;
  padding:1.75rem 1.5rem 1.85rem;
  border-radius:20px;
  background:rgba(var(--label-d),.06);
  border:0;
}
@media (min-width:720px){
  .page-meta{padding:2rem 2.25rem 2.15rem;}
}
.page-meta__title{
  margin:0 0 1.5rem;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.2;
  letter-spacing:-0.02em;
  font-variation-settings:"wdth" 120;
  color:var(--label-1);
}
.page-meta__row{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem 2rem;
}
@media (min-width:720px){
  .page-meta__row{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.page-meta__field h3{
  margin:0 0 .55rem;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:1rem;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--label-1);
}
.page-meta__field p{
  margin:0;
  font-family:var(--font-mono);
  font-size:.9375rem;
  line-height:1.7;
  color:var(--label-2);
  font-variant-numeric:tabular-nums;
}
.page-meta__field p + p{margin-top:.15rem;}
.page-meta__field a{
  color:var(--label-2);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}
.page-meta__field a:hover{
  color:var(--label-1);
  border-bottom-color:var(--label-3);
}
.page-meta__field a:focus-visible{
  outline:2px solid var(--selection-bg);
  outline-offset:2px;
}
.page-meta__rule{
  margin:1.5rem 0 1.35rem;
  border:0;
  border-bottom:1px dashed var(--label-3);
  opacity:.55;
  height:0;
}
.page-meta__row--links .page-meta__field:first-child h3{margin-bottom:0;}
@media (min-width:720px){
  .page-meta__row--links .page-meta__field:first-child{padding-top:.05rem;}
}

.closing{margin-top:3.5rem;padding:1.75rem 0 0;border-top:1px solid var(--line);}
.closing-kicker{font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;color:var(--label-3);margin:0 0 .75rem;}
.closing h2{margin:0;font-family:var(--font-sans);font-weight:700;font-size:clamp(1.6rem,3.5vw,2.4rem);line-height:1.1;letter-spacing:-0.02em;font-variation-settings:"wdth" 120;}
.closing h2 span{display:block;}
.closing .closing-note{margin:1.25rem 0 0;color:var(--label-2);font-size:.9375rem;line-height:1.7;}
.closing .closing-line{margin:1.25rem 0 0;font-family:var(--font-mono-2);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--label-3);}
.closing-actions{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.25rem;font-family:var(--font-mono-2);font-size:.8125rem;text-transform:uppercase;}
.closing-actions a{color:var(--label-2);text-decoration:none;border-bottom:1px solid transparent;}
.closing-actions a:hover{color:var(--label-1);border-bottom-color:var(--label-3);}
.closing-actions a:focus-visible{outline:2px solid var(--selection-bg);outline-offset:2px;}

/* Inspire Mono download-button capsule — used for external jump CTAs */
a.capsule-link,
.chapter a.capsule-link,
.info-item a.capsule-link,
.info-item span a.capsule-link,
.page-meta dd a.capsule-link{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  min-width:0;
  height:52px;
  margin:1.5rem 0;
  padding:0 20px;
  border-radius:9999px;
  background:var(--line);
  color:var(--label-1);
  font-family:var(--font-sans);
  font-weight:500;
  font-size:.875rem;
  line-height:1;
  text-decoration:none;
  text-decoration-color:transparent;
  text-underline-offset:0;
  text-align:center;
  outline:none;
  box-sizing:border-box;
  transition:background-color .3s ease,color .3s ease;
  flex-shrink:0;
}
@media (hover:hover){
  .capsule-link:hover{
    background:rgba(var(--label-d),.18);
    color:var(--label-1);
  }
}
.capsule-link:focus-visible{
  outline:2px solid var(--selection-bg);
  outline-offset:2px;
}
a.capsule-link.capsule-link--inline,
.info-item span a.capsule-link.capsule-link--inline{
  display:inline-flex;
  width:auto;
  max-width:100%;
  margin:.75rem 0 0;
  padding:0 1.35rem;
  height:44px;
  font-size:.8125rem;
  text-decoration:none;
}
.capsule-stack{
  display:grid;
  gap:.65rem;
  margin:1.5rem 0 0;
}
.capsule-stack a.capsule-link{margin:0;text-decoration:none;}
.capsule-stack a.capsule-link--ghost{
  background:transparent;
  border:1px solid var(--line);
  text-decoration:none;
}
@media (hover:hover){
  .capsule-stack .capsule-link--ghost:hover{
    background:var(--line);
  }
}

.page-foot{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-family:var(--font-mono-2);font-size:.8125rem;text-transform:uppercase;}
.page-foot a{color:var(--label-2);text-decoration:none;border-bottom:1px solid transparent;}
.page-foot a:hover{color:var(--label-1);border-bottom-color:var(--label-3);}
.page-foot a:focus-visible{outline:2px solid var(--selection-bg);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;}
}