/* ============================================================
   BAR — the strip on top of every hosted lab.

   The one thing the site adds to a lab's own page: you're on riccardorao.com, home is one click away (the mark,
   small, with no name beside it), the music is one tap away, the theme switch is here, and here is the exact
   commit on GitHub this page was built from. It is built like the site's frame (October 2026, "Istituzionale"):
   the mark in navy on paper (a clear blue at night), hairlines, Geist. It sits in the flow (not sticky) because
   every app has its own sticky header.

   Everything is prefixed rr- and set explicitly, so an app's own resets cannot reach in, and nothing here reaches
   out. The colours are --bar-* tokens, given a value per skin just below (public/skin.js sets
   html[data-skin="dark"]): ink on paper 16:1, navy on paper 11:1; at night 16:1 and 9:1.
============================================================ */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin-wght-normal.woff2) format('woff2')}
:root{
  --bar-bg:#FBFAF6;--bar-fg:#121821;--bar-soft:#434B57;--bar-dim:#5B6370;--bar-line:#E3DFD5;--bar-edge:#CFCAC0;
  --bar-accent:#173A6A;--bar-accent-hi:#0E2A52;--bar-accent-lo:#9AAFCB;--bar-ink:#FFFFFF;--bar-card:#FFFFFF;--bar-card-hi:#F5F3EE;--bar-band:#F3F1EA;
  --bar-shadow:0 24px 60px -32px rgba(18,24,33,.35);
}
:root[data-skin="dark"]{
  --bar-bg:#0D131C;--bar-fg:#EEF1F5;--bar-soft:#B4BCC8;--bar-dim:#96A0AD;--bar-line:#253041;--bar-edge:#34404F;
  --bar-accent:#9DBCEB;--bar-accent-hi:#C2D6F4;--bar-accent-lo:#3F5A82;--bar-ink:#0D131C;--bar-card:#141C28;--bar-card-hi:#1A2331;--bar-band:#111925;
  --bar-shadow:0 24px 60px -32px rgba(0,0,0,.8);
}
.rr-bar{
  box-sizing:border-box;display:flex;align-items:center;gap:12px;flex-wrap:nowrap;
  margin:0 calc(-1 * var(--rr-m,0px));padding:0 max(16px,var(--rr-m,0px));
  min-height:60px;background:var(--bar-bg);color:var(--bar-fg);border:0;border-bottom:1px solid var(--bar-line);border-radius:0;
  font:500 15px/1.2 'Geist',system-ui,Arial,sans-serif;letter-spacing:0;font-synthesis:none;
  text-transform:none;text-align:left;position:relative;z-index:40;
  padding-top:env(safe-area-inset-top,0px);
}
.rr-bar *{box-sizing:border-box}
.rr-bar a{color:inherit;text-decoration:none;border-radius:0}
.rr-bar a:focus-visible,.rr-bar button:focus-visible{outline:2px solid var(--bar-accent);outline-offset:3px}
.rr-home{display:inline-flex;align-items:center;min-height:44px;min-width:44px;flex:none}
.rr-bar .rr-mark{display:block;width:auto;height:18px;flex:none;color:var(--bar-accent);transition:filter .2s cubic-bezier(.2,0,0,1)}
.rr-home:hover .rr-mark{color:var(--bar-accent-hi)}
.rr-code:hover{color:var(--bar-accent)}
.rr-sep{color:var(--bar-dim)}
.rr-here{font:500 15px/1.2 'Geist',system-ui,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--bar-soft)}
.rr-code{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:48px;padding-left:8px;font:600 13px/1 'Geist',system-ui,Arial,sans-serif;letter-spacing:.06em;text-transform:none;color:var(--bar-fg)}
.rr-mus:not([hidden]) ~ .rr-code{margin-left:0}
/* the music button (opens the Spotify player, public/player.js) and the theme switch (public/skin.js): square, 44px */
.rr-bar .rr-mus,.rr-bar .rr-skin{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;min-width:44px;padding:0 12px;background:transparent;color:var(--bar-soft);border:1px solid var(--bar-edge);border-radius:0;cursor:pointer;
  font:600 13px/1 'Geist',system-ui,Arial,sans-serif;letter-spacing:.06em;text-transform:none;margin-top:0;margin-bottom:0}
.rr-bar .rr-mus{margin-left:auto}
.rr-bar .rr-skin{padding:0;width:44px}
.rr-bar .rr-mus[hidden],.rr-bar .rr-skin[hidden]{display:none}
.rr-bar .rr-mus:hover,.rr-bar .rr-skin:hover{border-color:var(--bar-accent);color:var(--bar-accent)}
.rr-bar .rr-mus[aria-expanded="true"]{color:var(--bar-accent);border-color:var(--bar-accent-lo)}
.rr-mus-bars{display:flex;align-items:flex-end;gap:3px;height:16px;flex:none}
.rr-mus-bars i{display:block;width:3px;background:currentColor}
.rr-mus-bars i:nth-child(1){height:45%}.rr-mus-bars i:nth-child(2){height:100%}.rr-mus-bars i:nth-child(3){height:62%}.rr-mus-bars i:nth-child(4){height:80%}
.rr-ic{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter}
.rr-skin .rr-ic-sun,:root[data-skin="dark"] .rr-skin .rr-ic-moon{display:none}
:root[data-skin="dark"] .rr-skin .rr-ic-sun{display:block}

.rr-bar .rr-ar{display:inline-block;width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
@media (max-width:520px){
  .rr-home + .rr-sep,.rr-here,.rr-mus-t,.rr-code-t{display:none}
  .rr-bar .rr-mus{padding:0}
  .rr-bar .rr-code{min-width:44px;justify-content:center;padding:0}
}

/* the player: Spotify's embed in a small panel (built by public/player.js on the first press); closing only hides it */
.rr-dock{position:fixed;z-index:70;right:16px;bottom:16px;width:min(404px,calc(100vw - 32px));box-sizing:border-box;background:var(--bar-card);color:var(--bar-fg);border:1px solid var(--bar-accent-lo);border-radius:0;box-shadow:var(--bar-shadow);
  font:500 13px/1.2 'Geist',system-ui,Arial,sans-serif;
  transition:opacity .26s cubic-bezier(.2,0,0,1),transform .26s cubic-bezier(.2,0,0,1),visibility 0s linear .26s}
.rr-dock *{box-sizing:border-box}
.rr-dock:not(.open){opacity:0;transform:translateY(14px);visibility:hidden;pointer-events:none}
.rr-dock.open{transition-delay:0s}
.rr-dock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:16px;border-bottom:1px solid var(--bar-line)}
.rr-dock-t{font:600 13px/1.2 'Geist',system-ui,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bar-accent)}
.rr-dock-x{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;background:transparent;border:0;border-radius:0;color:var(--bar-fg);cursor:pointer}
.rr-dock-x:hover{color:var(--bar-accent)}
.rr-dock-x:focus-visible{outline:2px solid var(--bar-accent);outline-offset:-2px}
.rr-dock .ic{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square}
.rr-dock iframe{display:block;width:100%;height:352px;border:0;background:var(--bar-card-hi)}
@media (max-width:719px){.rr-dock{left:0;right:0;bottom:0;width:auto;border-inline:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}}
@media print{.rr-bar,.rr-dock{display:none}}

/* ============================================================
   MORE FROM THE LAB — the end of every hosted lab (tools/lib/chrome.js):
   three more labs and the newsletter, so a visit doesn't stop at one.
   The site's frame again, in obsidian (or paper), after the app. Same rules as the bar:
   rr- prefixed, every property set, nothing reaches into the app.
   Cards are cells that share hairlines, square; the button is navy; the eyebrow is the site's label.
============================================================ */
.rr-more{
  box-sizing:border-box;display:block;clear:both;width:auto;max-width:none;
  margin:clamp(40px,8vw,72px) calc(-1 * var(--rr-m,0px)) calc(-1 * var(--rr-m,0px));
  padding:clamp(40px,6vw,64px) max(16px,var(--rr-m,0px)) calc(clamp(40px,6vw,64px) + env(safe-area-inset-bottom,0px));
  background:var(--bar-band);color:var(--bar-fg);border:0;border-top:1px solid var(--bar-line);border-radius:0;
  font:400 16px/1.5 'Geist',system-ui,Arial,sans-serif;letter-spacing:0;text-transform:none;text-align:left;font-synthesis:none;
  position:relative;z-index:1;
}
.rr-more *{box-sizing:border-box;margin:0;padding:0;letter-spacing:inherit;text-transform:none;border-radius:0}
.rr-more-in{max-width:1200px;margin:0 auto}
.rr-more .rr-more-k{font:600 13px/1.2 'Geist',system-ui,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--bar-accent)}
.rr-more .rr-more-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0 0;border-top:1px solid var(--bar-line);border-left:1px solid var(--bar-line)}
@media (max-width:820px){.rr-more .rr-more-list{grid-template-columns:minmax(0,1fr)}}
.rr-more .rr-more-list li{list-style:none;display:block;min-width:0;border-right:1px solid var(--bar-line);border-bottom:1px solid var(--bar-line)}
.rr-more a{color:inherit;text-decoration:none}
.rr-more .rr-more-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t go" "l go";align-items:start;gap:8px 16px;height:100%;padding:22px;
  background:var(--bar-card);color:var(--bar-fg);transition:background-color .2s cubic-bezier(.2,0,0,1)}
.rr-more .rr-more-card:hover{background:var(--bar-card-hi)}
.rr-more .rr-more-card:focus-visible{outline:2px solid var(--bar-accent);outline-offset:-2px}
.rr-more .rr-more-t{grid-area:t;display:block;font:600 22px/1.2 'Source Serif 4',Georgia,serif;letter-spacing:-.005em;text-transform:none;color:var(--bar-fg)}
.rr-more .rr-more-card:hover .rr-more-t{color:var(--bar-accent)}
.rr-more .rr-more-line{grid-area:l;display:block;font:400 15px/1.45 'Geist',system-ui,Arial,sans-serif;color:var(--bar-soft)}
.rr-more .rr-more-go{grid-area:go;align-self:end;display:flex;color:var(--bar-accent);transition:transform .2s cubic-bezier(.2,0,0,1)}
.rr-more .rr-more-card:hover .rr-more-go{transform:translateX(3px)}
.rr-more .rr-ar{display:inline-block;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.rr-more .rr-more-sub{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.rr-more .rr-more-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;background:var(--bar-accent);color:var(--bar-ink);border:0;
  font:600 15px/1.1 'Geist',system-ui,Arial,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;transition:background-color .2s cubic-bezier(.2,0,0,1)}
.rr-more .rr-more-btn:hover{background:var(--bar-accent-hi);color:var(--bar-ink)}
.rr-more .rr-more-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 15px/1.2 'Geist',system-ui,Arial,sans-serif;letter-spacing:0;text-transform:none;color:var(--bar-fg)}
.rr-more .rr-more-all span{text-transform:none}
.rr-more .rr-more-all:hover{color:var(--bar-accent)}
.rr-more a:focus-visible{outline:2px solid var(--bar-accent);outline-offset:3px}
@media print{.rr-more{display:none}}