/* Android / ChromeOS ("Material 3 Expressive") look for the whole desktop. Loaded last, so it refines the shapes, surfaces,
   type and motion of everything above without touching how any of it works. Colours come from the tokens in index.html. */
:root{
  --md-elev1:0 1px 2px rgba(0,0,0,.14),0 1px 3px 1px rgba(0,0,0,.08);
  --md-elev2:0 1px 2px rgba(0,0,0,.14),0 2px 6px 2px rgba(0,0,0,.09);
  --md-elev3:0 4px 10px 3px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.16);
  --md-emph:cubic-bezier(.2,0,0,1);
  --md-spring:cubic-bezier(.34,1.3,.5,1);
  --tonal:color-mix(in srgb,var(--primary) 12%,var(--surface));
  --tonal-hi:color-mix(in srgb,var(--primary) 20%,var(--surface));
  --state:color-mix(in srgb,var(--primary) 9%,transparent);
}
html{-webkit-tap-highlight-color:transparent}
body{font-feature-settings:"ss01";letter-spacing:.005em}
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink2) 35%,transparent) transparent}
::selection{background:color-mix(in srgb,var(--primary) 28%,transparent)}
:focus-visible{outline:2px solid color-mix(in srgb,var(--primary) 75%,transparent);outline-offset:2px}
/* writing surfaces never get an outline: the caret is the focus indicator. Containers show a soft ring instead. */
input:focus-visible,textarea:focus-visible,select:focus-visible,[contenteditable]:focus-visible,[contenteditable] *:focus-visible,.rb-e:focus-visible,.rb-cell:focus-visible{outline:0!important;outline-offset:0}
input:focus,textarea:focus,[contenteditable]:focus{outline:0}
.kn-search:focus-within,.dx-search:focus-within,.gm-field:focus-within,.spot-in:focus-within,.search:focus-within{box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 70%,transparent)}
.kn-compose-card:focus-within,.kn-edit:focus-within{box-shadow:var(--md-elev3),0 0 0 1.5px color-mix(in srgb,var(--primary) 45%,transparent)}
button,a,[role=button]{-webkit-tap-highlight-color:transparent;transition:background-color .18s var(--md-emph),box-shadow .18s var(--md-emph),transform .18s var(--md-emph),opacity .18s}
button:active:not(:disabled),.btn:active{transform:scale(.97)}

/* wallpaper: a soft Material-You wash */
#desk{background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--w1) 60%,var(--bg)),var(--bg) 60%),var(--bg)}

/* status bar */
.topbar{padding:10px 16px}
.pill{background:color-mix(in srgb,var(--surface) 72%,transparent);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);padding:8px 16px;font-weight:600;box-shadow:none;border:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.tb-ic{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%}
.tb-ic:hover{background:var(--tonal)}
.tb-dot{background:#D93025!important}

/* windows */
.win{border-radius:28px;box-shadow:var(--md-elev3),0 24px 60px rgba(0,0,0,.20);border:1px solid color-mix(in srgb,var(--line) 70%,transparent);background:var(--surface)}
.win:not(.top){box-shadow:var(--md-elev1),0 10px 30px rgba(0,0,0,.12)}
.win .bar{background:color-mix(in srgb,var(--surface2) 70%,var(--surface));padding:8px 10px 8px 16px;min-height:56px;gap:12px}
.win:not(.top) .bar{background:color-mix(in srgb,var(--surface2) 40%,var(--surface))}
.win .bar .ttl{font-size:15.5px;font-weight:600;letter-spacing:.01em}
.wb{width:36px;height:36px;background:transparent;color:var(--ink)}
.wb:hover{background:var(--state)}
.wb.x:hover{background:#D93025;color:#fff}
.win.max{border-radius:0}

/* shelf (the dock) */
.shelf{background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);box-shadow:var(--md-elev3),0 12px 36px rgba(0,0,0,.16);border:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.shelf .launch,.shelf [data-launch]{background:var(--primary)!important;color:var(--on-primary)!important}

/* launcher: the ChromeOS app drawer */
.launcher{border-radius:32px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);box-shadow:var(--md-elev3),0 20px 60px rgba(0,0,0,.22);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.launcher .search,.launcher input[type=search]{border-radius:99px;background:var(--surface2);border:0}

/* buttons: filled, tonal, outlined */
.btn{min-height:40px;padding:0 24px;font-weight:600;letter-spacing:.01em;box-shadow:none}
.btn:hover{box-shadow:var(--md-elev1);filter:brightness(1.06)}
.btn.tonal{background:var(--tonal-hi);color:var(--ink)}
.btn.tonal:hover{background:color-mix(in srgb,var(--primary) 26%,var(--surface));filter:none}
.btn.outline,.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--primary)}

/* segmented controls */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:99px;overflow:hidden;background:transparent;padding:0;gap:0}
.seg button{border:0;background:transparent;padding:8px 18px;font-weight:600;border-right:1px solid var(--line);border-radius:0}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--tonal-hi);color:var(--ink)}
.seg button:hover:not(.on){background:var(--state)}

/* text fields */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{accent-color:var(--primary)}
.ow-f input,.ow-f textarea,.ow-f select{border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .15s,box-shadow .15s}
.ow-f input:focus,.ow-f textarea:focus,.ow-f select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.dx-title:focus,.kn-ti:focus,.kn-ta:focus,.jed-title:focus,.jed-excerpt:focus{box-shadow:none}
input[type=checkbox],input[type=radio]{accent-color:var(--primary)}

/* quick settings, popups, dialogs */
.qs{border-radius:32px;border:1px solid color-mix(in srgb,var(--line) 55%,transparent);box-shadow:var(--md-elev3),0 20px 60px rgba(0,0,0,.22)}
.own-card,.dx-card{border-radius:28px;box-shadow:var(--md-elev3),0 20px 60px rgba(0,0,0,.28)}
.ctx{border-radius:18px;box-shadow:var(--md-elev3)}

/* widgets */
.wcard{border-radius:28px;box-shadow:var(--md-elev2);border:1px solid color-mix(in srgb,var(--line) 50%,transparent);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(14px)}

/* desktop icons: label chips like Android's launcher */
.icons .dicon .lb,.dicon .lb{font-weight:600;text-shadow:none}
.dicon:hover .ico{transform:translateY(-2px) scale(1.04)}

/* chips and pills used inside the apps */
.chip,.tag,.pj-chip{border-radius:10px}

/* lock screen */
.lock .lk-time,.lock .time{font-weight:500;letter-spacing:-.02em}

/* phones: Android gesture bar, bigger touch targets */
@media (max-width:760px){
  .topbar{padding:8px 12px}
  .win{border-radius:28px 28px 0 0}
  .win .bar{min-height:60px}
  .wb{width:40px;height:40px}
  .shelf{border-radius:999px}
}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* Title bars without the solid strip: the icon, title and window buttons float over the top of the window.
   The body keeps that height clear with a transparent top border (its own background shows through), so nothing
   moves. Full-colour apps (Links) run their colour up under the buttons and get a frosted bar once scrolled. */
.win{--barh:56px}
.win .bar,.win:not(.top) .bar{position:absolute;top:0;left:0;right:0;z-index:6;min-height:var(--barh);box-sizing:border-box;background:transparent;transition:background-color .2s ease,box-shadow .2s ease}
.win>.body{border-top:var(--barh) solid transparent}
@media (max-width:760px){.win{--barh:60px}}

/* ---------- Music app: full-bleed cover art (or the video) with the controls on top (js/music.mjs, appMarkup) ---------- */
.win[data-app=music]>.body{padding:0;overflow:hidden;border-top-width:0}
.win .mu-appwrap{position:relative;height:100%;min-height:100%;overflow:hidden;border-radius:0;box-shadow:none;container-type:size;color:#fff;
  --mu-ink:#fff;--mu-ink2:rgba(255,255,255,.78);--mu-cream:#fff;--mu-accent:#fff;background:#111}
.mu-appwrap .mu.mu-app{position:absolute;inset:0;--mu-accent:#fff}
.mu-app .mpa{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0}
/* the stage: art, or the record on a Material colour field, or the video, always covering the whole window */
.mu-app .mpa-stage{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(70% 55% at 18% 12%,color-mix(in srgb,var(--mu-c,#4285F4) 85%,#fff) 0,transparent 70%),radial-gradient(60% 50% at 88% 30%,color-mix(in srgb,var(--mu-c,#9B72CB) 60%,#8AB4F8) 0,transparent 72%),radial-gradient(80% 60% at 50% 100%,color-mix(in srgb,var(--mu-c,#D96570) 70%,#1a1033) 0,transparent 75%),#14102a;transition:background .8s ease}
.mu-app .mpa-fb{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:22cqh}
.mu-app .mpa-vinyl{width:min(64cqw,46cqh);height:auto;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
.mu-app[data-s=playing] .mpa-vinyl{animation:mu-spin 4s linear infinite}
.mu-app .mpa-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mu-app[data-s=playing] .mpa-img{transform:scale(1.0)}
.mu-app.has-art .mpa-fb{display:none}
.mu-app .mpa-video{position:absolute;inset:0;overflow:hidden;display:none;background:#000}
.mu-app.vid .mpa-video{display:block}.mu-app.vid .mpa-img,.mu-app.vid .mpa-fb{display:none}
/* the video covers the window; it is drawn a little taller than the window so YouTube's own title strip and corner buttons fall outside */
.mu-app .mpa-video iframe{position:absolute;top:50%;left:50%;width:max(100cqw,calc((100cqh + 140px) * 16 / 9));height:max(calc(100cqh + 140px),56.25cqw);transform:translate(-50%,-50%);border:0;pointer-events:none}
.mu-app .mpa-video{transition:opacity .35s ease}
/* paused or loading: the cover sits over the video, so YouTube's pause screen never shows */
.mu-app.vid:not([data-s=playing]) .mpa-video{opacity:0}
.mu-app.vid:not([data-s=playing]) .mpa-img:not([hidden]),.mu-app.vid:not([data-s=playing]):not(.has-art) .mpa-fb{display:block}
.mu-app.vid:not([data-s=playing]):not(.has-art) .mpa-fb{display:grid}
.mu-app .mpa-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 42%,rgba(0,0,0,.35) 62%,rgba(0,0,0,.82) 100%)}
/* buttons along the top, under the window's own controls */
.mu-app .mpa-top{position:absolute;top:calc(var(--barh,56px) + 14px);right:14px;z-index:3;display:flex;gap:8px;transition:opacity .4s ease}
.mu-app .mpa-ib{border:0;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.mu-app .mpa-ib:hover{background:rgba(255,255,255,.28)}.mu-app .mpa-ib svg{width:19px;height:19px}.mu-app .mpa-ib.on{background:#fff;color:#1f1f1f}
/* now playing, over the bottom of the art */
.mu-app .mpa-now{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding:0 22px 20px;transition:opacity .4s ease,transform .4s ease}
.mu-app .mpa-meta{display:flex;align-items:flex-end;gap:12px}
.mu-app .mpa-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mu-app .mpa-tt .mu-t{font-size:clamp(20px,6.2cqw,34px);font-weight:var(--fw-x);line-height:1.1;letter-spacing:-.015em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.mu-app .mpa-tt .mu-a{font-size:var(--fs-4);color:rgba(255,255,255,.8);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-app .mu-eq{height:18px}.mu-app .mu-eq i{width:4px;background:#fff}
.mu-app .mu-seek{gap:10px;color:rgba(255,255,255,.78)}
.mu-app .mu-sk,.mu-app .mu-vol{background:linear-gradient(90deg,#fff var(--p,50%),rgba(255,255,255,.28) var(--p,50%))}
.mu-app .mu-sk::-webkit-slider-thumb,.mu-app .mu-vol::-webkit-slider-thumb{background:#fff;border-color:#fff}
.mu-app .mpa-row2{display:flex;align-items:center;gap:16px}
.mu-app .mpa-ctl{display:flex;align-items:center;gap:14px;margin:0 auto 0 -8px}
.mu-app .mpa-ctl .mu-b{width:48px;height:48px;color:#fff}.mu-app .mpa-ctl .mu-b:hover{background:rgba(255,255,255,.14)}.mu-app .mpa-ctl .mu-b svg{width:24px;height:24px}
.mu-app .mpa-ctl .mu-big{width:64px;height:64px;background:#fff;color:#1f1f1f;box-shadow:0 10px 30px rgba(0,0,0,.35)}.mu-app .mpa-ctl .mu-big:hover{background:#fff}.mu-app .mpa-ctl .mu-big svg{width:28px;height:28px}
.mu-app .mpa-vol{flex:0 1 160px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8)}.mu-app .mpa-vol svg{width:18px;height:18px;display:block}.mu-app .mpa-vol .mu-vol{margin:0}
.mu-app .mpa-vol:has(.mu-vol[hidden]){display:none}
.mu-app .mpa-tools{display:flex;align-items:center;gap:8px}
.mu-app .mu-fm-b,.mu-app .mu-fm-d{background:rgba(255,255,255,.16);color:#fff;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.mu-app .mu-fm-b.on{background:#fff;color:#1f1f1f}
.mu-app .mu-fm{gap:6px}.mu-app .mu-fm-t{flex:none;min-width:48px;text-align:center;color:rgba(255,255,255,.85)}
/* the records: a sheet that rises over the art (a side panel in wide windows) */
.mu-app .mpa-lib{position:absolute;z-index:4;left:10px;right:10px;bottom:10px;top:max(calc(var(--barh,56px) + 56px),32cqh);display:flex;flex-direction:column;gap:6px;padding:14px 10px 10px 14px;border-radius:28px;
  background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);box-shadow:0 20px 60px rgba(0,0,0,.35);
  transform:translateY(calc(100% + 20px));transition:transform .45s cubic-bezier(.2,.9,.25,1);visibility:hidden}
.mu-app.lib-open .mpa-lib{transform:none;visibility:visible}
.mu-app .mpa-lh{display:flex;align-items:center;gap:8px;padding-right:2px}.mu-app .mpa-lh b{font-size:var(--fs-6);flex:none}.mu-app .mpa-lh small{flex:1;color:var(--ink2)}
.mu-app .mpa-lh .mpa-ib{width:34px;height:34px;background:var(--surface2);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.mu-appwrap .mu-app .mpa-list{display:flex;flex-direction:column;gap:2px;padding:0 4px 4px 0;overflow:auto;flex-wrap:nowrap;scrollbar-width:none}
.mu-app .mpa-row{display:flex;align-items:center;gap:12px;width:100%;padding:8px;border:0;border-radius:16px;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.mu-app .mpa-row:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}.mu-app .mpa-row.on{background:color-mix(in srgb,var(--mu-c) 18%,transparent)}
.mu-app .mpa-th{position:relative;flex:none;width:48px;height:48px;border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--mu-c);color:#fff;font-weight:var(--fw-x)}.mu-app .mpa-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mu-app .mpa-rt{flex:1;min-width:0;display:flex;flex-direction:column}.mu-app .mpa-rt b{font-weight:var(--fw-b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mu-app .mpa-rt small{color:var(--ink2);font-size:var(--fs-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-app .mpa-ix{flex:none;width:28px;display:grid;place-items:center;color:var(--ink2);font-variant-numeric:tabular-nums;font-size:var(--fs-3)}
.mu-app .mpa-ix .mu-eq{display:none;opacity:1;height:14px}.mu-app .mpa-ix .mu-eq i{background:var(--mu-c);animation:none}.mu-app .mpa-row.on .mpa-ix .mu-eq{display:inline-flex}.mu-app .mpa-row.on .mpa-no{display:none}
.mu-app[data-s=playing] .mpa-row.on .mu-eq i{animation:mu-eq .9s ease-in-out infinite}
.mu-app .mu-empty{padding:18px 0}.mu-app .mu-empty p{color:var(--ink2)}
/* while a video plays here, the controls step aside until the pointer moves */
.mu-app.idle .mpa-now,.mu-app.idle .mpa-top{opacity:0;transform:translateY(6px);pointer-events:none}.mu-app.idle .mpa-scrim{opacity:.25}.mu-app .mpa-now{transition:opacity .4s ease,transform .4s ease}.mu-app .mpa-scrim{transition:opacity .4s ease}
.mu-app.idle{cursor:none}
/* wide windows: the records sit in a glass panel at the right */
@container (min-width:760px){
  .mu-app .mpa-lib{left:auto;right:14px;top:calc(var(--barh,56px) + 56px);bottom:14px;width:320px;transform:translateX(calc(100% + 24px))}
  .mu-app.lib-open .mpa-now{padding-right:356px}
}
@container (max-height:420px){.mu-app .mpa-tools{display:none}.mu-app .mpa-now{gap:8px;padding-bottom:12px}}
/* the floating (popped-out) video: a way back into the app */
.mu-engine .mu-pip-x{position:absolute;top:8px;right:8px;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;z-index:2}.mu-engine .mu-pip-x[hidden]{display:none}.mu-engine .mu-pip-x svg{width:18px;height:18px}
/* Owner's desktop app only (no title bar): the site's own minimise, maximise and close buttons, top right */
html.desk-app .wctl{position:fixed;top:10px;right:16px;z-index:3100;display:flex;gap:6px}
html.desk-app .wctl .tb-ic svg{display:block}
html.desk-app .wctl .wctl-close:hover,html.desk-app .wctl .wctl-close:focus-visible{background:#C4314B;color:#fff;border-color:transparent}
html.desk-app .topbar{padding-right:calc(16px + 3 * 40px + 2 * 6px + 10px)}
html.desk-app .lock .lfs{right:calc(16px + 3 * 40px + 2 * 6px + 10px)}
html.desk-app .ov-top{padding-right:calc(16px + 3 * 40px + 2 * 6px + 16px)}
html.desk-app.focus-mode .wctl,html.desk-app.grp-full .wctl{display:none}

/* ===== Phones (most visitors): one calm home screen =====
   Top bar with the Dribbble badge hanging in the middle, four even columns of apps, the app drawer button at the bottom,
   and apps opening as cards with the same rounded corners all round. */
@media (max-width:760px){
  .topbar{padding:calc(8px + env(safe-area-inset-top,0px)) 10px 6px;gap:6px}
  .topbar .tb-ic{width:36px;height:36px}
  .topbar .pill{padding:7px 12px;font-size:13px}
  .topbar .status{gap:8px;padding-left:11px;padding-right:11px}
  /* the open-windows button only when there is something to show */
  #desk.no-wins #tabsBtn{display:none}
  /* Dribbble badge: small, top centre, like on desktop (hidden if the top bar has no room for it) */
  .award{top:env(safe-area-inset-top,0px);left:50%;bottom:auto;width:34px;transform:translateX(-50%);filter:drop-shadow(0 3px 8px rgba(0,0,0,.18))}
  .award:hover{transform:translateX(-50%)}
  html.award-tight .award{display:none}

  /* home screen: four even columns that never spill off a small screen */
  .icons{top:calc(60px + env(safe-area-inset-top,0px));left:6px;right:6px;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 0}
  .icons .dicon{padding:8px 2px 6px;min-width:0;gap:6px}
  .icons .dicon .ico{width:58px;height:58px}
  .icons .dicon .lb{font-size:12px;line-height:1.25;max-width:100%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-align:center}

  /* app drawer: a clean round button at the bottom centre */
  .shelf{bottom:calc(18px + env(safe-area-inset-bottom,0px));padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .shelf .launch{width:56px;height:56px;margin:0;box-shadow:var(--md-elev3)}
  .shelf .launch svg{width:24px;height:24px}

  /* apps open as a card: the same 28px corners all round, clear of the top bar and the home handle */
  .win{border-radius:28px!important;top:calc(58px + env(safe-area-inset-top,0px))!important;height:calc(100% - 58px - 96px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
  html.dock-auto .win,html.dock-peek .win{height:calc(100% - 58px - 40px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))!important}
  .win.max,.win.focus{border-radius:0!important}
}
@media (max-width:360px){
  .topbar .pill{padding:6px 10px;font-size:12px}
  .icons .dicon .ico{width:50px;height:50px}
  .icons .dicon .lb{font-size:11px}
}

/* ===================================================================================================================
   MONOCHROME: the whole system is black, white and greys, like a Google OS set to a neutral theme.
   Colour is kept only where it carries meaning: tags, list and event colours, sticky notes, priorities, errors,
   and a red close button. Everything below refines what is above without changing how any of it works.
   =================================================================================================================== */
:root{--icon-tile:var(--surface);--icon-ink:var(--ink)}
/* app icons: one ink glyph on a neutral tile (Android themed icons) */
.ico.mono{color:var(--icon-ink)}
.ico.mono .ictile{fill:var(--icon-tile);stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-width:1}
.ico.mono>svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.10))}
.bar .ico.mono .ictile,.ow-pln .ico.mono .ictile{fill:transparent;stroke:none}.bar .ico.mono>svg{filter:none}
.ico.lay,.ico.photo{filter:grayscale(1)}
.launcher,.shelf,.qs,.spot,.ae-lib,.lgrid{--icon-tile:var(--surface2)}
.launcher .ico.mono .ictile,.shelf .ico.mono .ictile{stroke:none}.launcher .ico.mono>svg,.shelf .ico.mono>svg{filter:none}

/* wallpapers and lock screen styles render in greys, whichever one is chosen */
#desk{background:var(--bg)}
#wall,.walls button svg,.lsp .lsp-v,.lock .lk-art,.lock .lav{filter:grayscale(1)}
/* the lock screen: what is behind it blurs to grey, and every clock style is drawn in ink.
   (No filters on the clock itself: its digits are painted by the parent's text-clipped background.) */
.lock{background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(34px) grayscale(1);backdrop-filter:blur(34px) grayscale(1)}
.lock .lt{filter:drop-shadow(0 8px 30px rgba(0,0,0,.12))}
.lock[data-ls=gemini] .lt{background:linear-gradient(100deg,var(--ink) 20%,var(--ink2) 90%);-webkit-background-clip:text;background-clip:text;filter:none}
.lock[data-ls=gemini] .lg::before{background:var(--ink)}
.lock[data-ls=expressive] .lkh{background:var(--ink)!important;color:var(--surface)!important}.lock[data-ls=expressive] .lkm{background:var(--surface2)!important;color:var(--ink)!important}
.lock[data-ls=stack] .lkm{-webkit-text-fill-color:var(--ink2);color:var(--ink2)}

/* decoration that used the accent palette becomes neutral (the palette itself stays for notes and tags) */
.wclock svg path{fill:var(--surface);filter:drop-shadow(0 2px 6px rgba(0,0,0,.08))}
.avatar path{fill:var(--surface2)}
.side button.on{background:var(--surface2)}
.j-draft,.dc-vi,.dc-lk{background:var(--surface2)}
.art{background:var(--surface2)}
.sv-ic,.sv-card .sv-ic{background:var(--surface2)!important}
.hb-ic{background:var(--surface2)}
/* favourites and pins are marked in ink, not gold */
.ba-fav,.wp-ib.on,.ba .wp-ib.on,.pl-m b em{color:var(--ink)!important}
/* the music corner and the player follow the theme instead of their own cream and colour fields */
.mw.mu-host,.mu-appwrap{--mu-ink:var(--ink);--mu-ink2:var(--ink2);--mu-cream:var(--surface);--mu-cream2:var(--surface);--mu-accent:var(--ink)}
.mw.mu-host{background:var(--surface);box-shadow:var(--md-elev2)}
.mu-app .mpa-stage{background:radial-gradient(80% 70% at 50% 35%,#2a2a2a 0,#111 70%),#111}

/* ripple (js/feel.js): spreads from the finger, fades when it lifts */
.rp-host{position:fixed;z-index:2147483000;pointer-events:none;overflow:hidden;contain:strict}
.rp-host i{position:absolute;border-radius:50%;background:currentColor;opacity:.14;transform:scale(0);animation:rp-in .5s cubic-bezier(.2,0,0,1) forwards}
.rp-host i.rp-out{opacity:0;transition:opacity .35s linear}
@keyframes rp-in{to{transform:scale(1)}}
/* Material 3 Expressive: filled and tonal buttons square off a little while pressed */
.btn,.seg button,.tile{transition:border-radius .2s cubic-bezier(.2,0,0,1),background-color .18s,box-shadow .18s,transform .18s}
.btn:active:not(:disabled){border-radius:12px}

/* template and placeholder art in greys */
.dz-st .dz-stp{background:var(--surface2);color:var(--ink2)}
html .lb2-ph{background:var(--surface2);color:var(--ink)}
.dz-st .dz-stp i{background:var(--surface)}
.serp b,.ws-gt{color:var(--ink)!important}
/* the clock's shape sits on the wallpaper like a widget card */
:root{--clock-fill:var(--surface)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--clock-fill:var(--surface2)}}
:root[data-theme="dark"]{--clock-fill:var(--surface2)}
.wclock svg path{fill:var(--clock-fill)}
@media (max-width:760px){
  /* quick settings stop above the app drawer button */
  .qs{max-height:calc(100% - 52px - 104px - env(safe-area-inset-bottom,0px))}
  .launcher .lhead h2{font-size:var(--fs-8);line-height:1.2}
}
.walls button{background:var(--surface2)}
.lsp-gemini .lsp-v{background:var(--surface2)!important}