.plugin-demo-feature { border-top:0; padding-top:0; }
.plugin-step-controls,.plugin-locale-controls { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem; }
.plugin-case button { font:inherit; cursor:pointer; }
.plugin-step-controls button,.plugin-locale-controls button { background:white; color:var(--ink); border:1px solid var(--line); padding:.65rem .9rem; border-radius:999px; font-size:.875rem; }
.plugin-case button[aria-pressed=true] { background:var(--migration-purple); color:white; border-color:var(--migration-purple); }
.plugin-demo { min-width:0; }
.plugin-window { background:#fff; border:2px solid var(--ink); border-radius:1.1rem; box-shadow:6px 6px 0 rgba(17,17,17,0.087); padding:1.5rem; min-height:25rem; }
.plugin-window-heading { display:flex; justify-content:space-between; gap:1rem; padding-bottom:1rem; margin-bottom:1.5rem; border-bottom:1px solid var(--line); }
.plugin-window-heading span,.plugin-case .plugin-label { color:#68636c; font-size:.875rem; }
.plugin-layer-text { font-size:1.65rem; font-weight:700; margin-bottom:1.5rem; }
.plugin-window label { display:block; font-size:.875rem; margin-bottom:.5rem; }
.plugin-window select { width:100%; max-width:100%; padding:.85rem; background:#f5f2f8; border:1px solid #c5b6d6; border-radius:.5rem; color:var(--ink); font: .875rem ui-monospace,monospace; }
.plugin-case .plugin-reason { font-size:.875rem; color:#68636c; line-height:1.5; }
.plugin-primary { background:var(--migration-purple); border:0; border-radius:.5rem; padding:.8rem 1rem; color:white; }
#confirm-status { font-size:.875rem; color:var(--migration-purple); min-height:1.5em; }
.plugin-locale-list { display:grid; margin:1.5rem 0; }
.plugin-locale-list span { display:grid; grid-template-columns:2rem 1fr; border-bottom:1px solid var(--line); padding:.85rem 0; gap:.6rem; font-size:.875rem; }
.plugin-window code,.plugin-context-example code { overflow-wrap:anywhere; font-size:.875rem; }
.plugin-locale-controls { margin:0 0 1.5rem; }
.plugin-preview-frame { background:var(--paper); border:1px solid var(--line); border-radius:.75rem; padding:1.5rem; }
#translated-text { background:var(--migration-purple); color:white; border-radius:.6rem; margin-top:1.5rem; padding:1rem; text-align:center; font-weight:700; transition:background .2s; }
.plugin-support-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; border-top:1px solid var(--line); padding-top:var(--feature-space); }
.plugin-case .plugin-support-grid h3 { font-size:1.3rem; }
.plugin-context-example { border:1px solid var(--line); border-radius:1rem; padding:1.5rem; background:white; }
.plugin-context-example > div { padding:1rem 0; border-bottom:1px solid var(--line); }
.plugin-context-example span { display:block; font-size:.875rem; color:#68636c; margin-bottom:.6rem; }
.plugin-context-example strong { font-size:2.5rem; letter-spacing:-.04em; }
.plugin-case .plugin-context-example p { font-size:.875rem; color:var(--migration-purple); }
.plugin-review-principles p { display:grid; grid-template-columns:6rem 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.plugin-review-principles strong { color:var(--migration-purple); }
.plugin-demo [hidden] { display:none; }
@media(max-width:760px) { .plugin-hero-art { width:85%; right:5%; bottom:4rem; } .plugin-word-stack { height:12rem; } .plugin-word-stack span { padding:1.25rem; font-size:2.6rem; box-shadow:6px 6px 0 var(--ink); } .plugin-hero-key { margin-bottom:.8rem; padding:.6rem .8rem; } .plugin-hero-locales { gap:.4rem; margin-top:1.2rem; } .plugin-hero-locales span { width:2.5rem; height:2.5rem; } .plugin-case .migration-hero { min-height:54rem; padding-bottom:27rem; } .plugin-support-grid { grid-template-columns:1fr; } .plugin-window { padding:1.25rem; } }
@media(prefers-reduced-motion:reduce) { .plugin-word-stack span { animation:none; display:none; } .plugin-word-stack span:first-child { display:flex; opacity:1; } }

.plugin-scan-figure { margin:0 auto; width:min(100%,28rem); }
.plugin-scan-figure img { display:block; width:100%; height:auto; border-radius:.9rem; }
.plugin-scan-figure figcaption { font-size:.875rem; color:#68636c; padding-top:1rem; }

.plugin-match-card { padding:1.2rem; border:1px solid #c5b6d6; border-radius:.75rem; background:#f5f2f8; }
.plugin-match-card > code { display:block; margin-top:.65rem; color:var(--migration-purple); font-size:1rem; }
.plugin-key-actions { display:flex; gap:.65rem; margin-top:1rem; }
.plugin-key-actions button { background:white; border:1px solid #c5b6d6; color:var(--ink); border-radius:.45rem; padding:.5rem .9rem; font-size:.875rem; }
#key-picker { margin-top:1.25rem; }
.plugin-layer-location { padding:1.2rem; margin-top:1rem; background:var(--paper); border:1px solid var(--line); border-radius:.75rem; }
.plugin-found-layer { outline:2px solid var(--migration-purple); outline-offset:4px; margin:1rem 0; font-weight:700; }
.plugin-ai-button { display:block; width:100%; margin-top:1.25rem; padding:.9rem 1rem; color:white; background:linear-gradient(105deg,#7540b0,#287ac4); border:0; border-radius:.6rem; font-weight:700 !important; }
.plugin-ai-button:disabled { opacity:.65; cursor:wait; }
.plugin-case button:hover { filter:brightness(.96); }

/* Keep the three workflow states together, with the selected layer in context. */
.plugin-case #workflow-title { scroll-margin-top:6rem; }
.plugin-case .migration-chapter-intro:has(#workflow-title) { margin-bottom:clamp(4rem,7vw,6rem); }
.plugin-workflow-heading { max-width:43rem; margin-bottom:2rem; }
.plugin-workflow-heading > p:last-child { margin-bottom:0; }
.plugin-workflow-track { position:relative; display:flex; align-items:stretch; overflow-x:auto; gap:1.5rem; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; padding:.25rem .5rem 1rem 0; }
.plugin-workflow-track::-webkit-scrollbar { display:none; }
.plugin-workflow-slide { flex:0 0 calc(100% - 3rem); min-width:0; margin:0; scroll-snap-align:start; }
.plugin-paired-stage { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(1.25rem,4vw,3.5rem); align-items:center; background:#eeeaf2; border-radius:1rem; padding:clamp(1.25rem,3vw,2.5rem); min-height:34rem; height:calc(100% - 10rem); }
.plugin-paired-stage .plugin-window { min-height:0; padding:1.4rem; box-shadow:4px 4px 0 rgba(17,17,17,0.063); }
.plugin-key-actions > span { background:white; border:1px solid #c5b6d6; border-radius:.45rem; padding:.5rem .9rem; font-size:.875rem; color:var(--ink); }
.plugin-app-screen { position:relative; justify-self:center; background:#fff; border:2px solid #282828; border-radius:1.8rem; padding:1rem 1.2rem 2.5rem; width:100%; max-width:17rem; min-height:28rem; color:#282828; }
.plugin-app-status { display:flex; justify-content:space-between; font-size:.75rem; font-weight:700; margin-bottom:1.25rem; }
.plugin-app-back { font-size:2rem; line-height:1; margin-bottom:2.25rem; }
.plugin-app-title-wrap { position:relative; margin-bottom:1.5rem; }
.plugin-layer-tag { position:absolute; left:-2px; top:-1.3rem; font-size:.75rem; color:#7540b0; }
.plugin-app-title { position:relative; font-size:1.2rem; font-weight:700; line-height:1.25; outline:2px solid #9664df; outline-offset:5px; min-height:1.5em; }
.selection-corner { position:absolute; width:6px; height:6px; background:white; border:1px solid #9664df; }
.selection-corner.c1 { top:-8px; left:-8px; }.selection-corner.c2 { top:-8px; right:-8px; }.selection-corner.c3 { bottom:-8px; left:-8px; }.selection-corner.c4 { bottom:-8px; right:-8px; }
.plugin-app-row { display:flex; justify-content:space-between; align-items:center; gap:.75rem; border-bottom:1px solid #e8e5eb; padding:1.1rem 0; font-size:.875rem; line-height:1.4; }
.plugin-app-row strong { font-weight:400; color:#68636c; text-align:right; }
.plugin-app-home { position:absolute; width:4rem; height:4px; border-radius:3px; background:#282828; bottom:.75rem; left:calc(50% - 2rem); }
.plugin-workflow-slide figcaption { padding-top:1.5rem; max-width:43rem; }
.plugin-workflow-slide figcaption h4 { font-size:1.25rem; }
.plugin-workflow-slide figcaption > p:last-child { font-size:1rem; margin:0; }
.plugin-gallery-footer { display:flex; justify-content:space-between; gap:1.5rem; align-items:start; margin:1.25rem 0 var(--feature-space); }
.plugin-gallery-footer .migration-gallery-controls { margin:0; flex-shrink:0; }
.plugin-gallery-footer p { margin:0; max-width:35rem; }
.plugin-gallery-footer button:disabled { opacity:.3; cursor:default; }
.plugin-workflow-track:focus-visible { outline:3px solid var(--migration-purple); outline-offset:4px; }
@media(max-width:650px) {
 .plugin-workflow-slide { flex-basis:calc(100% - 1rem); }
 .plugin-paired-stage { grid-template-columns:1fr; height:auto; min-height:0; padding:1.25rem; gap:2.25rem; }
 .plugin-app-screen { max-width:16rem; min-height:26rem; }
 .plugin-paired-stage .plugin-window { padding:1.1rem; width:100%; }
 .plugin-gallery-footer { flex-direction:column-reverse; }
 .plugin-gallery-footer .migration-gallery-controls { align-self:flex-end; }
}

/* Use the shared full-width gallery surface and aligned first slide. */
.plugin-case .plugin-workflow-gallery { margin-bottom:var(--feature-space); padding-block:var(--section-space); }
.plugin-case .plugin-workflow-gallery .plugin-workflow-track { gap:clamp(1.5rem,3vw,3rem); margin-left:calc(var(--gallery-content-left) * -1); margin-right:calc(var(--gallery-gutter) * -1); padding:.25rem var(--gallery-gutter) 1.5rem var(--gallery-content-left); scroll-padding-left:var(--gallery-content-left); }
.plugin-case .plugin-workflow-slide { flex-basis:min(70vw,54rem); }
.plugin-case .plugin-paired-stage { background:transparent; border-radius:0; padding:1rem .5rem 1.5rem 0; height:auto; min-height:32rem; }
.plugin-case .plugin-workflow-slide figcaption { border-top:1px solid rgba(17,17,17,.18); padding-top:1.25rem; }
.plugin-case .plugin-gallery-footer { margin-bottom:0; margin-right:max(0px,calc((100vw - 78rem)/2)); }
.plugin-case .plugin-workflow-heading > p:last-child { max-width:43rem; }
.plugin-case #key-source { color:var(--migration-purple); }
@media(max-width:760px) { .plugin-case .plugin-workflow-slide { flex-basis:82vw; } }

.plugin-case .plugin-workflow-slide figcaption { max-width:none; width:100%; }
.plugin-case .plugin-workflow-slide figcaption > :is(p,h4) { max-width:43rem; }

.plugin-case .plugin-learning { border-top:0; }
.plugin-case .plugin-learning > .migration-chapter-intro + .migration-feature { border-top:0; padding-top:0; }

/* A selected Figma text layer, changing locale word by word. */
.plugin-translation-hero { position:absolute; right:4%; top:50%; width:43%; max-width:44rem; transform:translateY(-43%) rotate(-4deg); }
.plugin-translation-stage { position:relative; min-height:25rem; padding:1.25rem; border:1px solid #9664df; }
.plugin-translation-stage::before { content:'T  ·  deviceList.empty.description'; position:absolute; top:-1.6rem; left:-1px; color:#7540b0; font: .75rem ui-monospace,monospace; }
.plugin-translation-stage::after { content:''; position:absolute; inset:-4px; pointer-events:none; background:linear-gradient(white,white) left top/7px 7px no-repeat,linear-gradient(white,white) right top/7px 7px no-repeat,linear-gradient(white,white) left bottom/7px 7px no-repeat,linear-gradient(white,white) right bottom/7px 7px no-repeat; border-image:none; }
.plugin-text-handle { position:absolute; width:7px; height:7px; background:white; border:1px solid #9664df; z-index:2; }
.plugin-text-handle:nth-of-type(1) { left:-4px;top:-4px; }.plugin-text-handle:nth-of-type(2) { right:-4px;top:-4px; }.plugin-text-handle:nth-of-type(3) { left:-4px;bottom:-4px; }.plugin-text-handle:nth-of-type(4) { right:-4px;bottom:-4px; }
.plugin-translation-layer { position:relative; font-size:clamp(2.4rem,4.2vw,4.5rem); font-weight:700; line-height:1.14; letter-spacing:-.045em; color:var(--migration-purple); }
.plugin-translation-word { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em; }
.plugin-translation-word > span { display:block; }
.plugin-translation-layer.is-leaving { position:absolute; inset:1.25rem; }
.plugin-translation-layer.is-leaving .plugin-translation-word > span { animation:plugin-text-out .26s cubic-bezier(.4,0,.7,.2) both; animation-delay:calc(var(--word-index)*70ms); }
.plugin-translation-layer.is-entering .plugin-translation-word > span { animation:plugin-text-in .34s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--word-index)*70ms + 120ms); }
@keyframes plugin-text-out { to { transform:translateY(-110%);opacity:0; } }
@keyframes plugin-text-in { from { transform:translateY(110%);opacity:0; } to { transform:translateY(0);opacity:1; } }
.plugin-translation-locales { display:flex; gap:1rem; margin-top:1.5rem; color:#9d96a3; font-size:.875rem; letter-spacing:.06em; }
.plugin-translation-locales .is-active { color:var(--migration-purple); font-weight:800; }
.plugin-translation-key { display:none; }
@media(max-width:760px) {
 .plugin-translation-hero { top:auto; bottom:3rem; right:8%; width:84%; transform:rotate(-3deg); }
 .plugin-translation-stage { min-height:22rem; }
 .plugin-translation-layer { font-size:clamp(2.4rem,8vw,3.6rem); }
}
@media(prefers-reduced-motion:reduce) { .plugin-translation-word > span { animation:none !important; } }

/* Colour moves through the type, leaving the selected layer on paper. */
.plugin-translation-stage { background:transparent; }
.plugin-translation-word > span { background:linear-gradient(110deg,#4f86ff,#ef91e5,#f7358b,#ff665d,#ff8a21,#f4c84b,#4f86ff); background-size:300% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; animation:plugin-letter-colour 5s ease-in-out infinite alternate; animation-delay:calc(var(--word-index)*-350ms); }
.plugin-translation-layer.is-leaving .plugin-translation-word > span { animation:plugin-text-out .26s cubic-bezier(.4,0,.7,.2) both,plugin-letter-colour 5s ease-in-out infinite alternate; animation-delay:calc(var(--word-index)*70ms),calc(var(--word-index)*-350ms); }
.plugin-translation-layer.is-entering .plugin-translation-word > span { animation:plugin-text-in .34s cubic-bezier(.2,.7,.2,1) both,plugin-letter-colour 5s ease-in-out infinite alternate; animation-delay:calc(var(--word-index)*70ms + 120ms),calc(var(--word-index)*-350ms); }
@keyframes plugin-letter-colour { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@media(prefers-reduced-motion:reduce) { .plugin-translation-word > span { animation:none !important; } }