@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/lab/fonts/plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/lab/fonts/plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:400;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:400;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:500;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-500-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:500;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:600;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-600-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:600;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:700;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-700-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}@font-face{font-family:IBM Plex Sans Arabic;font-style:normal;font-weight:700;font-display:swap;src:url(/lab/fonts/plex-sans-arabic-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--ink-50: #EDF3F9;--ink-100: #D3E0EE;--ink-200: #A9C1DA;--ink-300: #7B9CC2;--ink-400: #5177A5;--ink-500: #385B87;--ink-600: #2A4468;--ink-700: #1F334E;--ink-750: #1B2C46;--ink-800: #16233A;--ink-850: #101A2B;--ink-900: #0B1220;--ink-950: #070B12;--horizon-200: #F8DCA8;--horizon-300: #F2C97F;--horizon-400: #E8B45C;--horizon-500: #D69B3C;--horizon-600: #B27C28;--horizon-700: #8A5E1E;--mark-mint: #5AE4C0;--mark-teal: #66BAC6;--mark-sky: #7EC6DE;--mark-deep: #48A8A8;--brand-gradient: linear-gradient(90deg, #5AE4C0 0%, #66BAC6 50%, #7EC6DE 100%);--signal-live: #3DD68C;--signal-store: #5AA9FF;--signal-beta: #E8B45C;--signal-design: #B79BFF;--signal-danger: #F2685C;--ink-900-rgb: 11 18 32;--ink-800-rgb: 22 35 58;--horizon-400-rgb: 232 180 92;--mark-mint-rgb: 90 228 192;--mark-sky-rgb: 126 198 222;--font-sans: "IBM Plex Sans Arabic", "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--weight-regular: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--text-xs: .75rem;--text-sm: .8125rem;--text-base: .9375rem;--text-md: 1rem;--text-lg: clamp(1.0625rem, .35vw + .98rem, 1.1875rem);--text-xl: clamp(1.1875rem, .6vw + 1.05rem, 1.375rem);--text-2xl: clamp(1.375rem, 1vw + 1.15rem, 1.75rem);--text-3xl: clamp(1.625rem, 1.8vw + 1.25rem, 2.25rem);--text-4xl: clamp(2rem, 3vw + 1.4rem, 3rem);--text-5xl: clamp(2.5rem, 4.5vw + 1.6rem, 4rem);--text-6xl: clamp(3rem, 6.5vw + 1.7rem, 5.5rem);--leading-tight: 1.15;--leading-snug: 1.3;--leading-normal: 1.6;--leading-relaxed: 1.85;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .04em;--tracking-wider: .12em;--space-0: 0;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--space-32: 8rem;--space-40: 10rem;--radius-none: 0;--radius-sm: .25rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--elev-0: none;--elev-1: 0 1px 2px rgb(0 0 0 / .3), inset 0 1px 0 rgb(255 255 255 / .04);--elev-2: 0 2px 8px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .05);--elev-3: 0 8px 24px rgb(0 0 0 / .45), inset 0 1px 0 rgb(255 255 255 / .06);--elev-4: 0 20px 56px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .07);--elev-glow: 0 0 0 1px rgb(232 180 92 / .35), 0 4px 24px rgb(232 180 92 / .16);--dur-instant: 0ms;--dur-fast: .14s;--dur-base: .24s;--dur-slow: .4s;--dur-slower: .64s;--dur-deliberate: .9s;--ease-standard: cubic-bezier(.2, 0, 0, 1);--ease-entrance: cubic-bezier(0, 0, 0, 1);--ease-exit: cubic-bezier(.3, 0, 1, 1);--ease-spring: cubic-bezier(.34, 1.4, .64, 1);--layer-base: 0;--layer-raised: 10;--layer-sticky: 100;--layer-overlay: 200;--layer-modal: 300;--layer-toast: 400;--layer-command: 500;--size-measure: 68ch;--size-container: 1200px;--size-containerWide: 1440px;--surface-void: var(--ink-950);--surface-base: var(--ink-900);--surface-raised: var(--ink-850);--surface-card: var(--ink-800);--border-subtle: var(--ink-750);--border-strong: var(--ink-600);--text-primary: var(--ink-50);--text-secondary: var(--ink-200);--text-muted: var(--ink-300);--text-disabled: var(--ink-400);--accent: var(--horizon-400);--accent-hover: var(--horizon-300);--accent-press: var(--horizon-600);--accent-ink: var(--ink-950);--focus-ring: var(--horizon-400)}@media(prefers-reduced-motion:reduce){:root{--dur-instant: 0ms;--dur-fast: 0ms;--dur-base: 0ms;--dur-slow: 0ms;--dur-slower: 0ms;--dur-deliberate: 0ms}}*,*:before,*:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-block-start:var(--space-20)}body{min-block-size:100vh;font-family:var(--font-sans);font-size:var(--text-base);font-weight:var(--weight-regular);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--surface-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}[hidden]{display:none!important}img,picture,video,canvas,svg{display:block;max-inline-size:100%;block-size:auto}input,button,textarea,select{font:inherit;color:inherit}button{background:none;border:none;cursor:pointer}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}ul[role=list],ol[role=list]{list-style:none;padding:0}h1,h2,h3,h4{font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-wrap:balance}h1{font-size:var(--text-5xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)}p{text-wrap:pretty;max-inline-size:var(--size-measure)}a{color:var(--accent);text-decoration-color:rgb(var(--horizon-400-rgb) / .4);text-underline-offset:.25em;transition:color var(--dur-fast) var(--ease-standard)}a:hover{color:var(--accent-hover)}code,kbd,samp,pre{font-family:var(--font-mono);font-size:.9em;direction:ltr;unicode-bidi:embed}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--radius-sm)}:focus:not(:focus-visible){outline:none}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip-link{position:absolute;inset-block-start:var(--space-2);inset-inline-start:var(--space-2);z-index:var(--layer-toast);padding:var(--space-3) var(--space-5);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-md);font-weight:var(--weight-semibold);text-decoration:none;transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease-entrance)}.skip-link:focus-visible{transform:translateY(0)}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.container{inline-size:min(100% - var(--space-8),var(--size-container));margin-inline:auto}.stack>*+*{margin-block-start:var(--flow, var(--space-4))}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-size:var(--text-base);font-weight:var(--weight-semibold);text-decoration:none;transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-sm{padding:var(--space-2) var(--space-4);font-size:var(--text-sm)}.btn-primary{background:var(--accent);color:var(--accent-ink)}.btn-primary:hover:not(:disabled){background:var(--accent-hover);color:var(--accent-ink)}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--border-strong)}.btn-secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn-ghost{background:transparent;color:var(--text-muted)}.btn-ghost:hover:not(:disabled){color:var(--text-primary)}.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;text-decoration:none}.badge:before{content:"";inline-size:6px;block-size:6px;border-radius:var(--radius-full);background:currentColor;flex:none}.badge-live{color:var(--signal-live);background:#3dd68c1a;direction:ltr}.badge-appstore{color:var(--signal-store);background:#5aa9ff1a}.badge-apk{color:var(--signal-beta);background:rgb(var(--horizon-400-rgb) / .1)}.badge-design{color:var(--signal-design);background:#b79bff1a}a.badge{transition:background-color var(--dur-fast) var(--ease-standard)}a.badge:hover{background-color:#3dd68c33}.tech{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}.tech li{padding:var(--space-1) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);direction:ltr}.tech-more{color:var(--text-disabled)}.card{padding:var(--space-6);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--elev-1)}.horizon-line{position:fixed;inset-block-start:0;inset-inline:0;block-size:2px;z-index:var(--layer-sticky);background:linear-gradient(90deg,transparent 0%,rgb(var(--mark-mint-rgb) / 0) 8%,rgb(var(--mark-mint-rgb) / .85) 32%,rgb(var(--mark-sky-rgb) / .85) 68%,rgb(var(--mark-sky-rgb) / 0) 92%,transparent 100%)}.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:inherit;min-inline-size:0}.brand-logo{block-size:clamp(26px,5.2vw,34px);inline-size:auto;flex:none}.brand-sub{font-size:var(--text-xs);letter-spacing:var(--tracking-normal);color:var(--text-muted);padding-inline-start:var(--space-3);border-inline-start:1px solid var(--border-subtle);white-space:nowrap}@media(max-width:560px){.brand-sub{display:none}}.lede{font-size:var(--text-xl);line-height:var(--leading-relaxed);color:var(--text-secondary)}body:before{content:"";position:fixed;inset-block-start:0;inset-inline:0;block-size:340px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 70% 100% at 50% 0%,rgb(var(--horizon-400-rgb) / .07),transparent 70%)}.page-header{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;justify-content:space-between;padding-block:var(--space-10) var(--space-16)}.intro{padding-block-end:var(--space-24);border-block-end:1px solid var(--border-subtle)}.intro h1{font-size:var(--text-6xl);font-weight:var(--weight-bold);background:linear-gradient(180deg,var(--text-primary) 30%,var(--ink-300) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}section{padding-block:var(--space-20);border-block-end:1px solid var(--border-subtle)}section:last-of-type{border-block-end:none}.section-title{display:flex;align-items:baseline;gap:var(--space-4);margin-block-end:var(--space-8);font-size:var(--text-2xl)}.section-num{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-regular);letter-spacing:var(--tracking-wider);color:var(--accent)}.sub{margin-block:var(--space-12) var(--space-3);font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-secondary)}.sub:first-of-type{margin-block-start:0}.note{margin-block-end:var(--space-6);font-size:var(--text-base);color:var(--text-muted);line-height:var(--leading-relaxed)}.note-inline{margin-block-start:var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:var(--space-3);margin-block-end:var(--space-8)}.swatch{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-card);transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-standard)}.swatch:hover{transform:translateY(-3px);box-shadow:var(--elev-3)}.swatch-chip{block-size:62px;box-shadow:inset 0 0 0 1px #ffffff12}.swatch-info{padding:var(--space-2) var(--space-3) var(--space-3)}.swatch-name,.swatch-hex{font-family:var(--font-mono);font-size:var(--text-xs);direction:ltr;text-align:start}.swatch-name{color:var(--text-secondary)}.swatch-hex{color:var(--text-muted);text-transform:uppercase}.swatch-note{margin-block-start:var(--space-1);font-size:.6875rem;line-height:1.4;color:var(--text-disabled)}.type-label,.motion-name,.contrast-ratio,.elev-box,.tech li{direction:ltr;text-align:start}.contrast-table{display:grid;gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}.contrast-row{display:grid;grid-template-columns:1.6fr auto auto;gap:var(--space-4);align-items:center;padding:var(--space-3) var(--space-4);background:var(--surface-card)}.contrast-sample{font-weight:var(--weight-medium)}.contrast-ratio{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);font-variant-numeric:tabular-nums}.contrast-grade{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);min-inline-size:46px;text-align:center}.grade-aaa{color:var(--signal-live);background:#3dd68c1f}.grade-aa{color:var(--horizon-300);background:rgb(var(--horizon-400-rgb) / .12)}.grade-fail{color:var(--signal-danger);background:#f2685c1f}.type-scale{display:grid;gap:var(--space-5)}.type-row{display:grid;grid-template-columns:88px 1fr;gap:var(--space-5);align-items:baseline;padding-block-end:var(--space-4);border-block-end:1px solid var(--border-subtle)}.type-label{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.type-sample{line-height:var(--leading-tight);color:var(--text-primary)}.elevations{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-5)}.elev-box{padding:var(--space-6) var(--space-4);text-align:center;border-radius:var(--radius-lg);background:var(--surface-card);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.motion-lab{display:grid;gap:var(--space-3)}.motion-row{display:grid;grid-template-columns:148px 1fr;gap:var(--space-5);align-items:center;padding:var(--space-3) var(--space-4);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);cursor:pointer}.motion-row:hover{border-color:var(--border-strong)}.motion-name{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary)}.motion-track{position:relative;block-size:6px;border-radius:var(--radius-full);background:var(--ink-850)}.motion-dot{position:absolute;inset-block-start:50%;inset-inline-start:0;inline-size:14px;block-size:14px;margin-block-start:-7px;border-radius:var(--radius-full);background:var(--accent);box-shadow:var(--elev-glow)}.motion-row.is-running .motion-dot{animation:slide var(--motion-dur, .4s) var(--motion-ease, ease) both}@keyframes slide{0%{inset-inline-start:0}to{inset-inline-start:calc(100% - 14px)}}.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:var(--space-5);margin-block-end:var(--space-5)}.work-card{padding:var(--space-6);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--elev-1);transition:border-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base) var(--ease-standard)}.work-card:hover{border-color:var(--border-strong);transform:translateY(-4px);box-shadow:var(--elev-3)}.work-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-block-end:var(--space-3)}.work-desc{font-size:var(--text-base);color:var(--text-muted);margin-block-end:var(--space-4)}.tech{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0}.tech li{padding:var(--space-1) var(--space-3);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}.dir-demo{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:var(--space-5)}.dir-box{position:relative;padding:var(--space-8) var(--space-5) var(--space-5);border:1px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-raised)}.dir-tag{position:absolute;inset-block-start:var(--space-3);inset-inline-start:var(--space-4);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);direction:ltr}.dir-row{display:flex;align-items:center;gap:var(--space-3)}.dir-row>span:not(.dot){flex:1;color:var(--text-secondary)}.dot{inline-size:10px;block-size:10px;border-radius:var(--radius-full);background:var(--accent);flex:none}.page-footer{padding-block:var(--space-12) var(--space-16);font-size:var(--text-sm);color:var(--text-disabled)}kbd{padding:2px 7px;border:1px solid var(--border-strong);border-block-end-width:2px;border-radius:var(--radius-sm);font-size:.8em;color:var(--text-secondary);background:var(--surface-raised)}