.echo-banner{display:flex;gap:var(--echo-space-7);padding:var(--echo-space-6) var(--echo-space-7);border-radius:var(--echo-radius-lg);font-family:var(--echo-font-machine,ui-sans-serif,system-ui,sans-serif);background:linear-gradient(155deg,color-mix(in oklab,var(--echo-cap) 78%,var(--echo-cap-highlight)) 0,var(--echo-cap) 40%,color-mix(in oklab,var(--echo-cap) 55%,var(--echo-surface)) 100%);box-shadow:inset 0 1px 0 rgb(255 255 255/calc(.08 * var(--echo-gloss, 1))),inset 0 -2px 6px color-mix(in oklab,var(--echo-cast-ink,black) calc(.35 * var(--echo-shade, 1) * 100%),transparent),inset 0 0 0 1px color-mix(in oklab,var(--echo-cast-ink,black) calc(.35 * var(--echo-shade, 1) * 100%),transparent),0 6px 14px -8px color-mix(in oklab,var(--echo-cast-ink,black) calc(.6 * var(--echo-shade, 1) * 100%),transparent),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)}.echo-banner,.echo-banner__well{position:relative;align-items:center}.echo-banner__well{display:inline-flex;justify-content:center;width:28px;height:28px;border-radius:var(--echo-radius-full);box-shadow:inset 0 2px 4px color-mix(in oklab,var(--echo-cast-ink,black) calc(.8 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.05 * var(--echo-gloss, 1))),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)}.echo-banner__tag,.echo-banner__well{flex-shrink:0;background:var(--echo-drawn-glass,linear-gradient(160deg,var(--echo-well) 0,var(--echo-lcd) 100%))}.echo-banner__tag{padding:var(--echo-space-2) var(--echo-space-5);border-radius:var(--echo-radius-sm);font-family:var(--echo-font-lcd,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:var(--echo-text-xs);font-weight:var(--echo-weight-semibold,600);line-height:var(--echo-leading-tight,1.25);letter-spacing:var(--echo-tracking-wider,.12em);text-transform:uppercase;white-space:nowrap;color:var(--echo-text-dim);box-shadow:inset 0 2px 4px color-mix(in oklab,var(--echo-cast-ink,black) calc(.85 * var(--echo-shade, 1) * 100%),transparent),inset 0 -1px 0 rgb(255 255 255/calc(.04 * var(--echo-gloss, 1))),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)}.echo-banner[data-tone=warn] .echo-banner__tag{color:var(--echo-text)}.echo-banner[data-tone=active] .echo-banner__tag,.echo-banner[data-tone=danger] .echo-banner__tag{color:var(--echo-accent-ink,var(--echo-accent-glow));text-shadow:0 0 8px color-mix(in oklab,var(--echo-lcd-glow) 55%,transparent)}.echo-banner__icon,.echo-banner__pip{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--echo-text-dim)}.echo-banner__pip{box-sizing:border-box;width:10px;height:10px;border-radius:var(--echo-radius-full);background:var(--echo-text-dim)}.echo-banner[data-tone=info] .echo-banner__pip{background:transparent;border:var(--echo-border-fine,1.5px) solid var(--echo-text-dim)}.echo-banner__icon svg{width:var(--echo-icon-md,16px);height:var(--echo-icon-md,16px)}.echo-banner[data-tone=active] .echo-banner__pip{width:12px;height:12px;background:radial-gradient(circle at 35% 28%,color-mix(in oklab,var(--echo-text) 80%,transparent) 0,var(--echo-accent-glow) 46%,var(--echo-primary-cap-base) 100%);box-shadow:inset 0 -1px 1px color-mix(in oklab,var(--echo-cast-ink,black) calc(.3 * var(--echo-shade, 1) * 100%),transparent),inset 0 0 0 var(--echo-line-width,0) var(--echo-line,transparent)}.echo-banner[data-tone=active] .echo-banner__icon{color:var(--echo-primary-cap-top)}.echo-banner[data-tone=warn] .echo-banner__pip{width:12px;height:11px;border:0;border-radius:0;background:var(--echo-text);clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:none}.echo-banner[data-tone=danger]{border-inline-start:var(--echo-border-heavy,4px) solid var(--echo-primary-cap-mid);padding-inline-start:var(--echo-space-6);background:linear-gradient(90deg,color-mix(in oklch,var(--echo-primary-cap-mid) 22%,var(--echo-cap)) 0,var(--echo-cap) 55%,color-mix(in oklab,var(--echo-cap) 55%,var(--echo-surface)) 100%)}.echo-banner[data-tone=danger] .echo-banner__pip{border:0;border-radius:var(--echo-radius-xs);background:var(--echo-primary-cap-mid);box-shadow:var(--echo-shadow-edge,inset 0 1px 0 rgb(255 255 255/calc(.4 * var(--echo-gloss, 1))))}.echo-banner__body{flex:1 1;min-width:0}.echo-banner__title{overflow-wrap:anywhere;font-size:var(--echo-text-sm);font-weight:var(--echo-weight-bold,700);line-height:var(--echo-leading-tight,1.25);color:var(--echo-text)}.echo-banner__text{overflow-wrap:anywhere;margin-top:var(--echo-space-1);font-size:var(--echo-text-xs);line-height:var(--echo-leading-body,1.55);color:var(--echo-text-dim)}.echo-banner__dismiss{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;padding:0;border:0;border-radius:var(--echo-radius-sm);cursor:pointer;color:var(--echo-text-dim);background:transparent;transition:color var(--echo-duration-tick) ease,background var(--echo-duration-tick) ease}.echo-banner__dismiss svg{width:var(--echo-icon-xs,12px);height:var(--echo-icon-xs,12px)}@media (hover:hover){.echo-banner__dismiss:hover{color:var(--echo-text);background:color-mix(in oklab,var(--echo-cast-ink,black) calc(.28 * var(--echo-shade, 1) * 100%),transparent)}}.echo-banner__dismiss:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 2px var(--echo-cap),0 0 0 4px var(--echo-accent-ink,var(--echo-accent-glow))}@media (prefers-reduced-motion:reduce){.echo-banner__dismiss{transition:none}}.echo-banner__dismiss{position:relative;--echo-hit-area:24px}.echo-banner__dismiss:after{content:"";position:absolute;top:50%;left:50%;width:max(100%,24px);height:max(100%,24px);transform:translate(-50%,-50%)}@media (pointer:coarse){.echo-banner__dismiss{--echo-hit-area:44px}.echo-banner__dismiss:after{width:max(100%,44px);height:max(100%,44px)}}