.demo-banner{position:fixed;top:0;left:0;right:0;z-index:32;display:flex;align-items:center;justify-content:space-between;gap:10px;height:calc(34px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 14px 0;background:linear-gradient(#1f2a4a,#19223d);color:#c9c2b6;font-size:12px;line-height:1.3;border-bottom:1px solid rgba(242,180,90,.22);box-shadow:var(--shadow-raised)}.demo-banner p{flex:1 1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-banner a{flex:none;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:12px;color:var(--amber);font-weight:700;text-decoration:none;background:rgba(242,180,90,.12)}.demo-banner a:active{transform:scale(.97)}.demo-shell .roofbar{top:calc(34px + env(safe-area-inset-top))}.demo-shell .block,.demo-shell .page{padding-top:calc(var(--top-h) + 34px + env(safe-area-inset-top))}.demo-nav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(3,1fr);height:var(--nav-h);padding-bottom:env(safe-area-inset-bottom);background:radial-gradient(60px 18px at 20% 70%,rgba(242,180,90,.12),transparent),radial-gradient(70px 16px at 78% 60%,rgba(95,211,200,.08),transparent),linear-gradient(#171a21,#0f1116);border-top:3px solid #3a3f4b}.demo-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-2);font-size:11px;font-weight:600;text-decoration:none}.demo-nav a:last-child,.demo-nav a[aria-current]{color:var(--amber)}.make-own{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 14px;border-radius:16px;border:1px solid rgba(242,180,90,.55);background:var(--amber);color:var(--amber-ink);font-size:12.5px;font-weight:750;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px -4px rgba(242,180,90,.55)}.make-own:active{transform:scale(.96)}@media (hover:hover) and (pointer:fine){.make-own:hover{background:var(--amber-hi);box-shadow:0 6px 16px -4px rgba(242,180,90,.75)}.demo-banner a:hover{background:rgba(242,180,90,.2)}}.acts .make-own,.lean-acts .make-own{min-height:30px;padding:0 10px;font-size:12px}.demo-actions{margin-top:12px}.demo-note{margin:0;padding:10px 16px 0;color:var(--text-3);font-size:12.5px;line-height:1.4}.demo-messages{display:flex;flex-direction:column;gap:6px;padding:12px 12px 8px}.demo-composer{padding:14px 16px calc(20px + env(safe-area-inset-bottom));text-align:center}.demo-cap{padding:12px 16px calc(20px + env(safe-area-inset-bottom));text-align:center}.demo-send{display:flex;flex-direction:column;gap:8px;padding:4px 16px calc(16px + env(safe-area-inset-bottom));text-align:left}.demo-send textarea{min-height:70px;padding:10px 14px;border-radius:14px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);font-size:16px;line-height:1.4;resize:vertical}@media (min-width:720px) and (max-width:1023px){.demo-banner,.demo-nav{padding-inline:max(14px,calc((100% - var(--col)) / 2))}}@media (min-width:1024px){.demo-banner{padding-inline:var(--town-l)}.demo-nav{left:var(--main-x);right:auto;height:60px;padding:0 6px}.demo-shell .town-rail{top:calc(var(--top-h) + 50px + env(safe-area-inset-top));margin-top:calc(var(--top-h) + 50px + env(safe-area-inset-top))}.demo-shell aside.mail-list{top:calc(var(--top-h) + 34px + env(safe-area-inset-top));margin-top:calc(var(--top-h) + 34px + env(safe-area-inset-top))}.demo-shell .leaned{padding-bottom:var(--nav-h)}.demo-shell .leaned>.frame{top:calc(var(--top-h) + 46px + env(safe-area-inset-top))}.demo-thread .demo-cap,.demo-thread .demo-send{padding-bottom:calc(var(--nav-h) + 8px)}}