@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/nunito.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Nunito';
  src: url('/assets/fonts/nunito-italic.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Quicksand';
  src: url('/assets/fonts/quicksand.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('/assets/fonts/opendyslexic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #0c0c0c;
  --side: #000000;
  --surface: color-mix(in srgb, var(--page), #ffffff 5%);
  --raise: color-mix(in srgb, var(--page), #ffffff 9%);
  --edge: color-mix(in srgb, var(--page), #ffffff 15%);
  --line: color-mix(in srgb, var(--page), #ffffff 28%);
  --switch-edge: color-mix(in srgb, var(--page), #ffffff 37%);
  --card: var(--surface);
  --text: #f2f2f2;
  --soft: #d6d6d6;
  --muted: #a8a8a8;
  --accent: #00ff21;
  --accent-deep: color-mix(in srgb, var(--accent), #000000 55%);
  --heart-red: #ff4d6d;
  --rainbow: linear-gradient(90deg, #ff6b6b, #ffa94d, #ffe066, #69db7c, #4dabf7, #9775fa, #f783ac, #ff6b6b);
  --ui-font: 'Quicksand', 'Nunito', system-ui, sans-serif;
  --body-font: 'Nunito', system-ui, sans-serif;
  --slant: italic;
  --side-w: 22.25rem;
  --bar-h: 0rem;
  --bar-extra: 4rem;
}
html.theme-black { --page: #000000; --side: #000000; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: max(100%, 0.8333vw); background: var(--page); color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--text); font-family: var(--body-font); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--ui-font); font-weight: 700; line-height: 1.15; color: #ffffff; }
p { margin: 0; }
a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #ffffff; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -5rem; left: 0.75rem; z-index: 9; padding: 0.5rem 0.875rem; background: var(--card); color: var(--text); }
.skip-link:focus { top: 0.75rem; }

.main { container-type: inline-size; min-height: 100vh; margin-left: var(--side-w); padding: 3.75rem 4rem 5rem 6rem; overflow-wrap: break-word; transition: margin 0.3s; }
html.side-closed .main { margin-left: 0; }

.side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 5; display: flex; flex-direction: column; width: var(--side-w); padding: 1.375rem 1.5rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; background: var(--side); font-family: var(--body-font); transition: transform 0.3s, visibility 0s; }
html.side-closed .side { visibility: hidden; transform: translateX(-100%); transition: transform 0.3s, visibility 0s linear 0.3s; }
html.motion-off .side, html.motion-off .main, html.motion-off .side-item::before, html.motion-off .side-apps a::before, html.motion-off.side-closed .side, html.motion-off.side-open .side { transition: none; }
.side-top { display: flex; align-items: center; gap: 1.25rem; }
.burger { display: grid; align-content: center; gap: 0.3125rem; flex: none; width: 2.75rem; height: 2.75rem; margin: 0 0 0 -0.5rem; padding: 0 0.5rem; border: 0; background: none; cursor: pointer; }
.burger i { display: block; height: 0.1875rem; border-radius: 2px; background: #ffffff; }
.burger:hover i { background: var(--accent); }
.burger-float { position: fixed; top: 1.375rem; left: 1.5rem; z-index: 4; display: none; margin: 0; border-radius: 0.375rem; background: var(--side); }
html.side-closed .burger-float { display: grid; }
.brand { display: inline-block; font-family: 'Quicksand', 'Nunito', sans-serif; font-size: 1.875rem; font-weight: 700; white-space: nowrap; text-decoration: none; background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 7s linear infinite, glow 2.6s ease-in-out infinite; }
.brand:hover { color: transparent; }
@keyframes rainbow { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes glow { 0%, 100% { filter: saturate(0.85) brightness(0.9); } 50% { filter: saturate(1.7) brightness(1.35); } }
html.motion-off .brand { animation: none; }

.side-body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 2.5rem 0 0.25rem; }
.side-nav { margin: 0; padding: 1rem 0.9rem; border: 1px solid var(--edge); border-radius: 1rem; background: var(--surface); }
.side-group { margin: 0; padding: 0; }
.side-item { display: flex; align-items: center; gap: 0.85rem; width: 100%; margin: 0; padding: 0.35rem 0.5rem; border: 0; border-radius: 0.5rem; background: none; font-family: var(--body-font); font-size: 1.5rem; font-weight: 400; line-height: 1.35; color: #ffffff; text-align: left; text-decoration: none; cursor: pointer; }
.side-item::before, .side-apps a::before { content: ''; flex: none; width: 1.25rem; height: 2px; background: currentColor; transition: width 0.2s; }
.side-head { cursor: default; }
.side-label::after { content: ' /'; color: var(--accent); }
html.js .side-fold { cursor: pointer; }
html.apps-folded .side-apps { display: none; }
.fold-arrow { display: none; flex: none; width: 0.45em; height: 0.45em; margin: 0 0.35rem 0 auto; border: solid var(--accent); border-width: 0 3px 3px 0; rotate: 45deg; translate: 0 -22%; transition: rotate 0.15s ease-out, translate 0.15s ease-out; }
html.js .fold-arrow { display: inline-block; }
html.apps-folded .fold-arrow { rotate: -45deg; translate: -22% 0; }
html.motion-off .fold-arrow { transition: none; }
html.apps-folded .side-fold.has-current { color: var(--accent); }
.side-apps { margin: 0 0 0.35rem; padding: 0; list-style: none; }
.side-apps a { display: flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0.5rem 0.3rem 2.6rem; border-radius: 0.5rem; font-size: 1.3125rem; font-weight: 400; line-height: 1.35; color: var(--soft); text-decoration: none; }
a.side-item:hover, button.side-item:hover, .side-apps a:hover { background: var(--raise); color: var(--accent); }
a.side-item:hover::before, button.side-item:hover::before, .side-apps a:hover::before { width: 1.75rem; }
.side a[aria-current] { color: var(--accent); }
.side a[aria-current]::before { width: 1.75rem; }
.side-lang { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; padding: 0.2rem 0.5rem; }
.side-lang a, .side-lang span { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0; font-size: 1.125rem; font-weight: 400; line-height: 1.35; color: var(--muted); text-decoration: none; }
.side-lang a:hover { color: var(--accent); }
.side-lang span[aria-current] { color: #ffffff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.15rem; text-underline-offset: 0.35rem; }
.set-ic { flex: none; width: 1.35rem; height: 0.9rem; border-radius: 2px; }
.set-ic.is-line { width: 1.1rem; height: 1.1rem; border-radius: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-sep { height: 2px; margin: 0.75rem 0.5rem; background: var(--edge); }
.side-legal .side-item { font-size: 1.125rem; color: var(--muted); }
.side-version { flex: none; align-self: flex-start; margin: 0 0 0 0.9rem; padding: 0.125rem 0.5rem; border-radius: 0.5rem; font-size: 1.125rem; font-weight: 400; line-height: 1.35; color: var(--muted); text-decoration: none; }
.side-version:hover { color: var(--accent); }
.side-version + .meadow { margin-top: 0.35rem; }

.phone-bar, .shade { display: none; }
html:not(.js) .side-top .burger { display: none; }

.meadow { position: relative; flex: none; height: 9.5rem; margin-top: 1rem; overflow: hidden; border: 1px solid var(--edge); border-radius: 1rem; background: linear-gradient(#2a1650 0%, #7a3170 30%, #d9586a 50%, #f39a4a 64%, #f7c548 80%); }
.meadow .hills { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 58%; }
.meadow .sun { position: absolute; bottom: 18%; left: 50%; width: 4.5rem; height: 4.5rem; transform: translateX(-50%); }
.meadow .moon { position: absolute; top: 1rem; right: 20%; display: none; width: 2.2rem; height: 2.2rem; fill: #f6e7b0; }
.hill-back { fill: #3b2356; }
.hill-front { fill: #2c6436; }
.cloud { position: absolute; left: -4rem; width: 3.4rem; height: 1.6rem; fill: #ffd6c8; opacity: 0.85; animation: drift 32s linear infinite; }
.cloud.c1 { top: 0.8rem; }
.cloud.c2 { top: 2.4rem; width: 2.5rem; height: 1.2rem; opacity: 0.7; animation-duration: 44s; animation-delay: -20s; }
.cloud.c3 { top: 1.3rem; width: 2.9rem; height: 1.35rem; opacity: 0.8; animation-duration: 38s; animation-delay: -31s; }
@keyframes drift { from { left: -4rem; } to { left: 100%; } }
.walker { position: absolute; bottom: 0.7rem; line-height: 1; }
.walker > span, .walker > span > span { display: block; }
.walker img { width: 3rem; height: 3rem; margin: 0 0.28rem; }
.walker.rex { left: 4%; animation: rex-walk 10s ease-in-out infinite; }
.walker.saur { right: 4%; animation: saur-walk 10s ease-in-out infinite; }
.walker.rex > span { animation: rex-face 10s linear infinite; }
.walker.saur > span { animation: saur-face 10s linear infinite; }
.walker > span > span { animation: hop 0.55s ease-in-out infinite; }
.walker.saur > span > span { animation-delay: -0.27s; }
@keyframes rex-walk { 0%, 6% { left: 4%; } 40%, 56% { left: calc(50% - 3.1rem); } 90%, 100% { left: 4%; } }
@keyframes saur-walk { 0%, 6% { right: 4%; } 40%, 56% { right: calc(50% - 3.1rem); } 90%, 100% { right: 4%; } }
@keyframes rex-face { 0%, 55.9% { transform: scaleX(-1); } 56%, 93.9% { transform: scaleX(1); } 94%, 100% { transform: scaleX(-1); } }
@keyframes saur-face { 0%, 55.9% { transform: scaleX(1); } 56%, 93.9% { transform: scaleX(-1); } 94%, 100% { transform: scaleX(1); } }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.35rem); } }
.meet-heart { position: absolute; bottom: 3.1rem; left: 50%; width: 1.35rem; height: 1.35rem; fill: #ff3d68; stroke: #ffffff; stroke-width: 1.4; paint-order: stroke; opacity: 0; animation: meet-heart 10s ease-out infinite; }
@keyframes meet-heart { 0%, 41% { opacity: 0; transform: translate(-50%, 0) scale(0.4); } 45% { opacity: 1; transform: translate(-50%, -0.6rem) scale(1); } 62% { opacity: 0; transform: translate(-50%, -3.4rem) scale(0.85) rotate(-10deg); } 100% { opacity: 0; transform: translate(-50%, -3.4rem) scale(0.85); } }
html.dinos-off .walker, html.dinos-off .meet-heart { display: none; }
html.motion-off .cloud, html.motion-off .walker.rex, html.motion-off .walker.saur, html.motion-off .walker.rex > span, html.motion-off .walker.saur > span, html.motion-off .walker > span > span, html.motion-off .meet-heart { animation: none; }
html.motion-off .walker.rex { left: calc(50% - 3.1rem); }
html.motion-off .walker.saur { right: calc(50% - 3.1rem); }
html.motion-off .walker.rex > span { transform: scaleX(-1); }
html.motion-off .meet-heart { opacity: 1; transform: translate(-50%, -0.9rem); }
html.motion-off .cloud.c1 { left: 12%; }
html.motion-off .cloud.c2 { left: 70%; }
html.motion-off .cloud.c3 { left: 44%; }
html.no-walk .walker, html.no-walk .walker > span, html.no-walk .walker > span > span, html.no-walk .meet-heart { animation: none; }
html.no-walk .walker.rex { left: calc(50% - 3.1rem); }
html.no-walk .walker.saur { right: calc(50% - 3.1rem); }
html.no-walk .walker.rex > span { transform: scaleX(-1); }
html.no-walk .meet-heart { opacity: 1; transform: translate(-50%, -0.9rem); }
html.no-clouds .cloud { animation: none; }
html.no-clouds .cloud.c1 { left: 12%; }
html.no-clouds .cloud.c2 { left: 70%; }
html.no-clouds .cloud.c3 { left: 44%; }
html.sky-morning .meadow { background: linear-gradient(#5b7fc4 0%, #b49bd3 38%, #f2a7b0 64%, #ffd3a1 88%); }
html.sky-morning .meadow::before { content: ''; position: absolute; bottom: calc(12% - 1.45rem); left: calc(24% - 3.25rem); width: 6.5rem; height: 6.5rem; background: radial-gradient(circle, rgba(255, 190, 150, 0.6) 0, rgba(255, 190, 150, 0.22) 35%, transparent 65%); }
html.sky-morning .meadow .sun { bottom: 12%; left: 24%; width: 3.6rem; height: 3.6rem; }
html.sky-morning .cloud { fill: #fff0f3; }
html.sky-morning .hill-back { fill: #5b4a7d; }
html.sky-morning .hill-front { fill: #3d7744; }
html.sky-day .meadow { background: linear-gradient(#3f92dc 0%, #7fc0ee 45%, #c4e6f7 78%, #e8f6fb 100%); }
html.sky-day .meadow::before { content: ''; position: absolute; bottom: calc(50% - 1.55rem); left: calc(72% - 3.25rem); width: 6.5rem; height: 6.5rem; background: radial-gradient(circle, rgba(255, 226, 122, 0.7) 0, rgba(255, 226, 122, 0.25) 35%, transparent 65%); }
html.sky-day .meadow .sun { bottom: 50%; left: 72%; width: 3.4rem; height: 3.4rem; }
html.sky-day .meadow .sun circle { fill: #ffd84a; mask: none; }
html.sky-day .cloud { fill: #ffffff; opacity: 0.95; }
html.sky-day .hill-back { fill: #5f9b4f; }
html.sky-day .hill-front { fill: #3d8a3c; }
html.sky-night .meadow { background: linear-gradient(#060a22 0%, #111a46 55%, #26326e 100%); }
html.sky-night .meadow::before { content: ''; position: absolute; top: -0.4rem; right: calc(20% - 1.4rem); width: 5rem; height: 5rem; background: radial-gradient(circle, rgba(246, 231, 176, 0.45) 0, rgba(246, 231, 176, 0.15) 35%, transparent 65%); }
html.sky-night .meadow::after { content: ''; position: absolute; inset: 0 0 42% 0; pointer-events: none; background: radial-gradient(circle at 12% 30%, #ffffff 0 1.5px, transparent 2px), radial-gradient(circle at 27% 60%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 41% 20%, #ffffff 0 1.5px, transparent 2px), radial-gradient(circle at 58% 50%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 66% 14%, #ffffff 0 1.2px, transparent 1.7px), radial-gradient(circle at 87% 66%, #ffffff 0 1.5px, transparent 2px), radial-gradient(circle at 93% 26%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 7% 72%, #ffffff 0 1px, transparent 1.5px), radial-gradient(circle at 49% 78%, #ffffff 0 1px, transparent 1.5px); animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
html.motion-off.sky-night .meadow::after { animation: none; }
html.sky-night .meadow .sun { display: none; }
html.sky-night .meadow .moon { display: block; }
html.sky-night .cloud { fill: #6b7299; opacity: 0.5; }
html.sky-night .hill-back { fill: #221d45; }
html.sky-night .hill-front { fill: #18402d; }
html.no-meadow .side .meadow { display: none; }
.flakes { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
html.winter body { background: transparent; }
html.winter .tile:not(:hover), html.winter .facts { background: var(--page); }
html.winter .main :is(p, li, h1, h2, h3, h4, dt, dd, td, th, summary, figcaption, blockquote):not(.hero-title, .day-row, .apps > li, .cards > li, :is(.card, .ap-card, .set-row, .tile, .facts, .shot, .board, .release, .version-box, .day-row, .cmd-list) *) { background-color: var(--page); border-image: linear-gradient(var(--page), var(--page)) fill 0 / / 0.75rem; }
html.winter .main details.faq > summary { border-image: none; }
html.winter .pets { background-color: var(--page); }
html.winter .hero-1, html.winter .hero-intro span { width: fit-content; background-color: var(--page); }
html.winter-piles .tile, html.winter-piles .facts, html.winter-piles .card { position: relative; }
html.winter-piles .tile::before, html.winter-piles .facts::before, html.winter-piles .card::before { content: ""; position: absolute; top: calc(-1px - 1.3rem); right: 1rem; left: 1rem; height: 1.56rem; pointer-events: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.7%22%20stop-color%3D%22%23f3f7fd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d9e4f3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%2024C4%2023%207%2017%2015%2016C21%209%2033%207%2043%2012C51%205%2067%204%2077%2010C86%206%2099%205%20108%2011C118%207%20132%206%20141%2012C152%208%20166%2010%20175%2015C184%2015%20191%2020%20200%2024L200%2025L0%2025Z%22%20fill%3D%22%23b9c9e2%22%20transform%3D%22translate(0%201.4)%22%2F%3E%3Cpath%20d%3D%22M0%2024C4%2023%207%2017%2015%2016C21%209%2033%207%2043%2012C51%205%2067%204%2077%2010C86%206%2099%205%20108%2011C118%207%20132%206%20141%2012C152%208%20166%2010%20175%2015C184%2015%20191%2020%20200%2024L200%2025L0%2025Z%22%20fill%3D%22url(%23s)%22%2F%3E%3Cpath%20d%3D%22M47%2024.5C47%2027%2048.5%2029%2050%2029C51.5%2029%2053%2027%2053%2024.5Z%22%20fill%3D%22%23eef3fb%22%2F%3E%3Cpath%20d%3D%22M128%2024.5C128%2026.5%20129.2%2028%20130.5%2028C131.8%2028%20133%2026.5%20133%2024.5Z%22%20fill%3D%22%23eef3fb%22%2F%3E%3C%2Fsvg%3E") 0 0 / 100% 100% no-repeat; }
html.winter-piles .facts::before, html.winter-piles .card::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2030%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22s%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffffff%22%2F%3E%3Cstop%20offset%3D%220.7%22%20stop-color%3D%22%23f3f7fd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d9e4f3%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22M0%2024C6%2022%209%2018%2017%2017C25%2011%2038%2010%2046%2014C55%208%2071%209%2079%2014C90%2010%20104%2012%20111%2016C122%2013%20136%2014%20144%2018C156%2016%20170%2018%20180%2020C189%2021%20194%2022%20200%2024L200%2025L0%2025Z%22%20fill%3D%22%23b9c9e2%22%20transform%3D%22translate(0%201.4)%22%2F%3E%3Cpath%20d%3D%22M0%2024C6%2022%209%2018%2017%2017C25%2011%2038%2010%2046%2014C55%208%2071%209%2079%2014C90%2010%20104%2012%20111%2016C122%2013%20136%2014%20144%2018C156%2016%20170%2018%20180%2020C189%2021%20194%2022%20200%2024L200%2025L0%2025Z%22%20fill%3D%22url(%23s)%22%2F%3E%3Cpath%20d%3D%22M88%2024.5C88%2026.8%2089.3%2028.5%2091%2028.5C92.7%2028.5%2094%2026.8%2094%2024.5Z%22%20fill%3D%22%23eef3fb%22%2F%3E%3C%2Fsvg%3E"); }
html.winter-piles .apps li:nth-child(2n) .tile::before, html.winter-piles .cards li:nth-child(2n) .card::before { transform: scaleX(-1); }
html.winter-piles .facts::before { right: auto; left: 1.4rem; width: min(62%, 22rem); }
html.winter-piles .card::before { top: -1.15rem; right: auto; left: 0.4rem; width: min(60%, 26rem); height: 1.38rem; }
html.winter-piles.tiles-plain .tile::before { display: none; }
html.winter-meadow .hill-back { fill: #c9d6ea; }
html.winter-meadow .hill-front { fill: #f2f6fc; }
html.winter-meadow.sky-night .hill-back { fill: #7d8bb0; }
html.winter-meadow.sky-night .hill-front { fill: #b3bfd8; }

.board { margin: 0 0 1.625rem; overflow: hidden; border: 2px solid var(--edge); border-radius: 0.5rem; background: var(--side); font-family: var(--ui-font); }
.board-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-bottom: 1px solid var(--edge); }
.board-warn { position: relative; flex: none; width: 2rem; height: 1.75rem; }
.board-warn::before { content: ''; position: absolute; inset: 0; background: #f7c548; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.board-warn::after { content: '!'; position: absolute; right: 0; bottom: 0.0625rem; left: 0; color: #000000; font-family: var(--body-font); font-size: 1.125rem; font-weight: 900; line-height: 1.4rem; text-align: center; }
.board-dest { flex: 1; color: #ffffff; font-size: 1.3125rem; font-weight: 700; letter-spacing: 0.02em; }
.board-close { margin-left: auto; padding: 5px 12px; border: 2px solid var(--line); border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.board-close:hover { border-color: var(--accent); }
.board-ticker { overflow: hidden; padding: 9px 0 10px; color: #f7c548; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='3' height='3' fill-opacity='.55'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.15'/%3E%3C/svg%3E"); -webkit-mask-size: 3px 3px; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3' height='3'%3E%3Crect width='3' height='3' fill-opacity='.55'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.15'/%3E%3C/svg%3E"); mask-size: 3px 3px; }
.board-run { display: inline-block; padding-left: 100%; animation: board-run 26s linear infinite; }
@keyframes board-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }
html.motion-off .board-ticker { padding: 9px 14px 10px; white-space: normal; }
html.motion-off .board-run { padding-left: 0; animation: none; }

.lead { font-size: 1.1875rem; line-height: 1.55; }
.meta { font-size: 0.875rem; color: var(--muted); }
.empty { color: var(--muted); }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title dinos" "intro intro"; column-gap: 3rem; }
.hero-title { grid-area: title; margin: 0; container-type: inline-size; font-family: var(--body-font); font-style: var(--slant); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; color: #ffffff; }
.hero-title span { display: block; }
.hero-1 { font-size: min(7rem, 6vw, 15.8cqi); }
.hero-2 { width: fit-content; margin-top: 0.75rem; padding-right: 0.12em; font-size: min(4rem, 3.4vw, 12cqi);background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rainbow 7s linear infinite, glow 2.6s ease-in-out infinite; }
html.motion-off .hero-2 { animation: none; }
.hero-intro { grid-area: intro; margin: 2rem 0 0; font-family: var(--body-font); font-size: 1.75rem; font-style: var(--slant); font-weight: 700; line-height: 1.3; color: #ffffff; }
.hero-intro span { display: block; }
.dinos { grid-area: dinos; justify-self: end; position: relative; width: 13rem; height: 13rem; margin: calc(var(--talk-room, 7.5rem) + var(--talk-pad, 0rem) + var(--talk-font, 0rem) + var(--talk-small, 0rem)) clamp(0rem, calc((100vw - 1440px) / 4 + 2rem), 9rem) 0 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
html.dinos-off .dinos { visibility: hidden; }
.dinos-float { display: block; width: 100%; height: 100%; position: relative; z-index: 1; animation: float 4.5s ease-in-out infinite; }
.dinos-float img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.dinos-float img.dino-winter { position: absolute; inset: 0; display: none; }
html.winter-hat .dinos-float img.dino-winter { display: block; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.8rem); } }
html.motion-off .dinos-float { animation: none; }
html.no-float .dinos-float { animation: none; }
.hearts { position: absolute; inset: 0; pointer-events: none; }
.burst { position: absolute; top: 30%; left: 50%; z-index: 2; width: 2rem; height: 2rem; color: var(--c); }
.burst.ring { top: 50%; }
.burst svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.hop-heart { position: absolute; top: 0; left: 0; z-index: 3; width: 1.15rem; height: 1.15rem; color: var(--heart-red); pointer-events: none; }
.hop-heart svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.bubble { --tail-x: 30%; --bubble-bg: var(--raise); --bubble-line: #ffd85e; --bt: translateX(0); position: absolute; bottom: calc(100% + 1rem); left: -1rem; z-index: 2; width: max-content; max-width: min(17rem, calc(100% + 2.5rem)); padding: 0.6rem 1rem 0.65rem; border: 2px solid transparent; border-radius: 1rem; background: linear-gradient(var(--bubble-bg), var(--bubble-bg)) padding-box, linear-gradient(90deg, #ff6b6b, #ffa94d, #ffe066, #69db7c, #4dabf7, #9775fa, #f783ac) border-box; color: #ffffff; font-family: var(--body-font); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; text-align: left; pointer-events: none; opacity: 0; transform: scale(0.7); transform-origin: var(--tail-x) 100%; transition: opacity 0.18s, transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1); }
.bubble.from-s { --tail-x: 70%; --bubble-line: #6f9ef8; }
html.bubbles-green .bubble, html.bubbles-green .bubble.from-s { --bubble-line: #00ff21; border-color: #00ff21; background: var(--bubble-bg); }
html.bubbles-accent .bubble { --bubble-line: var(--accent); border-color: var(--accent); background: var(--bubble-bg); }
html.bubbles-off .bubble { display: none; }
.bubble::before, .bubble::after { content: ''; position: absolute; left: var(--tail-x); border-style: solid; border-color: transparent; border-bottom-width: 0; }
.bubble::before { top: calc(100% + 2px); margin-left: -0.65rem; border-width: 0.7rem 0.65rem 0; border-top-color: var(--bubble-line); }
.bubble::after { top: 100%; margin-left: -0.45rem; border-width: 0.5rem 0.45rem 0; border-top-color: var(--bubble-bg); }
.bubble.is-reply { right: 0; bottom: calc(100% + 1rem + var(--lift, 3.4rem)); left: auto; max-width: 17rem; }
.bubble.is-on { opacity: 1; transform: scale(1); animation: bubble-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
html.motion-off .bubble { transition: none; }
html.motion-off .bubble.is-on { animation: none; }
.bubble.is-out { animation: bubble-out 0.75s ease-in both; }
.bubble.is-reply.is-out { animation-delay: 0.12s; }
html.motion-off .bubble.is-out { animation: none; }
@keyframes bubble-out { 0% { opacity: 1; transform: var(--bt) translateY(0) scale(1); } 100% { opacity: 0; transform: var(--bt) translateY(-1.1rem) scale(1.04); } }
@keyframes bubble-pop { 0% { opacity: 0; transform: var(--bt) scale(0.3) rotate(-8deg); } 55% { opacity: 1; transform: var(--bt) scale(1.12) rotate(3deg); } 80% { transform: var(--bt) scale(0.96) rotate(-1deg); } 100% { opacity: 1; transform: var(--bt) scale(1) rotate(0deg); } }
.kao { white-space: nowrap; }
.pets { position: absolute; top: calc(100% + 0.75rem); left: 50%; width: max-content; font-size: 1.0625rem; font-weight: 700; color: var(--soft); pointer-events: none; opacity: 0; transform: translateX(-50%); transition: opacity 0.3s; }
.pets.is-on { opacity: 1; }
html.pets-hide .pets { display: none; }
html.motion-off .pets { transition: none; }

.block { max-width: 53.5rem; margin-top: 3.25rem; }
.block + .block { margin-top: 6.5rem; }
.label-row { display: flex; align-items: center; gap: 0.75rem; width: calc(100% - 0.5rem + min(var(--bar-extra), 100cqw - 100% + 3rem)); margin: 0 0 1rem 0.5rem; }
.label { margin: 0; font-family: var(--ui-font); font-size: 1.375rem; font-weight: 700; line-height: 1.5; color: var(--soft); }
.label-row .bar { flex: 1; height: 1.0625rem; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); clip-path: polygon(0 0, 100% 0, calc(100% - 1rem) 100%, 0 100%); }
.apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9375rem; margin: 0; padding: 0; list-style: none; }
.tile { display: grid; justify-items: center; align-content: start; gap: 0.5rem; height: 100%; padding: 1.5rem 0.75rem 1.4rem; border: 2px solid var(--line); border-radius: 1.125rem; color: var(--text); font-family: var(--body-font); font-weight: 400; text-align: center; text-decoration: none; }
.tile:hover { border-color: var(--accent); background: var(--card); color: var(--text); }
.tile-icon { width: 7.375rem; height: 7.375rem; border-radius: 1.75rem; }
.tile-name { margin: 0.25rem 0 0; font-family: var(--ui-font); font-size: 1.625rem; font-weight: 700; line-height: 1.15; color: #ffffff; }
.tile:hover .tile-name { color: var(--accent); }
.tile-desc { font-size: 1.125rem; line-height: 1.35; color: var(--soft); }
.dot { font-size: 1.125rem; font-weight: 700; line-height: 1.35; color: #ffffff; }
.dot::before { content: ''; display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.5rem; border-radius: 50%; background: var(--dot); vertical-align: 0.05em; }
.dot.is-run { --dot: #7cc4f0; }
.dot.is-dev { --dot: #f39a4a; }
.dot.is-soon { --dot: #f7c548; }
.dot.is-out { --dot: #00ff21; }
.facts { margin-top: 1rem; padding: 1.4rem 1.5rem 1.3rem; border: 2px solid var(--line); border-radius: 1.125rem; }
.facts-title { margin: 0 0 1.1rem; font-family: var(--ui-font); font-size: 1.375rem; font-weight: 700; line-height: 1.5; color: #ffffff; }
.facts ul { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.facts li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: center; column-gap: 0.9rem; }
.facts li img { width: 3.25rem; height: 3.25rem; border-radius: 0.8rem; }
.facts-text { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 0.9rem; min-width: 0; }
.facts-name { font-family: var(--ui-font); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: #ffffff; }
.facts-ver { font-size: 1.25rem; font-weight: 800; line-height: 1.2; color: var(--accent); }
.facts-date { flex-basis: 100%; font-size: 1rem; color: var(--muted); }
.wip { position: relative; display: inline-flex; align-items: center; }
.wip .hammer { flex: none; width: 1.6rem; height: 1.6rem; margin-right: 0.1rem; overflow: visible; transform-origin: 50% 95%; transform: rotate(-25deg); animation: hammer 1.3s ease-in-out infinite; }
.wip-text { display: inline-block; transform-origin: 50% 100%; animation: wip-hit 1.3s ease-out infinite; }
.wip .spark { position: absolute; top: -0.15rem; left: 1.35rem; width: 0.9rem; height: 0.9rem; opacity: 0; animation: spark 1.3s ease-out infinite; }
@keyframes hammer { 0%, 100% { transform: rotate(-25deg); } 52% { transform: rotate(-38deg); } 64% { transform: rotate(30deg); } 72% { transform: rotate(23deg); } 80% { transform: rotate(28deg); } 92% { transform: rotate(-10deg); } }
@keyframes wip-hit { 0%, 62%, 100% { transform: none; } 66% { transform: translateY(0.06em) scaleY(0.86) scaleX(1.06); } 76% { transform: none; } }
@keyframes spark { 0%, 62%, 100% { opacity: 0; transform: scale(0.4); } 66% { opacity: 1; transform: scale(1); } 80% { opacity: 0; transform: scale(1.3); } }
html.motion-off .wip .hammer, html.motion-off .wip-text, html.motion-off .wip .spark { animation: none; }
html.no-hammer .wip .hammer, html.no-hammer .wip-text, html.no-hammer .wip .spark { animation: none; }
.fresh { position: relative; display: inline-flex; align-items: center; margin-left: 1rem; }
.fresh .rays { position: absolute; top: -0.6875rem; left: -1rem; width: 2rem; height: 2rem; overflow: visible; }
.fresh .ray { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 10; stroke-dashoffset: 10; animation: ray 2.6s ease-out infinite; }
.fresh .r2 { animation-delay: 0.15s; }
.fresh .r3 { animation-delay: 0.3s; }
@keyframes ray { 0% { stroke-dashoffset: 10; opacity: 0; } 12% { opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 80%, 100% { stroke-dashoffset: -10; opacity: 0; } }
html.motion-off .fresh .ray { animation: none; stroke-dashoffset: 0; opacity: 1; }
.facts-foot { margin: 1.2rem 0 0; padding-top: 0.9rem; border-top: 2px solid var(--line); font-size: 1rem; color: var(--muted); }
.cards { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
html.news-3 .cards li:nth-child(n+4), html.news-2 .cards li:nth-child(n+3) { display: none; }
.card { display: block; height: 100%; padding: 1.1rem 1.4rem 1.2rem; border: 1px solid var(--edge); border-radius: 0.875rem; background: var(--card); color: var(--text); font-weight: 400; text-decoration: none; }
.card:hover { color: var(--text); }
.tag { display: inline-block; margin: 0 0 0.45rem; padding: 0.1rem 1.15rem 0.1rem 0.55rem; color: #0c0c0c; font-family: var(--ui-font); font-size: 0.9375rem; font-weight: 800; line-height: 1.45; clip-path: polygon(0 0, 100% 0, calc(100% - 0.55rem) 100%, 0 100%); }
.tag.is-dinopulse { background: #f7c548; }
.tag.is-greendino { background: #7cc4f0; }
.tag.is-dinomark { background: #fa9e4c; }
.tag.is-website { background: #e8a7c6; }
.pg-meta .tag, .day-row .tag, .version-name .tag { margin: 0; }
.pg-meta .tag { margin-right: 0.2rem; }
.card-meta { margin: 0 0 0.25rem; font-size: 1.25rem; color: var(--muted); }
.card-title { margin: 0; font-family: var(--ui-font); font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: #ffffff; }
.card.is-first .card-title { font-size: 2.125rem; }
.card-lead { margin: 0.5rem 0 0; font-size: 1.25rem; color: var(--soft); }
.card:hover .card-title { color: var(--accent); }
.all { margin: 1.5rem 0 0; }
.button-quiet { display: inline-block; padding: 0.6rem 1.4rem; border: 2px solid var(--line); border-radius: 0.375rem; color: var(--text); font-family: var(--ui-font); font-size: 1.1875rem; font-weight: 700; text-decoration: none; }
.button-quiet:hover { border-color: var(--accent); color: var(--accent); }

@container (min-width: 80rem) {
  .content .block { max-width: none; }
  .apps-row { display: grid; grid-template-columns: minmax(0, 53.5rem) minmax(0, 1fr); gap: 1.5rem; }
  .facts { margin-top: 0; }
  .cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cards li:first-child, html.news-2 .cards li:nth-child(2) { grid-column: 1 / -1; }
}

.site h1, .site h2, .site h3 { overflow-wrap: break-word; }
.legal-view .pg-title { hyphens: manual; }
.legal-view .legal-text > p:first-child { font-size: 1.25rem; color: #ffffff; }
.legal-view .legal-text p, .legal-view .legal-text li { max-width: 46rem; font-size: 1.125rem; line-height: 1.7; color: var(--soft); }
.legal-view .legal-text p { margin: 0 0 1rem; }
.legal-view .legal-text ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.legal-view .legal-text li::marker { color: var(--accent); }
.legal-view .legal-text h2 { display: flex; align-items: center; gap: 0.75rem; max-width: 46rem; margin: 2.25rem 0 0.8rem; font-family: var(--ui-font); font-size: 1.375rem; line-height: 1.5; color: #ffffff; scroll-margin-top: calc(var(--bar-h) + 1.5rem); }
.legal-view .legal-text h2::after { content: ''; flex: 1; min-width: 2rem; height: 0.6rem; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.6rem) 100%, 0 100%); }
.legal-view .legal-text h2:focus { outline: none; }
.legal-view .legal-text strong { color: #ffffff; }
.legal-view .legal-text a { color: var(--accent); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.legal-view .legal-text .legal-date { margin-top: 2rem; font-size: 1rem; color: var(--muted); }
.legal-view .ap-side { display: none; }

.pg-hero { margin: 0.5rem 0 2.5rem; }
.pg-back { margin: 0 0 1.5rem; }
.pg-back a { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--ui-font); font-size: 1.0625rem; font-weight: 700; color: var(--soft); text-decoration: none; }
.pg-back a::before { content: ''; width: 1.25rem; height: 2px; background: currentColor; transition: width 0.2s; }
.pg-back a:hover { color: var(--accent); }
.pg-back a:hover::before { width: 1.75rem; }
.pg-meta { margin: 0 0 0.6rem; font-size: 1.0625rem; color: var(--muted); }
.ap-title.pg-title { font-size: min(4.25rem, 4.2vw); }
.entry .ap-lead { max-width: 52rem; }
.cover { width: 100%; max-width: 56rem; height: auto; margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 0.9rem; }
.entry-text p, .entry-text li { max-width: 46rem; font-size: 1.1875rem; line-height: 1.7; color: var(--soft); }
.entry-text p { margin: 0 0 1.1rem; }
.entry-text ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.entry-text li { margin-bottom: 0.4rem; }
.entry-text li::marker { color: var(--accent); }
.entry-text h2 { display: flex; align-items: center; gap: 0.75rem; max-width: 46rem; margin: 2.25rem 0 0.9rem; font-family: var(--ui-font); font-size: 1.5rem; line-height: 1.5; color: #ffffff; }
.entry-text h2::after { content: ''; flex: 1; min-width: 2rem; height: 0.65rem; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%); }
.entry-text h3 { margin: 1.75rem 0 0.5rem; font-family: var(--ui-font); font-size: 1.25rem; color: #ffffff; }
.entry-text strong { color: #ffffff; }
.entry-text a { color: var(--accent); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.entry-text code { padding: 0.05rem 0.35rem; border-radius: 0.3rem; background: var(--raise); color: #ffffff; font-size: 0.95em; }
.entry-text img { height: auto; margin: 0 0 1.1rem; border-radius: 0.9rem; }
.version-box { max-width: 46rem; margin: 1.75rem 0; padding: 1.1rem 1.4rem; border: 1px solid var(--edge); border-radius: 0.9rem; background: var(--surface); }
.entry-text .version-box p, .entry-text .version-box li { font-size: 1.0625rem; line-height: 1.55; }
.entry-text .version-name { margin: 0; font-family: var(--ui-font); font-size: 1.25rem; font-weight: 700; color: #ffffff; }
.entry-text .version-name .tag { font-size: 1.0625rem; }
.entry-text .version-box .meta { margin: 0.2rem 0 0.4rem; font-size: 1rem; color: var(--muted); }
.entry-text .version-section { margin: 0.9rem 0 0.3rem; font-size: 1rem; font-weight: 700; color: var(--accent); }
.version-box ul { margin: 0 0 0.4rem; }
.entry-text .version-box p:last-child { margin: 0.6rem 0 0; }
.neighbors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; max-width: 46rem; margin-top: 2.75rem; }
.neighbors a { display: grid; gap: 0.3rem; padding: 1rem 1.25rem; border: 1px solid var(--edge); border-radius: 0.9rem; background: var(--surface); font-family: var(--ui-font); font-size: 1.1875rem; font-weight: 700; color: #ffffff; text-decoration: none; }
.neighbors a:hover { border-color: var(--accent); color: var(--accent); }
.neighbors .meta { font-family: var(--body-font); font-size: 0.9375rem; font-weight: 400; color: var(--muted); }
.neighbors .newer { text-align: right; }
.pg-card .ap-action { margin-bottom: 0.25rem; }
.more-list { display: grid; gap: 0.8rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.more-list a { display: block; font-family: var(--ui-font); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; color: #ffffff; text-decoration: none; }
.more-list a:hover { color: var(--accent); }
.more-list time { display: block; margin-top: 0.15rem; font-size: 0.9375rem; color: var(--muted); }
.pg-card .ap-toc { margin-top: 1.25rem; padding-top: 1rem; border-top: 2px solid var(--edge); }
.entry .ap-side { order: 0; margin: 2.5rem 0 0; }

.pg-archive .filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.pg-archive .filters button { padding: 0.35rem 0.85rem; border: 1px solid var(--line); border-radius: 0.5rem; background: none; font-family: var(--ui-font); font-size: 1rem; font-weight: 700; color: var(--soft); cursor: pointer; }
.pg-archive .filters button:hover { border-color: var(--accent); color: var(--accent); }
.pg-archive .filters button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #0c0c0c; }
.archive .ap-side { display: none; }
.pg-filters { display: grid; }
.pg-filter { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.35rem 0; border: 0; background: none; font-family: var(--body-font); font-size: 1.1875rem; color: var(--soft); text-align: left; cursor: pointer; }
.pg-filter::before { content: ''; flex: none; width: 1.1rem; height: 2px; background: currentColor; transition: width 0.2s; }
.pg-filter .pg-count { margin-left: auto; font-size: 0.9375rem; color: var(--muted); }
.pg-filter:hover, .pg-filter[aria-pressed="true"] { color: var(--accent); }
.pg-filter:hover::before, .pg-filter[aria-pressed="true"]::before { width: 1.6rem; }
html.motion-off .pg-filter::before, html.motion-off .pg-back a::before { transition: none; }
.month { margin-bottom: 2.25rem; }
.month h2 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1rem; font-family: var(--ui-font); font-size: 1.5rem; line-height: 1.5; color: #ffffff; }
.month h2::after { content: ''; flex: 1; height: 0.65rem; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%); }
.days { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.day-row { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--edge); border-radius: 0.9rem; background: var(--surface); }
.day-row:hover { background: var(--raise); }
.day { flex: none; width: 3.25rem; font-family: var(--ui-font); font-size: 2.25rem; font-weight: 700; line-height: 1; color: #ffffff; }
.day-row > div { min-width: 0; }
.row-title { font-family: var(--ui-font); font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: #ffffff; text-decoration: none; }
.row-title:hover { color: var(--accent); }
.row-lead { max-width: 50rem; margin: 0.35rem 0 0.3rem; font-size: 1.0625rem; color: var(--soft); }
.day-row .meta { margin: 0; font-size: 0.9375rem; color: var(--muted); }

@container (min-width: 70rem) {
  .pg-archive .filters { display: none; }
  .archive .ap-side { display: block; }
  .entry .ap-side { margin: 0; }
  .legal-view .ap-side { display: block; }
  .legal-view .ap-toc a { font-size: 1.0625rem; }
}

.ap-hero { display: flex; align-items: center; gap: 2rem; margin: 0.5rem 0 2.75rem; }
.ap-logo { flex: none; width: 8rem; height: 8rem; border-radius: 2rem; }
.ap-title { margin: 0; font-family: var(--body-font); font-size: min(5.5rem, 5vw); font-style: var(--slant); font-weight: 800; line-height: 1.02; color: #ffffff; }
.ap-lead { max-width: 48rem; margin: 0.75rem 0 0; font-family: var(--body-font); font-size: 1.5rem; font-style: var(--slant); font-weight: 700; line-height: 1.35; color: #ffffff; }
.ap-cols { display: flex; flex-direction: column; }
.ap-main { min-width: 0; }
.ap-side { order: -1; margin-bottom: 2rem; }
.ap-side .ap-toc-title, .ap-side .ap-toc { display: none; }
.ap-card { padding: 1.5rem 1.6rem; border: 1px solid var(--edge); border-radius: 1.125rem; background: var(--surface); }
.ap-card-title { margin: 0 0 0.6rem; font-family: var(--ui-font); font-size: 1.25rem; font-weight: 700; color: #ffffff; }
.ap-facts { margin: 0 0 1.1rem; font-size: 1.0625rem; color: var(--soft); }
.ap-action { margin: 0; }
.ap-toc-card { display: none; }
.ap-side > .ap-card + .ap-toc-card { margin-top: 1.25rem; }
.ap-toc-card > .ap-toc-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.glance { display: grid; gap: 1.35rem; }
.glance .ap-card-title { margin: 0; }
.gl-get { display: grid; gap: 0.55rem; }
.gl-dl { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.8rem 0.8rem 1.1rem; border: 2px solid var(--accent); border-radius: 0.9rem; font-family: var(--ui-font); font-size: 1.375rem; font-weight: 700; color: var(--accent); text-decoration: none; transition: background 0.2s, color 0.2s; }
.gl-dl:hover { background: var(--accent); color: #0c0c0c; }
.gl-dl-ic { flex: none; width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gl-chip { margin-left: auto; padding: 0.2rem 0.7rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--accent), transparent 85%); font-size: 1rem; font-weight: 700; }
.gl-dl:hover .gl-chip { background: color-mix(in srgb, #0c0c0c, transparent 82%); }
.gl-meta { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.gl-sys { display: grid; gap: 0.55rem; }
.gl-sys-head { position: relative; display: flex; align-items: center; justify-content: space-between; }
.gl-sys-head p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.gl-help { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--line); font-family: var(--ui-font); font-size: 0.875rem; font-weight: 700; color: #ffffff; cursor: pointer; }
.gl-legend { position: absolute; top: 1.9rem; right: 0; z-index: 2; display: none; gap: 0.35rem; padding: 0.7rem 0.9rem; border: 1px solid var(--edge); border-radius: 0.6rem; background: var(--surface); }
.gl-help:not(.is-shut):hover + .gl-legend, .gl-help:not(.is-shut):focus-visible + .gl-legend, .gl-help[aria-expanded="true"] + .gl-legend { display: grid; }
.gl-legend p { display: flex; align-items: center; gap: 0.55rem; margin: 0; font-size: 0.9375rem; color: var(--soft); white-space: nowrap; }
.gl-dot { display: block; width: 1.4rem; height: 0.3rem; border-radius: 0.15rem; }
.gl-mark { flex: none; width: 1rem; height: 1rem; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-legend .is-on .gl-dot { background: #00ff21; }
.gl-legend .is-plan .gl-dot { background: #f7c548; }
.gl-legend .is-off .gl-dot { background: #ff6b6b; }
.gl-legend .is-on .gl-mark, .gl-os .is-on .gl-mark { stroke: #00ff21; }
.gl-legend .is-plan .gl-mark, .gl-os .is-plan .gl-mark { stroke: #f7c548; }
.gl-legend .is-off .gl-mark, .gl-os .is-off .gl-mark { stroke: #ff6b6b; }
.gl-os { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 0.9rem; list-style: none; }
.gl-os li { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.35rem; height: 3.3rem; padding: 0 0.5rem; }
.gl-os li:nth-child(even) { border-left: 1px solid var(--edge); }
.gl-os li:nth-child(n+3) { border-top: 1px solid var(--edge); }
.gl-os li::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 0.25rem; }
.gl-os .gl-mark { width: 0.95rem; height: 0.95rem; }
.gl-name { font-family: var(--ui-font); font-size: 1rem; font-weight: 700; color: var(--soft); }
.gl-os .is-on { background: color-mix(in srgb, #00ff21, transparent 92%); }
.gl-os .is-on .gl-name { color: #ffffff; }
.gl-os .is-off .gl-name { color: var(--muted); }
.gl-os .is-on::after { background: #00ff21; }
.gl-os .is-plan::after { background: #f7c548; }
.gl-os .is-off::after { background: #ff6b6b; }
.gl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gl-gh { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.9rem; border: 1px solid var(--edge); border-radius: 0.9rem; font-family: var(--ui-font); font-size: 1.0625rem; font-weight: 700; color: #ffffff; text-decoration: none; transition: border-color 0.2s; }
.gl-gh:hover { border-color: var(--accent); }
.gl-gh-logo { display: block; flex: none; width: 1.7rem; height: 1.7rem; background: #ffffff; -webkit-mask: url('/assets/logos/github.svg') center / contain no-repeat; mask: url('/assets/logos/github.svg') center / contain no-repeat; }
.gl-out { flex: none; width: 1.15rem; height: 1.15rem; margin-left: auto; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gl-note { display: flex; align-items: flex-start; gap: 0.6rem; margin: -0.35rem 0 0; padding: 0.6rem 0.75rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: var(--muted); text-decoration: none; transition: background 0.2s; }
.gl-note:hover { background: color-mix(in srgb, var(--surface), var(--page) 20%); color: var(--soft); }
.gl-note .gl-out { margin-top: 0.15rem; }
.gl-info { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
html.motion-off .gl-dl, html.motion-off .gl-gh, html.motion-off .gl-note { transition: none; }
.button { display: inline-block; padding: 0.7rem 1.4rem; border: 2px solid var(--accent); border-radius: 0.6rem; background: var(--accent); color: #0c0c0c; font-family: var(--ui-font); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
a.button:hover { background: transparent; color: var(--accent); }
.button.is-off { border-color: var(--line); background: none; color: var(--soft); }
.ap-toc-title { margin: 1.5rem 0 0.4rem; padding-top: 1.1rem; border-top: 2px solid var(--edge); font-size: 1rem; color: var(--muted); }
.ap-toc { display: grid; }
.ap-toc a { display: flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0; font-size: 1.1875rem; font-weight: 400; color: var(--soft); text-decoration: none; }
.ap-toc a::before { content: ''; flex: none; width: 1.1rem; height: 2px; background: currentColor; transition: width 0.2s; }
.ap-toc a:hover, .ap-toc a[aria-current] { color: var(--accent); }
.ap-toc a:hover::before, .ap-toc a[aria-current]::before { width: 1.6rem; }
html.motion-off .ap-toc a::before { transition: none; }
.ap-tabs { position: sticky; top: var(--bar-h); z-index: 2; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; margin: 0 0 1.25rem; padding: 0.8rem 0; border-bottom: 2px solid var(--edge); background: var(--page); font-family: var(--ui-font); font-size: 1.0625rem; font-weight: 700; }
.ap-tabs a { color: #ffffff; text-decoration: none; }
.ap-tabs a:hover, .ap-tabs a[aria-current] { color: var(--accent); }

.app-section { margin-bottom: 2.75rem; }
.app-section, .cmd-cat, .release, .faq { scroll-margin-top: calc(var(--bar-h) + var(--links-h, 52px) + 12px); }
.app-section:focus { outline: none; }
.app-section > h2 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.1rem; font-family: var(--ui-font); font-size: 1.625rem; font-weight: 700; line-height: 1.5; color: #ffffff; }
.app-section > h2::after { content: ''; flex: 1; height: 0.8rem; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.8rem) 100%, 0 100%); }
.app-section > h3 { margin: 1.5rem 0 0.4rem; font-family: var(--ui-font); font-size: 1.3125rem; color: #ffffff; }
.app-section p, .app-section li { max-width: 50rem; font-size: 1.125rem; line-height: 1.6; color: var(--soft); }
.app-section p { margin: 0 0 1rem; }
.app-section ul { margin: 0 0 1rem; padding-left: 1.4rem; }
.app-section li { margin-bottom: 0.4rem; }
.app-section li::marker { color: var(--accent); }
.app-section strong { color: #ffffff; }
.app-section code { padding: 0.05rem 0.35rem; border-radius: 0.3rem; background: var(--raise); color: #ffffff; font-size: 0.95em; }
.app-section p:not(.cmd-cats) a:not(.button), .app-section li a { color: var(--accent); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }

.shots { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.6rem; max-width: 56rem; aspect-ratio: 16 / 9; margin: 1.25rem 0 1.5rem; }
.shots.is-two { grid-template-rows: 1fr; aspect-ratio: 16 / 7; }
.shots.is-one { grid-template-columns: 1fr; grid-template-rows: auto; aspect-ratio: auto; }
.shot { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--card); }
.shot:first-child { grid-row: span 2; }
.shots.is-two .shot:first-child, .shots.is-one .shot:first-child { grid-row: auto; }
.shot[hidden] { display: none; }
.shot img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: left top; transition: transform 0.3s; }
.shots.is-one .shot img { height: auto; object-fit: fill; }
.shot:hover { border-color: var(--accent); }
.shot:hover img { transform: scale(1.03); }
html.motion-off .shot img { transition: none; }
.shot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.shot-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.6); color: #ffffff; font-family: var(--ui-font); font-size: 1.75rem; font-weight: 700; }
.shots-note { max-width: 56rem; margin: -0.75rem 0 1.5rem; font-size: 1rem; color: var(--muted); }

.release { margin: 0 0 0.9rem; padding: 1.1rem 1.4rem; border: 1px solid var(--edge); border-radius: 0.9rem; background: var(--surface); }
.release.is-latest { border-color: var(--accent); }
.release h3 { display: inline; margin: 0; font-family: var(--ui-font); font-size: 1.375rem; color: #ffffff; }
.release h3 time { margin-left: 0.6rem; font-family: var(--body-font); font-size: 1rem; font-weight: 400; color: var(--muted); }
.release h4 { margin: 1rem 0 0.35rem; font-size: 1rem; color: var(--accent); }
.release ul { margin: 0; }
.release li { font-size: 1.0625rem; }
details.release > summary { list-style: none; cursor: pointer; }
details.release > summary::-webkit-details-marker { display: none; }
details.release > summary::before { content: '+'; display: inline-block; width: 1.4rem; color: var(--accent); font-weight: 800; }
details.release[open] > summary::before { content: '-'; }
details.release > summary h3 { display: inline; }
details.release:hover { border-color: var(--line); }
.release-note { font-size: 1rem; color: var(--muted); }

.faq { max-width: 52rem; border-top: 2px solid var(--edge); }
.faq:last-of-type { border-bottom: 2px solid var(--edge); }
.faq > summary { display: flex; gap: 0.75rem; padding: 0.9rem 0; list-style: none; font-family: var(--ui-font); font-size: 1.1875rem; font-weight: 700; color: #ffffff; cursor: pointer; }
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before { content: '+'; flex: none; width: 1rem; color: var(--accent); }
.faq[open] > summary::before { content: '-'; }
.faq > summary:hover { color: var(--accent); }
.faq > p { margin-left: 1.75rem; }

.cmd-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.5rem; }
.app-section .cmd-cats a { padding: 0.35rem 0.85rem; border: 1px solid var(--line); border-radius: 0.5rem; font-family: var(--ui-font); font-size: 1rem; font-weight: 700; color: var(--soft); text-decoration: none; }
.app-section .cmd-cats a:hover { border-color: var(--accent); color: var(--accent); }
.cmd-cat { margin-bottom: 1.75rem; }
.cmd-cat h3 { margin: 0 0 0.2rem; font-family: var(--ui-font); font-size: 1.375rem; color: #ffffff; }
.cmd-toggle { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: default; }
html.cmds-closed .cmd-cat:not(.is-open) .cmd-list, html.cmds-closed .cmd-cat:not(.is-open) .meta { display: none; }
html.cmds-closed .cmd-toggle { cursor: pointer; }
html.cmds-closed .cmd-toggle::before { content: '+'; display: inline-block; width: 1.3rem; color: var(--accent); }
html.cmds-closed .cmd-cat.is-open .cmd-toggle::before { content: '-'; }
html.cmds-closed .cmd-toggle:hover { color: var(--accent); }
.app-section .cmd-cat .meta { margin: 0 0 0.6rem; font-size: 1rem; color: var(--muted); }
.app-section .cmd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 0.5rem; padding: 0; list-style: none; }
.app-section .cmd-list li { max-width: none; margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--edge); border-radius: 0.7rem; background: var(--surface); font-size: 1rem; line-height: 1.45; }
.app-section .cmd-list code { display: block; margin-bottom: 0.2rem; padding: 0; background: none; color: var(--accent); font-family: var(--ui-font); font-size: 1.0625rem; font-weight: 700; }

html.show-open { overflow: hidden; }
.show { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: rgba(8, 8, 8, 0.97); color: #f2f2f2; }
.show[hidden] { display: none; }
.show-bars { display: flex; gap: 5px; padding: 14px 18px 0; }
.show-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--edge); }
.show-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b6b, #ffe066, #69db7c, #4dabf7, #f783ac); transform: scaleX(var(--fill, 0)); transform-origin: left center; }
.show-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 18px; }
.show-count { margin: 0; color: var(--accent); font-family: var(--ui-font); font-weight: 700; }
.show-tools { display: flex; gap: 10px; margin: 0; }
.show-btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--edge); border-radius: 50%; background: var(--surface); color: #ffffff; cursor: pointer; }
.show-btn:hover, .show-btn:focus-visible { border-color: var(--accent); background: var(--accent); color: #0c0c0c; }
.show-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.show svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.show .icon-play path { fill: currentColor; stroke: none; }
.show-play .icon-play { display: none; }
.show.is-paused .show-play .icon-play { display: block; }
.show.is-paused .show-play .icon-pause { display: none; }
.show-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 18px; touch-action: pan-y; }
.show-frame { position: relative; max-width: 100%; }
.show-img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 200px); margin: 0; border: 1px solid var(--edge); border-radius: 10px; opacity: 0; transition: opacity 0.2s; }
.show-img.is-in { opacity: 1; }
html.motion-off .show-img { transition: none; }
.show-tap { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; width: 40%; padding: 0 10px; border: 0; background: none; color: #ffffff; cursor: pointer; }
.show-tap.is-prev { left: 0; justify-content: flex-start; }
.show-tap.is-next { right: 0; justify-content: flex-end; }
.show-tap svg { box-sizing: content-box; padding: 11px; border-radius: 50%; background: rgba(0, 0, 0, 0.75); opacity: 0; }
.show-tap:hover svg, .show-tap:focus-visible svg { opacity: 1; }
.show-tap:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.show-cap { max-width: 46rem; margin: 0 auto; padding: 14px 18px 22px; text-align: center; font-size: 1rem; }

@container (min-width: 70rem) {
  .ap-cols { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; column-gap: 3rem; align-items: start; }
  .ap-side { order: 0; position: sticky; top: 2rem; margin: 0; }
  .ap-side .ap-toc-title, .ap-side .ap-toc { display: block; }
  .ap-toc-card { display: block; }
  .ap-side.has-glance { position: static; align-self: stretch; }
  .ap-side.has-glance .ap-toc-card { position: sticky; top: 2rem; }
  .ap-tabs { display: none; }
  .app-section, .cmd-cat, .release, .faq { scroll-margin-top: 1.5rem; }
}

.nf-links { display: grid; gap: 0.2rem; margin: 0 0 3rem; padding: 0; list-style: none; }
.nf-links a { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.3rem 0; font-size: 1.25rem; font-weight: 400; color: var(--soft); text-decoration: none; }
.nf-links a::before { content: ''; flex: none; width: 1.25rem; height: 2px; background: currentColor; transition: width 0.2s; }
.nf-links a:hover { color: var(--accent); }
.nf-links a:hover::before { width: 1.75rem; }
html.motion-off .nf-links a::before { transition: none; }
.nf-de { max-width: 46rem; padding-top: 1.5rem; border-top: 2px solid var(--edge); }
.nf-de h2 { margin: 0 0 0.5rem; font-family: var(--body-font); font-size: 1.75rem; font-style: var(--slant); font-weight: 800; color: #ffffff; }
.nf-de p { margin: 0 0 1rem; font-size: 1.125rem; color: var(--soft); }

.page-root { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.root-choice { text-align: center; }
.root-choice img { width: 9rem; height: 9rem; margin: 0 auto 1.5rem; border-radius: 50%; object-fit: cover; }
.root-choice h1 { margin: 0 0 1.75rem; line-height: 1.2; }
.root-choice .brand { font-size: clamp(2rem, 8vw, 3rem); }
.root-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.page-maintenance { display: flex; flex-direction: column; min-height: 100vh; }
.maint-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.375rem 1.5rem; background: var(--side); }
.langs { display: flex; gap: 1.5rem; }
.lang { padding: 0.2rem 0; border: 0; background: none; font-size: 1.1875rem; color: var(--text); cursor: pointer; }
.lang:hover { color: var(--accent); }
.lang.is-on { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.1875rem; text-underline-offset: 0.4rem; }
.maint { width: min(100%, 52rem); margin: 0 auto; padding: 10vh 1.5rem 2rem; }
.maint h1 { margin: 0 0 1.25rem; font-family: var(--body-font); font-size: min(4.25rem, 9vw); font-style: var(--slant); font-weight: 800; line-height: 1.05; color: #ffffff; }
.maint .lead { margin: 0 0 0.6rem; font-size: 1.375rem; font-style: var(--slant); font-weight: 700; line-height: 1.4; color: #ffffff; }
.maint-meadow { width: min(100% - 3rem, 26rem); margin: 1rem auto 2.5rem; }
.maint-meadow .meadow { margin: 0; }
.legal { width: min(100%, 52rem); margin: auto auto 0; padding: 0 1.5rem 2.5rem; font-size: 1.0625rem; }
.legal details { display: inline-block; margin-right: 1.6rem; vertical-align: top; }
.legal details[open] { display: block; margin: 0 0 1rem; }
.legal summary { color: var(--muted); font-weight: 700; cursor: pointer; list-style: none; }
.legal summary::-webkit-details-marker { display: none; }
.legal summary:hover, .legal details[open] summary { color: var(--accent); }
.legal summary[aria-expanded="true"] { color: #ffffff; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.1875rem; text-underline-offset: 0.4rem; }
.page-maintenance .legal-text { margin-top: 0.9rem; }
.page-maintenance .legal-text h2 { margin: 0.4rem 0 0.6rem; font-family: var(--ui-font); font-size: 1.375rem; color: #ffffff; }
.page-maintenance .legal-text h3 { margin: 1.1rem 0 0.3rem; font-family: var(--ui-font); font-size: 1.125rem; color: #ffffff; }
.page-maintenance .legal-text p { margin: 0 0 0.6rem; line-height: 1.6; color: var(--soft); }
.page-maintenance .legal-text strong { color: #ffffff; }
.page-maintenance .legal-text a { color: var(--accent); font-weight: 400; }
.legal-date { color: var(--muted); }
.legal-set { display: inline; }
.motion { display: inline-flex; align-items: center; gap: 0.6rem; vertical-align: top; color: var(--muted); font-weight: 700; cursor: pointer; }
.motion:hover { color: var(--accent); }
.motion input { display: grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; margin: 0; border: 2px solid #ffffff; border-radius: 0.2rem; background: none; appearance: none; cursor: pointer; }
.motion input:checked { border-color: var(--accent); background: var(--accent); }
.motion input:checked::after { content: ''; width: 0.35rem; height: 0.65rem; margin-top: -0.15rem; border: solid var(--side); border-width: 0 0.15rem 0.15rem 0; transform: rotate(45deg); }
.sheet { position: fixed; top: 0; right: 0; bottom: 0; z-index: 4; width: min(46rem, 100%); padding: 5rem 2.5rem 3rem; overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--edge); background: var(--side); font-size: 1rem; visibility: hidden; transform: translateX(100%); transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.38s; }
.sheet.is-open { visibility: visible; transform: none; transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s; }
.motion-off .sheet { transition: none; }
.sheet-body { max-width: 46rem; }
.page-maintenance .sheet .legal-text { margin-top: 0; }
.sheet-close { position: absolute; top: 1.25rem; right: 1.25rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.sheet-close i { grid-area: 1 / 1; display: block; width: 1.6rem; height: 0.1875rem; border-radius: 2px; background: #ffffff; }
.sheet-close i:first-child { transform: rotate(45deg); }
.sheet-close i:last-child { transform: rotate(-45deg); }
.sheet-close:hover i { background: var(--accent); }

.settings-page, .settings-page * { overflow-anchor: none; }
.settings-page .ap-side { display: none; }
.set-jump { position: relative; z-index: 3; }
.set-jump[data-jump-bar] { position: sticky; top: var(--bar-h); margin: 0 0 1.25rem; padding: 0.6rem 0; background: var(--page); }
.set-jump-btn { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.75rem 1rem 0.75rem 0.8rem; border: 1px solid var(--edge); border-radius: 1.125rem; background: var(--surface); color: #ffffff; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s; }
.set-jump-btn:hover, .set-jump-btn[aria-expanded="true"] { border-color: var(--accent); }
.set-jump-ic { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 0.8rem; background: var(--page); }
.set-jump img { display: block; flex: none; width: 1.6rem; height: 1.6rem; }
.set-jump-text { display: grid; flex: 1; min-width: 0; }
.set-jump-cap { font-size: 0.875rem; color: var(--muted); }
.set-jump-now { overflow: hidden; font-family: var(--ui-font); font-size: 1.1875rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.set-jump-chev { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--soft); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.set-jump-btn[aria-expanded="true"] .set-jump-chev { transform: rotate(180deg); }
.set-jump-list { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; display: grid; gap: 0.1rem; max-height: calc(100vh - var(--bar-h) - 7rem); overflow-y: auto; padding: 0.4rem; border: 1px solid var(--edge); border-radius: 1.125rem; background: var(--surface); }
.set-jump[data-jump-bar] .set-jump-list { top: calc(100% - 0.2rem); }
html.js .set-jump-list:not(.is-open) { display: none; }
html:not(.js) .set-jump-btn { display: none; }
html:not(.js) .set-jump-list { position: static; }
html:not(.js) .set-jump[data-jump-bar] { position: static; }
.set-jump-list a { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.7rem; border-radius: 0.75rem; font-size: 1.0625rem; color: var(--soft); text-decoration: none; }
.set-jump-list a img { width: 1.4rem; height: 1.4rem; }
.set-jump-list a:hover, .set-jump-list a:focus-visible { background: color-mix(in srgb, var(--accent), transparent 90%); color: #ffffff; outline: none; }
.set-jump-list a[aria-current] { color: var(--accent); }
html.motion-off .set-jump-btn { transition: none; }
html.motion-off .set-jump-chev { transition: none; }
html.big-targets .set-jump-list a { min-height: 3rem; }
.set-nojs { margin: 0 0 1.5rem; padding: 0.9rem 1.1rem; border: 1px solid var(--accent); border-radius: 0.6rem; background: var(--surface); font-size: 1.0625rem; color: #ffffff; }
html.js .set-nojs { display: none; }
html:not(.js) .settings-page .set-row:not([data-n="29"]) .set-ctrl, html:not(.js) .settings-page .set-pv-btn { display: none; }
html:not(.js) .set-pv { display: none; }
.set-group { margin-bottom: 3rem; scroll-margin-top: calc(var(--bar-h) + var(--links-h, 6rem) + 12px); }
.set-group > h2 { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 1.1rem; font-family: var(--ui-font); font-size: 1.625rem; font-weight: 700; line-height: 1.5; color: #ffffff; }
.set-group > h2::after { content: ''; flex: 1; height: 0.8rem; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.8rem) 100%, 0 100%); }
.set-list { display: grid; gap: 0.6rem; }
.set-row { display: grid; grid-template-columns: minmax(12rem, 1fr) auto; align-items: center; gap: 0.5rem 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--edge); border-radius: 0.9rem; background: var(--surface); }
.set-name { margin: 0; font-family: var(--ui-font); font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: #ffffff; }
.set-name .set-ic { margin-right: 0.45rem; vertical-align: -0.12em; }
.set-desc { max-width: 40rem; margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.45; color: var(--soft); }
.set-note { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--muted); }
.set-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.85rem; }
.set-idle { margin: 0.3rem 0 0; font-size: 0.9375rem; line-height: 1.4; color: var(--soft); }
.set-row.is-idle :is(.set-name, .set-desc, .set-ctrl), .set-sub.is-idle > * { opacity: 0.5; }
.set-subs { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; gap: 0.45rem 0.85rem; }
.set-sub { display: contents; }
.set-sub-name { font-family: var(--ui-font); font-size: 0.9375rem; font-weight: 700; text-align: right; color: var(--muted); }
.set-sub .set-seg { justify-content: flex-start; }
.set-ctrl { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 0.9rem; }
.set-seg { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.set-seg button, .set-act, .set-lang { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: 0.5rem; background: none; font-family: var(--ui-font); font-size: 1rem; font-weight: 700; white-space: nowrap; color: var(--soft); text-decoration: none; cursor: pointer; }
.set-seg button:hover, .set-act:hover, a.set-lang:hover { border-color: var(--accent); color: var(--accent); }
.set-seg button[aria-pressed="true"], .set-lang.is-on { border-color: var(--accent); background: var(--accent); color: #0c0c0c; }
.set-lang.is-on { cursor: default; }
.set-sw { flex: none; width: 0.85rem; height: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50%; }
.set-sw.sw-green { background: #00ff21; }
.set-sw.sw-blue { background: #4dabf7; }
.set-sw.sw-orange { background: #ffa94d; }
.set-sw.sw-custom { background: conic-gradient(#ff6b6b, #ffd43b, #69db7c, #4dabf7, #b197fc, #f783ac, #ff6b6b); }
.set-wheel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin: 0.5rem 0 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: 0.9rem; background: var(--page); }
.set-wheel[hidden] { display: none; }
.wheel-disc { position: relative; flex: none; width: 11rem; height: 11rem; touch-action: none; cursor: crosshair; }
.wheel-canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.wheel-knob { position: absolute; left: var(--kx, 50%); top: var(--ky, 50%); width: 1.5rem; height: 1.5rem; margin: -0.75rem 0 0 -0.75rem; border: 3px solid #ffffff; border-radius: 50%; background: var(--wheel-c); outline: 1px solid #0c0c0c; }
.wheel-knob:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.wheel-side { display: grid; flex: 1; gap: 0.7rem; min-width: min(14rem, 100%); }
.wheel-pv { display: grid; gap: 0.8rem; padding: 1rem 1.1rem; border: 1px solid var(--edge); border-radius: 0.75rem; background: var(--surface); }
.wheel-head { display: flex; align-items: center; gap: 0.75rem; margin: 0; font-family: var(--ui-font); font-size: 1.25rem; font-weight: 700; color: #ffffff; }
.wheel-head::after { content: ''; flex: 1; height: 0.7rem; background: linear-gradient(90deg, var(--wheel-c), color-mix(in srgb, var(--wheel-c), #000000 55%)); clip-path: polygon(0 0, 100% 0, calc(100% - 0.7rem) 100%, 0 100%); }
.wheel-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 0; }
.wheel-btn { padding: 0.45rem 0.9rem; border-radius: 0.5rem; background: var(--wheel-c); font-family: var(--ui-font); font-weight: 700; color: #0c0c0c; }
.wheel-line .facts-ver { color: var(--wheel-c); }
.wheel-value { margin: 0; font-size: 0.9375rem; color: var(--soft); }
.wheel-note { margin: 0; font-size: 0.875rem; color: var(--muted); }
.set-seg button[aria-pressed="true"] .set-sw { border: 2px solid #0c0c0c; }
.set-switch { position: relative; flex: none; width: 3.25rem; height: 1.85rem; padding: 0; border: 2px solid var(--switch-edge); border-radius: 1rem; background: none; cursor: pointer; }
.set-switch::after { content: ''; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--soft); transition: transform 0.2s; }
.set-switch[aria-checked="true"] { border-color: var(--accent); background: var(--accent); }
.set-switch[aria-checked="true"]::after { background: #0c0c0c; transform: translateX(1.4rem); }
.set-switch:hover { border-color: var(--accent); }
html.motion-off .set-switch::after { transition: none; }
.set-data { grid-column: 1 / -1; margin: 0.4rem 0 0; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--page); }
.set-data p { margin: 0 0 0.5rem; font-size: 1rem; color: var(--soft); }
.set-data pre { margin: 0 0 0.75rem; white-space: pre-wrap; word-break: break-all; font-size: 0.875rem; color: #ffffff; }
.set-pv .ap-card-title { margin-bottom: 0.35rem; }
.pv-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin-bottom: 0.35rem; }
.pv-head .ap-card-title { margin: 0; }
.pv-mode button { padding: 0.2rem 0.6rem; font-size: 0.875rem; }
.set-row .pv-mode { display: none; }
.pv-name { display: flex; align-items: center; gap: 0.6rem; min-height: 1.75rem; margin: 0 0 0.9rem; font-family: var(--ui-font); font-size: 1.0625rem; font-weight: 700; color: var(--soft); }
.pv-stage:has(.pg-archive) { align-content: start; }
.pv-stage { position: relative; display: grid; align-content: center; min-height: 14.5rem; max-height: 24rem; padding: 0.9rem; overflow: hidden; border: 1px solid var(--edge); border-radius: 0.8rem; background: var(--page); }
.pv-ab { justify-content: flex-start; margin: 0.9rem 0 0; }
.pv-what { margin: 0.8rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--soft); }
.pv-what strong { color: #ffffff; }
.pv-note { display: block; margin-top: 0.4rem; color: var(--muted); }
.pv-zoom { pointer-events: none; }
.pv-stage .label-row { width: auto; margin: 0 0 0.9rem; }
.pv-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; }
.pv-stage .meadow { margin: 0; }
.pv-center { margin: 1rem 0; text-align: center; }
.pv-big { margin: 0 0 0.5rem; font-family: var(--body-font); font-size: 2rem; font-style: var(--slant); font-weight: 800; line-height: 1.1; color: #ffffff; }
.pv-small, .pv-para { margin: 0; font-family: var(--body-font); font-size: 1rem; line-height: 1.5; color: var(--soft); }
html.lines-wide .pv-para { line-height: 1.95; }
.pv-link { color: var(--accent); }
html.links-under .pv-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.pv-hint { margin: 0.6rem 0 0; font-size: 0.875rem; color: var(--muted); text-align: center; }
.pv-stage .dinos { display: block; grid-area: auto; justify-self: center; width: 7rem; height: 7rem; margin: 4.75rem auto 2.25rem; }
.pv-stage .bubble { max-width: 15rem; }
.pv-stage.is-both .dinos { width: 5.5rem; height: 5.5rem; margin: 3.5rem auto 0.9rem; }
.pv-stage.is-idle { align-content: end; }
.pv-stage.is-idle .dinos { width: 8rem; height: 8rem; margin: 10.25rem auto 0.5rem; }
.pv-stage.is-idle .bubble { left: 50%; width: 15rem; max-width: none; margin-left: -7.5rem; --tail-x: 50%; }
.pv-stage.is-talk { align-content: start; }
.pv-stage.is-talk .pv-hint { display: none; }
.pv-stage.is-talk .dinos { justify-self: end; width: 5.5rem; height: 5.5rem; margin: 0.25rem 0.25rem 0 0; }
.pv-stage.is-talk .bubble { --bt: translateY(0); top: 0; right: calc(100% + 0.9rem); bottom: auto; left: auto; max-width: 12rem; font-size: 0.9375rem; transform: scale(0.7); transform-origin: 100% 50%; }
.pv-stage.is-talk .bubble.is-on { transform: scale(1); }
.pv-stage.is-talk .bubble.is-reply { top: var(--lift, 3.4rem); }
.pv-stage.is-talk .bubble::before, .pv-stage.is-talk .bubble::after { top: 50%; border-color: transparent; border-right-width: 0; border-bottom-width: 0; }
.pv-stage.is-talk .bubble::before { left: calc(100% + 2px); margin: -0.65rem 0 0; border-width: 0.65rem 0 0.65rem 0.7rem; border-left-color: var(--bubble-line); }
.pv-stage.is-talk .bubble::after { left: 100%; margin: -0.45rem 0 0; border-width: 0.45rem 0 0.45rem 0.5rem; border-left-color: var(--bubble-bg); }
.pv-stage .facts { display: block; margin: 0; padding: 1rem 1.1rem; }
.pv-stage .facts ul { display: grid; }
.pv-stage .set-seg { justify-content: center; }
.pv-stage .apps.pv-one { grid-template-columns: minmax(0, 1fr); max-width: 17rem; margin: 0 auto; }
.pv-frame { display: flex; height: 9.5rem; overflow: hidden; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--page); }
.pv-frame.is-right { flex-direction: row-reverse; }
.pv-fside { display: flex; flex: none; flex-direction: column; gap: 0.4rem; width: 32%; padding: 0.6rem 0.55rem; background: var(--side); }
.pv-frame.is-closed .pv-fside { display: none; }
.pv-fline { display: block; width: 75%; height: 0.25rem; border-radius: 2px; background: #ffffff; opacity: 0.75; }
.pv-fline.is-short { width: 50%; }
.pv-fmeadow { display: block; height: 1.7rem; margin-top: auto; border-radius: 0.3rem; background: linear-gradient(#7a3170, #f39a4a 55%, #2c6436 55%); }
.pv-fpage { display: flex; flex: 1; flex-direction: column; gap: 0.45rem; padding: 0.65rem 0.75rem; }
.pv-fburger { display: none; width: 0.9rem; height: 0.55rem; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; }
.pv-frame.is-closed .pv-fburger { display: block; }
.pv-fhead { display: block; width: 60%; height: 0.75rem; border-radius: 2px; background: #ffffff; }
.pv-fbar { display: block; width: 90%; height: 0.35rem; background: var(--accent); }
.pv-ftiles { display: grid; flex: 1; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.pv-ftiles i { border: 1px solid var(--line); border-radius: 0.3rem; background: var(--card); }
.pv-side { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.7rem; background: var(--side); }
.pv-side .meadow { height: 6.5rem; margin-top: 0.6rem; }
html.no-meadow .pv-side .meadow { display: none; }
.pv-show-bars { display: flex; gap: 4px; }
.pv-show-bars i { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--edge); }
.pv-show-bars i.is-done, .pv-show-bars i.is-now::after { background: linear-gradient(90deg, #ff6b6b, #ffe066, #69db7c, #4dabf7, #f783ac); }
.pv-show-bars i.is-now::after { content: ''; position: absolute; inset: 0; transform-origin: left center; animation: pv-fill var(--ms, 6000ms) linear infinite; }
@keyframes pv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pv-show.is-hand .pv-show-bars i.is-now::after, html.motion-off .pv-show-bars i.is-now::after { animation: none; transform: scaleX(0.35); }
.pv-show-pic { display: flex; align-items: center; justify-content: space-between; height: 6.5rem; margin: 0.6rem 0 0; padding: 0 0.7rem; border: 1px solid var(--edge); border-radius: 0.5rem; background: linear-gradient(135deg, var(--edge), var(--surface)); }
.pv-arrow { width: 0.6rem; height: 0.6rem; border-bottom: 2px solid #ffffff; border-left: 2px solid #ffffff; transform: rotate(45deg); }
.pv-arrow.is-r { transform: rotate(-135deg); }
.pv-show:not(.is-hand) .pv-arrow { opacity: 0.35; }
.pv-keys p { display: flex; align-items: center; margin: 0 0 0.6rem; font-size: 1rem; color: var(--soft); }
.pv-keys kbd { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; margin-right: 0.7rem; border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 0.35rem; font-family: var(--ui-font); font-weight: 700; color: #ffffff; }
.pv-keys.is-off { opacity: 0.45; }
.pv-focus { outline: 3px solid var(--accent); outline-offset: 3px; }
html.focus-strong .pv-focus { outline-width: 0.3rem; outline-offset: 0.3rem; }
.set-row > .set-pv { grid-column: 1 / -1; margin-top: 0.6rem; }
.set-pv-btn { display: none; flex: none; align-items: center; gap: 0.3rem; padding: 0; border: 0; background: none; font-family: var(--ui-font); font-size: 0.875rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.set-pv-btn .set-ic { width: 1.05em; height: 1.05em; }
html.pv-fixed .set-pv-btn { display: inline-flex; }
.set-pv-btn:hover, .set-pv-btn[aria-expanded="true"] { color: var(--accent); }
html.big-targets .set-pv-btn { min-height: 3rem; }
@container (width < 70rem) {
  .set-pv-btn { display: inline-flex; }
}
@container (min-width: 70rem) {
  .settings-page .ap-side { display: grid; align-content: start; gap: 1rem; max-height: calc(100vh - 4rem); overflow-y: auto; scrollbar-width: thin; }
  .set-jump[data-jump-bar] { display: none; }
  .set-group { scroll-margin-top: 1.5rem; }
}
@container (max-width: 46rem) {
  .set-row { grid-template-columns: minmax(0, 1fr); }
  .set-head { justify-content: space-between; }
  .set-ctrl { grid-column: 1; justify-content: flex-start; }
  .set-seg { justify-content: flex-start; }
  .set-subs { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .set-sub-name { margin-top: 0.3rem; text-align: left; }
}
html.brand-still .brand, html.brand-still .hero-2 { animation: none; }
html.brand-accent .brand, html.brand-accent .hero-2 { background: none; color: var(--accent); animation: none; }
html.side-right .side { right: 0; left: auto; }
html.side-right .main { margin-right: var(--side-w); margin-left: 0; padding-right: 6rem; padding-left: 4rem; }
html.side-right.side-closed .side { transform: translateX(100%); }
html.side-right.side-closed .main { margin-right: 0; }
html.side-right .burger-float { right: 1.5rem; left: auto; }
html.compact .main { padding-top: 2.5rem; }
html.compact .block { margin-top: 2rem; }
html.compact .block + .block { margin-top: 3.25rem; }
html.compact .tile { gap: 0.35rem; padding: 1rem 0.5rem; }
html.compact .tile-icon { width: 5rem; height: 5rem; border-radius: 1.25rem; }
html.compact .hero-intro { margin-top: 1.25rem; }
html.compact .dinos { --talk-pad: 1.25rem; }
html.compact .card { padding: 0.75rem 1.1rem 0.85rem; }
html.compact .set-row { padding: 0.65rem 1rem; }
html.compact .set-list { gap: 0.4rem; }
html.tiles-plain .tile { border-color: transparent; }
html.size-80 { font-size: max(80%, 0.6667vw); }
html.size-90 { font-size: max(90%, 0.75vw); }
html.size-115 { font-size: max(115%, 0.9583vw); }
html.size-130 { font-size: max(130%, 1.0833vw); }
html.font-quicksand { --body-font: 'Quicksand', 'Nunito', system-ui, sans-serif; }
html.font-system { --body-font: system-ui, 'Segoe UI', sans-serif; --ui-font: system-ui, 'Segoe UI', sans-serif; }
html.font-dyslexic { --body-font: 'OpenDyslexic', 'Nunito', system-ui, sans-serif; --ui-font: 'OpenDyslexic', 'Nunito', system-ui, sans-serif; --side-w: 25.5rem; }
html.font-dyslexic .hero-1 { font-size: min(7rem, 4.2vw, 11.5cqi); }
html.font-dyslexic .dinos { --talk-font: 2.5rem; }
html.size-115 .hero-2, html.size-130 .hero-2, html.font-system .hero-2 { font-size: min(4rem, 3.4vw, 12cqi); }
html.font-dyslexic .hero-2 { font-size: min(4rem, 2.4vw, 8.3cqi); }
html.hello-small .hero-1 { font-size: min(3.75rem, 3.4vw, 15.8cqi); }
html.hello-small .hero-2 { margin-top: 0.4rem; font-size: min(2.5rem, 2.2vw, 12cqi); }
html.hello-small.font-dyslexic .hero-2 { font-size: min(2.5rem, 2.2vw, 8.3cqi); }
html.hello-small .dinos { --talk-small: 4rem; width: 8.5rem; height: 8.5rem; }
html.hello-small .hero-intro { margin-top: 1rem; font-size: 1.3rem; }
html.fav-dinopulse .apps li[data-app="dinopulse"], html.fav-dinopulse .facts li[data-app="dinopulse"], html.fav-greendino .apps li[data-app="greendino"], html.fav-greendino .facts li[data-app="greendino"], html.fav-dinomark .apps li[data-app="dinomark"], html.fav-dinomark .facts li[data-app="dinomark"] { order: -1; }
html.focus-strong :focus-visible { outline: 0.3rem solid var(--accent); outline-offset: 0.3rem; }
html.big-targets .side-item, html.big-targets .side-apps a, html.big-targets .ap-toc a { min-height: 3rem; }
html.big-targets .ap-tabs a, html.big-targets .cmd-cats a, html.big-targets .button, html.big-targets .button-quiet { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; }
html.big-targets .pg-archive .filters button, html.big-targets .set-seg button, html.big-targets .set-act { min-height: 3rem; padding-right: 1.1rem; padding-left: 1.1rem; }
html.big-targets .show-btn { width: 3rem; height: 3rem; }
html.big-targets .set-switch { width: 3.75rem; height: 2.2rem; }
html.big-targets .set-switch::after { width: 1.45rem; height: 1.45rem; }
html.big-targets .set-switch[aria-checked="true"]::after { transform: translateX(1.5rem); }
html.size-130 :is(h1, h2, h3), html.font-dyslexic :is(h1, h2, h3) { hyphens: auto; }
html.lines-wide body { line-height: 1.8; }
html.lines-wide .app-section p, html.lines-wide .app-section li, html.lines-wide .legal-text p, html.lines-wide .legal-text li, html.lines-wide .entry-text p, html.lines-wide .entry-text li, html.lines-wide .card-lead, html.lines-wide .row-lead, html.lines-wide .set-desc { line-height: 1.95; }
html.upright { --slant: normal; }
html.links-under .main a:not(.tile):not(.card):not(.button):not(.button-quiet):not(.shot):not(.newer):not(.older):not([hreflang]):not(.cmd-cats a):not(.more-list a), html.links-under .side a:not(.brand):not([hreflang]) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
html.contrast { --soft: #f5f5f5; --muted: #d4d4d4; --line: #9a9a9a; }
html.contrast { --switch-edge: var(--line); }

@media (min-width: 961px) {
  html.hello-small.font-dyslexic .hero-1 { font-size: min(3.75rem, 3.4vw, 11.5cqi); }
  html.hello-small .hero { grid-template-areas: "title dinos" "intro dinos"; }
  .hero .bubble.is-reply { right: -2rem; }
  @container (max-width: 46rem) {
    .hero { column-gap: 1.5rem; }
    .hero .dinos { --talk-room: 9rem; width: 9rem; height: 9rem; }
    html.font-dyslexic .hero .dinos { --talk-font: 4.5rem; }
    .hero .bubble { max-width: calc(100% + 4rem); font-size: 0.9375rem; }
    .hero .bubble.is-reply { right: -3rem; max-width: calc(100% + 3.75rem); }
    html.size-115 .apps, html.size-130 .apps, html.font-dyslexic .apps { grid-template-columns: minmax(0, 1fr); }
    html.size-115 .tile, html.size-130 .tile, html.font-dyslexic .tile { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 1rem; row-gap: 0.15rem; padding: 0.75rem 1rem; overflow-wrap: anywhere; text-align: left; }
    html.size-115 .tile > *, html.size-130 .tile > *, html.font-dyslexic .tile > * { grid-column: 2; }
    html.size-115 .tile-icon, html.size-130 .tile-icon, html.font-dyslexic .tile-icon { grid-column: 1; grid-row: 1 / span 3; width: 3.25rem; height: 3.25rem; border-radius: 0.8rem; }
    html.size-115 .tile-name, html.size-130 .tile-name, html.font-dyslexic .tile-name { margin: 0; }
  }
  @container (max-width: 30rem) {
    .hero { column-gap: 1rem; }
    .hero .dinos, html.hello-small .hero .dinos { --talk-room: 10.5rem; width: 6.5rem; height: 6.5rem; }
    .hero-intro { font-size: 1.375rem; }
    .hero .bubble:not(.is-reply) { left: -0.5rem; }
    .hero .bubble, .hero .bubble.is-reply { max-width: calc(100% + 3.5rem); }
  }
}

@media (max-width: 960px) {
  html { font-size: 100%; }
  :root { --bar-h: 4rem; }
  .main, html.side-closed .main { margin-left: 0; padding: 5.5rem 1.25rem 3rem; }
  html.size-80 { font-size: 80%; }
  html.size-90 { font-size: 90%; }
  html.size-115 { font-size: 115%; }
  html.size-130 { font-size: 130%; }
  html.side-right .main { margin-right: 0; padding-right: 1.25rem; padding-left: 1.25rem; }
  html.compact .main { padding-top: 5rem; }
  html.compact .block { margin-top: 1.75rem; }
  html.compact .block + .block { margin-top: 2.25rem; }
  html.compact .tile { padding: 0.75rem 0.3rem 0.7rem; }
  html.compact .tile-icon { width: 3.25rem; height: 3.25rem; border-radius: 0.8rem; }
  html.compact .hero-intro { margin-top: 0.9rem; }
  html.size-130 .apps, html.font-dyslexic .apps { grid-template-columns: minmax(0, 1fr); }
  html.size-130 .tile, html.font-dyslexic .tile { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: 1rem; row-gap: 0.15rem; padding: 0.75rem 1rem; text-align: left; }
  html.size-130 .tile-icon, html.font-dyslexic .tile-icon { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; border-radius: 0.8rem; }
  html.size-130 .tile-name, html.font-dyslexic .tile-name { margin: 0; }
  html.font-dyslexic .hero-1 { font-size: min(4.5rem, 7.4vw); }
  html.size-115 .hero-2, html.size-130 .hero-2, html.font-system .hero-2 { font-size: min(3rem, 7vw, 12cqi); }
  html.font-dyslexic .hero-2 { font-size: min(3rem, 6vw, 8.3cqi); }
  html.hello-small .hero-1 { font-size: clamp(1.75rem, 7vw, 3rem); }
  html.hello-small .hero-2 { font-size: min(clamp(1.25rem, 5vw, 2rem), 12cqi); }
  html.hello-small.font-dyslexic .hero-2 { font-size: min(2rem, 5vw, 8.3cqi); }
  html.hello-small .dinos { width: 4.5rem; height: 4.5rem; margin-top: 0.25rem; }
  html.size-130 .ap-hero, html.font-dyslexic .ap-hero { flex-wrap: wrap; }
  html.size-130 .ap-title, html.font-dyslexic .ap-title { font-size: min(3.5rem, 8.5vw); }
  html.size-130 .ap-title.pg-title, html.font-dyslexic .ap-title.pg-title { font-size: min(3rem, 7.5vw); }
  html.size-130 .main, html.font-dyslexic .main { overflow-wrap: anywhere; }
  .phone-bar { position: fixed; top: 0; right: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 1rem; height: var(--bar-h); padding: 0 1.25rem; background: var(--side); }
  .phone-bar .burger { margin: 0 0 0 -0.5rem; }
  .phone-bar .brand, .side .brand { font-size: min(1.375rem, 7vw); }
  .side, html.side-closed .side { width: min(22rem, 100%); visibility: hidden; transform: translateX(-100%); transition: transform 0.3s, visibility 0s linear 0.3s; }
  html.side-right .side { transform: translateX(100%); }
  html.side-open .side { visibility: visible; transform: none; transition: transform 0.3s, visibility 0s; }
  html.side-right.side-open .side { visibility: visible; transform: none; }
  html:not(.js) .side:target { width: min(22rem, calc(100% - 3rem)); visibility: visible; transform: none; transition: none; }
  html.side-open .shade, html:not(.js) .side:target ~ .shade { position: fixed; inset: 0; z-index: 4; display: block; background: rgba(0, 0, 0, 0.55); }
  html.side-open body { overflow: hidden; }
  .burger-float, html.side-closed .burger-float { display: none; }
  .side-item { font-size: 1.3125rem; }
  .side-apps a { font-size: 1.1875rem; }
  .side-legal .side-item, .side-lang a, .side-lang span, .side-version { font-size: 1.0625rem; }
  .hero { column-gap: 0.75rem; }
  .hero-1 { font-size: clamp(2.25rem, 10.5vw, 4.5rem); }
  .hero-2 { margin-top: 0.4rem; font-size: clamp(1.5rem, 7vw, 3rem); }
  .hero-intro { margin-top: 1.25rem; font-size: 1.25rem; }
  .hero-intro span { display: inline; }
  .dinos { width: 5.5rem; height: 5.5rem; margin: 0.25rem 0 0; }
  .burst { width: 1.25rem; height: 1.25rem; }
  .bubble { --bt: translateY(0); top: 0; right: calc(100% + 0.9rem); bottom: auto; left: auto; max-width: min(12rem, max(7rem, calc(100vw - 9.4rem))); font-size: 0.9375rem; transform: scale(0.7); transform-origin: 100% 50%; }
  .bubble.is-reply { top: var(--lift, 3.4rem); right: calc(100% + 0.9rem); bottom: auto; left: auto; max-width: min(12rem, max(7rem, calc(100vw - 9.4rem))); }
  .hop-heart { width: 0.9rem; height: 0.9rem; }
  .bubble, .bubble.from-s { --bubble-line: #f783ac; }
  .bubble.is-on { transform: scale(1); }
  .bubble::before, .bubble::after { top: 50%; border-color: transparent; border-right-width: 0; border-bottom-width: 0; }
  .bubble::before { left: calc(100% + 2px); margin: -0.65rem 0 0; border-width: 0.65rem 0 0.65rem 0.7rem; border-left-color: var(--bubble-line); }
  .bubble::after { left: 100%; margin: -0.45rem 0 0; border-width: 0.45rem 0 0.45rem 0.5rem; border-left-color: var(--bubble-bg); }
  .pets { right: 0; left: auto; font-size: 0.8125rem; transform: none; }
  .block { margin-top: 2.5rem; }
  .block + .block { margin-top: 3rem; }
  .label-row { width: 100%; margin-left: 0; }
  .apps { gap: 0.5rem; }
  .tile { gap: 0.35rem; padding: 1rem 0.35rem 0.9rem; border-radius: 0.875rem; }
  .tile-icon { width: 4rem; height: 4rem; border-radius: 1rem; }
  .tile-name { font-size: 1.0625rem; }
  .tile-desc { display: none; }
  .dot { font-size: 0.8125rem; }
  .facts { padding: 1.1rem 1rem 1rem; }
  .facts-title { font-size: 1.1875rem; }
  .facts li { grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.7rem; }
  .facts-text { column-gap: 0.7rem; }
  .facts li img { width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; }
  .facts-name, .facts-ver { font-size: 1.0625rem; }
  .facts-date, .facts-foot { font-size: 0.9375rem; }
  .card-meta { font-size: 0.9375rem; }
  .card-title { font-size: 1.1875rem; }
  .card.is-first .card-title { font-size: 1.5rem; }
  .card-lead { font-size: 1rem; }
  .ap-hero { gap: 1rem; margin-bottom: 1.75rem; }
  .ap-logo { width: 4.5rem; height: 4.5rem; border-radius: 1.1rem; }
  .ap-title { font-size: clamp(2rem, 9vw, 3.5rem); }
  .ap-lead { font-size: 1.0625rem; }
  .app-section > h2 { font-size: 1.375rem; }
  .app-section p, .app-section li { font-size: 1rem; }
  .ap-title.pg-title { font-size: clamp(1.75rem, 8vw, 3rem); }
  .entry-text p, .entry-text li { font-size: 1.0625rem; }
  .day-row { gap: 0.9rem; padding: 0.9rem 1rem; }
  .day { width: 2.4rem; font-size: 1.75rem; }
  .row-title { font-size: 1.1875rem; }
  .row-lead { font-size: 1rem; }
  .version-box { padding: 0.9rem 1rem; }
}

@media (max-width: 860px) {
  .show-stage { padding: 0 8px; }
  .show-tap svg { opacity: 1; padding: 9px; }
  .board-top { gap: 10px; padding: 9px 10px; }
  .board-dest { font-size: 1rem; }
  .board-close { padding: 4px 10px; font-size: 0.8125rem; }
  .board-ticker { font-size: 0.9375rem; }
  .maint { padding-top: 2.5rem; }
  .maint-bar .brand { font-size: 1.375rem; }
  .sheet { padding: 4.5rem 1.25rem 2.5rem; }
  html.sheet-open body { overflow: hidden; }
  .sheet-close { top: 0.75rem; right: 0.75rem; }
}

@media (max-width: 429px) {
  .ap-tabs { column-gap: 0.75rem; font-size: 0.875rem; }
}

@media (max-width: 380px) {
  .hero-1 { font-size: 8.6vw; }
  .apps { gap: 0.375rem; }
  .tile { padding: 0.75rem 0.25rem 0.625rem; }
  .tile-name { font-size: 1rem; }
  .dot { font-size: 0.75rem; }
}

@media (forced-colors: active) {
  .meadow { forced-color-adjust: none; }
  .motion input { appearance: auto; }
  .burger i, .sheet-close i { forced-color-adjust: none; background: CanvasText; }
  .board-warn::before { forced-color-adjust: none; background: CanvasText; }
  .board-warn::after { forced-color-adjust: none; color: Canvas; }
}

html.intro-run .main, html.intro-run .side, html.intro-run.side-closed .side, html.intro-run.side-right.side-closed .side { transition: none; }
html.intro-run :is(.side, .hero-intro, .content, .phone-bar, .burger-float, .hero-1, .dinos) { opacity: 0; }
html.intro-run .hero-2 { position: relative; z-index: 2; white-space: nowrap; visibility: hidden; }
html.intro-run .hero-2.is-dancing { visibility: visible; }
html.intro-run .dinos { z-index: 5; cursor: default; pointer-events: none; }
html.intro-run .dinos-float { animation: none; }
html.intro-run .hero-1 { position: relative; z-index: 1; width: fit-content; transform-origin: 50% 50%; }
.hero-2 .intro-letter { display: inline-block; white-space: pre; transform-origin: 50% 100%; }
.intro-skip { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 20; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 0.375rem; background: var(--card); color: var(--soft); font-family: var(--ui-font); font-size: 0.9375rem; font-weight: 700; cursor: pointer; }
.intro-skip:hover { border-color: var(--accent); color: var(--text); }
html.side-right .intro-skip { right: auto; left: 1.5rem; }