/* chrome.css — the frame every page of creation.friendly-apps.de shares (owner 2026-11-02: pages under a host keep its settings):
   the platform's sign-in pill is not shown, the π in the lower left corner carries sign-in, activity and update notices, one quiet
   control at the top right, the drifting aura behind the page (Intros, or back to the start on the intro pages). Loaded by every page with absolute paths.
   Colour defaults for pages without their own (a page's own :root rules come later and win).
   version: 0.5.0 · created 2026-11-02 by Pascal Ehlig, ITS · edited 2026-11-02 by Pascal Ehlig, ITS */
:root{
  --text:#102a43; --muted:#486581; --surface:#ffffff; --border:#d9e6ee; --focus:#c2410c;
  --sans:"Open Sauce One",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --coral:#fb683e; --coral-hi:#ff9a6b; --coral-lo:#e24a22; --sky:#9ccbea;
  --glass:rgba(255,255,255,.7); --glass-edge:rgba(255,255,255,.95); --glass-shadow:16,42,67;
  --px:0; --py:0;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--text:#eaf4f8; --muted:#9fb3c8; --surface:#162f4a; --border:#243b53; --focus:#ff9a7f; --glass:rgba(22,47,74,.6); --glass-edge:rgba(255,255,255,.16); --glass-shadow:0,0,0}}
:root[data-theme="dark"]{--text:#eaf4f8; --muted:#9fb3c8; --surface:#162f4a; --border:#243b53; --focus:#ff9a7f; --glass:rgba(22,47,74,.6); --glass-edge:rgba(255,255,255,.16); --glass-shadow:0,0,0}
/* the platform's sign-in pill: here the π takes its place */
.gw-open-signin[data-gw-float]{display:none !important}
/* the hidden π: peeks out of the lower left corner, comes out when the pointer comes near, on focus or on a tap */
.pi{position:fixed; left:max(10px, env(safe-area-inset-left)); bottom:max(10px, env(safe-area-inset-bottom)); z-index:50;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center; cursor:pointer; appearance:none; padding:0;
  font:400 1.4rem/1 var(--sans); color:var(--text); background:var(--glass); border:1px solid var(--glass-edge);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 6px 18px -6px rgba(var(--glass-shadow), .35);
  opacity:.22; transform:translate(-55%, 40%) scale(.82); transition:opacity .35s ease, transform .45s cubic-bezier(.2,.9,.25,1.2)}
.pi.is-near, .pi:hover, .pi:focus-visible, .pi[aria-expanded="true"]{opacity:1; transform:none}
.pi:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
:root[data-signed-in] .pi{color:var(--coral)}
.pi-pop{position:fixed; left:max(10px, env(safe-area-inset-left)); bottom:calc(max(10px, env(safe-area-inset-bottom)) + 54px); z-index:51;
  min-width:13rem; padding:8px; border-radius:16px; background:var(--surface); border:1px solid var(--border);
  box-shadow:0 18px 40px -12px rgba(var(--glass-shadow), .4); transform-origin:0 100%; animation:pop .22s cubic-bezier(.2,.9,.25,1.2)}
@keyframes pop{from{opacity:0; transform:scale(.6)}}
.pi-pop p{margin:4px 10px 8px; font-size:.82rem; color:var(--muted)}
.pi-pop button{appearance:none; border:0; background:none; font:inherit; width:100%; text-align:left; cursor:pointer}
.pi-pop a, .pi-pop button{display:flex; align-items:center; min-height:44px; padding:0 10px; border-radius:10px; color:var(--text); text-decoration:none}
.pi-pop button:hover, .pi-pop button:focus-visible, .pi-pop a:hover, .pi-pop a:focus-visible{background:rgba(var(--glass-shadow), .07); outline:none}
/* the π's count (running and waiting work) and the activity panel growing up out of the lower left corner */
.pi.has-act{opacity:.75; transform:translate(-25%, 20%) scale(.9)}
.pi[data-count]:not([data-count=""])::after{content:attr(data-count); position:absolute; top:-4px; right:-6px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--coral); color:#fff; font:600 .7rem/18px system-ui, sans-serif; text-align:center}
.pi-host{position:fixed; left:-10000px; top:0; width:1px; height:1px; overflow:hidden}
.fa-act-panel{top:auto !important; bottom:calc(max(10px, env(safe-area-inset-bottom)) + 58px) !important; left:max(10px, env(safe-area-inset-left)) !important;
  width:min(520px, calc(100vw - 20px)) !important; max-height:min(70vh, 640px) !important; transform-origin:0 100% !important}
/* one quiet control for the intros at the top right (the list holds the current intro too) */
.intros-link{position:fixed; top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); z-index:50;
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 14px; border-radius:999px; font-size:.9rem; text-decoration:none;
  color:var(--text); background:var(--glass); border:1px solid var(--glass-edge); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -8px rgba(var(--glass-shadow), .35); opacity:.7; transition:opacity .25s ease}
.intros-link svg{width:12px; height:12px; color:var(--coral)}
.intros-link:hover, .intros-link:focus-visible{opacity:1}
.pi-pop{animation:pop .22s cubic-bezier(.2,.9,.25,1.2)}
@keyframes pop{from{opacity:0; transform:scale(.6)}}
@media (prefers-reduced-motion: reduce){.pi, .pi-pop{animation:none !important; transition:none}}
/* the aura: three blurred light blobs drifting slowly, moved a little by the pointer (parallax) */
.aura{position:fixed; inset:-10vmax; z-index:-1; pointer-events:none; overflow:hidden;
  transform:translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0)}
.aura i{position:absolute; width:52vmax; height:52vmax; border-radius:50%; filter:blur(70px); opacity:.42; will-change:transform}
.aura i:nth-child(1){left:2%; top:4%; background:radial-gradient(circle at 40% 40%, var(--coral-hi), transparent 65%); animation:drift1 22s ease-in-out infinite alternate}
.aura i:nth-child(2){right:0; top:22%; background:radial-gradient(circle at 50% 50%, var(--sky), transparent 65%); animation:drift2 26s ease-in-out infinite alternate}
.aura i:nth-child(3){left:28%; bottom:-6%; background:radial-gradient(circle at 50% 50%, #ffd6a8, transparent 62%); opacity:.32; animation:drift3 30s ease-in-out infinite alternate}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aura i{opacity:.26}}
:root[data-theme="dark"] .aura i{opacity:.26}
@keyframes drift1{to{transform:translate(12vmax, 8vmax) scale(1.12)}}
@keyframes drift2{to{transform:translate(-14vmax, 6vmax) scale(.9)}}
@keyframes drift3{to{transform:translate(8vmax, -10vmax) scale(1.08)}}
@media (prefers-reduced-motion: reduce){.aura i{animation:none !important} .aura{transform:none !important}}

/* 0.2.0 (owner 2026-11-02): our light-blue drafting paper lies behind every page of the host — the ruling of friendly-apps.de (24 px, a
   stronger line every fifth), quiet, under the aura; on load it rolls out from left to right with a soft paper edge; still with reduced motion */
:root{--pencil-rgb:91 122 147; --grid:rgb(var(--pencil-rgb) / .07); --grid-strong:rgb(var(--pencil-rgb) / .13)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--pencil-rgb:143 176 201; --grid:rgb(var(--pencil-rgb) / .06); --grid-strong:rgb(var(--pencil-rgb) / .11)}}
:root[data-theme="dark"]{--pencil-rgb:143 176 201; --grid:rgb(var(--pencil-rgb) / .06); --grid-strong:rgb(var(--pencil-rgb) / .11)}
.paper{position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:linear-gradient(var(--grid-strong) 1px, transparent 1px) 0 0/120px 120px, linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px) 0 0/120px 120px,
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/24px 24px;
  clip-path:inset(0 0 0 0); animation:paper-roll 1.8s cubic-bezier(.3,.1,.2,1) .15s both}
.paper::after{content:""; position:absolute; top:0; bottom:0; width:28px; left:100%; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgb(var(--pencil-rgb) / .10) 55%, rgb(255 255 255 / .55) 80%, rgb(var(--pencil-rgb) / .14));
  animation:paper-edge 1.8s cubic-bezier(.3,.1,.2,1) .15s both}
@keyframes paper-roll{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)}}
@keyframes paper-edge{from{left:0; opacity:1} 92%{opacity:1} to{left:100%; opacity:0}}
@media (prefers-reduced-motion: reduce){.paper, .paper::after{animation:none} .paper::after{display:none}}
@media print{.paper{display:none}}

/* 0.3.0 (owner 2026-11-02): IT sketches on the paper (sketches.js) — pencil lines, quiet; tiny glowing electrons travel the traces
   0.4.0: larger and better visible, the electrons glow less; slots instead of fixed pieces (the page swaps a sketch now and then) */
.sk{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.sk-piece{transform-box:view-box; transform:translate(var(--x), var(--y)) rotate(var(--r)) scale(calc(var(--sk-scale, 1.2) * var(--s, 1)))}
.sk-drift{animation:sk-drift 20s ease-in-out infinite alternate}
@keyframes sk-drift{0%{transform:translate(-6px, 4px) rotate(-1deg)} 100%{transform:translate(6px, -4px) rotate(1deg)}}
.sk-text{fill:rgb(var(--pencil-rgb) / .55); font-family:var(--sans); font-style:italic}
.sk-line{fill:none; stroke:rgb(var(--pencil-rgb) / .46); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round}
.sk-faint{stroke:rgb(var(--pencil-rgb) / .28); stroke-dasharray:3 4}
.sk-via, .sk-node{fill:none; stroke:rgb(var(--pencil-rgb) / .46); stroke-width:1.25}
.sk-e{fill:#fb683e; opacity:.85} .sk-e.sk-e2{fill:#5fa3d0}
.sk-halo{fill:#ff9a6b; opacity:.28} .sk-halo.sk-e2{fill:#9ccbea}
.sk-led{fill:#5fa3d0; opacity:.25; animation:sk-led 2.8s ease-in-out infinite}
@keyframes sk-led{40%{opacity:.75; fill:#7fd1a1} 60%{opacity:.3}}
@media (min-width:1700px){.sk-piece{--sk-scale:1.45}}
@media (max-width:760px){.sk-piece{--sk-scale:.62} .sk-slot-1, .sk-slot-3, .sk-slot-5, .sk-slot-7, .sk-slot-9, .sk-slot-11, .sk-slot-13, .sk-slot-15{display:none}}
@media (prefers-reduced-motion: reduce){.sk-led, .sk-drift{animation:none} .sk-led{opacity:.5}}
@media print{.sk{display:none}}

/* 0.5.0 (owner 2026-11-02): the EndlessCreation logo large and faint in the background (logo.js; row in landscape, stack in portrait) */
.bg-logo{position:fixed; left:50%; top:50%; z-index:-1; pointer-events:none; transform:translate(-50%, -50%); width:min(86vw, 150vh); height:min(70vh, 60vw); opacity:.07}
@media (orientation:portrait){.bg-logo{width:84vw; height:62vh}}
.bg-logo svg{width:100%; height:100%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .bg-logo{opacity:.09}}
:root[data-theme="dark"] .bg-logo{opacity:.09}
.endless-logo .el-word{font-family:var(--sans); fill:var(--text); letter-spacing:.01em}
.endless-logo path{fill:none; stroke-width:6.5; stroke-linecap:round; stroke-linejoin:round}
.endless-logo .el-base{opacity:.55}
.endless-logo .el-run{stroke-dasharray:70 120; animation:el-run 3.2s linear infinite}
@keyframes el-run{to{stroke-dashoffset:-190}}
@media (prefers-reduced-motion: reduce){.endless-logo .el-run{animation:none; stroke-dasharray:none}}
@media print{.bg-logo{display:none}}