@microi.net/cli 5.9.4 → 5.9.6

package/skills/ui-design/assets/pattern-showcase/styles.css

@@ -1,311 +1,311 @@
-:root {
-  color-scheme: dark;
-  --mci-bg: #07101f;
-  --mci-bg-soft: #0d1830;
-  --mci-surface: rgba(15, 28, 52, 0.78);
-  --mci-surface-solid: #111f39;
-  --mci-border: rgba(151, 173, 216, 0.16);
-  --mci-text: #f4f7ff;
-  --mci-text-muted: #9aa9c6;
-  --mci-primary: #6b87ff;
-  --mci-primary-strong: #4f6df0;
-  --mci-cyan: #38dcff;
-  --mci-success: #26d7b0;
-  --mci-warning: #ffca68;
-  --mci-danger: #ff6b88;
-  --mci-shape-card: 28px;
-  --mci-shape-panel: 22px;
-  --mci-shape-button: 999px;
-  --mci-shape-input: 14px;
-  --mci-shadow-card: 0 20px 70px rgba(0, 0, 0, 0.22);
-  --mci-shadow-float: 0 22px 60px rgba(32, 61, 141, 0.28);
-  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
-}
-
-:root[data-mci-theme="light"] {
-  color-scheme: light;
-  --mci-bg: #f2f5fb;
-  --mci-bg-soft: #e9eef8;
-  --mci-surface: rgba(255, 255, 255, 0.86);
-  --mci-surface-solid: #ffffff;
-  --mci-border: rgba(31, 50, 91, 0.12);
-  --mci-text: #14203a;
-  --mci-text-muted: #66738d;
-  --mci-shadow-card: 0 20px 70px rgba(42, 62, 112, 0.12);
-  --mci-shadow-float: 0 22px 60px rgba(66, 91, 162, 0.18);
-}
-
-* { box-sizing: border-box; }
-html { scroll-behavior: smooth; }
-body { margin: 0; min-width: 320px; background: var(--mci-bg); color: var(--mci-text); }
-button, input { font: inherit; }
-button, a { -webkit-tap-highlight-color: transparent; }
-
-.mci-lab {
-  min-height: 100vh;
-  overflow: hidden;
-  background:
-    linear-gradient(rgba(107, 135, 255, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(107, 135, 255, 0.035) 1px, transparent 1px),
-    radial-gradient(circle at 12% 0%, rgba(66, 105, 255, 0.18), transparent 28%),
-    var(--mci-bg);
-  background-size: 44px 44px, 44px 44px, auto, auto;
-}
-
-.mci-lab a { color: inherit; text-decoration: none; }
-.mci-lab__nav {
-  position: relative;
-  z-index: 20;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  width: min(1180px, calc(100% - 40px));
-  height: 84px;
-  margin: 0 auto;
-  border-bottom: 1px solid var(--mci-border);
-}
-
-.mci-lab__brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
-.mci-lab__brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--mci-primary), #935fff); box-shadow: 0 10px 24px rgba(92, 112, 255, .28); }
-.mci-lab__nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--mci-text-muted); }
-.mci-lab__nav-links a { position: relative; padding: 10px 0; }
-.mci-lab__nav-links a::after { position: absolute; right: 50%; bottom: 4px; left: 50%; height: 1px; content: ""; background: var(--mci-primary); transition: .25s ease; }
-.mci-lab__nav-links a:hover::after, .mci-lab__nav-links a:focus-visible::after { right: 0; left: 0; }
-
-.mci-icon-button { justify-self: end; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 68px; height: 36px; padding: 4px; border: 1px solid var(--mci-border); border-radius: 999px; color: var(--mci-text-muted); background: var(--mci-surface); cursor: pointer; }
-.mci-icon-button span { display: grid; height: 26px; place-items: center; border-radius: 50%; transition: .2s ease; }
-:root[data-mci-theme="dark"] .mci-icon-button__moon,
-:root[data-mci-theme="light"] .mci-icon-button__sun { color: #fff; background: var(--mci-primary); box-shadow: 0 4px 12px rgba(91, 124, 250, .28); }
-
-.mci-hero {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
-  gap: clamp(50px, 8vw, 112px);
-  align-items: center;
-  width: min(1180px, calc(100% - 40px));
-  min-height: 670px;
-  margin: 0 auto;
-  padding: 78px 0 96px;
-}
-
-.mci-hero__ambient { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
-.mci-hero__ambient span { position: absolute; border: 1px solid rgba(107, 135, 255, .13); border-radius: 50%; animation: mci-drift 12s ease-in-out infinite alternate; }
-.mci-hero__ambient span:nth-child(1) { top: 90px; right: -170px; width: 540px; height: 540px; }
-.mci-hero__ambient span:nth-child(2) { top: 188px; right: -74px; width: 340px; height: 340px; animation-delay: -3s; }
-.mci-hero__ambient span:nth-child(3) { top: 256px; right: -6px; width: 200px; height: 200px; animation-delay: -6s; }
-
-.mci-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--mci-cyan); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
-.mci-eyebrow::before { width: 26px; height: 1px; content: ""; background: currentColor; }
-.mci-hero h1 { margin: 26px 0 24px; font-size: clamp(56px, 6.6vw, 92px); line-height: .97; letter-spacing: -.065em; }
-.mci-hero h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #9aaeff 0%, #5ee7ff 48%, #a784ff 100%); -webkit-background-clip: text; background-clip: text; }
-.mci-hero__content > p { max-width: 650px; margin: 0; color: var(--mci-text-muted); font-size: 16px; line-height: 1.9; }
-.mci-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
-
-.mci-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--mci-shape-button); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
-.mci-button:hover, .mci-button:focus-visible { transform: translateY(-2px); }
-.mci-button:active { transform: translateY(0) scale(.98); }
-.mci-button--primary { color: #fff !important; background: linear-gradient(135deg, var(--mci-primary), var(--mci-primary-strong)); box-shadow: 0 13px 32px rgba(79, 109, 240, .32); }
-.mci-button--quiet { border-color: var(--mci-border); background: var(--mci-surface); }
-
-.mci-hero__console { position: relative; min-height: 420px; padding: 22px; overflow: hidden; border: 1px solid rgba(131, 156, 232, .23); border-radius: 34px; background: linear-gradient(160deg, rgba(25, 45, 81, .94), rgba(10, 20, 40, .86)); box-shadow: 0 35px 100px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .09); }
-:root[data-mci-theme="light"] .mci-hero__console { background: linear-gradient(160deg, #fdfdff, #e9effc); box-shadow: var(--mci-shadow-float); }
-.mci-console__head { display: flex; align-items: center; gap: 7px; padding-bottom: 18px; border-bottom: 1px solid var(--mci-border); }
-.mci-console__head span { width: 7px; height: 7px; border-radius: 50%; background: var(--mci-danger); }
-.mci-console__head span:nth-child(2) { background: var(--mci-warning); }
-.mci-console__head span:nth-child(3) { background: var(--mci-success); }
-.mci-console__head b { margin-left: auto; color: var(--mci-text-muted); font-size: 10px; letter-spacing: .18em; }
-.mci-console__orbit { position: absolute; top: 90px; left: 50%; width: 230px; height: 230px; transform: translateX(-50%); }
-.mci-console__orbit::before, .mci-console__orbit i { position: absolute; inset: 0; content: ""; border: 1px solid rgba(96, 224, 255, .18); border-radius: 50%; }
-.mci-console__orbit::before { inset: 38px; border: 0; background: radial-gradient(circle at 35% 30%, #93f4ff, #5573ff 34%, #5c35a2 62%, transparent 64%); filter: drop-shadow(0 0 30px rgba(83, 120, 255, .45)); animation: mci-orbit-pulse 4s ease-in-out infinite; }
-.mci-console__orbit i:nth-child(1) { transform: rotateX(65deg); animation: mci-orbit 8s linear infinite; }
-.mci-console__orbit i:nth-child(2) { transform: rotateY(65deg); animation: mci-orbit 11s linear reverse infinite; }
-.mci-console__orbit i:nth-child(3) { inset: 24px; border-style: dashed; animation: mci-orbit 14s linear infinite; }
-.mci-console__metric { position: absolute; right: 22px; bottom: 68px; left: 22px; display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 20px; border: 1px solid var(--mci-border); border-radius: 18px; background: rgba(5, 13, 30, .62); backdrop-filter: blur(14px); }
-:root[data-mci-theme="light"] .mci-console__metric { background: rgba(255, 255, 255, .74); }
-.mci-console__metric small { align-self: start; color: var(--mci-text-muted); }
-.mci-console__metric strong { grid-row: span 2; color: var(--mci-cyan); font-size: 52px; line-height: .9; }
-.mci-console__metric span { color: var(--mci-text-muted); font-size: 11px; }
-.mci-console__footer { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; justify-content: space-between; color: var(--mci-text-muted); font-size: 9px; letter-spacing: .08em; }
-
-.mci-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 120px; border-top: 1px solid var(--mci-border); }
-.mci-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
-.mci-section h2, .mci-flow h2, .mci-contract h2 { margin: 14px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -.045em; }
-.mci-filter { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--mci-border); border-radius: 999px; background: var(--mci-surface); }
-.mci-filter button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--mci-text-muted); background: transparent; font-size: 12px; cursor: pointer; }
-.mci-filter button.is-active { color: #fff; background: var(--mci-primary); box-shadow: 0 7px 18px rgba(91, 124, 250, .23); }
-
-.mci-pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
-.mci-pattern { min-width: 0; padding: 12px; overflow: hidden; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-card); background: var(--mci-surface); box-shadow: var(--mci-shadow-card); transition: opacity .25s ease, transform .25s ease, border-color .25s ease; }
-.mci-pattern:hover { transform: translateY(-4px); border-color: rgba(107, 135, 255, .4); }
-.mci-pattern.is-hidden { display: none; }
-.mci-pattern__visual { position: relative; height: 318px; padding: 28px; overflow: hidden; border-radius: calc(var(--mci-shape-card) - 10px); background: #101b33; color: #fff; }
-.mci-pattern__index { position: absolute; z-index: 3; top: 20px; right: 22px; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
-.mci-pattern__copy { padding: 20px 12px 14px; }
-.mci-pattern__copy > span { color: var(--mci-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
-.mci-pattern__copy h3 { margin: 9px 0 8px; font-size: 22px; letter-spacing: -.025em; }
-.mci-pattern__copy p { margin: 0; color: var(--mci-text-muted); font-size: 13px; line-height: 1.7; }
-
-.mci-pattern--story .mci-pattern__visual { background: #f2f0e8; color: #151515; }
-.mci-pattern--story .mci-pattern__visual::before { position: absolute; right: -40px; bottom: -100px; width: 260px; height: 260px; content: ""; border-radius: 50%; background: #ff4f3d; opacity: .9; }
-.mci-story-word { position: absolute; top: 76px; left: 28px; z-index: 1; font-size: clamp(46px, 5vw, 70px); font-weight: 900; line-height: .82; letter-spacing: -.08em; }
-.mci-story-word em { color: #3e52df; font-style: normal; }
-.mci-story-line { position: absolute; right: 28px; bottom: 30px; left: 28px; height: 1px; background: rgba(0, 0, 0, .32); }
-.mci-story-line::before { position: absolute; left: 0; bottom: 10px; content: "THE IDEA BECOMES THE INTERFACE"; font-size: 9px; font-style: normal; letter-spacing: .14em; }
-
-.mci-pattern--product .mci-pattern__visual { display: grid; place-items: center; background: radial-gradient(circle at 0 0, #dce6ff, transparent 45%), #f5f7fb; color: #18233c; }
-.mci-phone-card { width: min(330px, 90%); padding: 20px; border: 1px solid #e2e7f1; border-radius: 22px; background: #fff; box-shadow: 0 22px 55px rgba(38, 54, 94, .18); }
-.mci-phone-card__bar { display: flex; align-items: center; gap: 9px; font-size: 11px; }
-.mci-phone-card__bar i { width: 24px; height: 24px; border-radius: 8px; background: #5b7cfa; }
-.mci-phone-card__bar b { margin-left: auto; color: #7c889f; font-size: 9px; }
-.mci-phone-card__progress { height: 3px; margin: 14px 0 20px; overflow: hidden; border-radius: 4px; background: #edf0f6; }
-.mci-phone-card__progress i { display: block; width: 66%; height: 100%; background: #5b7cfa; }
-.mci-phone-card > strong { display: block; margin-bottom: 12px; font-size: 14px; }
-.mci-phone-card__choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid #e5e9f1; border-radius: 12px; }
-.mci-phone-card__choice > i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #d0d7e5; border-radius: 50%; font-size: 10px; font-style: normal; }
-.mci-phone-card__choice span { font-size: 11px; font-weight: 700; }
-.mci-phone-card__choice small { display: block; margin-top: 3px; color: #8a96ab; font-size: 8px; font-weight: 400; }
-.mci-phone-card__choice.is-selected { border-color: #5b7cfa; background: #f2f5ff; }
-.mci-phone-card__choice.is-selected > i { color: white; border-color: #5b7cfa; background: #5b7cfa; }
-
-.mci-pattern--editorial .mci-pattern__visual { background: #ffcd55; color: #191919; }
-.mci-editorial-type { position: absolute; top: 38px; left: 32px; display: flex; align-items: start; gap: 14px; }
-.mci-editorial-type b { font-size: 114px; line-height: .85; letter-spacing: -.1em; }
-.mci-editorial-type span { max-width: 95px; padding-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.4; }
-.mci-editorial-card { position: absolute; right: -20px; bottom: -44px; width: 285px; height: 190px; padding: 22px; transform: rotate(-7deg); background: #3527a5; box-shadow: 0 20px 50px rgba(47, 38, 132, .3); }
-.mci-editorial-card i { display: inline-block; width: 42px; height: 42px; margin-right: -6px; border: 2px solid #fff; border-radius: 50%; }
-.mci-editorial-card i:nth-child(2) { background: #ff6257; }
-.mci-editorial-card i:nth-child(3) { background: #5ce3cc; }
-.mci-editorial-card strong { display: block; margin-top: 18px; color: #fff; font-size: 25px; }
-
-.mci-pattern--immersive .mci-pattern__visual { background: radial-gradient(circle at 52% 48%, #1c3350, #050914 70%); }
-.mci-pattern--immersive .mci-pattern__visual::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(73, 220, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 220, 255, .05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent); }
-.mci-orb { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -58%); }
-.mci-orb::before { position: absolute; inset: 34px; content: ""; border-radius: 38% 62% 44% 56%; background: radial-gradient(circle at 34% 28%, #eaffff, #61eaff 16%, #5d63fa 54%, #17165e 72%); filter: drop-shadow(0 0 34px rgba(80, 201, 255, .5)); animation: mci-blob 7s ease-in-out infinite; }
-.mci-orb i { position: absolute; inset: 0; border: 1px solid rgba(107, 222, 255, .35); border-radius: 50%; }
-.mci-orb i:nth-child(1) { transform: rotateX(72deg); }
-.mci-orb i:nth-child(2) { transform: rotateY(72deg); }
-.mci-orb i:nth-child(3) { inset: 20px; border-style: dashed; animation: mci-orbit 12s linear infinite; }
-.mci-orb b { position: absolute; top: 22px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: #62efff; box-shadow: 0 0 16px #62efff; animation: mci-point 4s ease-in-out infinite; }
-.mci-orb-copy { position: absolute; right: 24px; bottom: 22px; left: 24px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .62); font-size: 9px; letter-spacing: .08em; }
-
-.mci-pattern--motion .mci-pattern__visual { background: #f8f7fc; color: #121526; }
-.mci-pattern--motion .mci-pattern__visual::after { position: absolute; top: -120px; right: -80px; width: 300px; height: 300px; content: ""; border-radius: 50%; background: conic-gradient(from 35deg, #7259ff, #44dcff, #ff76ac, #7259ff); filter: blur(20px); opacity: .72; animation: mci-spin 10s linear infinite; }
-.mci-motion-copy { position: absolute; z-index: 1; top: 44px; left: 32px; }
-.mci-motion-copy small { display: block; margin-bottom: 22px; color: #5a6680; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
-.mci-motion-copy strong { font-size: 52px; line-height: .95; letter-spacing: -.06em; }
-.mci-motion-track { position: absolute; z-index: 1; right: 32px; bottom: 28px; left: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
-.mci-motion-track i { height: 4px; border-radius: 6px; background: #dfe3ed; }
-.mci-motion-track i:nth-child(1), .mci-motion-track i:nth-child(2) { background: #5b7cfa; }
-
-.mci-pattern--data .mci-pattern__visual { background: #0c1729; }
-.mci-data-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
-.mci-data-head span { font-size: 13px; font-weight: 700; }
-.mci-data-head b { padding: 5px 8px; border: 1px solid rgba(38, 215, 176, .3); border-radius: 999px; color: #6ff0d2; font-size: 8px; }
-.mci-data-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
-.mci-data-metrics > span { padding: 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: rgba(255, 255, 255, .03); }
-.mci-data-metrics small { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, .5); font-size: 8px; }
-.mci-data-metrics b { font-size: 22px; }
-.mci-data-chart { display: flex; height: 112px; align-items: end; gap: 8px; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(to top, rgba(91, 124, 250, .08), transparent); }
-.mci-data-chart i { flex: 1; height: var(--h, 50%); border-radius: 5px 5px 1px 1px; background: linear-gradient(to top, #536bf0, #46dffc); transform-origin: bottom; animation: mci-bars 2.6s ease-in-out infinite alternate; }
-.mci-data-chart i:nth-child(1) { --h: 42%; }
-.mci-data-chart i:nth-child(2) { --h: 66%; animation-delay: -.3s; }
-.mci-data-chart i:nth-child(3) { --h: 51%; animation-delay: -.6s; }
-.mci-data-chart i:nth-child(4) { --h: 88%; animation-delay: -.9s; }
-.mci-data-chart i:nth-child(5) { --h: 72%; animation-delay: -1.2s; }
-.mci-data-chart i:nth-child(6) { --h: 96%; animation-delay: -1.5s; }
-.mci-data-chart i:nth-child(7) { --h: 78%; animation-delay: -1.8s; }
-
-.mci-flow { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 110px); align-items: center; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0; border-top: 1px solid var(--mci-border); }
-.mci-flow__intro > p { max-width: 520px; margin: 22px 0; color: var(--mci-text-muted); line-height: 1.8; }
-.mci-flow__intro ul { display: grid; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
-.mci-flow__intro li { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--mci-border); font-size: 13px; }
-.mci-flow__intro li span { color: var(--mci-primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
-.mci-flow-card { min-height: 480px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--mci-border); border-radius: var(--mci-shape-card); background: var(--mci-surface); box-shadow: var(--mci-shadow-card); }
-.mci-flow-card__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--mci-border); }
-.mci-flow-card__head span { font-size: 20px; font-weight: 750; }
-.mci-flow-card__head small { color: var(--mci-text-muted); font-size: 10px; }
-.mci-field { display: grid; gap: 9px; margin-top: 26px; }
-.mci-field > span, .mci-plan-group legend { font-size: 12px; font-weight: 700; }
-.mci-field input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-input); outline: 0; color: var(--mci-text); background: var(--mci-bg-soft); transition: border .2s, box-shadow .2s; }
-.mci-field input:focus { border-color: var(--mci-primary); box-shadow: 0 0 0 3px rgba(91, 124, 250, .15); }
-.mci-field small { color: var(--mci-text-muted); font-size: 10px; }
-.mci-plan-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; padding: 0; border: 0; }
-.mci-plan-group legend { grid-column: 1 / -1; margin-bottom: 8px; }
-.mci-plan-group label { position: relative; cursor: pointer; }
-.mci-plan-group input { position: absolute; opacity: 0; pointer-events: none; }
-.mci-plan-group label > span { display: block; padding: 14px; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-input); background: var(--mci-bg-soft); transition: .2s ease; }
-.mci-plan-group input:checked + span { border-color: var(--mci-primary); box-shadow: inset 0 0 0 1px var(--mci-primary); }
-.mci-plan-group b, .mci-plan-group small { display: block; font-size: 11px; }
-.mci-plan-group small { margin-top: 5px; color: var(--mci-text-muted); font-size: 9px; }
-.mci-flow-card__status { min-height: 42px; margin: 20px 0 12px; padding: 12px 14px; border-radius: 11px; color: var(--mci-text-muted); background: rgba(107, 135, 255, .08); font-size: 11px; line-height: 1.6; }
-.mci-flow-card__status.is-error { color: var(--mci-danger); background: rgba(255, 107, 136, .09); }
-.mci-flow-card__status.is-success { color: var(--mci-success); background: rgba(38, 215, 176, .09); }
-.mci-flow-card__submit { width: 100%; border: 0; }
-.mci-flow-card__submit.is-loading i { display: block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: white; border-radius: 50%; font-size: 0; animation: mci-spin .7s linear infinite; }
-
-.mci-contract { display: grid; grid-template-columns: 1.1fr .7fr .95fr; gap: 28px; align-items: stretch; width: min(1180px, calc(100% - 40px)); margin: 0 auto 100px; padding: clamp(28px, 5vw, 54px); border: 1px solid rgba(107, 135, 255, .28); border-radius: 34px; background: linear-gradient(145deg, rgba(91, 124, 250, .15), var(--mci-surface)); box-shadow: var(--mci-shadow-card); }
-.mci-contract h2 { font-size: clamp(29px, 3vw, 42px); }
-.mci-contract__copy p { margin: 18px 0 0; color: var(--mci-text-muted); font-size: 13px; line-height: 1.8; }
-.mci-contract__tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
-.mci-contract__tokens > span { padding: 13px; border: 1px solid var(--mci-border); border-radius: 14px; background: var(--mci-bg-soft); }
-.mci-contract__tokens i { display: block; width: 100%; height: 42px; margin-bottom: 10px; border-radius: 9px; background: var(--token); }
-.mci-contract__tokens b, .mci-contract__tokens small { display: block; font-size: 9px; }
-.mci-contract__tokens small { margin-top: 3px; color: var(--mci-text-muted); }
-.mci-contract__code { display: flex; align-items: center; margin: 0; padding: 22px; overflow: auto; border: 1px solid var(--mci-border); border-radius: 18px; color: #c7d3eb; background: #07101e; font: 11px/1.9 "Cascadia Code", Consolas, monospace; }
-.mci-contract__code span { color: #72e7ff; }
-.mci-lab__footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 42px; border-top: 1px solid var(--mci-border); color: var(--mci-text-muted); font-size: 10px; letter-spacing: .08em; }
-
-@keyframes mci-drift { to { transform: translate3d(-18px, 14px, 0) scale(1.03); } }
-@keyframes mci-orbit { to { transform: rotate(360deg); } }
-@keyframes mci-orbit-pulse { 50% { transform: scale(.94) rotate(8deg); filter: drop-shadow(0 0 46px rgba(83, 120, 255, .62)); } }
-@keyframes mci-blob { 50% { transform: rotate(14deg) scale(.92); border-radius: 58% 42% 64% 36%; } }
-@keyframes mci-point { 50% { transform: translate(-130px, 128px); } }
-@keyframes mci-spin { to { transform: rotate(360deg); } }
-@keyframes mci-bars { to { transform: scaleY(.65); opacity: .72; } }
-
-@media (max-width: 900px) {
-  .mci-lab__nav { grid-template-columns: 1fr auto; }
-  .mci-lab__nav-links { display: none; }
-  .mci-hero { grid-template-columns: 1fr; gap: 50px; padding-top: 64px; }
-  .mci-hero__console { width: min(560px, 100%); }
-  .mci-flow { grid-template-columns: 1fr; }
-  .mci-contract { grid-template-columns: 1fr 1fr; }
-  .mci-contract__copy { grid-column: 1 / -1; }
-}
-
-@media (max-width: 680px) {
-  .mci-lab__nav, .mci-hero, .mci-section, .mci-flow, .mci-contract, .mci-lab__footer { width: min(100% - 28px, 1180px); }
-  .mci-lab__nav { height: 68px; }
-  .mci-lab__brand { font-size: 12px; }
-  .mci-lab__brand-mark { width: 30px; height: 30px; border-radius: 9px; }
-  .mci-icon-button { width: 62px; height: 34px; }
-  .mci-hero { min-height: auto; padding: 64px 0 70px; }
-  .mci-hero h1 { margin-top: 20px; font-size: clamp(48px, 14vw, 64px); }
-  .mci-hero__content > p { font-size: 14px; line-height: 1.75; }
-  .mci-hero__actions, .mci-hero__actions .mci-button { width: 100%; }
-  .mci-hero__console { min-height: 360px; border-radius: 26px; }
-  .mci-console__orbit { top: 78px; transform: translateX(-50%) scale(.82); }
-  .mci-section { padding: 80px 0; }
-  .mci-section__head { display: grid; align-items: start; }
-  .mci-filter { width: 100%; overflow-x: auto; border-radius: 14px; }
-  .mci-filter button { flex: 0 0 auto; }
-  .mci-pattern-grid { grid-template-columns: 1fr; }
-  .mci-pattern__visual { height: 286px; padding: 22px; }
-  .mci-story-word { left: 22px; font-size: 55px; }
-  .mci-editorial-type b { font-size: 92px; }
-  .mci-flow { padding: 80px 0; }
-  .mci-flow-card { min-height: 0; padding: 22px; }
-  .mci-flow-card__head { display: grid; gap: 7px; }
-  .mci-plan-group { grid-template-columns: 1fr; }
-  .mci-contract { grid-template-columns: 1fr; margin-bottom: 60px; padding: 24px; border-radius: 26px; }
-  .mci-contract__copy { grid-column: auto; }
-  .mci-contract__code { min-height: 210px; }
-  .mci-lab__footer { display: grid; gap: 8px; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  html { scroll-behavior: auto; }
-  .mci-lab *, .mci-lab *::before, .mci-lab *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
-}
+:root {
+  color-scheme: dark;
+  --mci-bg: #07101f;
+  --mci-bg-soft: #0d1830;
+  --mci-surface: rgba(15, 28, 52, 0.78);
+  --mci-surface-solid: #111f39;
+  --mci-border: rgba(151, 173, 216, 0.16);
+  --mci-text: #f4f7ff;
+  --mci-text-muted: #9aa9c6;
+  --mci-primary: #6b87ff;
+  --mci-primary-strong: #4f6df0;
+  --mci-cyan: #38dcff;
+  --mci-success: #26d7b0;
+  --mci-warning: #ffca68;
+  --mci-danger: #ff6b88;
+  --mci-shape-card: 28px;
+  --mci-shape-panel: 22px;
+  --mci-shape-button: 999px;
+  --mci-shape-input: 14px;
+  --mci-shadow-card: 0 20px 70px rgba(0, 0, 0, 0.22);
+  --mci-shadow-float: 0 22px 60px rgba(32, 61, 141, 0.28);
+  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
+}
+
+:root[data-mci-theme="light"] {
+  color-scheme: light;
+  --mci-bg: #f2f5fb;
+  --mci-bg-soft: #e9eef8;
+  --mci-surface: rgba(255, 255, 255, 0.86);
+  --mci-surface-solid: #ffffff;
+  --mci-border: rgba(31, 50, 91, 0.12);
+  --mci-text: #14203a;
+  --mci-text-muted: #66738d;
+  --mci-shadow-card: 0 20px 70px rgba(42, 62, 112, 0.12);
+  --mci-shadow-float: 0 22px 60px rgba(66, 91, 162, 0.18);
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+body { margin: 0; min-width: 320px; background: var(--mci-bg); color: var(--mci-text); }
+button, input { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+
+.mci-lab {
+  min-height: 100vh;
+  overflow: hidden;
+  background:
+    linear-gradient(rgba(107, 135, 255, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(107, 135, 255, 0.035) 1px, transparent 1px),
+    radial-gradient(circle at 12% 0%, rgba(66, 105, 255, 0.18), transparent 28%),
+    var(--mci-bg);
+  background-size: 44px 44px, 44px 44px, auto, auto;
+}
+
+.mci-lab a { color: inherit; text-decoration: none; }
+.mci-lab__nav {
+  position: relative;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: min(1180px, calc(100% - 40px));
+  height: 84px;
+  margin: 0 auto;
+  border-bottom: 1px solid var(--mci-border);
+}
+
+.mci-lab__brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
+.mci-lab__brand-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; color: white; background: linear-gradient(145deg, var(--mci-primary), #935fff); box-shadow: 0 10px 24px rgba(92, 112, 255, .28); }
+.mci-lab__nav-links { display: flex; gap: 30px; font-size: 13px; color: var(--mci-text-muted); }
+.mci-lab__nav-links a { position: relative; padding: 10px 0; }
+.mci-lab__nav-links a::after { position: absolute; right: 50%; bottom: 4px; left: 50%; height: 1px; content: ""; background: var(--mci-primary); transition: .25s ease; }
+.mci-lab__nav-links a:hover::after, .mci-lab__nav-links a:focus-visible::after { right: 0; left: 0; }
+
+.mci-icon-button { justify-self: end; display: grid; grid-template-columns: 1fr 1fr; align-items: center; width: 68px; height: 36px; padding: 4px; border: 1px solid var(--mci-border); border-radius: 999px; color: var(--mci-text-muted); background: var(--mci-surface); cursor: pointer; }
+.mci-icon-button span { display: grid; height: 26px; place-items: center; border-radius: 50%; transition: .2s ease; }
+:root[data-mci-theme="dark"] .mci-icon-button__moon,
+:root[data-mci-theme="light"] .mci-icon-button__sun { color: #fff; background: var(--mci-primary); box-shadow: 0 4px 12px rgba(91, 124, 250, .28); }
+
+.mci-hero {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .94fr);
+  gap: clamp(50px, 8vw, 112px);
+  align-items: center;
+  width: min(1180px, calc(100% - 40px));
+  min-height: 670px;
+  margin: 0 auto;
+  padding: 78px 0 96px;
+}
+
+.mci-hero__ambient { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
+.mci-hero__ambient span { position: absolute; border: 1px solid rgba(107, 135, 255, .13); border-radius: 50%; animation: mci-drift 12s ease-in-out infinite alternate; }
+.mci-hero__ambient span:nth-child(1) { top: 90px; right: -170px; width: 540px; height: 540px; }
+.mci-hero__ambient span:nth-child(2) { top: 188px; right: -74px; width: 340px; height: 340px; animation-delay: -3s; }
+.mci-hero__ambient span:nth-child(3) { top: 256px; right: -6px; width: 200px; height: 200px; animation-delay: -6s; }
+
+.mci-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--mci-cyan); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
+.mci-eyebrow::before { width: 26px; height: 1px; content: ""; background: currentColor; }
+.mci-hero h1 { margin: 26px 0 24px; font-size: clamp(56px, 6.6vw, 92px); line-height: .97; letter-spacing: -.065em; }
+.mci-hero h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #9aaeff 0%, #5ee7ff 48%, #a784ff 100%); -webkit-background-clip: text; background-clip: text; }
+.mci-hero__content > p { max-width: 650px; margin: 0; color: var(--mci-text-muted); font-size: 16px; line-height: 1.9; }
+.mci-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
+
+.mci-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--mci-shape-button); font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
+.mci-button:hover, .mci-button:focus-visible { transform: translateY(-2px); }
+.mci-button:active { transform: translateY(0) scale(.98); }
+.mci-button--primary { color: #fff !important; background: linear-gradient(135deg, var(--mci-primary), var(--mci-primary-strong)); box-shadow: 0 13px 32px rgba(79, 109, 240, .32); }
+.mci-button--quiet { border-color: var(--mci-border); background: var(--mci-surface); }
+
+.mci-hero__console { position: relative; min-height: 420px; padding: 22px; overflow: hidden; border: 1px solid rgba(131, 156, 232, .23); border-radius: 34px; background: linear-gradient(160deg, rgba(25, 45, 81, .94), rgba(10, 20, 40, .86)); box-shadow: 0 35px 100px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .09); }
+:root[data-mci-theme="light"] .mci-hero__console { background: linear-gradient(160deg, #fdfdff, #e9effc); box-shadow: var(--mci-shadow-float); }
+.mci-console__head { display: flex; align-items: center; gap: 7px; padding-bottom: 18px; border-bottom: 1px solid var(--mci-border); }
+.mci-console__head span { width: 7px; height: 7px; border-radius: 50%; background: var(--mci-danger); }
+.mci-console__head span:nth-child(2) { background: var(--mci-warning); }
+.mci-console__head span:nth-child(3) { background: var(--mci-success); }
+.mci-console__head b { margin-left: auto; color: var(--mci-text-muted); font-size: 10px; letter-spacing: .18em; }
+.mci-console__orbit { position: absolute; top: 90px; left: 50%; width: 230px; height: 230px; transform: translateX(-50%); }
+.mci-console__orbit::before, .mci-console__orbit i { position: absolute; inset: 0; content: ""; border: 1px solid rgba(96, 224, 255, .18); border-radius: 50%; }
+.mci-console__orbit::before { inset: 38px; border: 0; background: radial-gradient(circle at 35% 30%, #93f4ff, #5573ff 34%, #5c35a2 62%, transparent 64%); filter: drop-shadow(0 0 30px rgba(83, 120, 255, .45)); animation: mci-orbit-pulse 4s ease-in-out infinite; }
+.mci-console__orbit i:nth-child(1) { transform: rotateX(65deg); animation: mci-orbit 8s linear infinite; }
+.mci-console__orbit i:nth-child(2) { transform: rotateY(65deg); animation: mci-orbit 11s linear reverse infinite; }
+.mci-console__orbit i:nth-child(3) { inset: 24px; border-style: dashed; animation: mci-orbit 14s linear infinite; }
+.mci-console__metric { position: absolute; right: 22px; bottom: 68px; left: 22px; display: grid; grid-template-columns: 1fr auto; align-items: end; padding: 20px; border: 1px solid var(--mci-border); border-radius: 18px; background: rgba(5, 13, 30, .62); backdrop-filter: blur(14px); }
+:root[data-mci-theme="light"] .mci-console__metric { background: rgba(255, 255, 255, .74); }
+.mci-console__metric small { align-self: start; color: var(--mci-text-muted); }
+.mci-console__metric strong { grid-row: span 2; color: var(--mci-cyan); font-size: 52px; line-height: .9; }
+.mci-console__metric span { color: var(--mci-text-muted); font-size: 11px; }
+.mci-console__footer { position: absolute; right: 22px; bottom: 22px; left: 22px; display: flex; justify-content: space-between; color: var(--mci-text-muted); font-size: 9px; letter-spacing: .08em; }
+
+.mci-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0 120px; border-top: 1px solid var(--mci-border); }
+.mci-section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
+.mci-section h2, .mci-flow h2, .mci-contract h2 { margin: 14px 0 0; font-size: clamp(34px, 4vw, 52px); line-height: 1.1; letter-spacing: -.045em; }
+.mci-filter { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--mci-border); border-radius: 999px; background: var(--mci-surface); }
+.mci-filter button { min-height: 34px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--mci-text-muted); background: transparent; font-size: 12px; cursor: pointer; }
+.mci-filter button.is-active { color: #fff; background: var(--mci-primary); box-shadow: 0 7px 18px rgba(91, 124, 250, .23); }
+
+.mci-pattern-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.mci-pattern { min-width: 0; padding: 12px; overflow: hidden; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-card); background: var(--mci-surface); box-shadow: var(--mci-shadow-card); transition: opacity .25s ease, transform .25s ease, border-color .25s ease; }
+.mci-pattern:hover { transform: translateY(-4px); border-color: rgba(107, 135, 255, .4); }
+.mci-pattern.is-hidden { display: none; }
+.mci-pattern__visual { position: relative; height: 318px; padding: 28px; overflow: hidden; border-radius: calc(var(--mci-shape-card) - 10px); background: #101b33; color: #fff; }
+.mci-pattern__index { position: absolute; z-index: 3; top: 20px; right: 22px; color: rgba(255, 255, 255, .55); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
+.mci-pattern__copy { padding: 20px 12px 14px; }
+.mci-pattern__copy > span { color: var(--mci-primary); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
+.mci-pattern__copy h3 { margin: 9px 0 8px; font-size: 22px; letter-spacing: -.025em; }
+.mci-pattern__copy p { margin: 0; color: var(--mci-text-muted); font-size: 13px; line-height: 1.7; }
+
+.mci-pattern--story .mci-pattern__visual { background: #f2f0e8; color: #151515; }
+.mci-pattern--story .mci-pattern__visual::before { position: absolute; right: -40px; bottom: -100px; width: 260px; height: 260px; content: ""; border-radius: 50%; background: #ff4f3d; opacity: .9; }
+.mci-story-word { position: absolute; top: 76px; left: 28px; z-index: 1; font-size: clamp(46px, 5vw, 70px); font-weight: 900; line-height: .82; letter-spacing: -.08em; }
+.mci-story-word em { color: #3e52df; font-style: normal; }
+.mci-story-line { position: absolute; right: 28px; bottom: 30px; left: 28px; height: 1px; background: rgba(0, 0, 0, .32); }
+.mci-story-line::before { position: absolute; left: 0; bottom: 10px; content: "THE IDEA BECOMES THE INTERFACE"; font-size: 9px; font-style: normal; letter-spacing: .14em; }
+
+.mci-pattern--product .mci-pattern__visual { display: grid; place-items: center; background: radial-gradient(circle at 0 0, #dce6ff, transparent 45%), #f5f7fb; color: #18233c; }
+.mci-phone-card { width: min(330px, 90%); padding: 20px; border: 1px solid #e2e7f1; border-radius: 22px; background: #fff; box-shadow: 0 22px 55px rgba(38, 54, 94, .18); }
+.mci-phone-card__bar { display: flex; align-items: center; gap: 9px; font-size: 11px; }
+.mci-phone-card__bar i { width: 24px; height: 24px; border-radius: 8px; background: #5b7cfa; }
+.mci-phone-card__bar b { margin-left: auto; color: #7c889f; font-size: 9px; }
+.mci-phone-card__progress { height: 3px; margin: 14px 0 20px; overflow: hidden; border-radius: 4px; background: #edf0f6; }
+.mci-phone-card__progress i { display: block; width: 66%; height: 100%; background: #5b7cfa; }
+.mci-phone-card > strong { display: block; margin-bottom: 12px; font-size: 14px; }
+.mci-phone-card__choice { display: grid; grid-template-columns: 24px 1fr; gap: 10px; margin-top: 8px; padding: 11px; border: 1px solid #e5e9f1; border-radius: 12px; }
+.mci-phone-card__choice > i { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid #d0d7e5; border-radius: 50%; font-size: 10px; font-style: normal; }
+.mci-phone-card__choice span { font-size: 11px; font-weight: 700; }
+.mci-phone-card__choice small { display: block; margin-top: 3px; color: #8a96ab; font-size: 8px; font-weight: 400; }
+.mci-phone-card__choice.is-selected { border-color: #5b7cfa; background: #f2f5ff; }
+.mci-phone-card__choice.is-selected > i { color: white; border-color: #5b7cfa; background: #5b7cfa; }
+
+.mci-pattern--editorial .mci-pattern__visual { background: #ffcd55; color: #191919; }
+.mci-editorial-type { position: absolute; top: 38px; left: 32px; display: flex; align-items: start; gap: 14px; }
+.mci-editorial-type b { font-size: 114px; line-height: .85; letter-spacing: -.1em; }
+.mci-editorial-type span { max-width: 95px; padding-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.4; }
+.mci-editorial-card { position: absolute; right: -20px; bottom: -44px; width: 285px; height: 190px; padding: 22px; transform: rotate(-7deg); background: #3527a5; box-shadow: 0 20px 50px rgba(47, 38, 132, .3); }
+.mci-editorial-card i { display: inline-block; width: 42px; height: 42px; margin-right: -6px; border: 2px solid #fff; border-radius: 50%; }
+.mci-editorial-card i:nth-child(2) { background: #ff6257; }
+.mci-editorial-card i:nth-child(3) { background: #5ce3cc; }
+.mci-editorial-card strong { display: block; margin-top: 18px; color: #fff; font-size: 25px; }
+
+.mci-pattern--immersive .mci-pattern__visual { background: radial-gradient(circle at 52% 48%, #1c3350, #050914 70%); }
+.mci-pattern--immersive .mci-pattern__visual::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(73, 220, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(73, 220, 255, .05) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(to bottom, black, transparent); }
+.mci-orb { position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; transform: translate(-50%, -58%); }
+.mci-orb::before { position: absolute; inset: 34px; content: ""; border-radius: 38% 62% 44% 56%; background: radial-gradient(circle at 34% 28%, #eaffff, #61eaff 16%, #5d63fa 54%, #17165e 72%); filter: drop-shadow(0 0 34px rgba(80, 201, 255, .5)); animation: mci-blob 7s ease-in-out infinite; }
+.mci-orb i { position: absolute; inset: 0; border: 1px solid rgba(107, 222, 255, .35); border-radius: 50%; }
+.mci-orb i:nth-child(1) { transform: rotateX(72deg); }
+.mci-orb i:nth-child(2) { transform: rotateY(72deg); }
+.mci-orb i:nth-child(3) { inset: 20px; border-style: dashed; animation: mci-orbit 12s linear infinite; }
+.mci-orb b { position: absolute; top: 22px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: #62efff; box-shadow: 0 0 16px #62efff; animation: mci-point 4s ease-in-out infinite; }
+.mci-orb-copy { position: absolute; right: 24px; bottom: 22px; left: 24px; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .62); font-size: 9px; letter-spacing: .08em; }
+
+.mci-pattern--motion .mci-pattern__visual { background: #f8f7fc; color: #121526; }
+.mci-pattern--motion .mci-pattern__visual::after { position: absolute; top: -120px; right: -80px; width: 300px; height: 300px; content: ""; border-radius: 50%; background: conic-gradient(from 35deg, #7259ff, #44dcff, #ff76ac, #7259ff); filter: blur(20px); opacity: .72; animation: mci-spin 10s linear infinite; }
+.mci-motion-copy { position: absolute; z-index: 1; top: 44px; left: 32px; }
+.mci-motion-copy small { display: block; margin-bottom: 22px; color: #5a6680; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
+.mci-motion-copy strong { font-size: 52px; line-height: .95; letter-spacing: -.06em; }
+.mci-motion-track { position: absolute; z-index: 1; right: 32px; bottom: 28px; left: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
+.mci-motion-track i { height: 4px; border-radius: 6px; background: #dfe3ed; }
+.mci-motion-track i:nth-child(1), .mci-motion-track i:nth-child(2) { background: #5b7cfa; }
+
+.mci-pattern--data .mci-pattern__visual { background: #0c1729; }
+.mci-data-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
+.mci-data-head span { font-size: 13px; font-weight: 700; }
+.mci-data-head b { padding: 5px 8px; border: 1px solid rgba(38, 215, 176, .3); border-radius: 999px; color: #6ff0d2; font-size: 8px; }
+.mci-data-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; }
+.mci-data-metrics > span { padding: 11px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: rgba(255, 255, 255, .03); }
+.mci-data-metrics small { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, .5); font-size: 8px; }
+.mci-data-metrics b { font-size: 22px; }
+.mci-data-chart { display: flex; height: 112px; align-items: end; gap: 8px; padding: 14px 10px 0; border-top: 1px solid rgba(255, 255, 255, .06); background: linear-gradient(to top, rgba(91, 124, 250, .08), transparent); }
+.mci-data-chart i { flex: 1; height: var(--h, 50%); border-radius: 5px 5px 1px 1px; background: linear-gradient(to top, #536bf0, #46dffc); transform-origin: bottom; animation: mci-bars 2.6s ease-in-out infinite alternate; }
+.mci-data-chart i:nth-child(1) { --h: 42%; }
+.mci-data-chart i:nth-child(2) { --h: 66%; animation-delay: -.3s; }
+.mci-data-chart i:nth-child(3) { --h: 51%; animation-delay: -.6s; }
+.mci-data-chart i:nth-child(4) { --h: 88%; animation-delay: -.9s; }
+.mci-data-chart i:nth-child(5) { --h: 72%; animation-delay: -1.2s; }
+.mci-data-chart i:nth-child(6) { --h: 96%; animation-delay: -1.5s; }
+.mci-data-chart i:nth-child(7) { --h: 78%; animation-delay: -1.8s; }
+
+.mci-flow { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 8vw, 110px); align-items: center; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 110px 0; border-top: 1px solid var(--mci-border); }
+.mci-flow__intro > p { max-width: 520px; margin: 22px 0; color: var(--mci-text-muted); line-height: 1.8; }
+.mci-flow__intro ul { display: grid; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
+.mci-flow__intro li { display: flex; align-items: center; gap: 13px; padding: 12px 0; border-bottom: 1px solid var(--mci-border); font-size: 13px; }
+.mci-flow__intro li span { color: var(--mci-primary); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
+.mci-flow-card { min-height: 480px; padding: clamp(24px, 4vw, 42px); border: 1px solid var(--mci-border); border-radius: var(--mci-shape-card); background: var(--mci-surface); box-shadow: var(--mci-shadow-card); }
+.mci-flow-card__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid var(--mci-border); }
+.mci-flow-card__head span { font-size: 20px; font-weight: 750; }
+.mci-flow-card__head small { color: var(--mci-text-muted); font-size: 10px; }
+.mci-field { display: grid; gap: 9px; margin-top: 26px; }
+.mci-field > span, .mci-plan-group legend { font-size: 12px; font-weight: 700; }
+.mci-field input { width: 100%; height: 50px; padding: 0 16px; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-input); outline: 0; color: var(--mci-text); background: var(--mci-bg-soft); transition: border .2s, box-shadow .2s; }
+.mci-field input:focus { border-color: var(--mci-primary); box-shadow: 0 0 0 3px rgba(91, 124, 250, .15); }
+.mci-field small { color: var(--mci-text-muted); font-size: 10px; }
+.mci-plan-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 22px 0 0; padding: 0; border: 0; }
+.mci-plan-group legend { grid-column: 1 / -1; margin-bottom: 8px; }
+.mci-plan-group label { position: relative; cursor: pointer; }
+.mci-plan-group input { position: absolute; opacity: 0; pointer-events: none; }
+.mci-plan-group label > span { display: block; padding: 14px; border: 1px solid var(--mci-border); border-radius: var(--mci-shape-input); background: var(--mci-bg-soft); transition: .2s ease; }
+.mci-plan-group input:checked + span { border-color: var(--mci-primary); box-shadow: inset 0 0 0 1px var(--mci-primary); }
+.mci-plan-group b, .mci-plan-group small { display: block; font-size: 11px; }
+.mci-plan-group small { margin-top: 5px; color: var(--mci-text-muted); font-size: 9px; }
+.mci-flow-card__status { min-height: 42px; margin: 20px 0 12px; padding: 12px 14px; border-radius: 11px; color: var(--mci-text-muted); background: rgba(107, 135, 255, .08); font-size: 11px; line-height: 1.6; }
+.mci-flow-card__status.is-error { color: var(--mci-danger); background: rgba(255, 107, 136, .09); }
+.mci-flow-card__status.is-success { color: var(--mci-success); background: rgba(38, 215, 176, .09); }
+.mci-flow-card__submit { width: 100%; border: 0; }
+.mci-flow-card__submit.is-loading i { display: block; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: white; border-radius: 50%; font-size: 0; animation: mci-spin .7s linear infinite; }
+
+.mci-contract { display: grid; grid-template-columns: 1.1fr .7fr .95fr; gap: 28px; align-items: stretch; width: min(1180px, calc(100% - 40px)); margin: 0 auto 100px; padding: clamp(28px, 5vw, 54px); border: 1px solid rgba(107, 135, 255, .28); border-radius: 34px; background: linear-gradient(145deg, rgba(91, 124, 250, .15), var(--mci-surface)); box-shadow: var(--mci-shadow-card); }
+.mci-contract h2 { font-size: clamp(29px, 3vw, 42px); }
+.mci-contract__copy p { margin: 18px 0 0; color: var(--mci-text-muted); font-size: 13px; line-height: 1.8; }
+.mci-contract__tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.mci-contract__tokens > span { padding: 13px; border: 1px solid var(--mci-border); border-radius: 14px; background: var(--mci-bg-soft); }
+.mci-contract__tokens i { display: block; width: 100%; height: 42px; margin-bottom: 10px; border-radius: 9px; background: var(--token); }
+.mci-contract__tokens b, .mci-contract__tokens small { display: block; font-size: 9px; }
+.mci-contract__tokens small { margin-top: 3px; color: var(--mci-text-muted); }
+.mci-contract__code { display: flex; align-items: center; margin: 0; padding: 22px; overflow: auto; border: 1px solid var(--mci-border); border-radius: 18px; color: #c7d3eb; background: #07101e; font: 11px/1.9 "Cascadia Code", Consolas, monospace; }
+.mci-contract__code span { color: #72e7ff; }
+.mci-lab__footer { display: flex; justify-content: space-between; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 30px 0 42px; border-top: 1px solid var(--mci-border); color: var(--mci-text-muted); font-size: 10px; letter-spacing: .08em; }
+
+@keyframes mci-drift { to { transform: translate3d(-18px, 14px, 0) scale(1.03); } }
+@keyframes mci-orbit { to { transform: rotate(360deg); } }
+@keyframes mci-orbit-pulse { 50% { transform: scale(.94) rotate(8deg); filter: drop-shadow(0 0 46px rgba(83, 120, 255, .62)); } }
+@keyframes mci-blob { 50% { transform: rotate(14deg) scale(.92); border-radius: 58% 42% 64% 36%; } }
+@keyframes mci-point { 50% { transform: translate(-130px, 128px); } }
+@keyframes mci-spin { to { transform: rotate(360deg); } }
+@keyframes mci-bars { to { transform: scaleY(.65); opacity: .72; } }
+
+@media (max-width: 900px) {
+  .mci-lab__nav { grid-template-columns: 1fr auto; }
+  .mci-lab__nav-links { display: none; }
+  .mci-hero { grid-template-columns: 1fr; gap: 50px; padding-top: 64px; }
+  .mci-hero__console { width: min(560px, 100%); }
+  .mci-flow { grid-template-columns: 1fr; }
+  .mci-contract { grid-template-columns: 1fr 1fr; }
+  .mci-contract__copy { grid-column: 1 / -1; }
+}
+
+@media (max-width: 680px) {
+  .mci-lab__nav, .mci-hero, .mci-section, .mci-flow, .mci-contract, .mci-lab__footer { width: min(100% - 28px, 1180px); }
+  .mci-lab__nav { height: 68px; }
+  .mci-lab__brand { font-size: 12px; }
+  .mci-lab__brand-mark { width: 30px; height: 30px; border-radius: 9px; }
+  .mci-icon-button { width: 62px; height: 34px; }
+  .mci-hero { min-height: auto; padding: 64px 0 70px; }
+  .mci-hero h1 { margin-top: 20px; font-size: clamp(48px, 14vw, 64px); }
+  .mci-hero__content > p { font-size: 14px; line-height: 1.75; }
+  .mci-hero__actions, .mci-hero__actions .mci-button { width: 100%; }
+  .mci-hero__console { min-height: 360px; border-radius: 26px; }
+  .mci-console__orbit { top: 78px; transform: translateX(-50%) scale(.82); }
+  .mci-section { padding: 80px 0; }
+  .mci-section__head { display: grid; align-items: start; }
+  .mci-filter { width: 100%; overflow-x: auto; border-radius: 14px; }
+  .mci-filter button { flex: 0 0 auto; }
+  .mci-pattern-grid { grid-template-columns: 1fr; }
+  .mci-pattern__visual { height: 286px; padding: 22px; }
+  .mci-story-word { left: 22px; font-size: 55px; }
+  .mci-editorial-type b { font-size: 92px; }
+  .mci-flow { padding: 80px 0; }
+  .mci-flow-card { min-height: 0; padding: 22px; }
+  .mci-flow-card__head { display: grid; gap: 7px; }
+  .mci-plan-group { grid-template-columns: 1fr; }
+  .mci-contract { grid-template-columns: 1fr; margin-bottom: 60px; padding: 24px; border-radius: 26px; }
+  .mci-contract__copy { grid-column: auto; }
+  .mci-contract__code { min-height: 210px; }
+  .mci-lab__footer { display: grid; gap: 8px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  .mci-lab *, .mci-lab *::before, .mci-lab *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
+}