.motion-section { margin: 0 0 72px; }
.motion-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.motion-section-heading h2 { font-family: 'Plus Jakarta Sans',sans-serif; font-weight: 700; font-size: clamp(24px,3vw,36px); letter-spacing: -.04em; line-height: 1.25; margin-top: 12px; }
.motion-section-heading p, .motion-note { color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.7; }
.motion-eyebrow { font: 10px 'JetBrains Mono',monospace; letter-spacing: .1em; }
.motion-gallery { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.motion-gallery > a { border: 1px solid hsl(var(--border)); border-radius: 18px; overflow: hidden; min-width: 0; padding: 28px; min-height: 210px; display: flex; flex-direction: column; justify-content: space-between; background: hsl(var(--card)); transition: border-color .2s; }
.motion-gallery > a:hover { border-color: #753399; }
.motion-gallery > a:focus-visible { outline: 2px solid #753399; outline-offset: 4px; }
.motion-gallery .motion-gallery-gradient { grid-row: span 2; padding: 0; }
.motion-gallery .motion-gallery-gradient > div { display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.motion-gallery h3 { font: 700 clamp(26px,3.5vw,44px)/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing: -.04em; margin: 24px 0; }
.motion-gallery a > span:last-child, .motion-gallery-gradient > div > span:last-child { font-size: 12px; }
.motion-gallery .motion-gallery-shimmer { grid-column: span 2; min-height: 200px; }
.motion-playground { width: 100%; min-width: 0; }
.motion-stage { min-height: 280px; display: grid; place-items: center; text-align: center; }
.motion-stage h3 { font: 700 clamp(28px,4vw,48px)/1.2 'Plus Jakarta Sans',sans-serif; letter-spacing: -.04em; overflow-wrap: anywhere; padding: 24px; }
.motion-gradient-demo { min-height: 280px; width: 100%; border-radius: 16px; color: white; display: flex; flex-direction: column; justify-content: center; padding: 24px; }
.motion-gradient-demo p { font-size: 13px; }
.motion-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-top: 24px; text-align: left; }
.motion-controls label { display: flex; flex-direction: column; gap: 8px; font-size: 12px; flex: 1; min-width: 130px; }
.motion-controls input:not([type="range"]), .motion-controls select, .motion-controls button { border: 1px solid hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); border-radius: 6px; padding: 8px 10px; font-size: 12px; min-width: 0; }
.motion-controls input[type="range"] { accent-color: #753399; min-height: 34px; }
.motion-controls button { background: #753399; color: white; padding: 8px 16px; }
.motion-note { margin-top: 18px; text-align: left; font-size: 11px; }
.monta-playground-section { margin: 0 0 76px; }
.monta-playground-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:0 0 24px; }
.monta-playground-heading h2 { font:700 clamp(26px,3vw,38px)/1.2 'Plus Jakarta Sans',sans-serif; letter-spacing:-.045em; margin:10px 0 8px; }
.monta-playground-heading p { color:hsl(var(--muted-foreground)); font-size:13px; line-height:1.7; max-width:540px; }
.monta-playground-live,.monta-preview-badge { display:inline-flex; align-items:center; gap:8px; border:1px solid hsl(var(--border)); border-radius:999px; padding:8px 11px; color:hsl(var(--muted-foreground)); font:10px 'JetBrains Mono',monospace; white-space:nowrap; }
.monta-playground-live > span { width:7px;height:7px;border-radius:50%;background:#26b67a;box-shadow:0 0 0 3px rgba(38,182,122,.13); }
.monta-playground-shell { overflow:hidden; border:1px solid hsl(var(--border)); border-radius:16px; background:hsl(var(--card)); box-shadow:0 18px 60px rgba(0,0,0,.13); }
.monta-playground-topbar { height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border-bottom:1px solid hsl(var(--border)); background:rgba(127,127,127,.035); }
.monta-window-dots { display:flex; gap:6px; width:70px; }.monta-window-dots i { width:9px;height:9px;border-radius:50%;background:#ef6a64; }.monta-window-dots i:nth-child(2){background:#e9b84d}.monta-window-dots i:nth-child(3){background:#54bd77}
.monta-window-title { color:hsl(var(--muted-foreground)); font:11px 'JetBrains Mono',monospace; }
.monta-replay { display:inline-flex;align-items:center;gap:7px;border:1px solid hsl(var(--border));border-radius:7px;padding:6px 9px;background:hsl(var(--background));color:hsl(var(--foreground));font-size:11px;cursor:pointer;transition:border-color .18s,color .18s; }.monta-replay:hover{border-color:#753399;color:#a855f7}.monta-replay svg{width:13px;height:13px}
.monta-playground-tabs { display:flex;gap:4px;overflow:auto;padding:10px 14px;border-bottom:1px solid hsl(var(--border));scrollbar-width:thin; }
.monta-tab { display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid transparent;border-radius:7px;padding:8px 11px;background:transparent;color:hsl(var(--muted-foreground));font-size:12px;cursor:pointer;transition:background .16s,color .16s,border-color .16s; }.monta-tab svg{width:14px;height:14px}.monta-tab:hover{background:rgba(117,51,153,.08);color:hsl(var(--foreground))}.monta-tab[aria-selected="true"]{background:rgba(117,51,153,.12);border-color:rgba(117,51,153,.23);color:#a855f7}.monta-tab:focus-visible,.monta-replay:focus-visible,.monta-preview-content button:focus-visible,.monta-preview-content input:focus-visible{outline:2px solid #9b5bc1;outline-offset:2px}
.monta-playground-grid { display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);min-height:410px; }
.monta-runner { min-width:0;display:flex;flex-direction:column;border-right:1px solid hsl(var(--border));background:#111116;color:#e8e5eb; }
.monta-panel-heading,.monta-preview-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(140,130,150,.16); }
.monta-panel-kicker { color:#9c8da6;font:9px 'JetBrains Mono',monospace;letter-spacing:.12em; }.monta-panel-heading h3,.monta-preview-head h3{margin-top:5px;font-size:13px;font-weight:600;}
.monta-run-state { display:flex;align-items:center;gap:7px;color:#73d69d;font:10px 'JetBrains Mono',monospace; }.monta-run-state i{width:6px;height:6px;border-radius:50%;background:#4ac783; }
.monta-runner-body { display:grid;grid-template-columns:124px minmax(0,1fr);flex:1;min-height:270px; }
.monta-file-tree { border-right:1px solid rgba(140,130,150,.13);padding:16px 9px; }.monta-file-label { margin:0 7px 10px;color:#756d7c;font:9px 'JetBrains Mono',monospace;letter-spacing:.09em; }.monta-file-item { display:flex;align-items:center;gap:7px;margin:2px 0;padding:7px 6px;border-radius:5px;color:#8e8794;font:9px 'JetBrains Mono',monospace;white-space:nowrap; }.monta-file-item svg{width:12px;height:12px;color:#a876cc;flex:none}.monta-file-item.is-active{color:#e9d9f6;background:rgba(117,51,153,.22)}
.monta-run-log { padding:17px 15px;overflow:hidden;font:10px/1.9 'JetBrains Mono',monospace;color:#aaa3af; }.monta-log-line { display:flex;align-items:flex-start;gap:8px;animation:monta-log-in .28s ease both; }.monta-log-mark{color:#55cc8c;flex:none}.monta-log-line.is-muted .monta-log-mark{color:#a876cc}.monta-log-line.is-final{color:#78d99c}.monta-runner-footer { display:flex;justify-content:space-between;gap:10px;padding:11px 15px;border-top:1px solid rgba(140,130,150,.13);color:#78717f;font:8px 'JetBrains Mono',monospace; }.monta-runner-footer span:first-child{display:flex;align-items:center;gap:6px}.monta-runner-footer svg{width:12px;height:12px;color:#54bd77}
.monta-preview-panel{display:flex;min-width:0;flex-direction:column}.monta-preview-head{border-bottom:0;padding-bottom:12px}.monta-preview-badge{padding:6px 9px;color:#9e64bf;font:9px 'Inter',sans-serif}.monta-preview-badge svg{width:13px;height:13px}
.monta-preview-canvas { display:grid;place-items:center;flex:1;min-height:290px;margin:0 15px;border:1px solid hsl(var(--border));border-radius:10px;background-color:hsl(var(--background));background-image:radial-gradient(rgba(140,130,150,.25) .7px,transparent .7px);background-size:17px 17px;overflow:hidden; }
.monta-preview-content { width:min(100%,440px);padding:30px 22px;text-align:center;animation:monta-preview-in .34s cubic-bezier(.2,.7,.25,1) both; }.monta-preview-caption{display:flex;justify-content:space-between;gap:10px;padding:13px 17px;color:hsl(var(--muted-foreground));font-size:9px}.monta-preview-file{font:9px 'JetBrains Mono',monospace;color:#a876cc}
.mp-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 19px;border:0;border-radius:7px;background:#753399;color:white;font-size:12px;font-weight:600;box-shadow:0 3px 12px rgba(117,51,153,.27);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}.mp-button:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(117,51,153,.34);background:#632982}.mp-button:active{transform:scale(.98)}.mp-button svg{width:15px;height:15px}.mp-button-secondary{background:hsl(var(--background));border:1px solid hsl(var(--border));color:hsl(var(--foreground));box-shadow:none}.mp-button-secondary:hover{color:#a855f7;border-color:#753399;background:rgba(117,51,153,.08);box-shadow:none}.mp-button-danger{background:#c83c4d}
.mp-demo-label{margin-bottom:7px;text-align:left;font-size:10px;font-weight:600}.mp-demo-input{display:block;width:100%;height:42px;padding:0 12px;border:1px solid hsl(var(--input));border-radius:7px;background:hsl(var(--background));color:hsl(var(--foreground));font:12px Inter,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.06)}.mp-demo-input:focus{border-color:transparent;outline:2px solid rgba(117,51,153,.5)}.mp-form{max-width:300px;margin:auto;text-align:left}.mp-form small{display:block;margin-top:7px;color:hsl(var(--muted-foreground));font-size:10px}.mp-demo-dialog{max-width:345px;margin:auto;padding:22px;border:1px solid hsl(var(--border));border-radius:13px;background:hsl(var(--card));box-shadow:0 18px 55px rgba(0,0,0,.2);text-align:left;animation:monta-preview-in .24s ease both}.mp-dialog-icon{display:grid;place-items:center;width:38px;height:38px;margin-bottom:14px;border-radius:10px;background:rgba(117,51,153,.12);color:#a855f7}.mp-dialog-icon svg{width:19px;height:19px}.mp-demo-dialog h4{font-size:14px;font-weight:700}.mp-demo-dialog p{margin:7px 0 19px;color:hsl(var(--muted-foreground));font-size:11px;line-height:1.6}.mp-dialog-actions{display:flex;justify-content:flex-end;gap:8px}.mp-toast{display:flex;align-items:flex-start;gap:11px;max-width:320px;margin:auto;padding:15px;border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card));box-shadow:0 9px 30px rgba(0,0,0,.16);text-align:left;animation:monta-toast-in .3s cubic-bezier(.2,.75,.25,1) both}.mp-toast-icon{color:#168862}.mp-toast-icon svg{width:18px;height:18px}.mp-toast h4{font-size:12px;font-weight:650}.mp-toast p{margin-top:4px;color:hsl(var(--muted-foreground));font-size:10px}.mp-toast-close{margin-left:auto;border:0;background:none;color:hsl(var(--muted-foreground));cursor:pointer}.mp-toast-close svg{width:14px;height:14px}.mp-dashboard{max-width:360px;margin:auto;text-align:left}.mp-dashboard-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.mp-dashboard-title h4{font-size:13px;font-weight:700}.mp-dashboard-title span{color:hsl(var(--muted-foreground));font-size:9px}.mp-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.mp-kpi{padding:12px;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card));animation:monta-log-in .3s ease both}.mp-kpi span{color:hsl(var(--muted-foreground));font-size:9px}.mp-kpi strong{display:block;margin-top:6px;font:600 17px 'Plus Jakarta Sans',sans-serif}.mp-kpi em{color:#168862;font-size:9px;font-style:normal}.mp-chart{display:flex;align-items:end;gap:8px;height:68px;margin-top:12px;padding:10px 12px 0;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--card))}.mp-chart i{flex:1;height:var(--bar);border-radius:3px 3px 0 0;background:linear-gradient(0deg,#753399,#b584cf);animation:monta-bar-in .5s cubic-bezier(.2,.7,.25,1) both;transform-origin:bottom}
.mp-modal-layer{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.mp-modal-backdrop{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(7,6,10,.66);backdrop-filter:blur(5px);animation:monta-preview-in .2s ease both}.mp-modal-backdrop .mp-demo-dialog{position:relative;width:100%}.mp-modal-layer[hidden]{display:none}
@keyframes monta-log-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes monta-preview-in{from{opacity:0;filter:blur(5px);transform:translateY(7px) scale(.99)}to{opacity:1;filter:blur(0);transform:translateY(0) scale(1)}}@keyframes monta-toast-in{from{opacity:0;filter:blur(5px);transform:translateX(12px)}to{opacity:1;filter:blur(0);transform:translateX(0)}}@keyframes monta-bar-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(max-width:760px){.monta-playground-heading{align-items:flex-start;flex-direction:column;gap:12px}.monta-playground-grid{grid-template-columns:1fr}.monta-runner{border-right:0;border-bottom:1px solid hsl(var(--border))}.monta-runner-body{min-height:220px}.monta-preview-canvas{min-height:260px}.monta-window-dots{width:46px}.monta-runner-footer{font-size:7px}}
@media(max-width:420px){.monta-runner-body{grid-template-columns:96px minmax(0,1fr)}.monta-file-item{font-size:8px}.monta-run-log{padding:13px 9px;font-size:9px}.monta-preview-content{padding:22px 14px}.monta-runner-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.monta-playground-section *, .monta-playground-section *::before,.monta-playground-section *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media (max-width: 640px) {
  .motion-section-heading { flex-direction: column; align-items: start; }
  .motion-gallery { grid-template-columns: minmax(0,1fr); }
  .motion-gallery .motion-gallery-gradient { grid-row: auto; min-height: 320px; }
  .motion-gallery .motion-gallery-shimmer { grid-column: auto; }
}
#pageLayout { max-width: 1280px; }
#sidebar, #componentMenuToggle { display: none; }
#pageContent { display: block; }
#pageToc { display: none; }
#siteHeader > div { max-width: 1280px; }
#primaryNav { gap: 20px; }
#primaryNav a { white-space: nowrap; }
#primaryNav a[aria-current="page"] { color: #753399; }
#searchTrigger { width: 256px; white-space: nowrap; }

:root body { color: hsl(var(--foreground)); }
:root body .text-muted-foreground { color: hsl(var(--muted-foreground)); }
:root body .border-border, :root body .border-input { border-color: hsl(var(--border)); }
:root body .motion-controls input:not([type="range"]), :root body .motion-controls select { border-color: hsl(var(--input)); }
#homeHeroSection {
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 72px 0 64px;
}
#homeHeroSection h1 {
  max-width: 1020px;
  font-size: clamp(2.25rem, 5.2vw, 4.5rem);
  line-height: 1.12;
  letter-spacing: -.05em;
  text-wrap: balance;
}
#homeHeroSection p { max-width: 660px; line-height: 1.8; }
#homeHeroSection > div { justify-content: center; }
#homeShowcaseSection {
  margin-top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#homeShowcaseSection > div:first-child { margin-bottom: 24px; padding-bottom: 20px; }
#homeShowcaseSection > .grid { gap: 20px; }
#homeShowcaseSection > .grid > div {
  min-height: 280px;
  padding: 28px;
  justify-content: center;
  border-radius: 16px;
  background: hsl(var(--card));
}
#homeShowcaseSection h3 { font-size: 16px; margin-top: 16px; }
#homeCatalogSection { margin-top: 72px; padding-bottom: 64px; }
#homeCatalogSection > div:first-child { align-items: flex-start; gap: 28px; }
#categoryFilter { max-width: 620px; justify-content: flex-end; }
#componentsGrid { gap: 20px; }
body:not([data-view="home"]):not([data-view="docs"]) #pageContent { max-width: 1000px; margin: auto; }
@media (min-width: 768px) {
  body[data-view="docs"] #pageLayout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  body[data-view="docs"] #sidebar { display: block; position: sticky; top: 56px; height: calc(100dvh - 56px); }
}
@media (min-width: 1280px) {
  body[data-view="docs"] #pageContent { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 32px; }
  body[data-view="docs"] #pageToc { display: block; width: 190px; }
}
@media (max-width: 1100px) {
  #siteHeader > div { height: auto; min-height: 56px; flex-wrap: wrap; padding-top: 12px; }
  #siteHeader > div > div:first-child { display: contents; }
  #primaryNav { order: 3; width: 100%; overflow-x: auto; padding: 16px 0 12px; gap: 24px; }
  body[data-view="docs"] #sidebar { top: 108px; height: calc(100dvh - 108px); }
}
@media (max-width: 767px) {
  #searchTrigger { width: 32px; padding: 0; justify-content: center; }
  #searchTrigger span span, #searchTrigger kbd { display: none; }
  body[data-view="docs"] #componentMenuToggle { display: inline-flex; margin-top: 20px; }
  body[data-view="docs"] #sidebar.is-open { display: block; max-height: 55dvh; border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 20px; margin-top: 12px; }
  #homeHeroSection { padding: 40px 0 48px; gap: 20px; }
  #homeHeroSection h1 br { display: none; }
  #homeHeroSection > a { font-size: 10px; }
  #homeShowcaseSection > div:first-child { align-items: flex-start; gap: 12px; }
  #homeShowcaseSection > div:first-child > div:last-child { display: none; }
  #homeShowcaseSection > .grid > div { min-height: 240px; padding: 24px; }
  #categoryFilter { justify-content: flex-start; }
}