.guide-fold{--guide-top-offset: 64px;display:flex;height:calc(100dvh - var(--guide-top-offset));min-height:0;flex-direction:column;gap:clamp(12px,2.5dvh,28px);padding-block:clamp(12px,3dvh,32px) clamp(12px,2.5dvh,24px)}.guide-fold .guide-title{flex-shrink:0;margin:0;font-size:clamp(1.75rem,min(5vw,6.5dvh),4.75rem)}.design-guide{position:relative;display:grid;min-height:0;flex:1;grid-template-rows:minmax(0,1fr) auto;gap:clamp(12px,2.5dvh,24px)}.design-guide .guide-scene-frame{position:relative;min-height:0}.design-guide .guide-scene{display:grid;height:100%;min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,.82fr) minmax(0,1.65fr);gap:12px;overflow:hidden;border:1px solid rgb(255 255 255 / 12%);border-radius:24px;background:#1c1c1f;padding:12px}.design-guide .guide-play-overlay{position:absolute;z-index:40;inset:0;display:grid;place-items:center;border-radius:24px;background:#08080c6b}.design-guide .guide-editor{position:relative;display:flex;min-width:0;min-height:0;flex-direction:column;padding:16px 16px 4px}.design-guide .guide-file-tree{margin-top:16px}.design-guide .guide-added-files{overflow:hidden}.design-guide .guide-file-pack{pointer-events:none;position:absolute;z-index:2;top:0;left:0;will-change:transform,opacity}.design-guide .guide-floating-file{width:100%;margin-bottom:8px;border:1px solid rgb(196 181 253 / 24%);border-radius:10px;background:#2a292f;padding:6px 14px;box-shadow:0 8px 20px #0003}.design-guide .guide-agent{margin-top:auto;padding-top:12px}.design-guide .guide-message{border:1px solid rgb(255 255 255 / 10%);border-radius:12px;background:#29292e;padding:12px;color:#e4e4e7;font-size:14px;line-height:1.6}.design-guide .guide-composer{position:relative;border:1px solid rgb(255 255 255 / 12%);border-radius:10px;color:#e4e4e7}.design-guide .guide-demo-cursor{pointer-events:none;position:absolute;z-index:3;fill:#252529;transform-origin:top left;filter:drop-shadow(0 2px 2px #0008)}@media(max-width:767px){.guide-fold{--guide-top-offset: 56px}.design-guide .guide-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,min(190px,46%)) minmax(0,1fr);padding:8px;border-radius:20px}.design-guide .guide-editor{padding:12px}.design-guide .guide-file-tree{width:47%}.design-guide .guide-floating-file{padding:4px 8px}.design-guide .guide-agent{position:absolute;right:12px;bottom:12px;width:48%}.design-guide .guide-message{padding:10px}.design-guide .guide-play-overlay{border-radius:20px}}@media(max-height:740px),(max-width:767px){.design-guide{--guide-file-row-height: 28px}.design-guide .guide-editor-heading{padding-bottom:10px}.design-guide .guide-file-tree{margin-top:8px}.design-guide .guide-file-row{height:var(--guide-file-row-height);font-size:12px}.design-guide .guide-agent{padding-top:8px}.design-guide .guide-message{padding:8px;font-size:12px;line-height:1.4}.design-guide .guide-agent-status{height:24px;font-size:12px}.design-guide .guide-composer textarea{height:48px;min-height:48px;font-size:12px}.design-guide .guide-prompt-preview{font-size:12px;line-height:16px}}@media(max-height:600px){.design-guide .guide-editor{padding:8px}.design-guide .guide-file-tree{width:44%}.design-guide .guide-agent{position:absolute;right:8px;bottom:8px;width:51%}}.design-guide .guide-comparison{position:relative;min-width:0;min-height:0;overflow:hidden;border-radius:16px;background:#edf2f7}.design-guide .guide-screenshot-scroller{position:absolute;inset:0;height:100%;width:100%}.design-guide .guide-screenshot-scroller [data-slot=scroll-area-scrollbar]{z-index:30}.design-guide .guide-screenshot-scroller [data-slot=scroll-area-thumb]{background:#3c4d62a6}.design-guide .guide-screenshot-canvas{position:relative;overflow:hidden;width:100%;aspect-ratio:1440 / 4679}.design-guide .guide-screenshot{position:absolute;inset:0;display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none}.design-guide .guide-preview-revealed{clip-path:inset(0 calc(100% - var(--guide-reveal)) 0 0)}.design-guide .guide-screenshot-before{bottom:auto;height:auto;transform:translateY(var(--guide-before-offset, 0px))}.design-guide .guide-reveal-divider{position:absolute;z-index:10;top:0;bottom:0;left:var(--guide-reveal);width:2px;transform:translate(-50%);background:#fffd;box-shadow:0 0 12px #0004;pointer-events:none}.design-guide .guide-animation-layer{position:absolute;z-index:50;inset:0;pointer-events:none}.design-guide .guide-click-ripple{position:absolute;width:40px;height:40px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #00000026}.design-guide [data-demo-pressed=true]{transform:scale(.96);filter:brightness(.94)}.static-how-to *,.static-how-to *:before,.static-how-to *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.static-how-to [data-slot=button]:active{translate:none}