/* Mocky: an interactive illustrated workshop inside the existing AI/AX identity. */
/* Keep the shared footer privacy control; suppress only its floating duplicate. */
body:has(.app--article-mocky .footer__privacy-button) .mm-consent-settings { display:none; }
.app--article-mocky { --mk-link: var(--ai-deep); }
.app--article-mocky.theme-dark { --mk-link: var(--ai-glow); }
.app--article-mocky .art-page { max-width: var(--page-max); }
.app--article-mocky .breadcrumb { font-size: var(--fs-body-sm); letter-spacing: 0; text-transform: none; padding-bottom: var(--space-6); }
.app--article-mocky :is(.mk-hero,.mk-story) { font-size: var(--fs-body); line-height: var(--lh-base); }
.app--article-mocky :is(.mk-hero,.mk-story) ::selection { background: var(--ai-soft); color: var(--ai-ink); }
.app--article-mocky :is(.mk-hero,.mk-story) :is(button,a,summary):focus-visible { outline: 3px solid var(--mk-link); outline-offset: 5px; }
.app--article-mocky :is(.mk-hero,.mk-story) :is(h1,h2,h3,p,figure) { margin: 0; }
.app--article-mocky :is(.mk-hero,.mk-story) h2 { font: 600 var(--fs-display-m)/1.13 var(--font-display); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.app--article-mocky :is(.mk-hero,.mk-story) h3 { font: 600 var(--fs-h3)/1.25 var(--font-display); text-wrap: balance; }
.app--article-mocky :is(.mk-hero,.mk-story) p { max-width: 68ch; }
.mk-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0,1.2fr); gap: var(--space-7); align-items: center; padding: var(--space-4) 0 var(--space-7); }
.mk-hero__copy { padding-block: var(--space-6); }
.mk-hero h1 { font: 650 var(--fs-display-l)/1.04 var(--font-display); letter-spacing: -.035em; white-space: pre-line; text-wrap: balance; }

.mk-hero .mk-lead { margin-block:var(--space-6); font-size:var(--fs-h4); line-height:1.6; max-width:38ch; color:var(--fg-muted); }
.mk-button { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--space-5); border:1px solid transparent; border-radius:var(--radius-pill); padding:var(--space-4) var(--space-5); background:var(--ai-ink); color:var(--ai-wash); font:500 var(--fs-body-sm)/1.3 var(--font-body); text-decoration:none; transition:background var(--dur-base),transform var(--dur-base); }
.mk-button:hover { background:var(--ai-deep); color:var(--ai-wash); transform:translateY(-2px); }
.mk-button svg,.mk-text-link svg { flex-shrink:0; }
.mk-text-link { display:flex; align-items:center; gap:var(--space-3); width:fit-content; margin-top:var(--space-5); color:var(--fg); font-size:var(--fs-body-sm); text-decoration:underline; text-decoration-color:var(--border-strong); text-underline-offset:5px; }
.mk-text-link:hover { color:var(--mk-link); }
.mk-workbench { min-width:0; scroll-margin-top:var(--space-8); }
.mk-stage { position:relative; aspect-ratio: 760/570; overflow:hidden; border-radius:var(--radius-xl); isolation:isolate; background:var(--ai-tint); color:var(--ai-ink); }
.mk-room { position:absolute; inset:0; width:100%; height:100%; transition:opacity var(--dur-slow); }
.mk-desk-room,.mk-gallery-room { transition:opacity var(--dur-slow) var(--ease-out); }
.mk-gallery-room,.mk-stage--2 .mk-desk-room { opacity:0; }
.mk-stage--2 .mk-gallery-room { opacity:1; }
.mk-stage--0 .mk-room { opacity:.2; }
.mk-device { position:absolute; width:64%; top:25%; left:13%; transform:perspective(1000px) rotateY(-12deg) rotateX(4deg) rotateZ(-3deg); transition:transform var(--dur-slow) var(--ease-out); }
.mk-device__screen { background:var(--ink-900); border:8px solid var(--ink-900); border-bottom-width:14px; border-radius:var(--radius-sm); box-shadow:var(--shadow-3); position:relative; transition:border-color var(--dur-slow),box-shadow var(--dur-slow); }
.mk-screen-art { width:100%; height:auto; display:block; }
.mk-device__foot { width:14%; height:45px; margin:auto; background:var(--ink-700); transform:skewX(-5deg); transition:opacity var(--dur-slow); }
.mk-device__base { width:42%; height:8px; border-radius:50%; margin:auto; background:var(--ink-900); box-shadow:var(--shadow-3); transition:opacity var(--dur-slow); }
.mk-stage--0 .mk-device { transform: none; left:18%; top:20%; width:64%; }
.mk-stage--0 .mk-device__screen { border-color:var(--paper-50); box-shadow:var(--shadow-2); }
.mk-stage--0 :is(.mk-device__foot,.mk-device__base) { opacity:0; }
.mk-stage--2 .mk-device { left:19%; top:21%; width:62%; transform:perspective(1000px) rotateY(13deg) rotateX(-2deg); }
.mk-source-stamp { position:absolute; left:var(--space-5); bottom:var(--space-5); display:flex; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-3); background:var(--ai-wash); border:1px solid var(--ai-soft); border-radius:var(--radius-pill); font:500 var(--fs-micro)/1.3 var(--font-body); max-width:65%; }
.mk-source-stamp svg { width:18px; flex-shrink:0; }
.mk-guide { position:absolute; width:23%; height:auto; right:1.5%; bottom:2%; transform:rotate(5deg); }
.mk-workbench__controls { padding:var(--space-5) 0 0; }
.mk-control-label { display:block; font:500 var(--fs-body-sm)/1.3 var(--font-body); margin-bottom:var(--space-3); }
.mk-scene-choices { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.mk-scene-choices button { display:flex; align-items:center; justify-content:center; gap:var(--space-2); min-height:46px; flex:1 1 auto; padding:var(--space-3); border:1px solid var(--border-strong); border-radius:var(--radius-pill); background:var(--bg); color:var(--fg); font:500 var(--fs-body-sm)/1.2 var(--font-body); cursor:pointer; transition:background var(--dur-fast),color var(--dur-fast); }
.mk-scene-choices button svg { width:20px; height:20px; }
.mk-scene-choices button:hover { background:var(--ai-tint); color:var(--ai-ink); }
.mk-scene-choices button[aria-pressed=true] { background:var(--ai-ink); color:var(--ai-wash); border-color:var(--ai-ink); }
.mk-workbench .mk-scene-description { font-size:var(--fs-body-sm); margin-top:var(--space-4); min-height:4.7em; color:var(--fg-muted); }
.mk-scene-description strong { color:var(--fg); }
.mk-workbench .mk-demo-note { margin-top:var(--space-3); font-size:var(--fs-body-sm); color:var(--fg-muted); padding-top:var(--space-3); border-top:1px solid var(--border); }
.mk-section { margin-top:var(--space-9); scroll-margin-top:var(--space-8); }
.mk-purpose { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--space-8); border-top:1px solid var(--border-strong); padding-top:var(--space-7); }
.mk-purpose p { margin-top:var(--space-5)!important; color:var(--fg-muted); }
.mk-purpose ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; justify-content:center; gap:var(--space-5); }
.mk-purpose li { display:flex; gap:var(--space-4); font-size:var(--fs-h4); }
.mk-purpose li svg { color:var(--mk-link); flex-shrink:0; }
.mk-inputs { padding:var(--space-7); border-radius:var(--radius-xl); background:var(--bg-pattern); }
.mk-input-flow { display:grid; grid-template-columns:minmax(0,1.2fr) .3fr minmax(0,.8fr); align-items:center; margin-top:var(--space-6); }
.mk-input-list > div { display:flex; gap:var(--space-5); padding-block:var(--space-5); }
.mk-input-list > div+div { border-top:1px solid var(--border); }
.mk-input-list svg { color:var(--mk-link); flex-shrink:0; width:32px; height:32px; }
.mk-input-list p { font-size:var(--fs-body-sm); color:var(--fg-muted); margin-top:var(--space-2)!important; }
.mk-connectors { width:100%; height:320px; color:var(--mk-link); }
.mk-input-result { padding-left:var(--space-5); }
.mk-mini-device { border:8px solid var(--ink-900); border-radius:var(--radius-sm); transform:rotate(4deg); box-shadow:var(--shadow-3); }
.mk-input-result p { margin-top:var(--space-5)!important; text-align:center; font-weight:500; }
.mk-section-intro { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--space-8); align-items:end; }
.mk-section-intro p { color:var(--fg-muted); }
.mk-steps { list-style:none; padding:0; margin:var(--space-7) 0 0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); }
.mk-steps button { display:flex; gap:var(--space-3); align-items:center; width:100%; min-height:78px; background:transparent; color:var(--fg); border:0; border-bottom:2px solid var(--border); cursor:pointer; padding:var(--space-4) 0; font:500 var(--fs-body-sm)/1.3 var(--font-body); text-align:left; }
.mk-steps button>svg { margin-left:auto; flex-shrink:0; }
.mk-step-number { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--border-strong); border-radius:50%; flex-shrink:0; }
.mk-steps button[aria-pressed=true] { border-color:var(--mk-link); color:var(--mk-link); }
.mk-steps button[aria-pressed=true] .mk-step-number { background:var(--ai-ink); border-color:var(--ai-ink); color:var(--ai-wash); }
.mk-steps button:hover { color:var(--mk-link); background:var(--bg-pattern); }
.mk-step-content { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-8); align-items:center; margin-top:var(--space-6); }
.mk-process-art { min-height:290px; display:grid; place-items:center; background:var(--ai-tint); position:relative; border-radius:var(--radius-lg); padding:var(--space-7); overflow:hidden; }
.mk-process-sheet { width:85%; transform:rotate(-6deg); box-shadow:var(--shadow-3); transition:transform var(--dur-slow) var(--ease-out); border:4px solid var(--paper-50); }
.mk-process-art--1 .mk-process-sheet { transform:perspective(600px) rotateY(-20deg) rotateZ(-4deg); }
.mk-process-art--2 .mk-process-sheet { transform:perspective(600px) rotateY(15deg); }
.mk-process-art--3 .mk-process-sheet { transform:rotate(0deg); }
.mk-process-tool { width:66px; height:66px; background:var(--ai-ink); color:var(--ai-wash); display:grid; place-items:center; border-radius:50%; position:absolute; right:12%; bottom:18%; box-shadow:var(--shadow-2); }
.mk-process-tool svg { width:32px; height:32px; }
.mk-process-count { position:absolute; left:var(--space-5); top:var(--space-4); color:var(--ai-ink); font-size:var(--fs-body-sm); }
.mk-step-copy p { margin-top:var(--space-4)!important; color:var(--fg-muted); }
.mk-step-copy .mk-step-detail { font-size:var(--fs-body-sm); padding-top:var(--space-4); border-top:1px solid var(--border); }
.mk-rules { background:var(--surface-inverse-bg); color:var(--surface-inverse-fg); padding:var(--space-8); border-radius:var(--radius-xl); }
.mk-rules .mk-section-intro p, .app--article-mocky .mk-rules :is(h2,h3) { color:var(--surface-inverse-fg); }
.mk-rule-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8); margin-top:var(--space-7); }
.mk-rule-grid > div { border-top:1px solid var(--ai-deep); padding-top:var(--space-5); }
.mk-rule-grid svg { width:36px; height:36px; color:var(--ai-glow); margin-bottom:var(--space-4); }
.mk-rule-grid ul { list-style:none; padding:0; margin:var(--space-4) 0 0; }
.mk-rule-grid li { padding-block:var(--space-2); }
.mk-details { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-8); }
.mk-details details,.mk-original { border-bottom:1px solid var(--border-strong); }
.mk-details details:first-child { border-top:1px solid var(--border-strong); }
.mk-details summary,.mk-original>summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-5) 0; font:500 var(--fs-h4)/1.4 var(--font-body); }
.mk-details summary::-webkit-details-marker,.mk-original>summary::-webkit-details-marker { display:none; }
.mk-details summary svg,.mk-original>summary svg { flex-shrink:0; transition:transform var(--dur-base); }
.mk-details details[open] summary svg,.mk-original[open]>summary svg { transform:rotate(90deg); }
.mk-details summary:hover,.mk-original>summary:hover { color:var(--mk-link); }
.mk-details details p { padding-bottom:var(--space-5); color:var(--fg-muted); }
.mk-mobi { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-7); align-items:center; }
.mk-mobi__art { border-radius:var(--radius-xl); overflow:hidden; background:var(--ai-tint); }
.mk-mobi__art img { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:contain; }
.mk-mobi__copy > p { margin-top:var(--space-5)!important; color:var(--fg-muted); }
.mk-bot-roles { margin-block:var(--space-5); display:grid; gap:var(--space-4); }
.mk-bot-roles p { display:grid; grid-template-columns:65px 1fr; gap:var(--space-4); font-size:var(--fs-body-sm); }
.mk-bot-roles strong { color:var(--mk-link); }
.mk-close { max-width:50rem; margin-inline:auto; padding-block:var(--space-6); text-align:center; }
.mk-close p { margin-top:var(--space-5)!important; margin-inline:auto!important; color:var(--fg-muted); }
.mk-close .mk-author { font-size:var(--fs-body-sm); }
.mk-original { margin-top:var(--space-7); }
.mk-original__content { max-width:70ch; margin:auto; padding-block:var(--space-5); }
.mk-original__content section+section { margin-top:var(--space-7); }
.mk-original__content p { margin-top:var(--space-4)!important; }
.app--article-mocky .art-author-box { display:none; }
.app--article-mocky .art-read-also { display:none; }
@media (min-width:1500px) { .mk-hero h1 { font-size:var(--fs-display-xl); } }
@media (max-width:1100px) {
  .mk-hero { gap:var(--space-6); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .mk-hero h1 { font-size:var(--fs-display-m); }
  .mk-scene-choices button { padding:var(--space-3) var(--space-2); }
  .mk-scene-choices button svg { display:none; }
  .mk-device__foot { height:30px; }
  .mk-section-intro,.mk-purpose,.mk-details,.mk-step-content { gap:var(--space-6); }
  .mk-steps button>svg { display:none; }
}
@media (max-width:800px) {
  .mk-hero { grid-template-columns:1fr; gap:var(--space-5); }
  .mk-hero__copy { padding:0; }
  .mk-hero h1 { font-size:var(--fs-display-l); max-width:16ch; }

  .mk-hero .mk-lead { max-width:58ch; margin-block:var(--space-5); }
  .mk-text-link { display:inline-flex; margin:var(--space-4) 0 var(--space-4) var(--space-4); }
  .mk-purpose,.mk-section-intro,.mk-details { grid-template-columns:1fr; }
  .mk-inputs,.mk-rules { padding:var(--space-6); }
  .mk-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-step-content { gap:var(--space-5); }
  .mk-process-art { padding:var(--space-5); min-height:240px; }
  .mk-rule-grid { gap:var(--space-6); }
  .mk-mobi { gap:var(--space-6); }
}
@media (max-width:560px) {
  .app--article-mocky .breadcrumb__item:last-child { display:none; }
  .mk-hero h1 { font-size:var(--fs-display-m); }

  .mk-text-link { margin-left:0; display:flex; }
  .mk-source-stamp { left:var(--space-3); bottom:var(--space-3); max-width:72%; }
  .mk-guide { width:24%; }
  .mk-device__screen { border-width:5px; border-bottom-width:9px; }
  .mk-device__foot { height:20px; }
  .mk-scene-choices { display:grid; grid-template-columns:1fr; gap:var(--space-2); }
  .mk-scene-choices button { justify-content:flex-start; padding:var(--space-3) var(--space-4); }
  .mk-scene-choices button svg { display:block; }
  .mk-workbench .mk-scene-description { min-height:0; }
  .mk-purpose li { font-size:var(--fs-body); }
  .mk-input-flow { grid-template-columns:1fr; }
  .mk-connectors { display:none; }
  .mk-input-result { padding:var(--space-5) var(--space-4) 0; max-width:320px; margin:auto; }
  .mk-mini-device { transform:rotate(2deg); }
  .mk-step-content,.mk-rule-grid,.mk-mobi { grid-template-columns:1fr; }
  .mk-process-art { min-height:240px; }
  .mk-process-sheet { width:68%; }
  .mk-mobi__art img { aspect-ratio:16/9; }
  .mk-inputs,.mk-rules { padding:var(--space-5); }
}
@media (prefers-reduced-motion:reduce) {
  .app--article-mocky :is(.mk-hero,.mk-story) *, .app--article-mocky :is(.mk-hero,.mk-story) *::before { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}