/* How I work: styles for scenarios 4 to 6 (Design system chaos, AI automation, Design system without Figma).
   Animates transform and opacity only. Every motion has a static or reduced-motion fallback at the end. */

/* ---------- Generic UI pieces (shared by the design system scenarios) ---------- */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--accent-cyan);
    color: #0a0a0f;
    font: 600 13px/1 Inter, sans-serif;
    white-space: nowrap;
}

.ui-btn.is-secondary {
    background: transparent;
    border-color: #6a6a82;
    color: #e8e8ee;
}

.ui-btn.is-danger {
    background: #ff6b6b;
}

.ui-btn.is-hover {
    filter: brightness(1.2);
}

.ui-btn.is-secondary.is-hover {
    background: #262634;
    filter: none;
}

.ui-btn.is-focus {
    box-shadow: 0 0 0 2px #0a0a0f, 0 0 0 4px #ffffff;
}

.ui-btn.is-disabled {
    background: #2a2a3a;
    border-color: #2a2a3a;
    color: #8e8e9e;
}

.ui-btn.is-error {
    background: transparent;
    border-color: #ff6b6b;
    color: #ff9a9a;
}

.ui-btn.is-loading::before,
.ui-in.is-loading::after {
    content: "";
    flex: none;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ui-spin 0.8s linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

.ui-in {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    min-width: 104px;
    padding: 0 10px;
    border: 1px solid #6a6a82;
    border-radius: 8px;
    background-color: #0f0f16;
    color: #d6d6e0;
    font: 400 13px/1 Inter, sans-serif;
}

.ui-in.is-hover {
    border-color: #9a9ab2;
}

.ui-in.is-focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.3);
}

.ui-in.is-disabled {
    border-style: dashed;
    background-color: #1c1c28;
    color: #8e8e9e;
}

.ui-in.is-error {
    border-color: #ff6b6b;
}

.ui-in.is-error::after {
    content: "!";
    margin-left: auto;
    color: #ff9a9a;
    font-weight: 700;
}

.ui-in.is-loading {
    color: #a0a0b0;
}

.ui-in.is-loading::after {
    margin-left: auto;
}

.ui-sel {
    padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, #a0a0b0 50%), linear-gradient(135deg, #a0a0b0 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.ui-bd {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font: 600 11.5px/1 Inter, sans-serif;
}

.ui-bd.is-ok { background: #12382a; color: #6ee7b0; }
.ui-bd.is-warn { background: #3d3010; color: #f2c75c; }
.ui-bd.is-bad { background: #431b24; color: #ff9aa8; }

/* ---------- Motion layers: sort, flow, compile ---------- */

.sxi {
    display: block;
    animation: cx-drift 7s ease-in-out var(--dd, 0s) infinite alternate;
}

.sx-btn {
    padding: 9px var(--px);
    border-radius: var(--r);
    background: var(--bg);
    color: #ffffff;
    font: 600 12px/1 Inter, sans-serif;
}

.sx-in {
    width: var(--w);
    height: 30px;
    padding: 12px 8px;
    border: 1px solid #5a5a72;
    border-radius: var(--r);
    background: #14141c;
}

.sx-in i {
    display: block;
    width: 55%;
    height: 4px;
    border-radius: 2px;
    background: #4a4a5e;
}

.sx-bd {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg);
    color: #ffffff;
    font: 600 11px/1 Inter, sans-serif;
}

.sxi.shake {
    animation: sx-shake 0.12s linear 4;
}

@keyframes sx-shake {
    0% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(-4px); }
}

.hw-pk {
    position: absolute;
    left: 0;
    width: 22px;
    height: 15px;
    border-radius: 3px;
    background: #e9e3c8;
    opacity: 0;
    transform: translateX(-30px);
    animation: hw-pk-run 1.3s cubic-bezier(0.4, 0, 0.2, 1) var(--d, 0s) both;
}

@keyframes hw-pk-run {
    0% { transform: translateX(-30px); opacity: 0; }
    15% { opacity: 0.9; }
    100% { transform: translateX(calc(var(--w) + 30px)); opacity: 0; }
}

.hw-code {
    position: absolute;
    bottom: -8%;
    font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--accent-cyan);
    opacity: 0;
    animation: hw-code-rise 1.4s ease-out var(--d, 0s) both;
}

@keyframes hw-code-rise {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.9; }
    100% { transform: translateY(-260px); opacity: 0; }
}

/* ---------- Design system chaos ---------- */

.a-dcollect {
    display: grid;
    gap: 12px;
}

.d-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
}

.d-rl {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0a0b0;
}

.d-rp {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.d-pc {
    display: inline-flex;
    opacity: 0;
    transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
}

.play .d-pc {
    opacity: 1;
    transform: none;
    transition: transform 0.8s var(--hw-ease) var(--d), opacity 0.35s ease var(--d);
}

.d-mb {
    display: inline-block;
    padding: 9px var(--px);
    border-radius: var(--r);
    background: var(--bg);
    color: #ffffff;
    font: 600 12px/1 Inter, sans-serif;
}

.d-mi {
    display: inline-block;
    width: var(--w);
    height: 32px;
    padding: 12px 9px;
    border: 1px solid #6a6a82;
    border-radius: var(--r);
    background: #0f0f16;
}

.d-mi i {
    display: block;
    width: 55%;
    height: 4px;
    border-radius: 2px;
    background: #4a4a5e;
}

.d-mg {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bg);
    color: #ffffff;
    font: 600 11px/1 Inter, sans-serif;
}

/* audit */

.a-daudit {
    display: grid;
    gap: 10px;
}

.d-ar {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
}

.d-pile {
    display: grid;
    align-items: center;
    justify-items: center;
    min-height: 44px;
    overflow: hidden;
}

.d-dup,
.d-one,
.d-kept {
    grid-area: 1 / 1;
}

.d-dup {
    display: inline-flex;
    transform: translateX(var(--ox));
}

.play .d-dup {
    animation: d-merge 1.5s var(--hw-ease) calc(0.5s + var(--d)) both;
}

@keyframes d-merge {
    0% { transform: translateX(var(--ox)); opacity: 1; }
    30% { transform: translateX(calc(var(--ox) + 4px)); }
    38% { transform: translateX(calc(var(--ox) - 4px)); }
    46% { transform: translateX(calc(var(--ox) + 4px)); }
    54% { transform: translateX(calc(var(--ox) - 4px)); }
    62% { transform: translateX(var(--ox)); opacity: 1; }
    100% { transform: translateX(0) scale(0.6); opacity: 0; }
}

.d-one {
    display: inline-flex;
    opacity: 0;
}

.play .d-one {
    animation: n-pop 0.5s var(--hw-ease) 2s both;
}

.d-kept {
    display: inline-flex;
    gap: 8px;
    opacity: 0;
}

.play .d-kept {
    animation: n-pop 0.5s var(--hw-ease) 0.6s both;
}

.d-tag {
    padding: 4px 10px;
    border: 1px solid;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
}

.d-tag.is-acc { color: #c8c8d6; border-color: #5a5a72; }
.d-tag.is-int { color: #00ff88; border-color: rgba(0, 255, 136, 0.5); }

.play .d-tag.is-acc { animation: hw-rise 0.4s var(--hw-ease) 2.2s both; }
.play .d-tag.is-int { animation: hw-rise 0.4s var(--hw-ease) 0.9s both; }

/* tokens */

.a-dtokens {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 250px;
}

.d-cloud {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.d-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transition: transform 0.9s var(--hw-ease) var(--d), opacity 0.5s ease calc(var(--d) + 0.4s);
}

.d-dot.is-bar {
    height: 5px;
    border-radius: 2px;
    background: #6a7aa8;
}

.go .d-dot {
    transform: translate(var(--tx), var(--ty)) scale(0.3);
    opacity: 0;
}

.d-set {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding: 18px 22px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: rgba(18, 18, 26, 0.86);
}

.d-set-c,
.d-set-s {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    align-items: center;
}

.d-token {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
}

.play .d-token {
    animation: hw-rise 0.5s var(--hw-ease) both;
    animation-delay: calc(0.9s + var(--i) * 0.1s);
}

.d-token code {
    font-size: 12px;
    color: #c8c8d6;
}

.d-sw {
    width: 34px;
    height: 34px;
    border: 1px solid #5a5a72;
    border-radius: 8px;
}

.d-bar {
    height: 10px;
    border-radius: 3px;
    background: var(--accent-cyan);
}

/* library */

.d-libwrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.a-dlib {
    display: grid;
    grid-template-columns: 82px repeat(3, minmax(112px, 1fr));
    gap: 6px 8px;
    align-items: center;
    min-width: 440px;
}

.d-lhl {
    display: block;
    padding-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0a0b0;
    text-align: center;
}

.d-lr {
    position: relative;
    padding-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #a0a0b0;
}

.d-lr::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 3px;
    border-radius: 2px;
    background: var(--accent-cyan);
    opacity: 0;
}

.play .d-lr::before {
    animation: d-hlt 6s linear calc(2s + var(--hi) * 1s) infinite;
}

.d-lc {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 6px 0;
    opacity: 0;
    transform: translateY(-18px) scale(0.7);
}

.play .d-lc {
    opacity: 1;
    transform: none;
    transition: transform 0.55s var(--hw-ease) var(--d), opacity 0.3s ease var(--d);
}

.d-lc::after {
    content: "";
    position: absolute;
    inset: 0 -3px;
    border: 1px solid var(--accent-cyan);
    border-radius: 10px;
    opacity: 0;
}

.play .d-lc::after {
    animation: d-hlt 6s linear calc(2s + var(--hi) * 1s) infinite;
}

@keyframes d-hlt {
    0% { opacity: 1; }
    16.5% { opacity: 1; }
    16.7% { opacity: 0; }
    100% { opacity: 0; }
}

/* docs */

.a-ddoc {
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card-hover);
}

.d-dh {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.d-dh h4 {
    font-size: 18px;
    font-weight: 700;
}

.d-dv {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0a0b0;
}

.d-dcols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin: 14px 0;
}

.d-dcols h5 {
    margin-bottom: 4px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.d-dcols p,
.d-dex figcaption {
    font-size: 14px;
    line-height: 1.5;
    color: #c8c8d6;
}

.d-dex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.d-dex figure {
    margin: 0;
    padding-top: 10px;
    border-top: 3px solid;
}

.d-dex .d-do { border-top-color: #00ff88; }
.d-dex .d-dont { border-top-color: #ff6b6b; }

.d-ex {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    background: #0f0f16;
}

.d-dex figcaption {
    margin-top: 8px;
}

.d-do b { color: #00ff88; }
.d-dont b { color: #ff9a9a; }

.d-dcols,
.d-dex figure {
    opacity: 0;
}

.play .d-dcols {
    animation: hw-rise 0.5s var(--hw-ease) 0.2s both;
}

.play .d-do {
    animation: hw-rise 0.5s var(--hw-ease) 0.7s both;
}

.play .d-dont {
    animation: hw-rise 0.5s var(--hw-ease) 1s both;
}

/* governance */

.a-dgov {
    display: flex;
    gap: 16px;
    list-style: none;
}

.a-dgov li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
    opacity: 0;
}

.play .a-dgov li {
    animation: hw-rise 0.5s var(--hw-ease) both;
    animation-delay: calc(var(--i) * 0.28s);
}

.a-dgov li + li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #6a6a82;
}

.d-gn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent-cyan);
    color: #0a0a0f;
    font-size: 12px;
    font-weight: 700;
}

.d-gt {
    display: block;
    margin-top: 8px;
    font-weight: 700;
}

.d-gw {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #a0a0b0;
}

.d-owner {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed #5a5a72;
    border-radius: 10px;
    font-size: 14px;
    color: #c8c8d6;
    opacity: 0;
}

.d-owner span {
    margin-right: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.play .d-owner {
    animation: hw-rise 0.5s var(--hw-ease) 1.7s both;
}

/* ---------- AI automation ---------- */

.a-fshadow {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 20px;
    align-items: center;
}

.f-deskscene {
    position: relative;
    height: 220px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
    overflow: hidden;
}

.f-desk {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 0;
    height: 46px;
    border-top: 2px solid #5a5a72;
    background: #22222f;
}

.f-who {
    position: absolute;
    right: 12%;
    bottom: 44px;
    width: 64px;
    height: 64px;
    color: #c8c8d6;
}

.f-who svg {
    width: 100%;
    height: 100%;
}

.f-pile {
    position: absolute;
    border: 1px solid rgba(10, 10, 15, 0.4);
    border-radius: 4px;
    opacity: 0;
    transform: rotate(var(--r));
}

.f-mail { width: 38px; height: 26px; background: #e9e3c8; }
.f-doc { width: 28px; height: 36px; background: #cfe3ff; }
.f-data { width: 32px; height: 30px; background: #d9bfff; }

.play .f-pile {
    animation: f-drop 0.5s var(--hw-ease) both;
    animation-delay: calc(0.3s + var(--d));
}

@keyframes f-drop {
    from { transform: translateY(-40px) rotate(var(--r)); opacity: 0; }
    to { transform: rotate(var(--r)); opacity: 1; }
}

.f-steps {
    display: grid;
    gap: 8px;
    list-style: none;
}

.f-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card-hover);
    font-size: 14px;
    opacity: 0;
}

.play .f-steps li {
    animation: hw-rise 0.45s var(--hw-ease) both;
    animation-delay: calc(0.5s + var(--i) * 0.35s);
}

.f-sn {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2a2a3a;
    color: #e8e8ee;
    font-size: 12px;
    font-weight: 700;
}

/* map and pick */

.f-nodes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 16px;
    list-style: none;
}

/* the second row runs right to left, so the path reads as a snake */

.f-n:nth-child(4) { grid-column: 3; grid-row: 2; }
.f-n:nth-child(5) { grid-column: 2; grid-row: 2; }
.f-n:nth-child(6) { grid-column: 1; grid-row: 2; }

.f-n {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    padding: 12px 10px;
    border: 2px solid;
    border-radius: 10px;
    background: var(--bg-card-hover);
    opacity: 0;
}

.f-n.is-m { border-color: rgba(0, 212, 255, 0.75); }
.f-n.is-p { border-color: rgba(168, 85, 247, 0.9); }

.f-nk {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.is-m .f-nk { color: #5fe0ff; }
.is-p .f-nk { color: #d2a8ff; }

.f-nt {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: #f4f4f8;
}

.f-n:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: 16px;
    height: 2px;
    background: #6a6a82;
    transform: scaleX(0);
    transform-origin: left;
}

.f-n:nth-child(3)::after {
    left: calc(50% - 1px);
    top: 100%;
    width: 2px;
    height: 30px;
    transform: scaleY(0);
    transform-origin: top;
}

.f-n:nth-child(4)::after,
.f-n:nth-child(5)::after {
    left: auto;
    right: 100%;
    transform-origin: right;
}

.play .f-n:nth-child(3)::after {
    transform: scaleY(1);
}

.play .f-n {
    animation: hw-rise 0.45s var(--hw-ease) both;
    animation-delay: calc(var(--i) * 0.35s);
}

.play .f-n::after {
    transform: scaleX(1);
    transition: transform 0.3s ease calc(var(--i) * 0.35s + 0.35s);
}

.play .f-n:nth-child(3)::after {
    transform: scaleY(1);
}

.f-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 16px;
    font-size: 13px;
    color: #c8c8d6;
}

.f-legend span::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border: 2px solid;
    border-radius: 3px;
    vertical-align: -1px;
}

.f-legend .f-lm::before { border-color: rgba(0, 212, 255, 0.85); }
.f-legend .f-lp::before { border-color: rgba(168, 85, 247, 0.95); }

/* pick: the map is already there, one step lifts out and the rest dim */

.is-pick .f-n,
.play .is-pick .f-n {
    opacity: 1;
    animation: none;
}

.play .is-pick .f-n::after {
    transition: none;
}

.play .is-pick .f-n:not(.is-chosen) {
    opacity: 0.35;
    transition: opacity 0.6s ease 0.3s;
}

.f-n.is-chosen {
    z-index: 1;
}

.play .is-pick .f-n.is-chosen {
    transform: translateY(-8px) scale(1.06);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.55), 0 10px 24px rgba(0, 0, 0, 0.45);
    transition: transform 0.6s var(--hw-ease) 0.3s, box-shadow 0.6s ease 0.3s;
}

/* the small factory */

.f-line {
    display: flex;
    align-items: center;
}

.f-st {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 118px;
    padding: 12px 8px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
    text-align: center;
}

.f-si {
    color: var(--accent-cyan);
}

.f-st.is-ai .f-si { color: #d2a8ff; }
.f-st.is-gate { border-color: rgba(0, 255, 136, 0.65); }
.f-st.is-gate .f-si { color: #00ff88; }

.f-st.is-gate::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 2px solid #00ff88;
    border-radius: 16px;
    opacity: 0;
    animation: f-pulse 2.4s ease-in-out infinite;
}

@keyframes f-pulse {
    0% { opacity: 0; transform: scale(0.98); }
    50% { opacity: 0.6; transform: scale(1.03); }
    100% { opacity: 0; transform: scale(0.98); }
}

.f-sl {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #f4f4f8;
}

.f-pipe {
    position: relative;
    flex: 1 1 30px;
    height: 14px;
    overflow: hidden;
}

.f-pipe::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: #3a3a4e;
    transform: scaleX(0);
    transform-origin: left;
}

.play .f-pipe::before {
    transform: scaleX(1);
    transition: transform 0.5s var(--hw-ease) calc(var(--p) * 0.35s);
}

.f-pk {
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: radial-gradient(circle, #e9e3c8 0, #e9e3c8 4px, transparent 5px) right center / 14px 14px no-repeat;
}

.play .f-pk {
    animation: f-run 2.4s linear infinite;
    animation-delay: calc(1.4s + var(--p) * 0.3s + var(--k, 0) * 1.2s);
}

.play .f-pipe.is-after .f-pk {
    animation-delay: calc(2.4s + var(--k, 0) * 1.2s);
}

@keyframes f-run {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes f-runv {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.f-card {
    max-width: 440px;
    margin: 20px auto 0;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card-hover);
    opacity: 0;
}

.play .f-card {
    animation: hw-rise 0.6s var(--hw-ease) 1.7s both;
}

.f-ch {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.f-ch h4 {
    font-size: 16px;
    font-weight: 700;
}

.f-ch span {
    font-size: 12px;
    color: #a0a0b0;
}

.f-rows div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    font-size: 13.5px;
}

.f-rows dt { color: #a0a0b0; }
.f-rows dd { color: #f4f4f8; }
.f-rows .is-flag { background: rgba(242, 199, 92, 0.1); }
.f-rows .is-flag dd { color: #f2c75c; }

.f-acts {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.f-go {
    padding: 9px 18px;
    border-radius: 8px;
    background: #00ff88;
    color: #0a0a0f;
    font-size: 13px;
    font-weight: 700;
}

.f-fix {
    padding: 8px 18px;
    border: 1px solid #6a6a82;
    border-radius: 8px;
    color: #e8e8ee;
    font-size: 13px;
    font-weight: 600;
}

.a-fguard {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    list-style: none;
}

.a-fguard li {
    display: flex;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
    opacity: 0;
}

.play .a-fguard li {
    animation: hw-rise 0.5s var(--hw-ease) both;
    animation-delay: calc(var(--i) * 0.3s);
}

.f-gi {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #22222f;
    color: var(--accent-cyan);
}

.a-fguard h4 {
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 700;
}

.a-fguard p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #c8c8d6;
}

.f-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    list-style: none;
}

.f-chips li {
    padding: 7px 14px;
    border: 1px solid rgba(0, 212, 255, 0.5);
    border-radius: 999px;
    color: #5fe0ff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
}

.play .f-chips li {
    animation: n-pop 0.4s var(--hw-ease) both;
    animation-delay: calc(1.4s + var(--i) * 0.25s);
}

/* ---------- Design system without Figma ---------- */

.a-ndecide {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.n-pr,
.n-late {
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
}

.n-pr {
    grid-column: 1 / -1;
}

.a-ndecide h4,
.a-ncheckhead h4 {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-cyan);
}

.n-ty {
    margin: 4px 0;
    font: 500 14.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #d6d6e0;
}

.n-ty .tr {
    color: transparent;
}

.n-late {
    opacity: 0;
}

.play .n-late {
    animation: hw-rise 0.5s var(--hw-ease) both;
    animation-delay: calc(2.6s + var(--i) * 0.2s);
}

.n-scale,
.n-roles,
.n-space {
    display: grid;
    gap: 8px;
    list-style: none;
}

.n-scale li,
.n-space li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.n-scale span {
    color: #f4f4f8;
    font-weight: 600;
    line-height: 1.2;
}

.n-scale code,
.n-space code {
    white-space: nowrap;
    font-size: 12px;
    color: #a0a0b0;
}

.n-roles li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.n-rs {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #5a5a72;
    border-radius: 8px;
    font-weight: 700;
}

.n-space li span {
    height: 10px;
    border-radius: 3px;
    background: var(--accent-cyan);
}

/* tokens in code */

.a-ntokens {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 0.7fr);
    gap: 16px;
    align-items: center;
}

.n-code {
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #0f0f16;
    font: 500 13px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #c8c8d6;
    overflow-x: auto;
}

.n-code code {
    display: block;
    white-space: pre;
    opacity: 0;
}

.play .n-code code {
    animation: hw-rise 0.3s var(--hw-ease) both;
    animation-delay: calc(0.2s + var(--i) * 0.12s);
}

.play .a-ntokens .n-code {
    animation: n-dim 0.6s ease 2.2s both;
}

@keyframes n-dim {
    to { opacity: 0.75; }
}

.n-arrow,
.n-comp {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0a0b0;
    text-align: center;
}

.n-arrow::after,
.n-comp::after {
    content: " \2192";
}

.n-out {
    display: grid;
    gap: 10px;
    list-style: none;
}

.n-out li {
    display: flex;
    align-items: center;
    min-height: 34px;
    opacity: 0;
}

.play .n-out li {
    animation: n-pop 0.45s var(--hw-ease) both;
    animation-delay: calc(0.8s + var(--i) * 0.12s);
}

.n-swc,
.n-radc {
    width: 34px;
    height: 34px;
    border-radius: 8px;
}

.n-swc {
    border: 1px solid #5a5a72;
}

.n-radc {
    border: 2px solid var(--accent-cyan);
    border-radius: 0;
    background: #16161f;
}

.n-barc {
    height: 12px;
    border-radius: 3px;
    background: var(--accent-cyan);
}

@keyframes n-pop {
    from { opacity: 0; transform: scale(0.6); }
    to { opacity: 1; transform: none; }
}

@keyframes n-drop {
    from { opacity: 0; transform: translateY(-18px); }
    to { opacity: 1; transform: none; }
}

/* build */

.a-nbuild {
    display: grid;
    gap: 18px;
}

.n-src {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.n-live {
    display: grid;
    place-items: center;
    min-height: 92px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card-hover);
    opacity: 0;
}

.play .n-live {
    animation: n-pop 0.5s var(--hw-ease) 1.2s both;
}

.n-live .ui-btn {
    min-height: 44px;
    padding: 0 30px;
    font-size: 15px;
}

.n-states {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.n-st {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card-hover);
    opacity: 0;
}

.n-st .ui-btn {
    min-height: 30px;
    padding: 0 10px;
}

.n-st small {
    font-size: 11px;
    color: #a0a0b0;
}

.play .n-st {
    animation: hw-rise 0.4s var(--hw-ease) both;
    animation-delay: calc(1.6s + var(--hi) * 0.08s);
}

.n-hl {
    position: absolute;
    inset: -2px;
    border: 2px solid var(--accent-cyan);
    border-radius: 11px;
    opacity: 0;
}

.play .n-hl {
    animation: d-hlt 6s linear calc(2.4s + var(--hi) * 1s) infinite;
}

.n-review {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.n-review li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid rgba(0, 255, 136, 0.5);
    border-radius: 999px;
    color: #00ff88;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
}

.play .n-review li {
    animation: n-pop 0.35s var(--hw-ease) both;
    animation-delay: calc(2.2s + var(--i) * 0.25s);
}

/* component explorer (generic, no tool branding) */

.n-ex {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #0f0f16;
    overflow: hidden;
}

.n-exbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    background: #1c1c28;
    font-size: 12px;
    color: #a0a0b0;
}

.n-exbar i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4a4a5e;
}

.n-exbar span {
    margin-left: 8px;
}

.n-exbody {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 176px;
}

.n-exside {
    padding: 8px 0;
    border-right: 1px solid var(--border-color);
    list-style: none;
}

.n-exside li {
    padding: 8px 14px;
    font-size: 13px;
    color: #c8c8d6;
    opacity: 0;
}

.n-exside li.is-on {
    background: #22222f;
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--accent-cyan);
}

.play .n-exside li {
    animation: n-drop 0.45s var(--hw-ease) both;
    animation-delay: calc(0.2s + var(--i) * 0.14s);
}

.n-excanvas {
    padding: 14px 16px;
}

.n-exname {
    font-size: 12px;
    color: #a0a0b0;
}

.n-exstage {
    display: grid;
    place-items: center;
    min-height: 84px;
    margin: 10px 0;
    border: 1px dashed #4a4a5e;
    border-radius: 8px;
}

.n-exvars {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.n-excontrols {
    padding: 12px;
    border-left: 1px solid var(--border-color);
}

.n-excontrols h5 {
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a0a0b0;
}

.n-ctl {
    display: grid;
    gap: 4px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #a0a0b0;
}

.n-ctl .ui-in {
    min-width: 0;
    width: 100%;
}

.n-sw {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #3a3a4e;
}

.n-sw i {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e8e8ee;
}

/* checks */

.a-nchecks {
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--bg-card-hover);
}

.n-ckh {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
}

.n-ckh h4 {
    font-size: 16px;
    font-weight: 700;
}

.n-ckh span {
    font-size: 12px;
    color: #a0a0b0;
}

.a-nchecks ul {
    display: grid;
    gap: 8px;
    list-style: none;
}

.a-nchecks li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 8px;
    background: #0f0f16;
    font-size: 14px;
    opacity: 0;
}

.play .a-nchecks li {
    animation: hw-rise 0.35s var(--hw-ease) both;
    animation-delay: calc(0.2s + var(--i) * 0.5s);
}

.a-nchecks em {
    font-size: 12px;
    font-style: normal;
    color: #a0a0b0;
}

.n-tick {
    position: relative;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid #5a5a72;
    border-radius: 50%;
    color: #0a0a0f;
}

.n-tick::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: #00ff88;
    transform: scale(0);
}

.n-tick svg {
    position: relative;
    opacity: 0;
}

.play .n-tick::before {
    animation: n-pop 0.3s var(--hw-ease) both;
    animation-delay: calc(0.5s + var(--i) * 0.5s);
}

.play .n-tick svg {
    animation: n-pop 0.3s var(--hw-ease) both;
    animation-delay: calc(0.55s + var(--i) * 0.5s);
}

/* ship */

.a-nship {
    display: grid;
}

.n-from,
.n-screen {
    grid-area: 1 / 1;
}

.n-from {
    transform-origin: right bottom;
    z-index: 2;
}

.play .n-from {
    animation: n-zoomout 1s var(--hw-ease) 0.5s both;
}

@keyframes n-zoomout {
    from { transform: none; opacity: 1; }
    to { transform: scale(0.3); opacity: 0.9; }
}

.n-screen {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: #0f0f16;
    opacity: 0;
}

.play .n-screen {
    animation: hw-rise 0.6s var(--hw-ease) 1.1s both;
}

.n-sbar {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    min-height: 100%;
}

.n-nav {
    padding: 10px 0;
    border-right: 1px solid var(--border-color);
    list-style: none;
}

.n-nav li {
    padding: 8px 14px;
    font-size: 13px;
    color: #c8c8d6;
}

.n-nav li.is-on {
    background: #22222f;
    color: #ffffff;
    box-shadow: inset 3px 0 0 var(--accent-cyan);
}

.n-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.n-list {
    list-style: none;
}

.n-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13.5px;
    color: #f4f4f8;
}

.n-import {
    margin: 14px 0 0;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #0f0f16;
    font: 500 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #c8c8d6;
    overflow-x: auto;
    opacity: 0;
}

.play .n-import {
    animation: hw-rise 0.5s var(--hw-ease) 1.8s both;
}

/* ---------- Static states (language change, going back) ---------- */

.is-static .d-pc,
.is-static .d-tag,
.is-static .d-kept,
.is-static .d-one,
.is-static .d-token,
.is-static .d-lc,
.is-static .d-dcols,
.is-static .d-dex figure,
.is-static .a-dgov li,
.is-static .d-owner,
.is-static .f-pile,
.is-static .f-steps li,
.is-static .f-n,
.is-static .f-card,
.is-static .a-fguard li,
.is-static .f-chips li,
.is-static .n-late,
.is-static .n-code code,
.is-static .n-out li,
.is-static .n-live,
.is-static .n-st,
.is-static .n-review li,
.is-static .n-exside li,
.is-static .n-screen,
.is-static .n-import,
.is-static .a-nchecks li {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
}

.is-static .f-pile {
    transform: rotate(var(--r));
}

.is-static .d-dup,
.is-static .d-dot,
.is-static .n-from {
    display: none;
}

.is-static .d-lc::after,
.is-static .d-lr::before,
.is-static .n-hl {
    animation: none;
    opacity: 0;
}

.is-static .f-n:nth-child(n)::after,
.is-static .f-pipe::before {
    transform: none;
    transition: none;
}

.is-static .f-pk {
    animation: none;
    transform: translateX(0);
}

.is-static .n-tick::before {
    animation: none;
    transform: none;
}

.is-static .n-tick svg {
    animation: none;
    opacity: 1;
}

.is-static .a-ntokens .n-code {
    opacity: 0.75;
    animation: none;
}

.is-static .is-pick .f-n:not(.is-chosen) {
    opacity: 0.35;
}

.is-static .is-pick .f-n.is-chosen {
    transform: translateY(-8px) scale(1.06);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.55), 0 10px 24px rgba(0, 0, 0, 0.45);
}

/* ---------- Reduced motion ---------- */

.hw-rm .d-dot,
.hw-rm .hw-pk,
.hw-rm .hw-code,
.hw-rm .d-dup {
    display: none !important;
}

.hw-rm .sxi,
.hw-rm .f-st.is-gate::after,
.hw-rm .ui-btn.is-loading::before,
.hw-rm .ui-in.is-loading::after {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .d-dot,
    .hw-pk,
    .hw-code,
    .d-dup {
        display: none !important;
    }

    .sxi,
    .f-st.is-gate::after,
    .ui-btn.is-loading::before,
    .ui-in.is-loading::after {
        animation: none !important;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
    .hw-stage {
        grid-template-columns: minmax(0, 1fr);
    }

    .a-ndecide {
        grid-template-columns: 1fr 1fr;
    }

    .a-ndecide .n-late:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .d-libwrap {
        overflow: visible;
    }

    .a-dlib {
        grid-template-columns: 64px repeat(3, minmax(0, 1fr));
        gap: 6px;
        min-width: 0;
    }

    .d-lc .ui-in {
        min-width: 0;
        width: 100%;
        padding: 0 8px;
    }

    .d-lc .ui-sel {
        padding-right: 22px;
        background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
    }

    .d-lc .ui-btn {
        padding: 0 8px;
    }

    .n-top {
        flex-wrap: wrap;
    }

    .d-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .d-ar {
        grid-template-columns: 1fr;
        gap: 8px;
        justify-items: start;
    }

    .d-pile {
        justify-items: start;
        min-height: 40px;
    }

    .d-dcols,
    .d-dex {
        grid-template-columns: 1fr;
    }

    .a-dgov {
        flex-direction: column;
        gap: 16px;
    }

    .a-dgov li + li::before {
        left: 24px;
        top: -16px;
        width: 2px;
        height: 16px;
    }

    .a-fshadow,
    .a-fguard,
    .a-ntokens,
    .n-src {
        grid-template-columns: 1fr;
    }

    .n-arrow,
    .n-comp {
        text-align: left;
    }

    .n-arrow::after,
    .n-comp::after {
        content: " \2193";
    }

    .f-nodes {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .f-n:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    .f-n {
        min-height: 0;
    }

    .f-n:not(:last-child):nth-child(n)::after {
        left: 24px;
        right: auto;
        top: 100%;
        width: 2px;
        height: 16px;
        transform: scaleY(0);
        transform-origin: top;
    }

    .play .f-n:nth-child(n)::after {
        transform: scaleY(1);
    }

    .is-static .f-n:nth-child(n)::after {
        transform: none;
    }

    .f-line {
        flex-direction: column;
        align-items: stretch;
    }

    .f-st {
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .f-pipe {
        flex: none;
        align-self: center;
        width: 14px;
        height: 32px;
    }

    .f-pipe::before {
        left: 50%;
        right: auto;
        top: 0;
        bottom: 0;
        width: 4px;
        height: auto;
        margin: 0 0 0 -2px;
        transform: scaleY(0);
        transform-origin: top;
    }

    .play .f-pipe::before {
        transform: scaleY(1);
    }

    .is-static .f-pipe::before {
        transform: none;
    }

    .f-pk {
        transform: translateY(-100%);
        background-position: center bottom;
    }

    .play .f-pk {
        animation-name: f-runv;
    }

    .is-static .f-pk {
        transform: translateY(0);
    }

    .a-nbuild .n-states {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .n-exbody {
        grid-template-columns: 1fr;
    }

    .n-exside {
        display: flex;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .n-excontrols {
        border-left: 0;
        border-top: 1px solid var(--border-color);
    }

    .n-from {
        display: none;
    }

    .n-sbar {
        grid-template-columns: 1fr;
    }

    .n-nav {
        display: flex;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .a-nchecks li {
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .a-nchecks em {
        grid-column: 2;
    }

    .a-ndecide {
        grid-template-columns: 1fr;
    }
}