/* Opaque dark ink matches the Mail widget's Sender and Time roles. */
:host{display:block;width:100%;color-scheme:dark;font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased;--banner-type-scale:var(--ui-font-scale,1);--banner-video-surface:#1d1c1f;--banner-title-color:#fff;--banner-secondary-color:#929299;--banner-motion-height:370px}
*{box-sizing:border-box}button{border:0;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:2px solid #70b7ff;outline-offset:3px}button:disabled{cursor:default}button[hidden],[hidden]{display:none!important}
/* Compact fixed frames reserve the expanded content in both presentations. */
.banner-stage.study-canvas{display:grid;grid-template-columns:calc(var(--card-edge) + 48px) minmax(0,1fr) calc(var(--card-edge) + 48px);grid-template-rows:minmax(0,1fr);gap:0;padding:var(--card-edge) 0;width:100%;isolation:isolate}
.banner-viewport{grid-column:2;position:relative;margin:0 auto;width:100%;max-width:400px;height:100%;min-height:0}
.banner-scene{position:absolute;left:50%;top:50%;width:var(--banner-scene-width,400px);height:var(--banner-motion-height);translate:-50% -50%;transform:scale(var(--banner-scale,1));transform-origin:center;isolation:isolate}
.banner-shell{position:absolute;left:0;width:100%;min-width:0;isolation:isolate;transform-origin:50% 0;overflow:hidden}
.banner-glass{position:absolute;inset:0;z-index:-2;pointer-events:none}
.banner-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}.banner-surface path{fill:var(--face,var(--banner-video-surface))}
.banner-title,.banner-subtitle{display:block;margin:0;min-width:0;overflow-wrap:anywhere;text-align:left}
.banner-title{font-size:calc(17px * var(--banner-type-scale));font-weight:600;line-height:1.29411765;letter-spacing:calc(.5px * var(--banner-type-scale));color:var(--banner-title-color)}
.banner-subtitle{font-size:calc(15px * var(--banner-type-scale));font-weight:400;line-height:1.3333333;letter-spacing:calc(.72px * var(--banner-type-scale));color:var(--banner-secondary-color);margin-top:3px}
.notification-content{display:flex;gap:14px;align-items:center;padding:16px;width:var(--banner-card-width,100%);position:relative}
.notification-copy{min-width:0;flex:1}
.banner-icon{display:block;flex:none;width:44px;height:44px;object-fit:contain;max-width:none;border-radius:10px}
.order-region{position:absolute;left:0;width:100%}
.banner-list{position:relative;list-style:none;margin:0;padding:0;width:100%;height:100%}
.order-card{position:absolute;list-style:none;left:0;top:0;height:77.333333px;width:100%;will-change:transform}
.order-card .banner-shell{inset:0;height:100%}
.order-disclosure{position:absolute;top:0;left:0;width:100%;z-index:8;border:0;background:transparent;border-radius:28px;text-align:left}
:host([preview]){height:100%;pointer-events:none}
:host([preview]) .banner-stage.study-canvas{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:0;height:100%;border-radius:0}
:host([preview]) .banner-viewport{grid-column:1}
:host([data-theme="light"]){color-scheme:light;--banner-video-surface:#ffffff;--banner-title-color:#000;--banner-secondary-color:#646469}
:host([data-theme="light"]) .banner-surface path{stroke:rgb(60 60 67 / .12);stroke-width:1px}
:host([data-material="clear"]) .banner-surface path{fill:color-mix(in srgb,var(--face,var(--banner-video-surface)) 62%,transparent);stroke:#ffffff40;stroke-width:.75px}
:host([data-text-spacing]) .banner-title,:host([data-text-spacing]) .banner-subtitle{line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.order-card{will-change:auto}}
@media(prefers-reduced-transparency:reduce){.banner-glass{display:none}:host([data-material="clear"]) .banner-surface path{fill:var(--face,var(--banner-video-surface))}}
@media(forced-colors:active){.banner-shell{background:Canvas;border:1px solid CanvasText;border-radius:28px}.banner-title,.banner-subtitle{color:CanvasText}.banner-surface,.banner-glass{display:none}}

@media(max-width:767px){:host(:not([preview])) .banner-stage.study-canvas{grid-template-columns:56px minmax(0,1fr) 56px}.banner-stage .study-card-header.actions-rail{left:12px}}