.previewer-page{--previewer-stage:#eef2ef;--previewer-stage-grid:#090d0a0e;--previewer-stage-glow:color-mix(in srgb, var(--color-accent) 13%, transparent);--previewer-frame:#fff;--previewer-frame-border:color-mix(in srgb, var(--color-accent) 46%, #090d0a26);--previewer-frame-shadow:color-mix(in srgb, var(--color-accent) 14%, #090d0a29);--previewer-loading:#34443a;--previewer-status:#172019;--previewer-status-border:#090d0a24;--previewer-status-background:#ffffffe6;--previewer-status-shadow:#090d0a29;background:var(--color-background);color-scheme:light;min-width:20rem;height:100dvh;max-height:100dvh;margin:0;overflow:hidden}.dark .previewer-page{--previewer-stage:#090d0a;--previewer-stage-grid:#ffffff06;--previewer-stage-glow:color-mix(in srgb, var(--color-accent) 10%, transparent);--previewer-frame:#101512;--previewer-frame-border:color-mix(in srgb, var(--color-accent) 52%, #ffffff21);--previewer-frame-shadow:color-mix(in srgb, var(--color-accent) 16%, #00000059);--previewer-loading:#d9e5dc;--previewer-status:#d7e2d9;--previewer-status-border:#ffffff1f;--previewer-status-background:#0a0f0be0;--previewer-status-shadow:#00000047;color-scheme:dark}.previewer-app{background:var(--color-background);grid-template-rows:4.25rem minmax(0,1fr);width:100%;height:100dvh;min-height:0;max-height:100dvh;display:grid;overflow:hidden}.previewer-header{z-index:50;border-bottom:1px solid var(--color-border);background:color-mix(in srgb, var(--color-background) 94%, transparent);backdrop-filter:blur(18px);justify-content:space-between;align-items:center;gap:1rem;min-width:0;padding:.625rem 1rem;display:flex;position:relative}.previewer-header__identity,.previewer-header__actions,.previewer-title-row,.previewer-back,.previewer-source,.previewer-button,.previewer-sidebar__header>div{align-items:center;display:flex}.previewer-header__identity{gap:.9rem;min-width:0}.previewer-header__actions{flex:none;gap:.5rem}.previewer-title-row{gap:.55rem}.previewer-title-row h1{letter-spacing:-.02em;margin:0;font-size:1rem;line-height:1.15}.previewer-header__identity p{color:var(--color-muted-foreground);margin:.2rem 0 0;font-size:.72rem}.previewer-header__divider{background:var(--color-border);width:1px;height:1.75rem}.brand-blob{background:var(--color-accent);width:.8rem;height:.8rem;box-shadow:0 0 1rem color-mix(in srgb, var(--color-accent) 42%, transparent);border-radius:45% 55% 65% 35%;flex:none;transform:rotate(-18deg)}.previewer-back{border-radius:var(--radius-md);min-height:2.75rem;color:var(--color-muted-foreground);gap:.45rem;font-size:.78rem;font-weight:650;text-decoration:none;transition:color .16s,background .16s}.previewer-back:hover{color:var(--color-foreground)}.previewer-page-locales{border:1px solid var(--color-border);border-radius:var(--radius-md);display:flex;overflow:hidden}.previewer-page-locales a{min-width:2.75rem;min-height:2.75rem;color:var(--color-muted-foreground);font:700 .68rem/1 var(--font-mono);place-items:center;text-decoration:none;transition:color .16s,background .16s;display:grid}.previewer-page-locales a[aria-current=page]{color:var(--color-foreground);background:var(--color-secondary)}.previewer-theme-switch{min-width:6.5rem}.previewer-source{border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:2.75rem;color:var(--color-muted-foreground);gap:.45rem;padding:0 .7rem;font-size:.68rem;text-decoration:none}.previewer-source code{color:var(--color-foreground);font-size:.66rem}.previewer-source__dot{background:var(--color-accent);width:.42rem;height:.42rem;box-shadow:0 0 .6rem var(--color-accent);border-radius:50%}.previewer-icon-button,.previewer-button{border:1px solid var(--color-border);border-radius:var(--radius-md);min-height:2.75rem;color:var(--color-foreground);background:var(--color-card);cursor:pointer;transition:border-color .16s,color .16s,background .16s}.previewer-icon-button{place-items:center;width:2.75rem;padding:0;text-decoration:none;display:inline-grid}.previewer-button{justify-content:center;gap:.45rem;padding:0 .85rem;font-size:.75rem;font-weight:700}.previewer-icon-button:hover,.previewer-button:hover{border-color:color-mix(in srgb, var(--color-accent) 55%, var(--color-border));background:var(--color-secondary)}.previewer-button--primary{border-color:var(--color-accent);color:var(--color-accent-foreground);background:var(--color-accent)}.previewer-button--primary:hover{color:var(--color-accent-foreground);background:color-mix(in srgb, var(--color-accent) 88%, black)}.previewer-button--wide{flex:1}.previewer-settings-open{display:none}.previewer-workspace{grid-template-columns:minmax(0,1fr) 21.5rem;width:100%;min-width:0;height:100%;min-height:0;display:grid;position:relative;overflow:hidden}.previewer-canvas{background-color:var(--previewer-stage);background-image:linear-gradient(var(--previewer-stage-grid) 1px, transparent 1px), linear-gradient(90deg, var(--previewer-stage-grid) 1px, transparent 1px), radial-gradient(circle at 48% 10%, var(--previewer-stage-glow), transparent 38rem);background-size:2rem 2rem,2rem 2rem,auto;width:100%;min-width:0;height:100%;min-height:0;padding:clamp(.55rem,1.5vw,1rem);position:relative;overflow:hidden}.previewer-device{border:1px solid var(--previewer-frame-border);background:var(--previewer-frame);width:100%;height:100%;max-height:100%;box-shadow:0 1.8rem 5rem var(--previewer-frame-shadow);border-radius:.75rem;margin:auto;transition:width .22s,max-width .22s,border-radius .22s;position:relative;overflow:hidden}.previewer-device--desktop{max-width:90rem}.previewer-device--tablet{width:min(48rem,100%)}.previewer-device--mobile{border-radius:1.45rem;width:min(24.375rem,100%)}.previewer-device iframe{opacity:0;pointer-events:none;background:var(--previewer-frame);width:100%;height:100%;color-scheme:inherit;border:0;transition:opacity .18s;position:absolute;inset:0}.previewer-device iframe.is-active{z-index:2;opacity:1;pointer-events:auto}.previewer-empty{z-index:1;color:var(--previewer-loading);text-align:center;place-content:center;justify-items:center;gap:.75rem;display:grid;position:absolute;inset:0}.previewer-empty strong{max-width:28rem;font-size:.84rem}.is-spinning{animation:.8s linear infinite previewer-spin}@keyframes previewer-spin{to{transform:rotate(360deg)}}.previewer-status{z-index:5;border:1px solid var(--previewer-status-border);min-height:2rem;color:var(--previewer-status);background:var(--previewer-status-background);box-shadow:0 .75rem 2rem var(--previewer-status-shadow);opacity:1;visibility:visible;backdrop-filter:blur(10px);border-radius:999px;align-items:center;gap:.42rem;padding:.35rem .7rem;font-size:.67rem;transition:opacity .18s,transform .18s,visibility .18s;display:flex;position:absolute;bottom:1.65rem;left:50%;transform:translate(-50%)}.previewer-status.is-hidden{opacity:0;pointer-events:none;visibility:hidden;transform:translate(-50%,.45rem)}.previewer-status.is-error{color:#fecaca;border-color:#ef444473;border-radius:.6rem;max-width:min(34rem,100% - 2rem)}.previewer-status button{min-height:1.75rem;color:inherit;background:color-mix(in srgb, currentColor 9%, transparent);cursor:pointer;border:0;border-radius:.35rem;align-items:center;gap:.3rem;padding:0 .45rem;display:inline-flex}.previewer-sidebar{z-index:20;border-left:1px solid var(--color-border);background:var(--color-background);grid-template-rows:auto minmax(0,1fr) auto;min-width:0;min-height:0;display:grid;position:relative}.previewer-sidebar__header{border-bottom:1px solid var(--color-border);justify-content:space-between;align-items:center;min-height:3.25rem;padding:.45rem .75rem .45rem 1rem;display:flex}.previewer-sidebar__header>div{gap:.5rem;font-size:.8rem}.previewer-sidebar__header .previewer-icon-button{display:none}.previewer-sidebar__body{overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;padding:.35rem 1rem 1rem;overflow-y:auto}.previewer-sidebar__footer{border-top:1px solid color-mix(in srgb, var(--color-border) 82%, transparent);background:var(--color-background);gap:.65rem;padding:.85rem 1rem;display:flex}.previewer-group{border:0;min-width:0;margin:0;padding:1.15rem 0 1.3rem}.previewer-group+.previewer-group{border-top:1px solid color-mix(in srgb, var(--color-border) 78%, transparent)}.previewer-group:last-child{padding-bottom:.35rem}.previewer-group>legend{width:100%;color:var(--color-muted-foreground);font:700 .62rem/1 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;margin:0 0 1rem}.previewer-group>legend:before{vertical-align:.2em;background:var(--color-accent);content:"";border-radius:999px;width:.8rem;height:2px;margin-right:.5rem;display:inline-block}.previewer-field{gap:.42rem;margin-top:.9rem;display:grid}.previewer-field:first-of-type{margin-top:0}.previewer-field>span:first-child,.previewer-segmented legend{color:var(--color-muted-foreground);font-size:.68rem;font-weight:650}.previewer-field input:not([type=color]),.previewer-field select{border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;min-height:2.75rem;color:var(--color-foreground);background-color:var(--color-card);font:500 .78rem/1.2 var(--font-sans);padding:0 .7rem;transition:border-color .16s,background-color .16s,box-shadow .16s}.previewer-field select{appearance:none;color-scheme:dark;background-image:linear-gradient(45deg, transparent 50%, var(--color-muted-foreground) 50%), linear-gradient(135deg, var(--color-muted-foreground) 50%, transparent 50%);cursor:pointer;background-position:calc(100% - 1rem) calc(50% - 1px),calc(100% - .72rem) calc(50% - 1px);background-repeat:no-repeat;background-size:.32rem .32rem,.32rem .32rem;padding-inline-end:2.4rem}:root:not(.dark) .previewer-field select{color-scheme:light}.previewer-field select:hover{border-color:color-mix(in srgb, var(--color-accent) 42%, var(--color-border));background-color:var(--color-secondary)}.previewer-field select:focus-visible,.previewer-field input:not([type=color]):focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);outline:0}.previewer-field select:disabled{opacity:.55;cursor:wait}.previewer-field select option{color:var(--color-foreground);background:var(--color-card)}.previewer-variant-description{color:var(--color-muted-foreground);margin:.45rem 0 0;font-size:.66rem;line-height:1.45}.previewer-segmented{border:0;min-width:0;margin:.85rem 0 0;padding:0}.previewer-segmented>div{border:1px solid var(--color-border);border-radius:var(--radius-md);grid-auto-columns:1fr;grid-auto-flow:column;margin-top:.4rem;display:grid;overflow:hidden}.previewer-segmented button{border:0;border-right:1px solid var(--color-border);min-width:0;min-height:2.75rem;color:var(--color-muted-foreground);cursor:pointer;background:0 0;justify-content:center;align-items:center;gap:.28rem;padding:.35rem;font-size:.62rem;transition:color .16s,background .16s;display:flex}.previewer-segmented button:last-child{border-right:0}.previewer-segmented button[aria-pressed=true]{color:var(--color-foreground);background:var(--color-secondary);box-shadow:inset 0 -2px var(--color-accent)}.previewer-accent-picker{position:relative}.previewer-color{border:1px solid var(--color-border);border-radius:var(--radius-md);width:100%;min-height:2.75rem;color:var(--color-foreground);background:var(--color-card);cursor:pointer;justify-content:space-between;align-items:center;gap:.75rem;padding:.38rem .65rem .38rem .42rem;transition:border-color .16s,box-shadow .16s;display:flex}.previewer-color:hover{border-color:color-mix(in srgb, var(--color-accent) 42%, var(--color-border))}.previewer-color:focus-visible{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);outline:0}.previewer-color__wheel{background:conic-gradient(#ef4444,#f59e0b,#22c55e,#06b6d4,#6366f1,#d946ef,#ef4444);border-radius:50%;place-items:center;width:2rem;height:2rem;padding:2px;display:grid}.previewer-color__wheel>span{border:2px solid var(--color-card);color:#fff;border-radius:50%;place-items:center;width:1.65rem;height:1.65rem;display:grid;box-shadow:inset 0 0 0 1px #00000029}.previewer-color code{color:var(--color-muted-foreground);font:600 .68rem/1 var(--font-mono);letter-spacing:.035em}.previewer-color-popover{z-index:50;border:1px solid var(--color-border);border-radius:var(--radius-lg);width:13rem;color:var(--color-foreground);background:var(--color-popover);user-select:none;padding:.75rem;position:absolute;top:calc(100% + .45rem);right:0;box-shadow:0 1rem 2.5rem #0000003d}.previewer-color-sv{border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:crosshair;touch-action:none;width:100%;height:8.25rem;position:relative;overflow:hidden}.previewer-color-hue{border:1px solid var(--color-border);cursor:ew-resize;touch-action:none;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:999px;width:100%;height:.875rem;margin-top:.75rem;position:relative}.previewer-color-sv:focus-visible,.previewer-color-hue:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}.previewer-color-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:.875rem;height:.875rem;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #000000ad,inset 0 0 0 1px #00000052}.previewer-color-hue .previewer-color-cursor{top:50%}.previewer-color-hex{color:var(--color-muted-foreground);font:600 .68rem/1 var(--font-mono);letter-spacing:.035em;margin-top:.75rem;display:block}.previewer-toggle{min-height:2.9rem;color:var(--color-foreground);cursor:pointer;grid-template-columns:1fr auto;align-items:center;gap:.75rem;padding:.4rem 0;font-size:.74rem;display:grid;position:relative}.previewer-toggle input{opacity:0;width:1px;height:1px;position:absolute}.previewer-toggle__track{border:1px solid var(--color-border);background:var(--color-secondary);border-radius:999px;width:2.25rem;height:1.25rem;transition:background .16s,border-color .16s;position:relative}.previewer-toggle__track>span{background:var(--color-muted-foreground);border-radius:50%;width:.8rem;height:.8rem;transition:transform .16s,background .16s;position:absolute;top:.17rem;left:.17rem}.previewer-toggle input:checked+.previewer-toggle__track{border-color:var(--color-accent);background:color-mix(in srgb, var(--color-accent) 24%, var(--color-secondary))}.previewer-toggle input:checked+.previewer-toggle__track>span{background:var(--color-accent);transform:translate(.98rem)}.previewer-toggle input:focus-visible+.previewer-toggle__track{outline:2px solid var(--color-ring);outline-offset:2px}.previewer-scrim{display:none}@media (width<=63.99rem){.previewer-workspace{grid-template-columns:minmax(0,1fr)}.previewer-settings-open{display:inline-grid}.previewer-sidebar{z-index:90;border-left:1px solid var(--color-border);width:min(23rem,100vw - 1.5rem);transition:transform .22s;position:fixed;top:0;bottom:0;right:0;transform:translate(105%);box-shadow:-2rem 0 5rem #00000057}.previewer-sidebar.is-open{transform:translate(0)}.previewer-sidebar__header{padding-top:max(.45rem, env(safe-area-inset-top))}.previewer-sidebar__header .previewer-icon-button{display:inline-grid}.previewer-sidebar__footer{padding-bottom:max(.75rem, env(safe-area-inset-bottom))}.previewer-scrim{z-index:80;opacity:0;visibility:hidden;cursor:pointer;background:#00000094;border:0;transition:opacity .18s,visibility .18s;display:block;position:fixed;inset:0}.previewer-scrim.is-open{opacity:1;visibility:visible}}@media (width<=47.99rem){.previewer-app{grid-template-rows:3.75rem minmax(0,1fr)}.previewer-header{padding-inline:.65rem}.previewer-header__identity{gap:.55rem}.previewer-header__divider,.previewer-header__identity p,.previewer-source{display:none}.previewer-back{flex:none;justify-content:center;width:2.75rem}.previewer-back span{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.previewer-header__actions{gap:.35rem}.previewer-page-locales a{min-width:2.75rem;min-height:2.75rem}.previewer-share-button{display:none}.previewer-theme-switch{min-width:2.75rem}.previewer-header__actions .previewer-button{width:2.75rem;padding:0}.previewer-header__actions .previewer-button span{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.previewer-canvas{padding:.4rem}.previewer-device{border-radius:.55rem}.previewer-status{bottom:1rem}}@media (prefers-reduced-motion:reduce){.previewer-device,.previewer-device iframe,.previewer-sidebar,.previewer-scrim,.previewer-toggle__track,.previewer-toggle__track>span{transition:none}.is-spinning{animation:none}}