/* ===== AAA Martinez — fake Windows 98 desktop shell =====
   Loads AFTER style.css (reuses its tokens, bevels, typography, taskbar, buttons).
   The teal desktop matches the Design Pusher demo; the AAA site lives in a floating
   Internet Explorer window that can drag / minimize / maximize / close, with the
   portfolio as desktop files peeking out behind it. */

body.d98{ background:#008080; overflow:hidden; --wm-size:min(58vw,620px); --wm-opacity:.07; }
/* Desktop wallpaper: the white AAA MARTINEZ lockup, behind the icons (.wm is
   z-index:0, .desk is 1). Size / position / opacity match the /review/ portal's
   .desktop::before on the same #008080 teal — keep them in sync.
   Scoped to .d98 — the older non-desktop pages keep style.css's Georgia "AAA". */
.d98 .wm{ background:url("assets/aaa-lockup.svg") no-repeat center 42%; background-size:var(--wm-size) auto; opacity:var(--wm-opacity); }
/* taskbar always on top of floating windows (windows live at z=100+) */
.d98 .taskbar{ z-index:100000; }
.d98 .startmenu{ z-index:100001; }
.d98 .sm-item{ cursor:pointer; }

/* discovery hint (top-left, like a sticky note) */
.desk-hint{ position:fixed; left:14px; top:12px; z-index:2; color:rgba(255,255,255,.9); font-size:12px; line-height:1.65; text-shadow:1px 1px 0 rgba(0,0,0,.35); pointer-events:none; }
.desk-hint b{ color:#fff; }

/* ===== desktop icons (the portfolio, as files) ===== */
.desk{ position:fixed; inset:0 0 34px 0; z-index:1; }
.dicon{ position:absolute; width:86px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 3px 3px; cursor:pointer; text-align:center; }
.dicon .ic{ font-size:38px; line-height:1; filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35)); }
.dicon .lb{ font-size:11.5px; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.6); padding:1px 4px; max-width:100%; }
.dicon:hover .lb{ text-decoration:underline; }
/* being dragged — Win98 showed a translucent ghost of the icon under the cursor */
.dicon.drag{ opacity:.6; cursor:move; z-index:9; }
.dicon.drag .lb{ text-decoration:none; }
.dicon.sel .ic{ filter:drop-shadow(1px 1px 0 rgba(0,0,0,.35)) brightness(.82) sepia(1) hue-rotate(175deg) saturate(3); }
.dicon.sel .lb{ background:#000080; color:#fff; outline:1px dotted #fff; outline-offset:-1px; }

/* ===== colored Windows flag logo ===== */
.winflag{ display:inline-block; width:17px; height:15px; position:relative; transform:skewX(-9deg) rotate(-1deg); flex:none; }
.winflag i{ position:absolute; width:7.5px; height:6.5px; }
.winflag i:nth-child(1){ left:0; top:0; background:#f24b3a; border-top-left-radius:3px 5px; }
.winflag i:nth-child(2){ right:0; top:0; background:#57b846; border-top-right-radius:5px 4px; }
.winflag i:nth-child(3){ left:0; bottom:0; background:#2b95e0; }
.winflag i:nth-child(4){ right:0; bottom:0; background:#f4c009; }

/* ===== Internet Explorer window (holds the AAA site) ===== */
.ie-win{ position:absolute; z-index:100; display:flex; flex-direction:column; background:var(--face);
  box-shadow:var(--bevel-up); padding:3px; min-width:340px; min-height:220px; }
.ie-win.min{ display:none; }
.ie-win.max{ left:0 !important; top:0 !important; width:100vw !important; height:calc(100vh - 34px) !important; }
.ie-win.max .ie-title{ cursor:default; }

.ie-title{ display:flex; align-items:center; gap:7px; padding:3px 3px 3px 6px; cursor:move; color:#fff;
  background:linear-gradient(90deg,var(--navy),var(--navy2)); }
.ie-title .ie-ico{ display:inline-flex; }
/* Internet Explorer "e" browser icon */
.ie-e{ display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 50% 36%,#6bbcff,#0353b4); color:#fff; font-style:italic; font-weight:bold; font-size:11px; line-height:1;
  box-shadow:0 0 0 1.5px #f4c009, 0 0 0 2.5px #003a7a; }
.ie-title .ie-name{ flex:1; font-weight:bold; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ie-title.blur{ background:linear-gradient(90deg,#7a7a90,#a8a8bd); }
.ie-ctrls{ display:flex; gap:2px; }
.ie-btn{ width:19px; height:16px; display:grid; place-items:center; font-size:10px; font-weight:bold; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; line-height:1; }
.ie-btn:active{ box-shadow:var(--bevel-dn); }
.ie-btn.ie-close{ font-size:11px; }

/* menu + toolbars */
.ie-menubar{ display:flex; gap:2px; padding:2px 4px; font-size:12px; }
.ie-menubar span{ padding:1px 7px; }
.ie-menubar span u{ text-decoration:underline; }
.ie-toolbar{ display:flex; align-items:center; gap:3px; padding:3px 5px; box-shadow:inset 0 1px 0 var(--white), inset 0 -1px 0 var(--silver-lo); }
.ie-tb{ display:flex; align-items:center; gap:5px; font-size:11.5px; padding:4px 9px; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ie-tb:active{ box-shadow:var(--bevel-dn); }
.ie-tb[disabled]{ color:#808080; cursor:default; box-shadow:var(--bevel-up); opacity:.7; }
.ie-address{ display:flex; align-items:center; gap:6px; padding:3px 6px 5px; }
.ie-address .lab{ font-size:11.5px; color:#404040; }
.ie-addr{ flex:1; display:flex; align-items:center; gap:6px; background:#fff; box-shadow:var(--bevel-dn); padding:3px 6px; min-width:0; }
.ie-addr .e{ width:15px; height:15px; flex:none; display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 50% 40%,#3aa0ff,#0353b4); border-radius:50%; font-weight:bold; font-style:italic; font-size:11px; }
.ie-addr .u{ font-size:12px; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ie-go{ font-size:11.5px; font-weight:bold; padding:4px 12px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ie-go:active{ box-shadow:var(--bevel-dn); }

/* page viewport — each site "page" fills the window; no scroll */
.ie-page{ flex:1; min-height:0; overflow:hidden; background:var(--face); box-shadow:var(--bevel-dn); display:flex; flex-direction:column; }
.gb-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; gap:12px;
  padding:13px clamp(14px,2.6vw,22px) 14px; overflow:auto; background:var(--face); }   /* inline guestbook fills the window & scrolls */
.gb-wrap .gb-intro{ margin:0; }
.gb-wrap .gb{ flex:1; min-height:0; }
.ie-status{ display:flex; align-items:center; gap:8px; padding:3px 7px; font-size:11px; color:#303030; box-shadow:inset 0 1px 0 var(--white); }
.ie-status .z{ box-shadow:var(--bevel-dn); padding:1px 9px; }
.ie-status .grow{ flex:1; }
/* the fine print lives in the status bar, like every good 90s site */
.ie-status .fineprint a{ color:#000080; text-decoration:underline; }
.ie-status .fineprint a:hover{ color:#1084d0; }
/* legal / fine-print lines inside the IE pages (contact + how-it-works) */
.legal-line{ margin-top:18px; font-size:11px; color:#555; }
.legal-line a{ color:#0000c8; text-decoration:underline; }
.legal-line a:hover{ color:#1084d0; }

/* the AAA site content inside the browser */
.ie-nav{ flex:none; display:flex; gap:4px; padding:6px; flex-wrap:wrap; border-bottom:1px solid var(--silver-lo); box-shadow:0 1px 0 var(--white); }
.ie-nav a{ font-size:12px; padding:5px 12px; color:#000; background:var(--face); box-shadow:var(--bevel-up); cursor:pointer; }
.ie-nav a.on{ font-weight:bold; box-shadow:var(--bevel-dn); }
.pg{ position:relative; flex:1; min-height:0; overflow:hidden; padding:clamp(14px,3vw,34px); display:flex; flex-direction:column; justify-content:center; }
.pg[hidden]{ display:none !important; }   /* must beat .pg.center's display */
.pg.center{ text-align:center; align-items:center; }
/* inner wrapper that JS scales down so the page always fits the window (no scroll, no clip) */
.pg-in{ width:100%; transform-origin:center center; }
.pg.center .pg-in{ display:flex; flex-direction:column; align-items:center; }
/* tighten the shared typography for the smaller browser viewport */
.ie-page h1{ font-size:clamp(1.5rem,3.3vw,2.5rem); max-width:20ch; }
.ie-page h2{ font-size:clamp(1.3rem,2.9vw,2rem); }
.ie-page .lead{ margin-top:16px; max-width:52ch; }
.ie-page .btns{ margin-top:22px; }
.ie-page .btn{ padding:9px 16px; font-size:13px; }
.ie-page .grid{ margin-top:18px; gap:9px; }
.ie-page .steps{ margin-top:16px; gap:10px 22px; }

/* ===== Start button flag + generic small window (portfolio / folders) ===== */
.start .winflag{ margin-right:2px; }
.folder-list{ padding:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; }
.folder-item{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 4px; cursor:pointer; text-align:center; }
.folder-item:hover{ background:#000080; color:#fff; }
.folder-item .ic{ font-size:34px; line-height:1; }
.folder-item .lb{ font-size:11.5px; }
.shot{ padding:14px; }
.shot .frame{ background:#fff; box-shadow:var(--bevel-dn); padding:0; overflow:hidden; }
.shot .cap{ background:linear-gradient(180deg,#2b6fb0,#0a3f7a); color:#fff; padding:10px 12px; }
.shot .cap b{ display:block; font-size:15px; }
.shot .cap span{ font-size:11.5px; opacity:.9; }
.shot .pic{ height:180px; display:grid; place-items:center; text-align:center; color:#fff; font-family:var(--head); font-size:1.4rem; letter-spacing:.02em; }
.shot .meta{ padding:11px 13px; font-size:12.5px; color:#1c1c1c; line-height:1.5; }
.shot .meta .yr{ display:inline-block; font-size:11px; font-weight:bold; color:#00006a; background:#e7e7e7; box-shadow:var(--bevel-dn); padding:1px 7px; margin-bottom:7px; }
.shot .go{ display:inline-flex; align-items:center; gap:7px; margin-top:10px; font-size:12.5px; font-weight:bold; padding:8px 15px; color:#053d05; background:#c9e7c9; box-shadow:var(--bevel-up); }
.shot .go:active{ box-shadow:var(--bevel-dn); }
.note-body{ padding:14px 16px; font-size:12.5px; line-height:1.6; color:#111; background:#fff; box-shadow:var(--bevel-dn); margin:8px; }
.note-body h4{ font-family:var(--head); color:var(--navy); font-size:1.1rem; margin-bottom:6px; }

/* taskbar task buttons (one per open window) */
.tasks{ display:flex; gap:4px; flex:1; padding-left:4px; overflow:hidden; }
.task-btn{ display:flex; align-items:center; gap:6px; max-width:200px; font-size:12px; padding:4px 10px; color:#000; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; overflow:hidden; }
.task-btn span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.task-btn.active{ box-shadow:var(--bevel-dn); font-weight:bold; }
.task-btn .ie-ico{ display:inline-flex; flex:none; }

/* ===== Design Pusher popup (spawns on the desktop) ===== */
.dpw{ min-width:0; min-height:0; width:330px; }
.dp-body{ padding:12px; background:var(--face); }
.dp-row{ display:flex; gap:11px; align-items:flex-start; }
.dp-icon{ width:74px; height:74px; flex:none; display:grid; place-items:center; overflow:hidden; background:#fff; box-shadow:inset -1px -1px #808080, inset 1px 1px #0a0a0a; }
.dp-icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.dp-head{ font-size:13px; font-weight:bold; margin:0 0 4px; color:var(--navy); }
.dp-txt{ margin:0; line-height:1.45; font-size:12px; }
.dp-txt .shop,.shop{ color:#a00; font-weight:bold; }
.dp-new{ display:inline-block; background:#ff0; color:#a00; font-weight:bold; padding:0 4px; margin-left:5px; border:1px solid #a00; font-size:10px; animation:blink 1s steps(1) infinite; }
.dp-coupon{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:6px 11px; background:#fffbe6; border:2px dashed #a00; }
.dp-coupon .tag{ font-size:20px; line-height:1; }
.dp-coupon b{ color:#a00; font-size:14px; letter-spacing:.08em; }
.dp-coupon small{ color:#333; }
.dp-marquee{ overflow:hidden; white-space:nowrap; margin-top:10px; padding:3px 0; background:#000; color:#0f0; font-family:"Courier New",monospace; font-size:11px; box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #808080; }
.dp-marquee span{ display:inline-block; padding-left:100%; animation:dpscroll 9s linear infinite; }
@keyframes dpscroll{ to{ transform:translateX(-100%); } }
.dp-cta{ display:block; width:100%; margin-top:11px; padding:7px; text-align:center; font-size:12px; font-weight:bold; color:#000; background:var(--face); box-shadow:var(--bevel-up); }
.dp-cta:active{ box-shadow:var(--bevel-dn); }
.dp-url{ margin-top:7px; text-align:center; font-size:10px; color:#333; }
.toast{ position:fixed; left:50%; bottom:46px; transform:translateX(-50%); z-index:100002; background:var(--face); padding:7px 14px; box-shadow:var(--bevel-up); opacity:0; transition:opacity .2s; pointer-events:none; font-size:12px; }
.toast.show{ opacity:1; }

/* ===== Yellow Pages window (AAA is first in the book) ===== */
.yp{ background:#ffd400; color:#1a1a1a; }
.yp-head{ font-family:var(--head); font-size:1.3rem; color:#000; padding:12px 14px 3px; }
.yp-head span{ display:block; font-family:var(--ui); font-size:11px; font-style:italic; font-weight:normal; color:#5a4a00; }
.yp-cat{ padding:3px 14px 8px; font-size:12px; font-weight:bold; color:#3a3000; border-bottom:2px solid #000; }
.yp-list{ list-style:none; margin:0; padding:6px 14px; }
.yp-list li{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px dotted #7a6a00; font-size:13px; }
.yp-list .nm{ font-weight:bold; }
.yp-list .dots{ border-bottom:2px dotted #8a7500; height:0; align-self:center; }
.yp-list .ph{ font-size:12px; color:#3a3000; white-space:nowrap; }
.yp-first{ background:#fff6b0; box-shadow:0 0 0 2px #000; padding:9px 10px !important; margin:4px 0; border-bottom:0 !important; }
.yp-first .nm{ color:#a00; font-size:15px; }
.yp-ad{ grid-column:1 / -1; margin-top:5px; font-size:12px; line-height:1.45; }
.yp-ad a{ color:#0000c8; text-decoration:underline; font-weight:bold; }
.yp-foot{ padding:10px 14px; font-size:11.5px; font-style:italic; color:#5a4a00; }

/* ===== per-page 90s flourishes ===== */
/* HOME: row of 88×31 web badges */
.badges{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:22px; }
.badge88{ width:88px; height:31px; display:grid; place-items:center; text-align:center; padding:2px; font-size:8.5px; font-weight:bold; line-height:1.06; letter-spacing:.02em; text-transform:uppercase; color:#fff; box-shadow:var(--bevel-up); }
.badge88.b1{ background:linear-gradient(180deg,#5a5ab0,#000080); }
.badge88.b2{ background:#000; color:#0f0; font-family:"Courier New",monospace; }
.badge88.b3{ background:linear-gradient(180deg,#2a9ce0,#003a7a); }
.badge88.b4{ background:linear-gradient(180deg,#c81212,#6a0000); }

/* THE METHOD: green-on-black marquee ticker */
.mq{ overflow:hidden; white-space:nowrap; width:min(560px,92%); margin-top:20px; padding:4px 0; background:#000; color:#0f0; font-family:"Courier New",monospace; font-size:12px; box-shadow:inset 1px 1px #0a0a0a, inset -1px -1px #808080; }
.mq span{ display:inline-block; padding-left:100%; animation:dpscroll 13s linear infinite; }

/* WHAT I DO: gold award seal, slapped in the corner */
.seal{ position:absolute; top:12px; right:14px; width:84px; height:84px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1px; font-size:9.5px; font-weight:bold; line-height:1.08; text-transform:uppercase; color:#6a4700; background:radial-gradient(circle at 50% 34%,#ffe9a0,#e3a900); box-shadow:0 0 0 3px #b98600, 0 0 0 6px #ffd865, 2px 3px 6px rgba(0,0,0,.35); transform:rotate(-9deg); z-index:2; }
.seal .stars{ color:#a00; font-size:11px; letter-spacing:.04em; }

/* HOW IT WORKS: Win98 "building…" progress bar */
.build{ margin-top:18px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; }
.build .lbl{ font-size:11px; font-weight:bold; color:var(--navy); }
.progress98{ width:min(340px,100%); height:18px; background:#fff; box-shadow:var(--bevel-dn); padding:2px; }
.progress98 i{ display:block; height:100%; background:repeating-linear-gradient(90deg,#000080 0 11px, transparent 11px 15px); animation:prog98 3.2s ease-in-out infinite; }
@keyframes prog98{ 0%{ width:6%; } 50%{ width:94%; } 100%{ width:6%; } }

/* ===== Assets folder — the shop (audition free, buy the file) ===== */
.as-shop{ flex:1; min-height:0; overflow:auto; padding:8px; background:var(--face); }
.as-head{ display:flex; align-items:center; gap:11px; padding:9px 11px; margin-bottom:9px; color:#fff;
  font-size:12px; line-height:1.45; background:linear-gradient(90deg,var(--navy),var(--navy2)); }
.as-head-ic{ font-size:26px; line-height:1; flex:none; }
.as-head b{ color:#ff0; }

/* price + buy are FIXED widths, not auto: every row is its own grid, so only a
   fixed track makes the column header line up with the values underneath it. */
.as-row,.as-cols{ display:grid; grid-template-columns:26px 24px 1fr 52px 84px; align-items:center; gap:10px; }
.as-cols{ padding:3px 8px; font-size:11px; font-weight:bold; background:var(--face); box-shadow:var(--bevel-up); }
.as-cols .as-price{ font-size:11px; color:#000; }

.as-row{ margin-top:5px; padding:8px; background:#fff; box-shadow:var(--bevel-dn); }
.as-row:hover{ background:#f3f3ff; }
.as-ic{ font-size:20px; line-height:1; text-align:center; }
.as-nm{ min-width:0; }
.as-nm b{ display:block; font-size:12.5px; color:#00006a; }
.as-desc{ display:block; margin-top:2px; font-size:12px; line-height:1.45; color:#1c1c1c; }
.as-desc i{ color:#555; }
.as-meta{ display:block; margin-top:2px; font-family:"Courier New",monospace; font-size:10.5px; color:#666; }
.as-price{ font-size:14px; font-weight:bold; color:#053d05; text-align:right; }

.as-play{ width:26px; height:26px; display:grid; place-items:center; font-size:11px; line-height:1; color:#000;
  background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.as-play:active,.as-play.on{ box-shadow:var(--bevel-dn); }
.as-play.on{ color:#a00; }
.as-pack-ic{ font-size:19px; background:transparent; box-shadow:none; cursor:default; }

.as-buy{ width:100%; font-size:12px; font-weight:bold; padding:7px 6px; color:#053d05; background:#c9e7c9;
  box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.as-buy:active{ box-shadow:var(--bevel-dn); }

.as-pack{ margin-top:9px; background:#fffbe6; border:2px dashed #a00; box-shadow:none; }
.as-pack:hover{ background:#fff8d6; }
.as-pack .as-nm b{ color:#a00; }
.as-pack .as-meta{ color:#a00; font-weight:bold; }

.as-lic{ margin-top:10px; padding:9px 11px; font-size:11.5px; line-height:1.55; color:#111;
  background:#fff; box-shadow:var(--bevel-dn); }
.as-lic b{ color:#00006a; }

/* ===== checkout dialog — card in, file out, without leaving the desktop ===== */
.as-dlg{ min-width:0; min-height:0; width:400px; }
.as-dlg-body{ padding:12px; background:var(--face); }

.as-co-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; background:#fff; box-shadow:var(--bevel-dn); }
.as-co-item .ic{ flex:none; font-size:22px; line-height:1; }
.as-co-item div{ flex:1; min-width:0; }
.as-co-item b{ display:block; font-size:12.5px; color:#00006a; }
.as-co-item span{ font-size:11px; color:#555; }

.as-co-form label{ display:block; margin:10px 0 3px; font-size:11.5px; font-weight:bold; }
.as-co-form label small{ font-weight:normal; color:#555; }
.as-in{ width:100%; padding:5px 7px; border:0; font-family:var(--ui); font-size:13px; color:#000;
  background:#fff; box-shadow:var(--bevel-dn); user-select:text; }
/* Stripe mounts its card iframe in here — it needs a real box to land in */
.as-card{ min-height:32px; padding:8px 7px; font-size:11.5px; color:#888; background:#fff; box-shadow:var(--bevel-dn); }

.as-co-status{ min-height:16px; margin-top:10px; font-size:11.5px; line-height:1.4; }
.as-co-status.err{ color:#a00; font-weight:bold; }
.as-co-status.ok{ color:#053d05; font-weight:bold; }

.as-pay{ width:100%; margin-top:8px; padding:9px; border:0; font-size:13px; font-weight:bold; color:#053d05;
  background:#c9e7c9; box-shadow:var(--bevel-up); cursor:pointer; }
.as-pay:active{ box-shadow:var(--bevel-dn); }
.as-pay[disabled]{ color:#808080; background:var(--face); cursor:default; }
.as-co-safe{ margin-top:8px; text-align:center; font-size:10.5px; color:#444; }
.as-co-legal{ margin-top:4px; text-align:center; font-size:10.5px; color:#555; }
.as-co-legal a{ color:#0000c8; text-decoration:underline; }

/* the payoff — paid, and the file is one click away */
.as-paid{ padding:6px 4px; text-align:center; }
.as-paid-tick{ font-size:34px; line-height:1; color:#053d05; }
.as-paid h3{ margin:6px 0 4px; font-family:var(--head); font-size:1.1rem; color:var(--navy); }
.as-paid p{ font-size:12px; line-height:1.5; }
.as-dl{ display:block; margin:12px 0 10px; padding:11px; font-size:13px; font-weight:bold; color:#053d05;
  background:#c9e7c9; box-shadow:var(--bevel-up); }
.as-dl:active{ box-shadow:var(--bevel-dn); }
.as-paid-note{ padding:7px 9px; font-size:11px; line-height:1.5; text-align:left; background:#fffbe6; border:2px dashed #a00; }
.as-paid-note.as-warn{ background:#ffe6e6; }        /* the email didn't go — say so, don't dress it up */

/* ═══ Dippy — the pop-up ad ══════════════════════════════════════════════════
   How the drinking bird would actually have been sold online in 1997: a pop-up
   that shows up uninvited, with sunburst rays, Impact, an AS-SEEN-ON-TV seal,
   a starburst price badge and a coupon you cut out with scissors.
   Colours are the bird's own — the same eight bird.py draws him with — so the
   ad and the product are literally the same palette. */
/* The ad is a fixed piece of artwork: it only works at ONE size, because the
   headline, the seal and the coupon are all tuned to each other. So it is never
   reflowed — it is drawn at its natural 560px and then scaled bodily to whatever
   room the screen has, and .dip-fit is the box that holds the scaled result.
   desktop.js sets the two sizes; the proportions never change. */
.dipw{ min-width:0; min-height:0; }
.dip-fit{ overflow:hidden; }
.dip{
  --dip-red:#d8261c; --dip-ink:#101010; --dip-gold:#ffd24a;
  --dip-display:Impact,Haettenschweiler,"Franklin Gothic Bold","Arial Narrow Bold","Arial Black",sans-serif;
  --dip-serif:"Times New Roman",Times,serif;
  width:560px; transform-origin:top left;
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--dip-gold); color:var(--dip-ink);
}
/* the rays turn, slowly, forever — the one thing every sunburst ad has done since 1955 */
.dip-rays{ position:absolute; inset:-70% -30%; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 40%, #ffe796 0deg 4.5deg, #f6a12c 4.5deg 9deg);
  transform-origin:50% 40%; animation:dipspin 90s linear infinite; }
@keyframes dipspin{ to{ transform:rotate(360deg); } }
/* without this the type sits on a strobing pinwheel and is unreadable */
.dip-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 54% 46% at 50% 40%, rgba(255,248,214,.95), rgba(255,240,190,.5) 55%, rgba(255,230,160,0) 80%),
             radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0,0,0,0) 52%, rgba(120,60,0,.22)); }
.dip-in{ position:relative; z-index:2; padding:15px 14px 10px; }

.dip-tv{ position:absolute; top:7px; left:5px; z-index:4; transform:rotate(-13deg);
  background:var(--dip-ink); color:#fff; border:2px solid #fff; box-shadow:0 2px 0 rgba(0,0,0,.35);
  padding:4px 7px 3px; text-align:center; line-height:1; }
.dip-tv .a{ display:block; font-family:var(--dip-display); font-size:8px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dip-gold); }
.dip-tv .b{ display:block; font-family:var(--dip-display); font-size:17px; letter-spacing:.02em;
  text-transform:uppercase; margin-top:1px; }
.dip-new{ position:absolute; top:11px; right:10px; z-index:4; background:#ff0; color:#a00;
  border:1px solid #a00; font-weight:bold; font-size:11px; padding:1px 5px;
  animation:blink 1s steps(1) infinite; }

.dip-kick{ width:fit-content; margin:0 auto; padding:3px 10px; text-align:center;
  font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.14em; font-size:9.5px;
  color:#b0180f; background:rgba(255,255,255,.55);
  border-top:2px solid var(--dip-ink); border-bottom:2px solid var(--dip-ink); }
.dip-h{ margin:11px 0 6px; text-align:center; font-family:var(--dip-display); font-weight:400;
  text-transform:uppercase; font-size:38px; line-height:.9; letter-spacing:.01em; color:var(--dip-ink);
  text-shadow:2px 2px 0 #fff, 4px 4px 0 rgba(216,38,28,.75); }
.dip-sub{ max-width:44ch; margin:0 auto; text-align:center; font-family:var(--dip-serif);
  font-style:italic; font-size:13px; line-height:1.4; color:#5a2708; }

/* He outsizes the price badge on purpose: the product is the hero of the ad,
   not the number. */
.dip-body{ display:grid; grid-template-columns:126px minmax(0,1fr) 136px; gap:10px;
  align-items:center; margin-top:12px; }
/* aspect-ratio, not height:auto — the ad's height is measured to scale it, and an
   unloaded image with no reserved box would measure short and over-scale it. */
.dip-bird{ display:block; width:126px; aspect-ratio:570/720; filter:drop-shadow(0 8px 8px rgba(120,50,0,.35)); }
.dip-bullets{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.dip-bullets li{ display:flex; gap:5px; align-items:flex-start; font-family:var(--dip-display);
  text-transform:uppercase; letter-spacing:.02em; font-size:13px; line-height:1.1; }
.dip-bullets .tk{ flex:none; color:#0f8a3c; font-size:1.1em; line-height:1; }

.dip-seal{ position:relative; display:grid; place-items:center; transform:rotate(-8deg); }
.dip-seal svg{ display:block; filter:drop-shadow(0 6px 8px rgba(120,50,0,.4)); }
.dip-seal-t{ position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  pointer-events:none; }
.dip-seal-t .only{ font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:10px; }
.dip-seal-t .price{ display:flex; align-items:flex-start; justify-content:center; gap:1px;
  margin:2px 0 3px; font-family:var(--dip-display); color:var(--dip-red); font-size:44px;
  line-height:.82; letter-spacing:-.02em; }
.dip-seal-t .price .c{ font-size:18px; line-height:1; margin-top:.28em; }
.dip-seal-t .foot{ font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.05em;
  font-size:8px; line-height:1.35; }

/* the coupon — dashed, with a pair of scissors on the cut line */
.dip-coupon{ position:relative; z-index:2; margin:14px 14px 0; padding:12px 13px 13px;
  border:3px dashed var(--dip-ink); background:rgba(255,252,236,.95); }
.dip-coupon::before{ content:"✂"; position:absolute; top:-13px; left:16px; padding:0 5px;
  background:var(--dip-gold); font-size:16px; line-height:1; }
.dip-cp-head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  flex-wrap:wrap; padding-bottom:5px; border-bottom:2px solid var(--dip-ink); }
.dip-cp-head h3{ font-family:var(--dip-display); font-weight:400; text-transform:uppercase;
  font-size:19px; letter-spacing:.02em; }
.dip-cp-head span{ font-family:var(--dip-serif); font-style:italic; font-size:11px; color:#6b4a1e; }
.dip-check{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.dip-check li{ display:flex; gap:6px; align-items:flex-start; font-size:12px; line-height:1.35; color:#241a08; }
.dip-check .bx{ flex:none; width:13px; height:13px; margin-top:1px; display:grid; place-items:center;
  border:2px solid var(--dip-ink); background:#fff; color:var(--dip-red); font-size:10px;
  font-weight:bold; line-height:1; }
.dip-buy{ display:block; width:100%; margin-top:11px; padding:11px 8px 9px; text-align:center;
  font-family:var(--dip-display); text-transform:uppercase; letter-spacing:.05em; font-size:19px;
  line-height:1; color:#fff; background:var(--dip-red); border:2px solid var(--dip-ink);
  box-shadow:4px 4px 0 var(--dip-ink); transition:transform .08s ease, box-shadow .08s ease; }
.dip-buy:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--dip-ink); }
.dip-buy:active{ transform:translate(4px,4px); box-shadow:0 0 0 var(--dip-ink); }
.dip-note{ margin-top:8px; text-align:center; font-family:var(--dip-serif); font-size:11.5px;
  line-height:1.4; color:#6b4a1e; }
.dip-note b{ color:#241a08; }

.dip-marquee{ position:relative; z-index:2; margin-top:12px; padding:3px 0; overflow:hidden;
  white-space:nowrap; background:var(--dip-ink); color:var(--dip-gold);
  font-family:"Courier New",monospace; font-size:11px; }
.dip-marquee span{ display:inline-block; padding-left:100%; animation:dpscroll 13s linear infinite; }
/* the fine print sits on solid stock — over the rays it's an unreadable smear,
   and this is the paragraph a buyer is entitled to actually read */
.dip-fine{ position:relative; z-index:2; padding:8px 14px 9px; background:#fdf6e3;
  border-top:2px solid var(--dip-ink); font-family:var(--dip-serif); font-size:9.5px;
  line-height:1.5; color:#3d2a0c; text-align:center; }

/* he gets a real portrait on the desktop, not an emoji */
.dicon .ic.dip-ic{ font-size:0; }
.dicon .ic.dip-ic img{ display:block; height:46px; width:auto; }

@media(prefers-reduced-motion:reduce){
  .dip-rays{ animation:none; }
  .dip-new{ animation:none; }
  .dip-marquee span{ animation:none; padding-left:0; }
}

/* ===================== AAA ONLINE — MAIL =====================================
   The "you've got mail" bit. Alert lives bottom-right ON PURPOSE: Dippy is centred
   and the Design Pusher chain stacks top-left, so the one corner nobody else uses is
   the one corner the mail can always arrive in without landing on top of an ad. */

/* unread badge on the desktop mailbox + the Start menu */
.dicon.mail-ic .ic{ position:relative; display:inline-block; }
.mail-dot{ position:absolute; top:-2px; right:-6px; min-width:15px; height:15px; padding:0 3px;
  display:grid; place-items:center; font-size:10px; font-weight:bold; line-height:1;
  color:#fff; background:#d8261c; border:1px solid #fff; border-radius:8px;
  text-shadow:none; filter:none; box-shadow:1px 1px 0 rgba(0,0,0,.4); }
.sm-new{ margin-left:6px; font-size:10px; font-weight:bold; color:#fff; background:#d8261c;
  padding:1px 5px; border-radius:7px; }

/* ---- the alert ---- */
.mw{ min-width:0; min-height:0; width:326px; }
.mw-body{ padding:14px 14px 12px; background:var(--face); text-align:center; }
.mw-art{ font-size:44px; line-height:1; margin:2px 0 8px; animation:mwjig .7s ease-in-out 3; }
@keyframes mwjig{ 0%,100%{ transform:rotate(0) } 25%{ transform:rotate(-9deg) } 75%{ transform:rotate(9deg) } }
.mw-h{ margin:0 0 3px; font-size:16px; font-weight:bold; color:#000080; }
.mw-p{ margin:0 0 11px; font-size:11.5px; color:#303030; }
.mw-btns{ display:flex; gap:7px; justify-content:center; }
.mw-btns button{ font-size:11.5px; padding:5px 14px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.mw-btns .mw-go{ font-weight:bold; }
.mw-btns button:active{ box-shadow:var(--bevel-dn); }

/* ---- the inbox ---- */
.ml{ flex:1; min-height:0; display:flex; flex-direction:column; background:var(--face); }
/* The panes swap with [hidden], and .ml-compose sets display:flex — a class beats the
   UA sheet's [hidden]{display:none}, so without this the reply form never hides and
   both panes stack. Cheap rule, nasty bug. */
.ml [hidden]{ display:none !important; }
.ml-bar{ flex:none; display:flex; align-items:center; gap:4px; padding:4px 6px;
  box-shadow:inset 0 1px 0 var(--white), inset 0 -1px 0 var(--silver-lo); }
.ml-tb{ font-size:11.5px; padding:4px 9px; background:var(--face); box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ml-tb:active{ box-shadow:var(--bevel-dn); }
.ml-grow{ flex:1; }
.ml-count{ font-size:11px; font-weight:bold; color:#a00; }

.ml-list{ flex:none; margin:6px; background:#fff; box-shadow:var(--bevel-dn); }
.ml-cols,.ml-row{ display:grid; grid-template-columns:26px 130px 1fr 92px; align-items:center; gap:6px; }
.ml-cols{ font-size:11px; font-weight:bold; padding:3px 6px; background:var(--face);
  box-shadow:inset 0 -1px 0 var(--silver-lo); }
.ml-row{ padding:5px 6px; font-size:12px; cursor:default; }
.ml-row.unread{ font-weight:bold; }
.ml-row.unread .ml-subj{ color:#000080; }
.ml-row.read .ml-ic{ opacity:.45; }
.ml-ic{ font-size:14px; }
.ml-from,.ml-subj,.ml-date{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-date{ font-size:11px; color:#505050; font-weight:normal; }

/* the message itself — a 1997 HTML email, which means it is doing a LOT */
.ml-read{ flex:1; min-height:0; overflow:auto; margin:0 6px 6px; padding:0; background:#fff; box-shadow:var(--bevel-dn); }
.ml-hdrs{ padding:8px 12px; font-size:11.5px; line-height:1.6; background:#eceadb;
  border-bottom:1px solid #c0c0c0; }
.ml-body{ padding:14px 18px 18px; font-size:13px; line-height:1.6; color:#111; }
.ml-body p{ margin:0 0 11px; }
.ml-nospam{ text-align:center; font-weight:bold; color:#b00000; font-size:12px; letter-spacing:.5px;
  border:2px dashed #b00000; padding:7px; margin:0 0 14px !important; background:#fffbe0; }
.ml-nospam small{ display:block; font-weight:normal; letter-spacing:0; color:#555; font-size:10.5px; margin-top:2px; }
.ml-big{ font-size:22px; font-weight:bold; color:#b00000; font-family:Georgia,"Times New Roman",serif;
  margin:14px 0 !important; }
.ml-svc{ border-collapse:collapse; margin:12px 0 14px; background:#f4f6ff;
  border:2px solid #000080; width:100%; }
.ml-svc td{ padding:4px 8px; font-size:12.5px; vertical-align:top; }
.ml-svc td:first-child{ width:20px; color:#0a7d29; font-weight:bold; }
.ml-pitch{ text-align:center; font-family:Georgia,serif; font-size:17px; line-height:1.45;
  color:#000080; padding:11px; margin:14px 0 !important;
  border-top:3px double #000080; border-bottom:3px double #000080; }
.ml-pitch b{ font-size:20px; }
.ml-sig{ margin-top:16px !important; }
.ml-sig small{ color:#555; line-height:1.5; display:block; margin-top:2px; }
.ml-foot{ margin-top:16px !important; padding-top:8px; border-top:1px solid #ddd;
  font-size:10px; color:#888; line-height:1.5; }

/* ---- reply ---- */
.ml-compose{ flex:1; min-height:0; overflow:auto; margin:0 6px 6px; padding:10px 12px;
  background:#fff; box-shadow:var(--bevel-dn); display:flex; flex-direction:column; gap:7px; }
.ml-cf{ display:grid; grid-template-columns:52px 1fr; align-items:center; gap:7px; }
.ml-cf label{ font-size:11.5px; font-weight:bold; text-align:right; }
.ml-in,.ml-ro,.ml-ta{ font:inherit; font-size:12px; padding:4px 6px; border:0;
  box-shadow:var(--bevel-dn); background:#fff; width:100%; }
.ml-ro{ background:#eceadb; color:#555; cursor:default; }
.ml-ta{ flex:1; min-height:110px; resize:none; line-height:1.5; }
.ml-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ml-actions{ display:flex; gap:7px; }
.ml-send,.ml-cancel{ font-size:12px; padding:6px 16px; background:var(--face);
  box-shadow:var(--bevel-up); border:0; cursor:pointer; }
.ml-send{ font-weight:bold; }
.ml-send:active,.ml-cancel:active{ box-shadow:var(--bevel-dn); }

.ml-sent{ flex:1; min-height:0; overflow:auto; margin:0 6px 6px; padding:24px 20px;
  background:#fff; box-shadow:var(--bevel-dn); text-align:center; font-size:13px; line-height:1.6; }
.ml-sent-h{ font-size:19px; font-weight:bold; color:#0a7d29; margin:0 0 10px; }
.ml-sent-f{ margin-top:16px; color:#555; font-size:12px; }

/* let tiny screens scroll rather than clip the desktop */
@media(max-height:520px),(max-width:520px){ body.d98{ overflow:auto; } }