/* Shared application presentation: artwork varies; shell and treatment do not. */
:root{--banner-radius:var(--radius-lg,20px);--banner-padding:28px;--banner-veil:color-mix(in srgb,var(--color-bg) 22%,transparent);--banner-text-support:color-mix(in srgb,var(--color-bg) 44%,transparent)}
.g-hero{border-radius:var(--banner-radius);border:1px solid var(--border);box-shadow:var(--g-shadow);background:var(--color-bg);overflow:hidden;isolation:isolate}
.g-hero .g-banner{opacity:1}
.g-hero::before{content:"";position:absolute;inset:0;background:var(--banner-veil);z-index:-1;pointer-events:none}
.g-hero::after,.g-hero-buddy::after{background:linear-gradient(90deg,var(--banner-text-support),color-mix(in srgb,var(--color-bg) 26%,transparent) 38%,color-mix(in srgb,var(--color-bg) 4%,transparent) 85%);pointer-events:none}
.g-hero-copy{padding:var(--banner-padding)}
.g-hero-art-only{aspect-ratio:3/1;min-height:0}
.g-hero-art-only::after{display:none}
.g-hero-art-only .g-banner{object-fit:contain;object-position:center;width:100%;height:100%}
.app-page-heading{margin-bottom:24px}.app-page-controls{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:12px}.app-page-controls .g-back,.app-page-controls .context-help-bar{margin:0}.app-page-heading h1{margin:0 0 8px}.app-page-heading p{margin:0;color:var(--g-muted)}
/* A tiny vector mask keeps the theme colour canonical. Large motifs 3%, dots 6%. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background-color:var(--color-primary);opacity:.035;mask-image:var(--page-motif);mask-size:360px 320px}
body{isolation:isolate;--page-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='320'%3E%3Cg fill='black'%3E%3Cpath d='M42 42q-20-28-25-8t25 8q28-20 8-25t-8 25q20 28 25 8t-25-8q-28 20-8 25t8-25'/%3E%3Cpath d='m262 212 4-12 4 12 12 4-12 4-4 12-4-12-12-4z'/%3E%3Ccircle cx='162' cy='112' r='2'/%3E%3C/g%3E%3C/svg%3E")}
body[data-theme='mint']{--page-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='320'%3E%3Cpath fill='black' d='M48 65Q12 62 23 35Q51 35 48 65M48 65Q47 33 74 32Q82 57 48 65M252 220q-28-4-21-25q24 0 21 25'/%3E%3C/svg%3E")}
body[data-theme='sky']{--page-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='320'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='42' cy='42' r='16'/%3E%3Ccircle cx='65' cy='68' r='7'/%3E%3Ccircle cx='252' cy='220' r='11'/%3E%3C/g%3E%3C/svg%3E")}
body[data-theme='lavender']{--page-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='320'%3E%3Cpath fill='black' d='m42 25 5 13 14 4-14 5-5 14-4-14-13-5 13-4zm210 175 4 12 12 4-12 4-4 12-4-12-12-4 12-4z'/%3E%3C/svg%3E")}
body[data-theme='peach']{--page-motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='320'%3E%3Cg fill='black'%3E%3Ccircle cx='42' cy='42' r='4'/%3E%3Ccircle cx='252' cy='220' r='3'/%3E%3Cpath d='m140 122 3-9 3 9 9 3-9 3-3 9-3-9-9-3z'/%3E%3C/g%3E%3C/svg%3E")}
@media(max-width:767px){:root{--banner-padding:20px}}
.app-page-controls .g-back{border:1px solid var(--color-border);background:var(--color-surface)}
.app-page-controls .g-back,.app-page-controls .context-help-trigger{width:48px;height:48px;min-width:48px;min-height:48px}
.learning-page .app-page-controls .context-help-trigger{padding:0;line-height:1}