/* Site additions to the v6 design. style.css stays the frozen sketch; everything the live site
   adds (self-hosted Figtree, the full menu, former inline styles, new pages) lives here. */

/* Figtree, self-hosted: @fontsource-variable/figtree 5.3.0, SIL OFL 1.1 (fonts/OFL-Figtree.txt). */
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:normal;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Figtree;font-style:italic;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-ext-wght-italic.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Figtree;font-style:italic;font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-wght-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Former inline style attributes: the CSP allows stylesheets only. */
.twinkle.tw-1{left:24%;top:31%}
.twinkle.tw-2{left:66%;top:63%}
.twinkle.tw-3{left:41%;top:22%}
.band-gap{margin-top:4.4rem}
.band-format{margin-top:4rem;border-top:1px solid var(--rule)}

/* Sub-menus: a chevron after a top-level link opens its child pages. */
.subnav{position:relative;display:inline-flex}
.subnav summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:28px;margin-left:-.7rem;cursor:pointer;color:var(--header-ink)}
.subnav summary::-webkit-details-marker{display:none}
.subnav summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.subnav[open] summary::before{transform:translateY(2px) rotate(-135deg)}
.subnav-list{position:absolute;top:calc(100% + 5px);left:-1rem;z-index:11;display:grid;min-width:260px;background:var(--header);border:1px solid var(--header-rule);border-top:3px solid var(--accent);box-shadow:0 8px 20px #0005}
.mainnav .subnav-list a{min-height:46px;display:flex;padding:0 1rem;border-top:1px solid var(--header-rule)}
.mainnav .subnav-list a:first-child{border-top:0}
.mainnav .subnav-list a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
.mainnav a[aria-current="true"]{box-shadow:inset 0 -3px 0 var(--accent)}

/* Account links, right of the bar. */
.bar-end{align-items:center;gap:1.2rem}
.acct{display:flex;gap:.2rem}
.acct a{display:inline-flex;align-items:center;min-height:44px;padding:0 .6rem;color:var(--header-ink);text-decoration:none;font-size:.95rem}
.acct a:hover{text-decoration:underline;text-underline-offset:.3em}
.acct a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--accent)}

/* Mobile menu extras: child pages indented, an Account group. */
.mobile-menu nav a.sub{padding-left:2rem;font-size:.95rem}
.mobile-menu .menu-group{display:flex;align-items:flex-end;min-height:34px;padding:.5rem 1rem .3rem;border-top:1px solid var(--header-rule);font-family:"Umbris Mono",monospace;font-size:var(--fs-2xs);color:var(--header-muted)}

/* The full menu needs more room than the sketch's four links: collapse to the Menu button sooner. */
@media(max-width:1080px){
  .mainnav,.acct{display:none}
  .mobile-menu{display:block;position:relative}
  .mobile-menu summary{list-style:none;min-height:44px;display:flex;align-items:center;gap:.45rem;cursor:pointer;color:var(--header-ink);font-size:1rem}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu summary::before{content:"";width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat}
  .mobile-menu nav{position:absolute;top:calc(100% + 5px);left:-1rem;display:grid;min-width:260px;max-height:calc(100vh - var(--bar) - 1rem);overflow-y:auto;background:var(--header);border:1px solid var(--header-rule);border-top:3px solid var(--accent);box-shadow:0 8px 20px #0005}
  .mobile-menu nav a{min-height:46px;display:flex;align-items:center;padding:0 1rem;color:var(--header-ink);text-decoration:none;border-top:1px solid var(--header-rule)}
  .mobile-menu nav a:first-child{border-top:0}
  .mobile-menu nav a[aria-current="page"],.mobile-menu nav a[aria-current="true"]{box-shadow:inset 3px 0 0 var(--accent)}
  /* Home: the travelling wordmark (.dock-mark, fixed, z-index 11) sits above the sticky masthead (z-index 10),
     a stacking context the Menu cannot leave. While the Menu is open (site.js sets .menu-open) the dock drops
     below the bar, so the Menu covers it; it stays above the page, and back in the bar once the Menu closes. */
  .menu-open .dock-mark{z-index:9}
}
/* Wide screens: an open sub-menu is inside the masthead too, so the home page's wordmark drops below the bar while
   one is open (site.js sets .subnav-open); Help's three rows reach down past the docked wordmark. */
.subnav-open .dock-mark{z-index:9}

/* The 404 page. */
.notice-box{margin:0 0 4rem;padding:1.4rem 1.6rem;border:2px solid var(--rule-strong);background:var(--surface);max-width:68ch}
.notice-box p{margin:0 0 .8rem}
.notice-box p:last-child{margin-bottom:0}

/* Home eclipse: site.js draws it on a canvas over the plate and hides the sketch's CSS eclipse, which
   stays as the no-script fallback and as the box preview.js tilts (the canvas follows that box). */
.eclipse-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.has-eclipse-canvas .eclipse{visibility:hidden}
/* The near star layer sat at translateZ(420px) inside the 3D sky; on GPU compositing its box showed as a
   faint hard-edged rectangle behind the tagline once the sky tipped back. It now sits on the sky's plane
   and slides further instead, which keeps its parallax (the same on-screen travel as before). */
.stars-near{transform:translate3d(calc(var(--tx) * -162px),calc(var(--ty) * -65px),0)}

/* ---------- Below the hero (2026-10-20) ---------- */
/* Section accents, each passing 4.5:1 against the page in its theme: Learn red, Blog lavender, Community mint. */
:root{--learn:#b8213a;--blog:#6b46d6;--community:#17694a;--ember:#d02a44;--ember-hover:#a81f35;--lavender:#b79cff}
:root[data-theme="dark"]{--learn:#ff6b81;--blog:#b79cff;--community:#6fe0b4}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--learn:#ff6b81;--blog:#b79cff;--community:#6fe0b4}}
.pillars>.pillar.accent-blog{border-top-color:var(--blog)}
.pillars>.pillar.accent-learn{border-top-color:var(--learn)}
.pillars>.pillar.accent-community{border-top-color:var(--community)}

/* The red call to action: white on #d02a44 is 5.1:1, on the hover shade 7.2:1. */
.btn-red{background:var(--ember);border-color:var(--ember);color:#fff}
.btn-red:hover{background:var(--ember-hover);border-color:var(--ember-hover);color:#fff}
/* A button whose section is switched off (site.yaml learn.public: false) is plain text in the same place and
   colour: not a link, no hover change, the default cursor. */
.btn.btn-off{cursor:default}
.btn-red.btn-off:hover{background:var(--ember);border-color:var(--ember);color:#fff}

/* Home row with two pillars (the Blog pillar while the blog is empty, or a needs: learn pillar with no placeholder
   while Learn is off): two columns, no gap left. */
@media(min-width:981px){.pillars:not(:has(>.pillar:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Join us: the live Discord invite as a filled button in the column's green. Dark #0d2a1f on #8ff0bd is 11.2:1
   (hover #c4f8dd 13.0:1); light white on #17694a is 6.7:1 (hover #0f4f37 9.6:1). The subreddit is the
   secondary one: outlined in the same green, its ink the green on the column's ground (light #17694a on
   #f8f5fc, hover #0f4f37; dark #8ff0bd on #2a2140, hover #c4f8dd), with a faint green wash on hover. A row
   still coming soon is dimmed to the muted ink (7.4:1 light, 8.3:1 dark). */
:root{--join-bg:#17694a;--join-ink:#fff;--join-hover:#0f4f37}
:root[data-theme="dark"]{--join-bg:#8ff0bd;--join-ink:#0d2a1f;--join-hover:#c4f8dd}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--join-bg:#8ff0bd;--join-ink:#0d2a1f;--join-hover:#c4f8dd}}
.pillar li a.btn-join{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;background:var(--join-bg);border:2px solid var(--join-bg);color:var(--join-ink);font-weight:700;text-decoration:none}
.pillar li a.btn-join:hover{background:var(--join-hover);border-color:var(--join-hover);color:var(--join-ink);text-decoration:underline}
.pillar li a.btn-join:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pillar li a.btn-join-line{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;background:transparent;border:2px solid var(--join-bg);color:var(--join-bg);font-weight:700;text-decoration:none}
.pillar li a.btn-join-line:hover{border-color:var(--join-hover);color:var(--join-hover);background:color-mix(in srgb,var(--join-bg) 10%,transparent);text-decoration:underline}
.pillar li a.btn-join-line:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.pillar ul li:has(>.pending){color:var(--muted)}

/* Learning while Learn is off: a placeholder column with no links, each track's state as a pill (as on the roadmap). */
.pillar ul.tracks-soon li{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.pillar ul.tracks-soon .tag.tag-soon{display:inline-block;border-radius:999px;padding:.1rem .7rem;background:transparent;border-color:var(--rule-strong);color:var(--ink);white-space:nowrap}
/* On the raised panel (dark in both themes) the pill takes the panel's own tag colours, as its state ("Still being written") does. */
.pillar-feature ul.tracks-soon .tag.tag-soon{color:#fff;border-color:#c9b6ff}

/* Post types: a Writeup is a solid lavender tag, a Note the word in lavender with no box (the Blog accent:
   #6b46d6 on the light page 5.1:1, #b79cff on the dark page 7.4:1 and on the raised panel 4.8:1 / 9.0:1).
   The post page keeps its outlined Note (its related list), as it was. */
.tag.tag-writeup{background:var(--lavender);border-color:var(--lavender);color:#1a1230}
.tag.tag-note{background:transparent;border-color:transparent;padding-left:0;padding-right:0;color:var(--blog);font-weight:600}
.featured .tag.tag-writeup{color:#1a1230;border-color:var(--lavender)}
.featured .tag.tag-note{color:var(--lavender);border-color:transparent}
.reading .module .tag.tag-note{border-color:var(--blog);padding-left:.5rem;padding-right:.5rem;color:var(--ink);font-weight:400}

/* Red marks actions on the blog, as on home. The bar and the featured panel are dark in both themes, where #d02a44
   is 2.2:1 on the light theme's purple: lines there take #ff7586 (4.3:1 on #46306e, 7.2:1 on #130e2c; 3:1 is the
   bar for a state line). "Read the writeup" is the red button, white on #d02a44 5.1:1 (hover 7.2:1). */
:root{--ember-on-dark:#ff7586}
/* The menu rules match the Blog link by its href: "/blog/" under urls.style clean (production; a site test pins it). */
.mainnav a[href="/blog/"][aria-current]{box-shadow:inset 0 -3px 0 var(--ember-on-dark)}
.mobile-menu nav a[href="/blog/"][aria-current]{box-shadow:inset 3px 0 0 var(--ember-on-dark)}
.featured h2 a{text-decoration:underline;text-decoration-color:var(--ember-on-dark);text-decoration-thickness:3px;text-underline-offset:.18em}
.featured h2 a:hover{text-decoration-color:#fff}
.featured .go{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;background:var(--ember);border:2px solid var(--ember);color:#fff;text-decoration:none}
.featured .go:hover{background:var(--ember-hover);border-color:var(--ember-hover);color:#fff;text-decoration:underline}
.featured .go:focus-visible{outline:3px solid var(--header-focus);outline-offset:3px}

/* Learn roadmap: each track's state as a pill. */
.track-num .tag{display:inline-block;border-radius:999px;padding:.1rem .7rem}
.track-num .tag.tag-open,.track-feature .track-num .tag.tag-open{background:var(--ember);border-color:var(--ember);color:#fff}
.track-num .tag.tag-planned{background:transparent;border-color:var(--rule-strong);color:var(--ink)}

/* Type: the monospace face is for dates and code only. Labels, lists, metadata and summaries use Figtree. */
.tag,.crumbs,.plate-label,.plate-meta,.section-head .n,.section-head a,.entry-meta,.pillar-kind,.pillar li,.pillar li a,
.module h2 .n,.module li span,.toc a::before,.track-list li b,.prose h2::before,.prose ol>li::before,.prose blockquote footer,
.prose sup a,.prose caption,.prose th,.figure figcaption,.diagram b,.diagram span,.callout-label,.footnotes h2,.pager small,
.objectives .box-head,.exercise .box-head,.exercise summary,.statement .label,.cols3 .idx,.dest-row .kind,.steps-list li::before,
.placeholder-note,.featured .kicker,.featured-side div,.toolbar .lbl,.chip,.toolbar .count,.empty,.track-num,.track ol li{
  font-family:Figtree,Arial,sans-serif;letter-spacing:0}
time.date{font-family:"Umbris Mono",ui-monospace,monospace;font-size:var(--fs-2xs)}
.featured-side time.date{font-size:var(--fs-xs)}

/* Links carry no arrow. */
.pillar-go a::after,.go::after,.pillar li a::after{content:none}

/* Metadata pieces sit side by side instead of joined by a middle dot. */
.entry-meta,.module li .related-meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center}
.module li .related-meta .tag{font-size:var(--fs-2xs)}

/* "How Umbris works": the lead line, then the numbered loop the work goes round. */
.principles-head{grid-row:1/span 2}
.principles-lead h3{font-size:var(--fs-xl);margin:0 0 .4rem}
.principles-lead p{margin:0;color:var(--ink);font-size:var(--fs-md);max-width:52ch}
.principles-loop{grid-column:2;list-style:none;margin:.4rem 0 0;padding:1.4rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.6rem;counter-reset:loop;border-top:2px solid var(--rule-strong)}
.principles-loop li{counter-increment:loop;position:relative}
.principles-loop li::before{content:counter(loop);display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;margin-bottom:.8rem;border:2px solid var(--accent);border-radius:50%;font-weight:700;color:var(--ink)}
.principles-loop h3{margin:0 0 .35rem}
@media(max-width:980px){.principles-head{grid-row:auto}.principles-loop{grid-column:auto;grid-template-columns:1fr;gap:1.2rem}}

/* Blog index: posts as rows grouped by month (date, type, title and summary). */
.post-list{padding:1.2rem 0 4.4rem}
.post-month-head{margin:2rem 0 0;padding-bottom:.55rem;font-size:var(--fs-lg);border-bottom:2px solid var(--rule-strong)}
.post-card.post-row{display:grid;grid-template-columns:7.5rem 6.2rem minmax(0,1fr);gap:.4rem 1.4rem;align-items:baseline;padding:1rem 0 1.1rem;border-top:0;border-bottom:1px solid var(--rule)}
.post-card.post-row:hover{border-top-color:transparent;box-shadow:inset 4px 0 0 var(--blog)}
.post-row .post-text h3{font-size:var(--fs-lg);line-height:1.25}
.post-row .post-text p{margin:.3rem 0 0}
@media(max-width:700px){.post-card.post-row{grid-template-columns:auto 1fr}.post-row .post-text{grid-column:1/-1}}

/* About: the Discord row is a link once the invite is set. */
a.dest-row.dest-open{color:var(--ink);text-decoration:none;border-color:var(--community)}
a.dest-row.dest-open:hover{background:var(--tint)}
a.dest-row.dest-open:hover h3{text-decoration:underline;text-decoration-color:var(--community)}
.dest-open .tag{border-style:solid;border-color:var(--community);color:var(--ink)}

/* About (D299): the mission line spans the band when it has no label; an open destination row has no arrow column. */
.statement.statement-single{grid-template-columns:minmax(0,1fr)}
a.dest-row.dest-open{grid-template-columns:9rem minmax(0,1fr) auto}
.who p{max-width:65ch;margin:0 0 1rem}
@media(max-width:40rem){a.dest-row.dest-open{grid-template-columns:1fr}}
/* The Security page (D299; on About before it): the seal page's section (D64). The page's SHA-256 and fingerprint wrap on a phone; the main action is ember. */
.seal-facts{display:grid;grid-template-columns:minmax(10rem,14rem) 1fr;gap:.6rem 1.2rem;margin:1.2rem 0}
.seal-facts dt{font-weight:700}
.seal-facts dd{margin:0;min-width:0}
.seal-facts code{font-family:"Umbris Mono",ui-monospace,monospace;font-size:.9em;overflow-wrap:anywhere}
.seal-facts dd span{display:block;color:var(--muted);font-size:var(--fs-xs)}
.seal-links{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin:0}
a.seal-go{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;background:var(--ember);border:2px solid var(--ember);color:#fff;font-weight:700;text-decoration:none}
a.seal-go:hover{background:var(--ember-hover);border-color:var(--ember-hover);text-decoration:underline}
a.seal-go:focus-visible,a.seal-dl:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:40rem){.seal-facts{grid-template-columns:1fr;gap:.2rem}.seal-facts dd{margin-bottom:.6rem}}

/* Member guide pages (kernel/guide.py): a quoted bot message is a plain box in the body face, not the sketch's large
   pull quote. A command or button word stays on one line (sk-proj- never splits into two prefixes) unless it is wider
   than the line, and then it wraps inside its own box instead of widening the page. The lead's rule is the only rule
   above the first heading. The page has no rail: one centred column up to 48rem (the guide drops the 68ch prose
   measure, so the text takes the rail's width), its "On this page" list first in the article
   (templates/pages/reading.html.j2), with the lead's rule below the list. Inside .prose the list would take the
   article's heading and numbered-list styles and lose its own counter, so the guide-toc rules restore the module look. */
.prose.guide blockquote{margin:1.4rem 0;font-family:inherit;font-size:var(--fs-sm);line-height:1.6}
.prose.guide code{display:inline-block;max-width:100%;overflow-wrap:anywhere}
/* Learn source links (D126): a long address wraps instead of widening the page on a phone. */
.footnotes a{overflow-wrap:anywhere}
.prose.guide .lead+h2{border-top:0;padding-top:0}
.reading.guide-body{grid-template-columns:minmax(0,48rem)}
/* D132: "On this page" on narrow screens is a collapsed disclosure that opens the article, in the HTML before the lead
   (templates/pages/reading.html.j2); the rail's copy and the guide's open list are hidden there. Desktop is unchanged.
   Inside .prose the list must not take the article's numbered-list boxes. */
.toc-phone{display:none}
@media(max-width:980px){
.toc-phone{display:block;margin:0 0 1.8rem;border:1px solid var(--rule)}
.toc-phone summary{padding:.55rem .9rem;cursor:pointer;font-size:var(--fs-sm);font-weight:600}
.prose .toc-phone ol{margin:0 0 .8rem;padding:0 .9rem 0 2.1rem;counter-reset:none}
.prose .toc-phone li{padding:0;margin:.2rem 0;counter-increment:none}
.prose .toc-phone li::before{content:none}
.reading-body .rail .toc-rail,.reading-body .rail .course-contents,.prose.guide .guide-toc{display:none}
}
.prose.guide{max-width:none}
.prose.guide .guide-toc{margin:0 0 2.2rem}
.prose.guide .guide-toc h2{margin:0;padding:.55rem .9rem;border-top:0;font-size:var(--fs-sm);counter-increment:none}
.prose.guide .guide-toc ol{margin:0;counter-reset:toc}
.prose.guide .guide-toc li{padding:0;margin:0;counter-increment:toc}
.prose.guide .guide-toc li::before{content:none}
/* Learn roadmap: four tracks (the frozen sketch's grid has three); the narrow layouts repeat style.css's own */
.roadmap{grid-template-columns:repeat(4,minmax(0,1fr))}
.roadmap::before{background:linear-gradient(90deg,var(--accent) 0 25%,var(--rule-strong) 25%)}
@media(max-width:1180px){.roadmap{grid-template-columns:repeat(2,minmax(0,1fr))}.roadmap::before{display:none}}
@media(max-width:980px){.roadmap{grid-template-columns:1fr}}
/* Courses (D242): the Learn index's course cards and a course page's module cards reuse the track card, in a grid
   without the roadmap's timeline. */
.roadmap.courses{grid-template-columns:repeat(auto-fill,minmax(min(22rem,100%),1fr));padding-top:0}
.roadmap.courses::before,.roadmap.courses .track::before{display:none}
.course-modules .track h2{font-size:var(--fs-h2);margin:0 0 .6rem}
.track h3 a{color:inherit}
/* A lesson's course contents: linked like the guide's lists; the current lesson is marked, not linked. */
.course-contents h3,.course-phone h3{font-size:var(--fs-sm);margin:.9rem 0 .35rem}
.course-contents .track-list a,.course-phone .track-list a{color:inherit}
/* D266: build-time code colours for Python, bash and JSON (kernel/mdrender.py); style.css has .c and .k. */
.code .s{color:#bfe3c6}.code .n{color:#f3c99d}
/* D266: a post's Discord links, after the text and before the pager. */
.post-actions{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:2.2rem 0 0;font-size:var(--fs-sm)}
.post-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;margin:2.2rem 0 0;font-size:var(--fs-sm)}
.post-tags-label{color:var(--muted);margin-right:.3rem}
.post-tags .tag{text-decoration:none}

/* Lesson and post images (operator 2026-11-07): inside the text column, never wider. */
.prose img{display:block;max-width:100%;height:auto;margin:1.4rem 0;border:1px solid var(--rule)}
/* Puzzler (/tools/puzzler/, assets/puzzler.js): the tool's controls and its output. */
.pz{max-width:980px;padding-bottom:3rem}
.pz-noscript{margin:2rem 0;font-size:var(--fs-md)}
.pz-types{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0 0 1.4rem;padding:0;border:0}
.pz-types legend,.pz-field label,.pz-label{display:block;margin-bottom:.4rem;font-weight:700}
.pz-types label{display:inline-flex;align-items:center;gap:.45rem;font-weight:400;cursor:pointer}
.pz-field{margin:0 0 1.3rem}
.pz textarea,.pz input[type=text],.pz input[type=number],.pz select{box-sizing:border-box;width:100%;padding:.55rem .7rem;font:inherit;font-size:var(--fs-sm);color:var(--ink);background:var(--surface);border:1px solid var(--rule-strong);border-radius:0}
.pz textarea{font-family:"Umbris Mono",monospace;resize:vertical}
.pz input[type=range]{width:100%;accent-color:var(--accent)}
.pz :focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.pz-meta{margin:.35rem 0 0;color:var(--muted);font-size:var(--fs-xs)}
.pz-entries{margin:0;padding:0;list-style:none;display:grid;gap:.5rem}
.pz-entry{display:grid;grid-template-columns:minmax(8rem,14rem) 1fr 11rem;gap:.6rem;align-items:center}
.pz-entry-word{font-family:"Umbris Mono",monospace;font-size:var(--fs-sm);overflow-wrap:anywhere}
.pz-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 1.4rem}
.pz-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1rem}
.pz-btn{min-height:44px;padding:0 1.1rem;font:inherit;font-weight:700;color:var(--ink);background:var(--surface);border:2px solid var(--rule-strong);cursor:pointer}
.pz-btn:hover{background:var(--tint)}
.pz-btn[aria-pressed=true]{color:#fff;background:var(--accent-ink);border-color:var(--accent-ink)}
.pz-btn-main{color:#fff;background:var(--accent-ink);border-color:var(--accent-ink)}
.pz-btn-main:hover{background:var(--link);border-color:var(--link)}
:root[data-theme="dark"] .pz-btn[aria-pressed=true],:root[data-theme="dark"] .pz-btn-main{color:var(--page)}
.pz-views{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .8rem}
.pz-msg{margin:.4rem 0;padding:.55rem .8rem;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 9%,var(--surface));font-size:var(--fs-sm)}
.pz-msg-error{--c:#b3261e}.pz-msg-warn{--c:var(--warn)}.pz-msg-ok{--c:var(--tip)}
:root[data-theme="dark"] .pz-msg-error{--c:#ff8a80}
.pz-view-note{margin:0 0 .6rem;color:var(--muted);font-size:var(--fs-sm)}
.pz-view-note-warn{color:var(--warn);font-weight:700}
.pz-out{max-height:36rem;overflow:auto;margin:0 0 1rem;padding:1rem 1.2rem;font-family:"Umbris Mono",monospace;font-size:var(--fs-sm);line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--code-ink);background:var(--code-bg)}
@media(max-width:700px){.pz-row{grid-template-columns:1fr}.pz-entry{grid-template-columns:1fr}}