.pf-head { padding: 4.5rem 0 1.5rem; }
.pf-head h1 { margin: .8rem 0 0; font-size: clamp(2.2rem, 4vw, 3.4rem); letter-spacing: -.05em; line-height: 1.05; }
.pf-head p { margin: 1rem 0 0; max-width: 60ch; color: var(--muted); font-size: 1.05rem; line-height: 1.75; }

.pf-filters { display: flex; gap: .5rem; margin: 2rem 0 0; overflow-x: auto; padding-bottom: .35rem; scrollbar-width: none; }
.pf-filters::-webkit-scrollbar { display: none; }
.pf-filter { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .45rem; padding: .55rem .95rem; border: 1px solid rgba(var(--primary-strong-rgb), .16); border-radius: 999px; color: var(--muted); font-size: .78rem; white-space: nowrap; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.pf-filter:hover { border-color: rgba(var(--primary-rgb), .45); color: var(--text); }
.pf-filter.is-active { border-color: rgba(var(--primary-rgb), .5); background: rgba(var(--primary-rgb), .12); color: var(--primary-strong); }
.pf-filter svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pf-filter b { color: inherit; font-size: .68rem; opacity: .65; }

.pf-grid { display: grid; grid-template-columns: repeat(var(--pf-cols, 3), minmax(0, 1fr)); gap: 1.5rem; padding: 2.5rem 0 5rem; }
@media (max-width: 1000px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } }

.pf-card {
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid rgba(var(--primary-strong-rgb), .12);
    border-radius: 22px;
    background: rgba(var(--bg-rgb), .72);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .28);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.pf-card:hover { transform: translateY(-3px); border-color: rgba(var(--primary-rgb), .35); box-shadow: 0 30px 90px rgba(0, 0, 0, .4); }

.pf-card-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: rgba(var(--bg-2-rgb), .8); line-height: 0; }
.pf-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.pf-card:hover .pf-card-cover img { transform: scale(1.045); }

.pf-card-blank { display: grid; height: 100%; place-items: center; color: rgba(var(--primary-strong-rgb), .35); }
.pf-card-blank svg { width: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.2; }

.pf-card-body { display: flex; flex: 1; flex-direction: column; gap: .5rem; padding: 1.25rem; }
.pf-card-body h3 { margin: 0; font-size: 1.2rem; letter-spacing: -.02em; }
.pf-card-body h3 a { color: var(--text); }
.pf-card:hover h3 a { color: var(--primary-strong); }
.pf-card-body p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }

.pf-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: auto; padding-top: .75rem; color: var(--muted); font-size: .68rem; }

.pf-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary-strong); font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pf-chip svg { width: .8rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pf-chip.is-featured { background: rgba(var(--highlight-rgb), .14); color: var(--highlight); }

.pf-card-3d { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid rgba(var(--primary-strong-rgb), .28); border-radius: 999px; background: rgba(var(--bg-rgb), .82); color: var(--primary-strong); font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(8px); }

.pf-empty { display: grid; gap: .4rem; padding: 5rem 1rem; place-items: center; text-align: center; }
.pf-empty strong { color: var(--text); font-size: 1.1rem; }
.pf-empty span { color: var(--muted); }

.pf-project { padding: 3.5rem 0 5rem; }
.pf-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .78rem; }
.pf-back:hover { color: var(--primary-strong); }

.pf-project-head { margin: 1.5rem 0 2.5rem; }
.pf-project-head h1 { margin: .9rem 0 0; font-size: clamp(2.2rem, 4.5vw, 3.6rem); letter-spacing: -.05em; line-height: 1.03; }
.pf-project-head .pf-summary { margin: 1.1rem 0 0; max-width: 62ch; color: var(--muted); font-size: 1.1rem; line-height: 1.75; }

.pf-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; gap: 3rem; }
@media (max-width: 900px) { .pf-layout { grid-template-columns: 1fr; gap: 2rem; } }

.pf-section { margin-bottom: 3rem; }
.pf-section > h2 { margin: 0 0 1.1rem; font-size: 1.5rem; letter-spacing: -.03em; }

.pf-prose { color: var(--muted); font-size: 1rem; line-height: 1.85; }
.pf-prose > :first-child { margin-top: 0; }
.pf-prose h2, .pf-prose h3, .pf-prose h4 { margin: 2rem 0 .75rem; color: var(--text); letter-spacing: -.03em; }
.pf-prose p { margin: 0 0 1.1rem; }
.pf-prose a { color: var(--primary-strong); text-decoration: underline; text-underline-offset: .18em; }
.pf-prose ul, .pf-prose ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.pf-prose li { margin-bottom: .5rem; }
.pf-prose strong { color: var(--text); }
.pf-prose blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.2rem; border-left: 2px solid rgba(var(--primary-rgb), .5); color: var(--text); }

.pf-facts { position: sticky; top: 5.5rem; display: grid; gap: 0; padding: 1.35rem; border: 1px solid rgba(var(--primary-strong-rgb), .12); border-radius: 20px; background: rgba(var(--bg-rgb), .6); }
@media (max-width: 900px) { .pf-facts { position: static; } }
.pf-fact { display: grid; gap: .2rem; padding: .7rem 0; border-bottom: 1px solid rgba(var(--primary-strong-rgb), .08); }
.pf-fact:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-fact:first-child { padding-top: 0; }
.pf-fact dt { color: var(--muted); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pf-fact dd { margin: 0; color: var(--text); font-size: .88rem; overflow-wrap: anywhere; }

.pf-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-tag { padding: .3rem .6rem; border: 1px solid rgba(var(--primary-strong-rgb), .16); border-radius: 999px; color: var(--muted); font-size: .7rem; }

.pf-media-frame { position: relative; overflow: hidden; border: 1px solid rgba(var(--primary-strong-rgb), .12); border-radius: 20px; background: #000; aspect-ratio: 16 / 9; }
.pf-media-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

.pf-viewer {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(var(--primary-strong-rgb), .14);
    border-radius: 20px;
    background:
        radial-gradient(70% 70% at 50% 30%, rgba(var(--primary-rgb), .07), transparent 70%),
        rgba(var(--bg-2-rgb), .75);
}

@media (max-width: 640px) { .pf-viewer { aspect-ratio: 4 / 5; } }

.pf-viewer:fullscreen { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; }

.pf-viewer-stage { position: absolute; inset: 0; }
.pf-viewer-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.pf-viewer-launch { position: absolute; inset: 0; z-index: 3; display: grid; gap: .8rem; place-content: center; place-items: center; padding: 1.5rem; text-align: center; }
.pf-viewer-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.pf-viewer-launch > :not(.pf-viewer-poster) { position: relative; z-index: 1; }
.pf-viewer-poster { pointer-events: none; }
.pf-viewer-launch small { color: var(--muted); font-size: .72rem; }
.pf-viewer.is-loading .pf-viewer-launch button { opacity: .6; }

.pf-viewer-progress { position: absolute; inset: auto 0 0; z-index: 4; display: grid; gap: .5rem; padding: 1.25rem; place-items: center; }
.pf-viewer-bar { display: block; width: min(16rem, 70%); height: 3px; overflow: hidden; border-radius: 999px; background: rgba(var(--primary-strong-rgb), .18); }
.pf-viewer-bar i { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--primary); transition: width .2s ease; }
.pf-viewer-status { color: var(--muted); font-size: .72rem; }
.pf-viewer-status.is-error { color: var(--danger); }

.pf-viewer-tools { position: absolute; z-index: 5; right: .8rem; bottom: .8rem; display: flex; gap: .25rem; padding: .3rem; border: 1px solid rgba(var(--primary-strong-rgb), .2); border-radius: 999px; background: rgba(var(--bg-rgb), .72); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s ease; }
.pf-viewer.is-ready .pf-viewer-tools { opacity: 1; }
.pf-viewer-tools button { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s ease, color .2s ease; }
.pf-viewer-tools button:hover { background: rgba(var(--primary-rgb), .16); color: var(--primary-strong); }
.pf-viewer-tools button.is-on { background: rgba(var(--primary-rgb), .2); color: var(--primary-strong); }
.pf-viewer-tools svg { width: 1.05rem; }

.pf-viewer-hint { position: absolute; z-index: 5; bottom: 1.35rem; left: 1.1rem; margin: 0; color: var(--muted); font-size: .68rem; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.pf-viewer.is-ready .pf-viewer-hint { opacity: .8; }
@media (max-width: 560px) { .pf-viewer-hint { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .pf-card, .pf-card-cover img, .pf-gallery img { transition: none; }
}

.pf-admin-list { display: grid; gap: .5rem; margin-top: .75rem; }

.pf-row { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .75rem; border: 1px solid rgba(var(--primary-strong-rgb), .1); border-radius: .8rem; background: rgba(var(--bg-rgb), .4); }
.pf-row:hover { border-color: rgba(var(--primary-strong-rgb), .25); }
.pf-row-thumb { display: grid; overflow: hidden; aspect-ratio: 1; place-items: center; border-radius: .6rem; background: rgba(var(--bg-2-rgb), .8); color: var(--muted); }
.pf-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-row-thumb svg { width: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.pf-row-main { min-width: 0; }
.pf-row-main h3 { margin: 0; font-size: .92rem; }
.pf-row-main h3 a { color: var(--text); }
.pf-row-main h3 a:hover { color: var(--primary-strong); }
.pf-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .3rem; color: var(--muted); font-size: .64rem; }
.pf-row-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .35rem; }
.pf-row-actions form { margin: 0; }

.pf-status { padding: .16rem .45rem; border-radius: 999px; font-size: .56rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.pf-status-published { background: rgba(var(--success-rgb), .14); color: var(--success-soft); }
.pf-status-draft { background: rgba(var(--neutral-rgb), .16); color: var(--muted); }
.pf-status-featured { background: rgba(var(--highlight-rgb), .14); color: var(--highlight); }

@media (max-width: 700px) {
    .pf-row { grid-template-columns: 3rem minmax(0, 1fr); }
    .pf-row-actions { grid-column: 1 / -1; flex-wrap: wrap; }
}

.pf-form { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; gap: 1.25rem; }
@media (max-width: 1100px) { .pf-form { grid-template-columns: 1fr; } }
.pf-form-main, .pf-form-side { display: grid; gap: 1rem; align-content: start; }

.pf-card-panel { padding: 1.15rem; border: 1px solid rgba(var(--primary-strong-rgb), .12); border-radius: 1rem; background: rgba(var(--bg-rgb), .45); }
.pf-card-panel > h2 { margin: 0 0 .2rem; font-size: .95rem; }
.pf-card-panel > p.pf-note { margin: 0 0 .9rem; color: var(--muted); font-size: .68rem; line-height: 1.6; }
.pf-fields { display: grid; gap: .8rem; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 560px) { .pf-two { grid-template-columns: 1fr; } }

.pf-field { display: grid; gap: .3rem; }
.pf-field > span { color: var(--muted); font-size: .68rem; font-weight: 600; }
.pf-field > small { color: var(--muted); font-size: .62rem; line-height: 1.5; }
.pf-field .form-field { padding: .55rem .65rem; font-size: .78rem; }
.pf-field textarea.form-field { min-height: 5rem; resize: vertical; }

.pf-check { display: flex; align-items: center; gap: .5rem; color: var(--text); font-size: .74rem; cursor: pointer; }
.pf-check input { width: 1rem; height: 1rem; accent-color: var(--primary); }

.pf-repeat { display: grid; gap: .45rem; }
.pf-repeat-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid rgba(var(--primary-strong-rgb), .1); border-radius: .65rem; background: rgba(var(--bg-rgb), .5); }
.pf-repeat-row.is-dragging { opacity: .4; }
.pf-repeat-grip { color: var(--muted); cursor: grab; font-size: .85rem; line-height: 1; }
.pf-repeat-thumb { width: 2.4rem; height: 2.4rem; overflow: hidden; border-radius: .4rem; background: rgba(var(--bg-2-rgb), .8); }
.pf-repeat-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-repeat-body { display: grid; min-width: 0; gap: .35rem; }
.pf-repeat-body .form-field { padding: .4rem .55rem; font-size: .72rem; }
.pf-repeat-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: .35rem; }
.pf-icon-btn { display: grid; width: 1.9rem; height: 1.9rem; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid transparent; border-radius: .45rem; background: transparent; color: var(--muted); cursor: pointer; }
.pf-icon-btn:hover { border-color: var(--line); background: rgba(var(--primary-rgb), .1); color: var(--primary-strong); }
.pf-icon-btn.is-danger:hover { border-color: rgba(var(--danger-rgb), .4); color: var(--danger); }
.pf-add { width: 100%; padding: .5rem; border: 1px dashed rgba(var(--primary-strong-rgb), .3); border-radius: .55rem; background: transparent; color: var(--primary-strong); font: inherit; font-size: .72rem; cursor: pointer; }
.pf-add:hover { background: rgba(var(--primary-rgb), .08); }

.pf-model { display: grid; gap: .5rem; padding: .75rem; border: 1px solid rgba(var(--primary-strong-rgb), .14); border-radius: .7rem; background: rgba(var(--bg-rgb), .55); }
.pf-model-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pf-model-name { min-width: 0; overflow: hidden; flex: 1; color: var(--text); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.pf-model-meta { color: var(--muted); font-size: .66rem; }
.pf-model form { margin: 0; }

.pf-warn { display: grid; gap: .2rem; padding: .6rem .7rem; border: 1px solid rgba(var(--warning-rgb), .3); border-radius: .55rem; background: rgba(var(--warning-rgb), .09); color: var(--warning-soft); font-size: .68rem; line-height: 1.55; }
.pf-warn strong { color: var(--text); }

.pf-type-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; padding: .85rem; border: 1px solid rgba(var(--primary-strong-rgb), .1); border-radius: .8rem; background: rgba(var(--bg-rgb), .4); }
.pf-type-icon { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .6rem; background: rgba(var(--primary-rgb), .12); color: var(--primary-strong); }
.pf-type-icon svg { width: 1.15rem; }
.pf-type-row form { margin: 0; }

.pf-help { border: 1px solid rgba(var(--primary-strong-rgb), .14); border-radius: .55rem; background: rgba(var(--bg-rgb), .5); }
.pf-help > summary { padding: .5rem .65rem; color: var(--primary-strong); font-size: .7rem; cursor: pointer; list-style: none; }
.pf-help > summary::-webkit-details-marker { display: none; }
.pf-help > summary::before { content: "?"; display: inline-grid; width: 1.05rem; height: 1.05rem; margin-right: .4rem; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .62rem; vertical-align: -.15rem; }
.pf-help[open] > summary { border-bottom: 1px solid rgba(var(--primary-strong-rgb), .12); }
.pf-help > div { display: grid; gap: .5rem; padding: .6rem .65rem .7rem; }
.pf-help p { margin: 0; color: var(--muted); font-size: .67rem; line-height: 1.6; }
.pf-help strong { color: var(--text); }
.pf-help code { padding: .05rem .25rem; border-radius: .25rem; background: rgba(var(--primary-strong-rgb), .1); color: var(--primary-strong); font-size: .95em; }

.pf-switches { display: grid; gap: .45rem; padding: .6rem .65rem; border: 1px solid rgba(var(--primary-strong-rgb), .1); border-radius: .55rem; background: rgba(var(--bg-rgb), .4); }

.pf-field input[type="file"].form-field { padding: .4rem; font-size: .7rem; cursor: pointer; }
.pf-field input[type="file"].form-field::file-selector-button { margin-right: .6rem; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: .4rem; background: rgba(var(--bg-rgb), .8); color: var(--primary-strong); font: inherit; font-size: .68rem; cursor: pointer; }
.pf-field input[type="file"].form-field::file-selector-button:hover { border-color: rgba(var(--primary-rgb), .45); background: rgba(var(--primary-rgb), .12); }

.pf-3d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }

.pf-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; cursor: pointer; }
.pf-toggle input[type="checkbox"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.pf-toggle-track { position: relative; display: block; width: 2.4rem; height: 1.35rem; margin-top: .1rem; border: 1px solid rgba(var(--primary-strong-rgb), .28); border-radius: 999px; background: rgba(var(--bg-rgb), .8); transition: background .2s ease, border-color .2s ease; }
.pf-toggle-track::after { content: ""; position: absolute; top: 50%; left: .18rem; width: .95rem; height: .95rem; translate: 0 -50%; border-radius: 50%; background: var(--muted); transition: translate .2s ease, background .2s ease; }
.pf-toggle input:checked + .pf-toggle-track { border-color: rgba(var(--primary-rgb), .6); background: rgba(var(--primary-rgb), .22); }
.pf-toggle input:checked + .pf-toggle-track::after { translate: .95rem -50%; background: var(--primary-strong); }
.pf-toggle input:focus-visible + .pf-toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }

.pf-toggle-label strong { display: block; font-size: .88rem; }
.pf-toggle-label small { display: block; margin-top: .15rem; color: var(--muted); font-size: .68rem; line-height: 1.55; }

.pf-3d-body { display: none; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(var(--primary-strong-rgb), .12); }
.pf-3d.is-on .pf-3d-body { display: block; }

.pf-3d-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1.25rem; }
@media (max-width: 800px) { .pf-3d-grid { grid-template-columns: 1fr; } }

.pf-3d-empty { margin: 0; padding: .7rem .75rem; border: 1px dashed rgba(var(--primary-strong-rgb), .2); border-radius: .55rem; }

.pf-switches-inline { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

.pf-tool-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.pf-tools { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }

.pf-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .7rem .35rem .4rem;
    border: 1px solid rgba(var(--primary-strong-rgb), .14);
    border-radius: 999px;
    background: rgba(var(--bg-rgb), .6);
    color: var(--text);
    font-size: .76rem;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}

.pf-tool:hover, .pf-tool:focus-visible { border-color: rgba(var(--primary-rgb), .45); background: rgba(var(--primary-rgb), .09); outline: none; }

.pf-tool-mark { display: grid; width: 1.35rem; height: 1.35rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(var(--primary-strong-rgb), .1); color: var(--pf-tool-hex, var(--primary-strong)); font-size: .62rem; font-weight: 800; }
.pf-tool-mark svg { width: .85rem; height: .85rem; fill: currentColor; }
.pf-tool-name { white-space: nowrap; }

.pf-tool[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 5;
    bottom: calc(100% + .4rem);
    left: 50%;
    padding: .3rem .55rem;
    translate: -50% 0;
    border: 1px solid rgba(var(--primary-strong-rgb), .25);
    border-radius: .4rem;
    background: rgb(var(--bg-rgb));
    color: var(--text);
    font-size: .68rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, translate .15s ease;
}

.pf-tool[data-tip]:hover::after,
.pf-tool[data-tip]:focus-visible::after { opacity: 1; translate: -50% -.15rem; }

@media (prefers-reduced-motion: reduce) {
    .pf-tool, .pf-tool[data-tip]::after { transition: none; }
}

.pf-tool-picker { display: grid; gap: .6rem; }
.pf-tool-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.pf-tool-editable { padding-right: .35rem; }
.pf-tool-remove { display: grid; width: 1.1rem; height: 1.1rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; font-size: .9rem; line-height: 1; }
.pf-tool-remove:hover { background: rgba(var(--danger-rgb), .16); color: var(--danger); }

.pf-tool-search { position: relative; }
.pf-tool-search .form-field { padding: .55rem .65rem; font-size: .78rem; }

.pf-tool-results { position: absolute; z-index: 30; top: calc(100% + .3rem); right: 0; left: 0; max-height: 15rem; overflow-y: auto; padding: .25rem; border: 1px solid rgba(var(--primary-strong-rgb), .25); border-radius: .6rem; background: rgb(var(--bg-rgb)); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
.pf-tool-results[hidden] { display: none; }

.pf-tool-option { display: flex; width: 100%; align-items: center; gap: .5rem; padding: .4rem .5rem; border: 0; border-radius: .4rem; background: transparent; color: var(--text); font: inherit; font-size: .76rem; text-align: left; cursor: pointer; }
.pf-tool-option:hover, .pf-tool-option.is-active { background: rgba(var(--primary-rgb), .13); }
.pf-tool-option.is-custom { color: var(--primary-strong); }
.pf-tool-option.is-custom .pf-tool-mark { background: rgba(var(--primary-rgb), .16); color: var(--primary-strong); }

.pf-label { display: block; color: var(--muted); font-size: .68rem; font-weight: 600; }
.pf-label small { font-weight: 400; opacity: .75; }

.pf-media-split { display: grid; grid-template-columns: 14rem minmax(0, 1fr); align-items: start; gap: 1.25rem; }
@media (max-width: 780px) { .pf-media-split { grid-template-columns: 1fr; } }

.pf-tool.is-mark-only { padding: .35rem; }
.pf-tool.is-mark-only .pf-tool-mark { width: 1.7rem; height: 1.7rem; }
.pf-tool.is-mark-only .pf-tool-mark svg { width: 1.05rem; height: 1.05rem; }

.pf-layout.is-single { grid-template-columns: minmax(0, 32rem); }
.pf-layout.is-single .pf-facts { position: static; }

.pf-viewer-admin { aspect-ratio: 16 / 11; border-radius: .7rem; }
.pf-viewer-admin .pf-viewer-launch small { max-width: 22ch; line-height: 1.5; }

.pf-details { min-width: 0; border: 1px solid rgba(var(--primary-strong-rgb), .14); border-radius: 10px; background: rgb(var(--bg-rgb)); }
.pf-details-title { margin: 0; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(var(--primary-strong-rgb), .12); background: rgba(var(--primary-strong-rgb), .035); font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.pf-details .pf-facts { position: static; margin: 0; padding: .25rem 1.25rem; border: 0; border-radius: 0; background: none; }
.pf-details .pf-fact { gap: .45rem; padding: 1rem 0; }
.pf-details .pf-fact dt { font-size: .7rem; letter-spacing: .02em; font-weight: 500; text-transform: none; }
.pf-details .pf-fact dd { font-size: .9rem; line-height: 1.5; }

.pf-details .pf-tools { gap: .5rem; }
.pf-details .pf-tool[data-tip]::after { width: max-content; max-width: 9rem; white-space: normal; text-align: center; }
.pf-details .pf-tag { border-radius: 4px; background: rgba(var(--primary-strong-rgb), .045); }
.pf-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.pf-layout.is-single .pf-details .pf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); column-gap: 2rem; }
.pf-layout.is-single .pf-details .pf-fact { border-bottom: 0; }

.pf-viewer-modes { position: absolute; z-index: 5; top: .8rem; left: .8rem; display: flex; align-items: center; gap: .6rem; padding: .45rem .65rem; border: 1px solid rgba(var(--primary-strong-rgb), .2); border-radius: 7px; background: rgba(var(--bg-rgb), .9); color: var(--muted); font-size: .72rem; visibility: hidden; }
.pf-viewer.is-ready .pf-viewer-modes { visibility: visible; }
.pf-viewer-modes .custom-select { width: 8.5rem; }
.pf-viewer-modes .custom-select-trigger { padding: .5rem 1.85rem .5rem .6rem; border-radius: .55rem; font-size: .72rem; }
.pf-viewer-modes .custom-select-chevron { right: .65rem; width: 7px; height: 7px; border-width: 1.5px; }
.pf-viewer-mode-menu { position: fixed; right: auto; max-height: 15rem; overflow-y: auto; border: 1px solid rgba(var(--primary-strong-rgb), .22); border-radius: .6rem; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); z-index: 80; }
.pf-viewer-mode-menu .custom-option { padding: .5rem .65rem; font-size: .72rem; }
.pf-viewer-tools button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.pf-viewer-tools { visibility: hidden; }
.pf-viewer.is-ready .pf-viewer-tools { visibility: visible; }
.pf-viewer-admin .pf-viewer-hint { display: none; }

.pb-portfolio { display: grid; gap: 1.75rem; }
.pb-portfolio .pf-filters { margin: 0; }
.pb-portfolio .pf-grid { padding: 0; }
.pb-portfolio .pf-empty { padding: 3.5rem 1.5rem; border: 1px dashed rgba(var(--primary-strong-rgb), .16); border-radius: 20px; background: rgba(var(--bg-2-rgb), .45); }
.pb-portfolio-more { margin: 0; }

.pb-portfolio nav { display: flex; justify-content: center; }

.pf-stage {
    display: grid;
    align-items: start;
    margin-bottom: 3rem;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 21rem;
}

.pf-stage.is-single { grid-template-columns: minmax(0, 1fr); }
.pf-stage-media { min-width: 0; }

.pf-stage .pf-cover { margin-bottom: 0; }

.pf-stage .pf-viewer { aspect-ratio: 16 / 10; }

.pf-stage .pf-viewer:fullscreen { aspect-ratio: auto; }

.pf-stage .pf-details { position: sticky; top: 5.5rem; }

@media (max-width: 960px) {
    .pf-stage { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .pf-stage .pf-details { position: static; }
}

@media (max-width: 640px) {
    .pf-stage .pf-viewer { aspect-ratio: 4 / 5; }
}

.pf-related .pf-grid { padding: 0; }

.pf-gallery.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pf-gallery.is-grid .pf-shot-image { aspect-ratio: var(--pf-shot-ratio, 16 / 10); }
.pf-gallery.is-grid .pf-shot-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .pf-gallery.is-grid { grid-template-columns: 1fr; } }

.pf-gallery.is-masonry { columns: 2; column-gap: 1rem; }
.pf-gallery.is-masonry .pf-shot { break-inside: avoid; margin-bottom: 1rem; }
@media (max-width: 640px) { .pf-gallery.is-masonry { columns: 1; } }

.pf-gallery.is-showcase { display: grid; gap: 2rem; }

.pf-shot { margin: 0; }
.pf-shot-image { display: block; overflow: hidden; border: 1px solid rgba(var(--primary-strong-rgb), .12); border-radius: 16px; line-height: 0; }
.pf-shot-image img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.pf-shot-image:hover img { transform: scale(1.02); }
.pf-shot figcaption { margin-top: .5rem; color: var(--muted); font-size: .76rem; }

.pf-shot.is-framed .pf-shot-image,
.pf-cover.is-framed { border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }

.pf-shot-chrome {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .75rem;
    border: 1px solid rgba(var(--primary-strong-rgb), .12);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: rgba(var(--bg-2-rgb), .9);
}

.pf-shot-chrome i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(var(--primary-strong-rgb), .28); }

.pf-shot-host {
    overflow: hidden;
    max-width: 60%;
    margin-left: .5rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: rgba(var(--bg-rgb), .75);
    color: var(--muted);
    font-size: .64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-cover { position: relative; display: flex; overflow: hidden; flex-direction: column; margin-bottom: 2.5rem; border: 1px solid rgba(var(--primary-strong-rgb), .12); border-radius: 20px; background: rgba(var(--bg-2-rgb), .5); line-height: 0; }
.pf-cover img { width: 100%; height: auto; }

.pf-stage .pf-cover { aspect-ratio: 16 / 10; }
.pf-stage .pf-cover img { flex: 1; min-height: 0; height: 100%; }
.pf-stage .pf-cover.is-fit-cover img { object-fit: cover; }

.pf-stage .pf-cover.is-fit-contain img { object-fit: contain; padding: 1.5rem; box-sizing: border-box; }

.pf-cover .pf-shot-chrome { flex: 0 0 auto; border: 0; border-bottom: 1px solid rgba(var(--primary-strong-rgb), .1); border-radius: 0; }

.pf-code { display: grid; gap: 1.25rem; }

.pf-code-block {
    --code-fg: #d4d4d4;
    --code-comment: #6a9955;
    --code-keyword: #569cd6;
    --code-control: #c586c0;
    --code-string: #ce9178;
    --code-number: #b5cea8;
    --code-function: #dcdcaa;
    --code-type: #4ec9b0;
    --code-variable: #9cdcfe;
    --code-operator: #d4d4d4;
    --code-regexp: #d16969;
    --code-invalid: #f44747;

    position: relative;
    overflow: hidden;
    margin: 0;
    border: 1px solid rgba(var(--primary-strong-rgb), .16);
    border-radius: 14px;
    background: rgba(var(--bg-2-rgb), .6);
}

.pf-code-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem .55rem .85rem;
    border-bottom: 1px solid rgba(var(--primary-strong-rgb), .12);
    background: rgba(var(--bg-rgb), .55);
}

.pf-code-lang {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border: 1px solid rgba(var(--primary-strong-rgb), .16);
    border-radius: 999px;
    background: rgba(var(--bg-2-rgb), .7);
    color: var(--text);
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pf-code-lang svg { width: .8rem; height: .8rem; fill: var(--pf-code-hex, currentColor); }

.pf-code-title { overflow: hidden; min-width: 0; color: var(--text); font-size: .8rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }

.pf-code-lines { flex: 0 0 auto; margin-left: auto; color: var(--muted); font-size: .64rem; font-variant-numeric: tabular-nums; }

.pf-code-copy { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid rgba(var(--primary-strong-rgb), .18); border-radius: .45rem; background: transparent; color: var(--muted); font: inherit; font-size: .66rem; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.pf-code-copy svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pf-code-copy:hover { border-color: rgba(var(--primary-rgb), .45); background: rgba(var(--primary-rgb), .1); color: var(--primary-strong); }
.pf-code-copy[hidden] { display: none; }

@media (max-width: 560px) {
    .pf-code-title { display: none; }
}

.pf-code-body { display: grid; grid-template-columns: auto minmax(0, 1fr); background: rgba(0, 0, 0, .26); }

.pf-code-gutter,
.pf-code-pre {
    margin: 0;
    padding: 1rem 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .78rem;
    line-height: 1.65;
    tab-size: 4;
}

.pf-code-gutter {
    padding-right: .9rem;
    padding-left: 1rem;
    border-right: 1px solid rgba(var(--primary-strong-rgb), .1);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    opacity: .55;
    text-align: right;
    user-select: none;
}

.pf-code-pre { padding-right: 1.1rem; padding-left: 1.1rem; overflow-x: auto; color: var(--code-fg); }
.pf-code-pre code { font: inherit; background: none; }

.pf-code-block.is-long .pf-code-body { max-height: 26rem; overflow-y: hidden; }
.pf-code-block.is-long::after { content: ""; position: absolute; right: 0; bottom: 2.6rem; left: 0; height: 5rem; background: linear-gradient(rgba(var(--bg-2-rgb), 0), rgba(var(--bg-2-rgb), .96)); pointer-events: none; }

.pf-code-more { display: block; position: relative; z-index: 1; width: 100%; padding: .65rem; border: 0; border-top: 1px solid rgba(var(--primary-strong-rgb), .12); background: rgba(var(--bg-rgb), .6); color: var(--primary-strong); font: inherit; font-size: .7rem; cursor: pointer; }
.pf-code-more:hover { background: rgba(var(--primary-rgb), .1); }

.pf-code-pre .hljs-comment,
.pf-code-pre .hljs-quote { color: var(--code-comment); font-style: italic; }

.pf-code-pre .hljs-keyword,
.pf-code-pre .hljs-literal,
.pf-code-pre .hljs-selector-tag,
.pf-code-pre .hljs-tag .hljs-name,
.pf-code-pre .hljs-name { color: var(--code-keyword); }

.pf-code-pre .hljs-meta,
.pf-code-pre .hljs-meta .hljs-keyword,
.pf-code-pre .hljs-doctag,
.pf-code-pre .hljs-subst { color: var(--code-control); }

.pf-code-pre .hljs-string,
.pf-code-pre .hljs-addition,
.pf-code-pre .hljs-char,
.pf-code-pre .hljs-meta .hljs-string { color: var(--code-string); }

.pf-code-pre .hljs-regexp,
.pf-code-pre .hljs-link { color: var(--code-regexp); }

.pf-code-pre .hljs-number,
.pf-code-pre .hljs-symbol,
.pf-code-pre .hljs-bullet,
.pf-code-pre .hljs-selector-pseudo { color: var(--code-number); }

.pf-code-pre .hljs-variable,
.pf-code-pre .hljs-template-variable,
.pf-code-pre .hljs-attr,
.pf-code-pre .hljs-attribute,
.pf-code-pre .hljs-property,
.pf-code-pre .hljs-params,
.pf-code-pre .hljs-selector-attr { color: var(--code-variable); }

.pf-code-pre .hljs-title,
.pf-code-pre .hljs-section,
.pf-code-pre .hljs-title.function_,
.pf-code-pre .hljs-selector-id,
.pf-code-pre .hljs-selector-class { color: var(--code-function); }

.pf-code-pre .hljs-type,
.pf-code-pre .hljs-built_in,
.pf-code-pre .hljs-class .hljs-title,
.pf-code-pre .hljs-title.class_,
.pf-code-pre .hljs-title.class_.inherited__ { color: var(--code-type); }

.pf-code-pre .hljs-operator,
.pf-code-pre .hljs-punctuation { color: var(--code-operator); }

.pf-code-pre .hljs-deletion { color: var(--code-invalid); }
.pf-code-pre .hljs-emphasis { font-style: italic; }
.pf-code-pre .hljs-strong { font-weight: 700; }

.pf-present { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .85rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(var(--primary-strong-rgb), .1); }
.pf-present [hidden] { display: none; }

.pf-code-rows .pf-repeat-row { align-items: start; }
.pf-code-row .pf-repeat-body { display: grid; gap: .5rem; }
.pf-code-row .pf-repeat-pair { grid-template-columns: minmax(0, 1fr) 11rem; }

.pf-code-input { min-height: 7.5rem; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .74rem; line-height: 1.6; tab-size: 4; white-space: pre; overflow-wrap: normal; overflow-x: auto; resize: vertical; }

.pf-present + .pf-check { margin-top: .9rem; }