:root{
  --glass-blur:blur(20px) saturate(180%);
  --glass-bg:color-mix(in srgb, var(--card) 70%, transparent);
  --glass-soft:color-mix(in srgb, var(--well, var(--card)) 62%, transparent);
  --glass-brd:color-mix(in srgb, var(--gray) 13%, transparent);
  --glass-hi:color-mix(in srgb, var(--gray) 15%, transparent);
  --glass-sh:0 8px 24px rgba(0,0,0,.28);
  --r-card:20px;
  --r-panel:18px;
  --r-pill:999px;
}

html[data-color-mode="light"]{
  --glass-bg:color-mix(in srgb, var(--card) 62%, transparent);
  --glass-soft:color-mix(in srgb, var(--card) 55%, transparent);
  --glass-brd:color-mix(in srgb, var(--navy) 14%, transparent);
  --glass-hi:color-mix(in srgb, #fff 70%, transparent);
  --glass-sh:0 8px 24px rgba(0,0,0,.10);
}

html{
  background:var(--navy);
}

html.esteban-macos-window{
  --mac-titlebar-height:42px;
}
html.esteban-macos-window body{
  border-top:var(--mac-titlebar-height) solid transparent;
}
#estebanMacTitlebar{
  position:fixed;
  z-index:2147483646;
  top:0;left:0;right:0;
  height:var(--mac-titlebar-height);
  background:transparent;
  border:0;
  box-shadow:none;
  -webkit-app-region:drag;
  -webkit-user-select:none;
  user-select:none;
}
html.esteban-macos-fullscreen body{
  border-top-width:0;
}
html.esteban-macos-fullscreen #estebanMacTitlebar{
  display:none;
}

body{
  background-color:transparent;
  font-family:var(--font-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif);
}

input,select,textarea,button{
  font-family:inherit;
}

/* select caret */
select:not([multiple]):not([size]){
  -webkit-appearance:none !important;
  appearance:none !important;
  background-image:
    linear-gradient(45deg,  transparent calc(50% - .8px), var(--muted) calc(50% - .8px), var(--muted) calc(50% + .8px), transparent calc(50% + .8px)),
    linear-gradient(135deg, transparent calc(50% - .8px), var(--muted) calc(50% - .8px), var(--muted) calc(50% + .8px), transparent calc(50% + .8px)) !important;
  background-repeat:no-repeat, no-repeat !important;
  background-position:right 19px center, right 14px center !important;
  background-size:5px 5px, 5px 5px !important;
  padding-right:34px !important;
}

body::before{
  content:"";
  position:fixed;
  inset:-25%;
  z-index:-1;
  pointer-events:none;
  display:none;
  background: radial-gradient(34% 28% at 16% 10%, color-mix(in srgb, var(--cyan) 30%, transparent), transparent 70%), radial-gradient(30% 26% at 84% 20%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 70%), radial-gradient(38% 32% at 50% 86%, color-mix(in srgb, var(--teal) 26%, transparent), transparent 72%);
  filter:blur(48px);
}

html[data-bg="gradient"] body::before{
  display:block;
}

html[data-color-mode="light"] body::before{
  opacity:.55;
}

html[data-bg="gradient"] body{background-image:radial-gradient(ellipse 80% 45% at 50% -5%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%);}

.pane,
.card,
.tile,
details,
.folder,
.storage,
.pokelink,
.linkout{
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
  box-shadow:var(--glass-sh), inset 0 1px 0 var(--glass-hi);
}
.pane,
.card,
details,
.folder,
.storage,
.pokelink{
  border-radius:var(--r-card);
}


.btn,
.chip,
.fbtn,
.opt,
.snd,
.editbtn,
.seg button,
.modes button,
.segtog{
  background:var(--glass-soft);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-color:var(--glass-brd);
}@media (hover:hover) and (pointer:fine){.btn:not(.primary):not(.go):not([aria-pressed="true"]):hover, .fbtn:not([aria-pressed="true"]):hover, .seg button:not([aria-pressed="true"]):hover, .modes button:not([aria-selected="true"]):hover{ background:color-mix(in srgb, var(--gray) 10%, var(--glass-soft)); }
}

/* Dark/light toggle stays flat everywhere */
.segtog.modesw{
  background:var(--well);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-color:var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.30);
}


textarea,
.kgrid input,
pre,
.tile,
.chip{
  border-radius:var(--r-panel);
}

button:not(.mon):not(.evo):not(.chip):not(.tile):not(.poke):not(.pj):not(.ballcard):not(.thumb):not(.ptile),
a.btn,
.btn,
.go,
.spin,
.addbtn,
.ico,
.back,
.danger,
.util,
.op,
.fn,
.k,
.eq,
input[type=button],
input[type=submit],
input[type=reset],
select,
input[type=text],
input[type=search],
input[type=url],
input[type=email],
input[type=number],
input[type=password],
input[type=date],
input[type=time],
.seg > button,
.segtog,
.segtog > button{
  border-radius:var(--r-pill) !important;
}

.mon,
.evo,
.chip,
.tile{
  border-radius:var(--r-panel) !important;
}

/* Buttons: no underlined text */
a.btn,a.pillbtn,a.tile,a.chip,a.go,a.back,a.util,a.danger,a.addbtn,a[role=button],.applinks a,
a.btn:hover,a.pillbtn:hover,a.tile:hover,a.chip:hover,a.go:hover,a.back:hover,a.util:hover,a.danger:hover,a.addbtn:hover,a[role=button]:hover,.applinks a:hover{
  text-decoration:none !important;
}

/* On/off switch */
.switch{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 40px}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:var(--border);border-radius:23px;cursor:pointer;transition:.2s}
.switch .slider:before{content:"";position:absolute;width:17px;height:17px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--accent,var(--cyan))}
.switch input:checked+.slider:before{transform:translateX(17px);background:var(--navy)}
.switch input:focus-visible+.slider{outline:2px solid var(--accent,var(--cyan));outline-offset:2px}
.switch input:disabled+.slider{opacity:.45;cursor:default}
@media (prefers-reduced-motion:reduce){.switch .slider,.switch .slider:before{transition:none}}

#chip,
#pick,
.disc{
  border-radius:50% !important;
}

/* Dark/light + palette section: mode toggle right, swatches on the row below, left */
.prefs{margin:26px 0 22px}
.prefstog{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 12px}
.prefs-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:720px){.prefstog{gap:6px}
.segtog{padding:2px}
.segtog button{min-width:32px;height:27px;padding:0 9px;font-size:11px}
.segtog.modesw button{min-width:30px;padding:0 8px}
.segtog button svg{width:14px;height:14px}
}


.seg{
  border-radius:0;
  overflow:visible;
}button:active,
.btn:active,
a.btn:active,
.chip:active,
.k:active,
.seg button:active,
.modes button:active,
.segtog button:active,
.subscribe:active,
.go:active,
.spin:active,
.addbtn:active,
.newbtn:active,
.pokelink:active,
.back:active{
  filter:brightness(.86);
}
@media (hover:hover) and (pointer:fine){.btn.primary:hover, .btn.primary:hover:not(:disabled), .btn[aria-pressed="true"]:hover, .fbtn[aria-pressed="true"]:hover, .chip[aria-pressed="true"]:hover, .seg button[aria-pressed="true"]:hover, .modes button[aria-selected="true"]:hover, .segtog button[aria-pressed="true"]:hover, .viewsw button[aria-pressed="true"]:hover, .editbtn[aria-pressed="true"]:hover, .subscribe:hover, .k.eq:hover, .spin:hover, .addbtn:hover, .newbtn:hover, .go:hover:not(:disabled), .btn.go:hover{ filter:brightness(.92); }
.btn.primary:active, .btn.primary:hover:active, .btn[aria-pressed="true"]:active, .seg button[aria-pressed="true"]:active, .segtog button[aria-pressed="true"]:active, .subscribe:active, .k.eq:active, .go:active:not(:disabled), .btn.go:active{ filter:brightness(.86); }
}


.previewhead .pvtog{
  margin-left:auto;
  font-size:12.5px;
  padding:6px 14px;
  min-height:0;
}

#preview[hidden]{
  display:none;
}

.pokelink{
  background:linear-gradient(120deg,color-mix(in srgb, #EE1515 28%, transparent),color-mix(in srgb, #EE1515 12%, transparent));
  border-color:color-mix(in srgb, #EE1515 65%, transparent);
}

.pokelink:hover{
  background:linear-gradient(120deg,color-mix(in srgb, #EE1515 38%, transparent),color-mix(in srgb, #EE1515 18%, transparent));
  border-color:#EE1515;
}

/* the tinted quick-link row: assets/applinks.js renders it into [data-applinks] */
[data-applinks][hidden]{display:none}
.applinks{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px}
.applinks a{
  /* basis is the icon-only floor so several pills share a row; grow caps at 164px */
  flex:1 0 48px;max-width:164px;min-width:0;container-type:inline-size;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  color:inherit;border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-radius:999px;padding:12px 14px;font-size:13.5px;font-weight:650;
  text-decoration:none;white-space:nowrap;overflow:hidden;
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gray) 22%, transparent);
  transition:border-color .15s,color .15s,background .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.applinks a svg{flex:none;width:20px;height:20px;display:block}
.applinks a .ico{
  flex:0 0 20px;width:20px;height:20px;border-radius:50%;
  background:transparent;border:0;color:inherit;
  font-size:8px;font-weight:800;letter-spacing:0;overflow:hidden;
}
.applinks a .ico img{width:100%;height:100%;object-fit:cover;padding:0}
.applinks a .ico svg{fill:currentColor}
.applinks a .ico.app-tinted{
  color:var(--app-tint);border:1px solid color-mix(in srgb,var(--app-tint) 66%,transparent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--app-tint) 42%,transparent),color-mix(in srgb,var(--app-tint) 16%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--gray) 24%,transparent);
}
.applinks a span:not(.ico){overflow:hidden;text-overflow:ellipsis}
.applinks.names-hidden a span:not(.ico){display:none}
.applinks a:hover{transform:translateY(-1px)}
.applinks a.app-box-tinted{
  border-color:color-mix(in srgb,var(--app-tint) 70%,transparent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--app-tint) 35%,transparent),color-mix(in srgb,var(--app-tint) 13%,transparent));
}
.applinks a.app-box-tinted:hover{border-color:var(--app-tint)}
.applinks .apps{
  background:linear-gradient(140deg,color-mix(in srgb, var(--mint) 32%, transparent),color-mix(in srgb, var(--mint) 12%, transparent));
  border-color:color-mix(in srgb, var(--mint) 70%, transparent)}
.applinks .apps:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--mint) 41%, transparent),color-mix(in srgb, var(--mint) 17%, transparent));
  border-color:var(--mint)}
.applinks .photos{
  background:linear-gradient(140deg,color-mix(in srgb, var(--cyan) 32%, transparent),color-mix(in srgb, var(--cyan) 12%, transparent));
  border-color:color-mix(in srgb, var(--cyan) 70%, transparent)}
.applinks .photos:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--cyan) 41%, transparent),color-mix(in srgb, var(--cyan) 17%, transparent));
  border-color:var(--cyan)}
.applinks .pokedex{
  background:linear-gradient(140deg,color-mix(in srgb, var(--coral) 32%, transparent),color-mix(in srgb, var(--coral) 12%, transparent));
  border-color:color-mix(in srgb, var(--coral) 70%, transparent)}
.applinks .pokedex:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--coral) 41%, transparent),color-mix(in srgb, var(--coral) 17%, transparent));
  border-color:var(--coral)}
.applinks .tcg{
  background:linear-gradient(140deg,color-mix(in srgb, var(--gold) 32%, transparent),color-mix(in srgb, var(--gold) 12%, transparent));
  border-color:color-mix(in srgb, var(--gold) 70%, transparent)}
.applinks .tcg:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--gold) 41%, transparent),color-mix(in srgb, var(--gold) 17%, transparent));
  border-color:var(--gold)}
.applinks .pdesk{
  background:linear-gradient(140deg,color-mix(in srgb, var(--sunset) 32%, transparent),color-mix(in srgb, var(--sunset) 12%, transparent));
  border-color:color-mix(in srgb, var(--sunset) 70%, transparent)}
.applinks .pdesk:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--sunset) 41%, transparent),color-mix(in srgb, var(--sunset) 17%, transparent));
  border-color:var(--sunset)}
.applinks .rosetta svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* rosetta — light mode */
html[data-color-mode="light"] .applinks .rosetta{color:#312C29;
  background:linear-gradient(140deg,color-mix(in srgb, #312C29 32%, transparent),color-mix(in srgb, #312C29 12%, transparent));
  border-color:color-mix(in srgb, #312C29 70%, transparent)}
html[data-color-mode="light"] .applinks .rosetta:hover{
  background:linear-gradient(140deg,color-mix(in srgb, #312C29 41%, transparent),color-mix(in srgb, #312C29 17%, transparent));
  border-color:#312C29}
/* rosetta — dark mode */
html[data-color-mode="dark"] .applinks .rosetta{color:#E3D5C6;
  background:linear-gradient(140deg,color-mix(in srgb, #E3D5C6 32%, transparent),color-mix(in srgb, #E3D5C6 12%, transparent));
  border-color:color-mix(in srgb, #E3D5C6 70%, transparent)}
html[data-color-mode="dark"] .applinks .rosetta:hover{
  background:linear-gradient(140deg,color-mix(in srgb, #E3D5C6 41%, transparent),color-mix(in srgb, #E3D5C6 17%, transparent));
  border-color:#E3D5C6}
/* apps and links added in Settings — one shared tint */
.applinks .custom{
  background:linear-gradient(140deg,color-mix(in srgb, var(--teal) 32%, transparent),color-mix(in srgb, var(--teal) 12%, transparent));
  border-color:color-mix(in srgb, var(--teal) 70%, transparent)}
.applinks .custom:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--teal) 41%, transparent),color-mix(in srgb, var(--teal) 17%, transparent));
  border-color:var(--teal)}
/* a button given its own color in Settings, in place of the theme tint above */
.applinks .tinted{
  background:linear-gradient(140deg,color-mix(in srgb, var(--tint) 32%, transparent),color-mix(in srgb, var(--tint) 12%, transparent));
  border-color:color-mix(in srgb, var(--tint) 70%, transparent)}
.applinks .tinted:hover{
  background:linear-gradient(140deg,color-mix(in srgb, var(--tint) 41%, transparent),color-mix(in srgb, var(--tint) 17%, transparent));
  border-color:var(--tint)}
.applinks.right{justify-content:flex-end}
.applinks.center{justify-content:center}

.applinkstworows{display:flex;flex-direction:column;gap:10px;margin:18px 0 14px}
.applinkstworows .applinks{margin:0;flex-wrap:nowrap;justify-content:flex-end}

/* each pill reads its own width, not the row's or the viewport's */
@container(max-width:96px){.applinks a span:not(.ico){display:none}}

@media(max-width:420px){.applinks{gap:8px}.applinks a{padding:11px 8px;font-size:12.5px;gap:6px}}

@supports not (container-type:inline-size){
  @media(max-width:420px){.applinks a span:not(.ico){display:none}}
}

@media(prefers-reduced-motion:reduce){.applinks a{transition:none}.applinks a:hover{transform:none}}

[data-applinks-nav][hidden]{display:none}

/* the round site links in the Notes ribbon */
.navdock{display:flex;justify-content:center;align-items:center;gap:10px;margin:34px auto 0;flex-wrap:wrap}
.navdock a{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--well,var(--card));border:1px solid var(--border);color:var(--muted);text-decoration:none;
  overflow:hidden;transition:border-color .15s,color .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.navdock a:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.navdock a:active{filter:brightness(.86)}
.navdock a svg{width:23px;height:23px;fill:currentColor}
.navdock a.ball svg{width:27px;height:27px}
.navdock a img{width:100%;height:100%;object-fit:cover;padding:0;display:block;border-radius:50%}
.navdock a.home{border:0;background:var(--card);
  box-shadow:0 0 0 2px var(--navy), 0 0 0 4px color-mix(in srgb, var(--cyan) 35%, transparent)}
.navdock a.home:hover{box-shadow:0 0 0 2px var(--navy), 0 0 0 4px var(--cyan)}@media(prefers-reduced-motion:reduce){.navdock a{transition:none}.navdock a:hover{transform:none}
}
/* --- desk pages (index / settings / apps) ------------------------------- */
.card,
#deskBoard.boxed .sec,
.note,
.nojs{border-radius:var(--r-card)}

.tile,textarea,pre,.boxgrid,.boxopts,.quickbar{border-radius:var(--r-panel)}
.boxopts .step button:first-child{border-radius:var(--r-pill) 0 0 var(--r-pill)}
.boxopts .step button:last-child{border-radius:0 var(--r-pill) var(--r-pill) 0}
.boxchip{border-radius:12px}
/* the type chips in the Pokémon box, the same 7px the Pokédex gives them */
.pkw .type{border-radius:7px}
/* the full-art frame and the fact tiles, the same panel radius the Pokédex uses */
.pkw .art,.pkw .fact,.pkw .evo,.pkw .mon{border-radius:var(--r-panel)}
.boxres::before{border-radius:var(--r-pill)}
.linkout,.movers button,.secbtns button{border-radius:var(--r-pill) !important}
.avanow,.avanow img,.avaopt,.avaopt img{border-radius:50% !important}
.syncrow{border-radius:var(--r-panel)}
.ico{border-radius:9px}
.tools[data-view="grid"] a.tile .ico{border-radius:26%}
.editbtn{border-radius:var(--r-pill) !important}@media (hover:hover) and (pointer:fine){.editbtn[aria-pressed="true"]:hover{filter:brightness(.92)}
}

.editbtn:active,.linkout:active{filter:brightness(.86)}

/* Two-column pages */
:where(.cols){display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
:where(.cols) > *{min-width:0}
:where(.colA,.colB){display:flex;flex-direction:column;gap:14px;min-width:0}
.colA > .card,.colB > .card{margin:0}
@media(min-width:1180px){
  :where(.cols){grid-template-columns:minmax(0,420px) minmax(0,1fr)}
}

/* Settings section headings */
.wrap > .setuphead:has(> .lbl){margin:34px 4px 12px;min-height:22px}
.wrap > .setuphead > .lbl{
  display:block;margin:0;flex:1;
  font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}

/* --- the "i" panel: what this page is, folded away at the foot ---------- */
.infobar{display:flex;align-items:center;justify-content:flex-end;margin:30px 0 0}
.infobtn{
  width:22px;height:22px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--well,var(--card));border:1px solid var(--border);color:var(--muted);
  font-family:Georgia,"Times New Roman",serif;font-size:12px;font-weight:700;font-style:italic;
  line-height:1;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,transform .15s;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
.infobtn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.infobtn:active{filter:brightness(.86)}
.infobtn[aria-expanded="true"]{background:var(--cyan);border-color:var(--cyan);color:var(--navy)}
.info{margin:16px auto 0;max-width:100%}
.info[hidden]{display:none}
.info > .sub{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.6}
.info > .note,.info > p.note{margin-top:12px}
.info > :first-child{margin-top:0}

.info .note{
  padding:15px 17px;
  border-left:3px solid var(--teal);
  background:color-mix(in srgb, var(--teal) 8%, transparent);
  border-radius:0 10px 10px 0;
  color:var(--muted);font-size:13.5px;line-height:1.6;text-align:left;
}
.info .note b{color:var(--gray)}
.info .note code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--accent);
}

.info.infofootpanel{
  box-sizing:border-box;width:100%;max-width:none;
  margin:30px 0 0;padding:17px 19px;
  border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--border));
  border-left:3px solid var(--cyan);border-radius:var(--r-panel);
  background:color-mix(in srgb,var(--cyan) 7%,var(--card));
  color:var(--muted);font-size:13.5px;line-height:1.6;text-align:left;
  scroll-margin-top:18px;
}
.info.infofootpanel > .sub{
  margin:0 0 14px;color:var(--gray);font-size:14px;line-height:1.6;
}
.info.infofootpanel > .note,
.info.infofootpanel > p.note{
  margin:12px 0 0;padding:0 0 0 14px;
  border:0;border-left:1px solid color-mix(in srgb,var(--cyan) 32%,transparent);
  border-radius:0;background:transparent;
  color:var(--muted);font-size:13.5px;line-height:1.6;text-align:left;
}
.info.infofootpanel > .hint{
  margin:0;color:var(--muted);font-size:13.5px;line-height:1.6;text-align:left;
}
.info.infofootpanel > .hint + .hint{margin-top:10px}
.info.infofootpanel b{color:var(--gray)}
.info.infofootpanel code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:var(--accent);
}
.info.infofootpanel a{color:var(--cyan)}
.info.infofootpanel > :first-child{margin-top:0}
.info.infofootpanel > :last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.infobtn{transition:none}.infobtn:hover{transform:none}}