/* PBT Tuts: visual primitives adapted from PBT Core; independent local copy. */
:root{--paper:#f7f7f2;--surface:#fff;--soft:#eeeee6;--ink:#202925;--muted:#59645d;--accent:#a44d2d;--line:#d9ded5;--mount:#e8eae2;--sans:"Glegoo",Georgia,serif;color-scheme:light}
html[data-mode=light][data-light-scheme=citrus]{--paper:#fbf8ee;--surface:#fffef8;--soft:#f3ecd9;--ink:#342d1d;--muted:#6a6047;--accent:#8f6d14;--line:#e4d9bd;--mount:#eee6cf}
*,*::before,*::after{box-sizing:border-box}html{scroll-padding-top:105px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}img{max-width:100%;height:auto;display:block}svg{width:20px;height:20px;flex-shrink:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button,input,select,textarea{color:var(--ink)}button:disabled{cursor:wait}input,select,textarea{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:12px;min-height:46px;max-width:100%;width:100%}textarea{min-height:160px}input[type=checkbox],input[type=radio]{width:auto;min-height:0}a,button,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--accent);outline-offset:4px}h1,h2,h3,h4,h5,h6{margin:0 0 .6em;line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere}h1{font-size:clamp(34px,4.5vw,60px);font-weight:650}h2{font-size:clamp(26px,3vw,38px);font-weight:600}h3{font-size:20px;font-weight:650}p{margin:0 0 1.2em}small{font-size:12px}[hidden]{display:none!important}.shell{width:min(1320px,calc(100% - 80px));margin-inline:auto}.section{padding-block:52px}.muted{color:var(--muted)}.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);margin:0 0 18px;display:flex;align-items:center;gap:10px}.small-square{width:7px;height:7px;background:currentColor}.button{display:inline-flex;justify-content:center;align-items:center;gap:18px;background:var(--ink);color:var(--surface);border:1px solid var(--ink);border-radius:3px;min-height:48px;padding:13px 20px;font-size:14px;font-weight:600;line-height:1.4;transition:background .15s,border-color .15s}.button:hover{background:var(--accent);border-color:var(--accent);color:var(--surface)}.button-outline{background:var(--surface);color:var(--ink);border-color:var(--line)}.button-outline:hover{background:var(--soft);color:var(--ink);border-color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:12px;font-size:14px;font-weight:600;min-height:44px}.icon-button{display:inline-flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;padding:11px;background:transparent;border:1px solid var(--line);border-radius:3px;color:var(--ink);flex-shrink:0}.icon-button:hover{border-color:var(--accent);color:var(--accent)}.screen-reader-text,.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-100px;left:16px;padding:12px 20px;z-index:9999;background:var(--ink);color:var(--surface)}.skip-link:focus{top:12px}
.site-header{position:relative;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}.site-header.sticky{position:sticky;top:0}.admin-bar .site-header.sticky{top:32px}.header-row{display:flex;align-items:center;min-height:88px;gap:28px}.brand{display:flex;align-items:center;gap:17px}.brand-mark{font-size:36px;font-weight:800;letter-spacing:-3px;line-height:1}.brand-mark span{font-size:11px;letter-spacing:0;color:var(--accent);margin-left:5px}.brand-name{font-size:11px;line-height:1.5;letter-spacing:.025em}.brand-name strong{font-size:15px;font-weight:650}.custom-logo{max-width:260px;max-height:64px;width:auto}.site-nav{margin-left:auto;display:flex;align-items:center;gap:30px;font-size:13px;font-weight:550}.site-nav>a{display:flex;align-items:center;gap:7px;min-height:44px}.nav-dot{width:5px;height:5px;background:var(--accent)}.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:20px}.site-nav li{position:relative}.site-nav li>a{display:block;padding:10px 0}.site-nav .sub-menu{position:absolute;top:100%;left:0;display:none;width:230px;padding:14px;background:var(--surface);border:1px solid var(--line)}.site-nav li:hover>.sub-menu,.site-nav li:focus-within>.sub-menu{display:block}.site-nav .sub-menu .sub-menu{top:0;left:100%}.header-actions{display:flex;gap:7px}.header-actions .icon-button{border-color:transparent}.saved-count{position:absolute;right:1px;top:0;font-size:10px;line-height:16px;min-width:16px;background:var(--soft);border-radius:20px}.saved-count:empty{display:none}.menu-toggle{display:none}
.brand-mark{font-size:40px;font-weight:800;letter-spacing:-3px}.brand-mark span{display:inline-block;width:7px;height:7px;overflow:hidden;font-size:0;background:var(--accent);margin-left:7px;vertical-align:baseline}.brand-name{padding-left:16px;border-left:1px solid var(--line);font-size:11px;line-height:1.5;letter-spacing:.02em}.brand-name strong{font-size:14px;font-weight:600}.brand{gap:0}.brand-mark{padding-right:16px}@media(max-width:680px){.brand-mark{font-size:36px;padding-right:12px}.brand-name{padding-left:12px;font-size:9px}.brand-name strong{font-size:12px}}@media(max-width:440px){.brand-name{display:none}.brand-mark{padding-right:0;font-size:38px}}
.site-footer{background:var(--soft);border-top:1px solid var(--line);padding-top:50px}.footer-main{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:55px}.footer-wordmark{font-size:48px;letter-spacing:-4px;font-weight:800;line-height:1.1;display:inline-block;margin-bottom:20px}.footer-wordmark span{font-size:14px;color:var(--accent);letter-spacing:0;margin-left:8px}.footer-intro>p{font-size:16px}.footer-intro>p.muted{font-size:12px;max-width:240px}.site-footer h2{font-size:13px;font-weight:650;letter-spacing:0;margin-bottom:18px}.site-footer nav>a{display:flex;font-size:12px;min-height:33px;align-items:center;color:var(--muted)}.footer-note p{font-size:12px;color:var(--muted)}.social-links{display:flex;gap:20px;font-size:12px;margin-top:22px}.footer-bottom{display:flex;justify-content:space-between;gap:24px;font-size:11px;color:var(--muted);padding-block:25px;margin-top:40px;border-top:1px solid var(--line);flex-wrap:wrap}.footer-bottom p{margin:0}.footer-bottom .copyright-symbol{position:relative;top:.12em}.footer-widgets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-block:30px;font-size:13px}.legacy-widgets{margin-top:20px;font-size:13px}.legacy-widgets summary{cursor:pointer;padding:15px;border-top:1px solid var(--line)}.footer-menu ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0;font-size:12px}
html[data-mode=dark][data-dark-scheme=noir-gold]{--paper:#19191f;--surface:#22222c;--soft:#272731;--ink:#f4f3f6;--muted:#b4b3c0;--accent:#ffda4b;--line:#3c3c48;--mount:#09090a;--noir-base:#0e0e14;--noir-button-ink:#211c0d}
html[data-mode=dark][data-dark-scheme=noir-gold] body{background:radial-gradient(ellipse 480px 240px at 65% 85px,#162344 0%,transparent 100%),radial-gradient(ellipse 420px 240px at 96% 95px,#341b34 0%,transparent 100%),linear-gradient(var(--noir-base),var(--paper) 750px);background-repeat:no-repeat;background-color:var(--paper)}
html[data-mode=dark][data-dark-scheme=noir-gold] .site-header{background:var(--noir-base)}
html[data-mode=dark][data-dark-scheme=noir-gold] .site-footer{background:radial-gradient(ellipse at 70% 0%,#272318 0%,transparent 55%),var(--noir-base)}
html[data-mode=dark][data-dark-scheme=noir-gold] .button:not(.button-outline),html[data-mode=dark][data-dark-scheme=noir-gold] .card-heading .card-demo{background:var(--accent);border-color:var(--accent);color:var(--noir-button-ink)}
html[data-mode=dark][data-dark-scheme=noir-gold] .button:not(.button-outline):hover,html[data-mode=dark][data-dark-scheme=noir-gold] .card-heading .card-demo:hover{background:#ffe680;border-color:#ffe680;color:var(--noir-button-ink)}
html[data-mode=dark][data-dark-scheme=noir-gold] .button-outline{background:var(--surface);border-color:var(--line);color:var(--ink)}
html[data-mode=dark][data-dark-scheme=noir-gold] .button-outline:hover{background:var(--soft);border-color:var(--accent);color:var(--accent)}
html[data-mode=dark][data-dark-scheme=noir-gold] .product-panel,html[data-mode=dark][data-dark-scheme=noir-gold] .dedicated-help{background:linear-gradient(135deg,#292830,var(--surface) 65%)}
html[data-mode=dark][data-dark-scheme=noir-gold] .badge-premium,html[data-mode=dark][data-dark-scheme=noir-gold] .badge-freemium{background:#302b1c;color:#f4d57b;border-color:#75633b}
html[data-mode=dark][data-dark-scheme=noir-gold] .template-card:not(.article-card):hover{border-color:#75633b;box-shadow:0 12px 32px #00000026}
html[data-mode=dark][data-dark-scheme=noir-gold] .content-index a[aria-current="true"]{background:#302b1c}
.comments-area{--comment-avatar:44px;max-width:760px;margin:45px 0 0;border-top:1px solid var(--line);padding-top:30px}.comments-area .comments-title{font:400 clamp(24px,3vw,34px)/1.3 Glegoo,Georgia,serif;letter-spacing:-.02em;margin-bottom:28px;overflow-wrap:anywhere}.comments-area .comment-list,.comments-area .comment-list .children{list-style:none;margin:0;padding:0}.comments-area .comment-list .children{margin-left:24px;padding-left:22px}.comments-area .comment-list .children .children{margin-left:12px;padding-left:16px}.comments-area .comment-body{position:relative;padding:24px;margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:4px;overflow-wrap:anywhere}.comments-area .bypostauthor>.comment-body{border-left:3px solid var(--accent);background:var(--soft)}.comments-area .comment-meta{position:relative;min-height:var(--comment-avatar);padding-left:calc(var(--comment-avatar) + 14px);margin-bottom:18px}.comments-area .comment-author{font-size:13px;line-height:1.5;padding-top:2px}.comments-area .comment-author .avatar{position:absolute;top:0;left:0;width:var(--comment-avatar);height:var(--comment-avatar);border-radius:50%;border:1px solid var(--line);margin:0}.comments-area .comment-author .fn{font-weight:650;font-style:normal;color:var(--ink)}.comments-area .comment-author .says{display:none}.comments-area .comment-metadata{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.6}.comments-area .comment-metadata a{color:inherit}.comments-area .comment-metadata a:hover{color:var(--accent)}.comments-area .edit-link{margin-left:10px}.comments-area .comment-content{font-size:13px;line-height:1.85;color:var(--ink)}.comments-area .comment-content p{margin-bottom:14px}.comments-area .comment-content>:last-child{margin-bottom:0}.comments-area .comment-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}.comments-area .comment-content img{max-width:100%;height:auto}.comments-area .comment-content pre{overflow-x:auto;padding:16px;background:var(--soft);border-radius:3px}.comments-area .comment-content ul,.comments-area .comment-content ol{padding-left:22px}.comments-area .reply{margin-top:17px}.comments-area .comment-reply-link{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:30px;color:var(--ink);font-size:11px;font-weight:600}.comments-area .comment-reply-link:hover{border-color:var(--accent);color:var(--accent)}.comments-area .comment-awaiting-moderation{color:var(--accent);font-size:12px}.comments-area .comment-respond{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}.comments-area>.comment-respond:first-child{margin-top:0;padding-top:0;border-top:0}.comments-area .comment-list .comment-respond{margin:0 0 24px;padding:24px;border:1px solid var(--line);border-radius:4px;background:var(--soft)}.comments-area .comment-reply-title{font:400 30px/1.3 Glegoo,Georgia,serif;letter-spacing:-.02em;margin-bottom:18px}.comments-area #cancel-comment-reply-link{display:inline-block;margin-left:12px;font:500 11px var(--sans);text-decoration:underline;color:var(--muted)}.comments-area .comment-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.comments-area .comment-form>p{grid-column:1/-1;margin:0}.comments-area .comment-form .comment-form-author{grid-column:1}.comments-area .comment-form .comment-form-email{grid-column:2}.comments-area .comment-form label{display:block;color:var(--ink);font-size:12px;margin-bottom:8px}.comments-area .comment-form textarea{min-height:175px;resize:vertical}.comments-area .comment-form .comment-notes,.comments-area .comment-form .logged-in-as,.comments-area .comment-form .comment-form-cookies-consent{color:var(--muted);font-size:12px;line-height:1.8}.comments-area .comment-form-cookies-consent{display:flex;gap:12px;align-items:start}.comments-area .comment-form-cookies-consent input{accent-color:var(--accent)}.comments-area .comment-form .submit{width:auto!important;min-width:180px;background:var(--accent)!important;color:var(--surface)!important;border-color:var(--accent)!important;font-size:13px!important;font-weight:650;cursor:pointer;padding-inline:24px!important}.comments-area .comment-form .submit:hover{filter:brightness(1.06)}.comments-area .comment-navigation{padding-block:16px;margin-bottom:20px}.comments-area .comment-navigation .nav-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:12px}.comments-area .no-comments{color:var(--muted);font-size:13px;padding-block:20px}
.dialog{width:min(650px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:30px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:5px;overflow:auto}.dialog::backdrop{background:#101b16a6}.dialog-heading{display:flex;align-items:start;justify-content:space-between;gap:24px;margin-bottom:20px}.dialog-heading h2{font-size:30px;margin:0}.dialog-heading .eyebrow{margin-bottom:9px}.search-results a{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line);align-items:center}.search-results img{width:78px;height:58px;object-fit:contain;background:var(--mount)}.search-results strong{display:block;font-size:15px}.search-results small{display:block;color:var(--muted)}.saved-item{display:flex;gap:15px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:16px 0}.saved-item a{overflow-wrap:anywhere}.saved-item button{font-size:12px;padding:8px;border:1px solid var(--line);background:var(--surface);min-height:40px}.preview-dialog{width:min(1200px,calc(100% - 32px));padding:18px}.preview-dialog img{margin-inline:auto;width:auto;max-width:100%;height:auto}.preview-dialog .dialog-heading{position:sticky;top:-18px;background:var(--surface);padding-block:10px}.preview-dialog .dialog-heading h2{font-size:18px}.preview-dialog .original-link{font-size:12px}.back-top{position:fixed;bottom:20px;right:20px;background:var(--surface);z-index:50}
