.mobile-dock,.mobile-collections{display:none}.mobile-sheet{width:min(540px,96vw);max-height:85dvh;border:1px solid #4d3b5d;border-radius:20px;background:#19151f;color:#eee7f4;padding:0;overflow:hidden}.mobile-sheet::backdrop{background:#0d0819b8;backdrop-filter:blur(5px)}.mobile-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #3a2e45}.mobile-sheet-head h2{font-size:20px;margin:0;letter-spacing:-.5px}.mobile-sheet-head button{width:44px;height:44px;border:1px solid #574365;border-radius:12px;background:#302338;color:#ebdbf5}.mobile-sheet-body{overflow:auto;max-height:calc(85dvh - 90px);padding:12px;overscroll-behavior:contain}.mobile-effect-option{display:flex;align-items:center;width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:10px;background:transparent;color:#d4c8dd;text-align:left;margin:3px 0;font-size:15px}.mobile-effect-option[aria-pressed=true]{background:#4d355f;color:#f5e4ff}.mobile-sheet button{touch-action:manipulation}
@media(max-width:900px){
 html,body{width:100%;height:100%;overflow:hidden}body{height:100dvh}.main-app{display:flex;flex-direction:column}.main-app>header{height:calc(48px + env(safe-area-inset-top));flex:0 0 calc(48px + env(safe-area-inset-top));padding:0 16px;padding-top:env(safe-area-inset-top)}.main-app .brand{font-size:21px}.main-app header .count{font-size:9px}.main-app>.mobile-collections{display:flex;align-items:center;justify-content:space-between;flex:0 0 44px;margin:0;padding:0 16px;border:0;border-bottom:1px solid #34293e;background:#1d1725;color:#d5b9ec;font:600 13px system-ui}.main-app .app{flex:1;min-height:0;overflow:hidden}.main-app .app>aside{display:none}.main-app .app>main{width:100%;padding:8px 10px 0;min-height:0}.main-app .section-top{margin:0 0 6px;flex:0 0 auto}.main-app .section-top h1{font-size:15px;letter-spacing:-.3px;margin:0;color:#a89ab5}.main-app .experiment-layout{display:flex;flex-direction:column;gap:0;min-height:0}.main-app .effect-sidebar{display:none}.main-app .experiment-workspace{min-width:0;min-height:0;flex:1;display:flex;flex-direction:column;overflow:hidden}.main-app .experiment-info{padding:4px 2px 8px;margin:0}.main-app .experiment-info h2{font-size:20px;line-height:1.2;letter-spacing:-.5px}.main-app .experiment-workspace>.toolbar{display:none}.main-app .experiment-workspace .stage{margin:0;flex:1;min-height:0;padding:64px 16px 24px;container-type:normal;align-items:safe center;justify-content:safe center;overflow:auto;border-radius:16px}.main-app .section-bottom{display:none}.main-app #feedback{height:auto;min-height:0;max-height:34px;overflow:auto;margin:0;font-size:11px;flex-shrink:0}.main-app #feedback:empty{display:none}.main-app #hover-panel{min-height:0;flex:1}.main-app #hover-frame{height:100%;border:0;border-radius:0}.main-app .stage>.demo{max-width:100%;width:100%}.main-app .stage .row{flex-wrap:wrap;max-width:100%;justify-content:center}.main-app .stage .sample-card{width:min(370px,100%);max-width:100%;flex-shrink:0}.main-app .stage .form,.main-app .stage .scroll-box,.main-app .stage .media-stage,.main-app .stage .ambient{width:100%;max-width:100%}.main-app .stage .sample-card[data-chapter]{width:100%}.main-app .stage .input{width:100%;min-width:0}.main-app .stage table{max-width:100%}.main-app .stage .overlay{position:fixed;inset:0;z-index:90}.main-app .stage .modal{max-width:calc(100vw - 28px);max-height:85dvh;overflow:auto}
 .hover-app .shell{display:flex;height:100%;min-height:0}.hover-app .shell>aside{display:none}.hover-app .main{padding:0;min-height:0;width:100%;flex:1}.hover-app .eyebrow,.hover-app .description,.hover-app .main>.controls,.hover-app .desktop-simulate{display:none}.hover-app .topline{padding:4px 2px 8px;margin:0;flex-shrink:0}.hover-app .topline h2{font-size:20px;line-height:1.2;margin:0;letter-spacing:-.5px}.hover-app .detailbar{margin:0 0 6px;flex-wrap:nowrap;overflow-x:auto;min-height:0}.hover-app .detailbar:empty{display:none}.hover-app .detailbar button{white-space:nowrap;min-height:44px;font-size:13px}.hover-app .stage{margin:0;flex:1;min-height:0;padding:64px 16px 24px;align-items:safe center;justify-content:safe center;overflow:auto;border-radius:16px}.hover-app .stage .card{width:100%;max-width:390px;flex-shrink:0}.hover-app .media{height:155px}.hover-app .content{padding:20px}.hover-app .copy{font-size:14px}.hover-app .title{font-size:24px}.hover-app .hint{font-size:11px;margin:4px 0;line-height:1.3}.hover-app .help{margin:0;min-height:0;max-height:30px;overflow:auto}.hover-app .tooltip{white-space:normal;width:min(270px,90%);text-align:center}.hover-app .stage[data-effect="20"] .card{max-width:calc(100% - 30px)}
 .mobile-dock{display:grid;grid-template-columns:1fr 1.45fr 1fr;gap:8px;flex:0 0 auto;padding:9px 0 calc(9px + env(safe-area-inset-bottom));background:#111115}.mobile-dock button{min-height:48px;padding:10px 8px;font:600 13px system-ui;border:1px solid #483652;border-radius:13px;color:#d4bfdf;background:#211927;touch-action:manipulation}.mobile-dock .mobile-play{background:#c4a0e0;color:#2c193a;border-color:#c4a0e0}.mobile-dock .mobile-play[aria-pressed=true]{background:#6a4782;color:white}.mobile-dock span{margin-left:4px}.stage .choose-design{top:10px;right:10px;min-height:44px;padding:10px 14px;background:#fff;color:#594069;font-size:12px}.stage button,.stage a{touch-action:manipulation;min-height:44px}.stage input,.stage textarea,.personal-dialog input{font-size:16px}.stage .input{font-size:16px}.mobile-sheet .toolbar,.mobile-sheet .controls{display:flex;flex-wrap:wrap;border:0;padding:8px;gap:10px;color:#cbb9d7}.mobile-sheet .toolbar>button,.mobile-sheet .controls>button{min-height:48px;margin:0;flex:1 1 42%;font-size:14px}.mobile-sheet .speed-label,.mobile-sheet .controls>label{width:100%;min-height:52px;display:flex;align-items:center;flex-wrap:wrap;font-size:14px}.mobile-sheet input[type=range]{flex:1;min-width:90px;height:36px}.mobile-sheet .toolbar #reset{margin:0}.mobile-sheet{margin:auto auto 0;width:100%;max-width:none;max-height:88dvh;border-radius:22px 22px 0 0;padding-bottom:env(safe-area-inset-bottom)}
 .design-gallery,.personal-dialog,.code-dialog{width:calc(100vw - 16px);max-width:calc(100vw - 16px);max-height:92dvh;padding:16px;border-radius:18px}.design-gallery .gallery-head{position:sticky;top:-16px;background:#19161f;z-index:3;padding:10px 0}.design-gallery .gallery-head button,.personal-close,.code-close{min-width:44px;min-height:44px}.design-gallery .gallery-tabs button,.personal-dialog button,.code-dialog button{min-height:44px}.gallery-grid:has(.chapter-gallery-item){grid-template-columns:1fr}.gallery-tile.chapter-gallery-item>.gallery-sample{height:360px}.gallery-tile.chapter-gallery-item .cc-mini{zoom:.65}.gallery-tile.chapter-gallery-item>strong{font-size:16px}.gallery-tile.chapter-gallery-item>small{font-size:12px}.design-gallery:has(.chapter-gallery-item){width:calc(100vw - 16px)}.code-dialog pre{font-size:12px;overflow:auto}.personal-fields{grid-template-columns:1fr}.stage .cc-pad{padding:22px}.stage [data-chapter] h3.title{font-size:24px}.stage [data-chapter] p.copy{font-size:14px}
}
@media(max-width:360px){.mobile-dock button{font-size:12px}.main-app .brand{font-size:19px}.main-app .stage,.hover-app .stage{padding-inline:12px}.gallery-tile.chapter-gallery-item .cc-mini{zoom:.58}.gallery-tile.chapter-gallery-item>.gallery-sample{height:330px}}
@media(max-width:900px) and (orientation:landscape){.main-app>header{display:none}.main-app>.mobile-collections{flex-basis:36px}.main-app .section-top{display:none}.mobile-dock{padding:5px 0}.mobile-dock button{min-height:44px}.hover-app .hint{display:none}.main-app .stage,.hover-app .stage{align-items:flex-start}}

.preview-scroll-note{display:none}@media(max-width:900px){.preview-scroll-note:not([hidden]){display:block;text-align:center;font:11px/18px system-ui;color:#b6a4c4;flex-shrink:0}.main-app .stage .scroll-box{max-height: min(380px,55dvh)}.main-app .stage .demo.stack{min-width:0}}