.patterns{--patterns-side-width:calc(var(--perron-size-sheet-width) * 2 / 3);--patterns-card-min:calc(var(--perron-size-detail-width) * 4 / 5);align-items:flex-start;gap:var(--perron-space-800);display:flex}.patterns-main{gap:var(--perron-space-800);flex-direction:column;flex:1 1 0;min-inline-size:0;display:flex}.patterns-intro{max-inline-size:var(--site-measure);font:var(--perron-typography-body);letter-spacing:var(--perron-typography-body-tracking);color:var(--perron-color-text-secondary);margin:0}.patterns-section{gap:var(--perron-space-400);flex-direction:column;display:flex}.patterns-heading{align-items:baseline;gap:var(--perron-space-200);font:var(--perron-typography-heading-md);letter-spacing:var(--perron-typography-heading-md-tracking);margin:0;display:flex}.patterns-count{font:var(--perron-typography-data);letter-spacing:var(--perron-typography-data-tracking);color:var(--perron-color-text-secondary)}.patterns-action{block-size:var(--perron-size-button-sm);padding-inline:var(--perron-space-300);border-radius:var(--perron-radius-md);font:var(--perron-typography-label);letter-spacing:var(--perron-typography-label-tracking);color:var(--perron-color-text-primary);align-items:center;text-decoration:none;display:inline-flex}.patterns-nav{box-sizing:border-box;inline-size:var(--patterns-side-width);padding:var(--perron-space-300);border-radius:var(--perron-radius-xl);gap:var(--perron-space-100);flex-direction:column;flex:none;display:flex}.patterns-nav-group{gap:var(--perron-space-100);flex-direction:column;display:flex}.patterns-nav-category{padding:var(--perron-space-300) var(--perron-space-300) var(--perron-space-100);font:var(--perron-typography-overline);letter-spacing:var(--perron-typography-overline-tracking);text-transform:uppercase;color:var(--perron-color-text-secondary)}.patterns-nav-link{justify-content:space-between;align-items:center;gap:var(--perron-space-200);min-block-size:var(--perron-size-segment);padding-inline:var(--perron-space-300);border-radius:var(--perron-radius-md);font:var(--perron-typography-body-sm);letter-spacing:var(--perron-typography-body-sm-tracking);color:var(--perron-color-text-secondary);text-decoration:none;display:flex}.patterns-nav-link[aria-current]{font:var(--perron-typography-label);letter-spacing:var(--perron-typography-label-tracking);color:var(--perron-color-text-primary);background-color:var(--perron-color-surface-selected)}.patterns-nav-link .patterns-count{font:var(--perron-typography-data-sm);letter-spacing:var(--perron-typography-data-sm-tracking)}.patterns-nav-rule{inline-size:100%;margin:var(--perron-space-200) 0 var(--perron-space-100);border:0;border-block-start:var(--perron-border-width-025) solid var(--perron-color-border-subtle)}.patterns-screen-head{justify-content:space-between;align-items:center;gap:var(--perron-space-300);flex-wrap:wrap;display:flex}.patterns-screen{grid-template-columns:minmax(0, var(--patterns-side-width)) minmax(min-content, 1fr);column-gap:var(--perron-size-panel-gap);min-block-size:var(--perron-size-dialog-width);padding:var(--perron-size-panel-gap);border:var(--perron-border-width-025) solid var(--perron-color-border-subtle);border-radius:var(--perron-radius-xl);background:var(--perron-color-map-land);padding-inline-end:calc(var(--perron-size-detail-width) + 2 * var(--perron-size-panel-gap));display:grid;position:relative;overflow:hidden}.patterns-screen[data-mode=kiosk]{row-gap:var(--perron-size-panel-gap);grid-template-rows:auto 1fr;padding-inline-end:var(--perron-size-panel-gap)}.patterns-screen-map{position:absolute;inset:0}.patterns-screen[data-zoom="1"]{--map-zoom:2}.patterns-screen[data-zoom="2"]{--map-zoom:4}.patterns-screen-overview{align-self:start;gap:var(--perron-space-300);padding:var(--perron-space-300);border-radius:var(--perron-radius-xl);flex-direction:column;grid-column:1;display:flex;position:relative}.patterns-overline{font:var(--perron-typography-overline);letter-spacing:var(--perron-typography-overline-tracking);text-transform:uppercase;color:var(--perron-color-text-secondary)}.patterns-screen-kiosk{grid-column:1/-1;align-self:start;position:relative}.patterns-screen .patterns-screen-detail{justify-content:flex-end;align-items:flex-start;position:absolute;inset:0}.patterns-screen-detail-marker{position:absolute;inset-block-start:calc(var(--perron-size-panel-gap) - var(--perron-size-badge) / 2);inset-inline-end:calc(var(--perron-size-panel-gap) + var(--perron-size-detail-width) - var(--perron-size-badge) / 2)}.patterns-screen-tools{justify-content:flex-end;place-self:end;align-items:flex-end;gap:var(--perron-space-200);flex-wrap:wrap-reverse;grid-column:2;display:flex;position:relative}.patterns-screen[data-mode=kiosk] .patterns-screen-tools{grid-row:2}.patterns-screen-scale{position:relative}.patterns-marker{inline-size:var(--perron-size-badge);block-size:var(--perron-size-badge);border-radius:var(--perron-radius-full);background:var(--perron-color-surface-inverse);color:var(--perron-color-text-inverse);font:var(--perron-typography-badge);letter-spacing:var(--perron-typography-badge-tracking);justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:calc(var(--perron-size-badge) / -2);inset-inline-end:calc(var(--perron-size-badge) / -2)}.patterns-screen-scale .patterns-marker,.patterns-screen-detail-marker .patterns-marker{position:static}.patterns-screen-scale .patterns-marker{inset-inline:calc(var(--perron-size-badge) / -2) auto;position:absolute}.patterns-places{gap:var(--perron-space-200) var(--perron-space-600);font:var(--perron-typography-body-sm);letter-spacing:var(--perron-typography-body-sm-tracking);color:var(--perron-color-text-secondary);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.patterns-places-number{font:var(--perron-typography-label);letter-spacing:var(--perron-typography-label-tracking);color:var(--perron-color-text-primary)}.patterns-grid{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--patterns-card-min)), 1fr));gap:var(--perron-space-400);display:grid}.patterns-card{border:var(--perron-border-width-025) solid var(--perron-color-border-subtle);border-radius:var(--perron-radius-xl);background:var(--perron-color-surface-raised);flex-direction:column;display:flex;overflow:hidden}.patterns-stage{box-sizing:border-box;block-size:var(--perron-size-sheet-peek);padding:var(--perron-space-400);background:var(--perron-color-surface-inset);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.patterns-stage[data-stage=map]{background:var(--perron-color-map-land);padding:0}.patterns-stage-preview{flex:1;min-inline-size:0;position:relative}.patterns-stage[data-stage=map]>.patterns-stage-preview{padding:var(--perron-size-panel-gap);align-self:stretch;align-items:center;display:flex}.patterns-stage[data-stage=map]>.patterns-stage-preview:has(>.preview-frame){padding:0}.patterns-stage .preview-frame{justify-content:center}.patterns-stage[data-stage=panel]>.patterns-stage-preview{padding:var(--perron-space-300);border-radius:var(--perron-radius-lg);background:var(--perron-color-surface-raised)}.patterns-card-body{gap:var(--perron-space-200);padding:var(--perron-space-400);color:inherit;flex-direction:column;flex:1;text-decoration:none;display:flex}.patterns-card-body:focus-visible{outline-offset:calc(-1 * (var(--perron-focus-width) + var(--perron-focus-offset)))}.patterns-card-name{font:var(--perron-typography-heading-sm);letter-spacing:var(--perron-typography-heading-sm-tracking);margin:0}.patterns-card-description{font:var(--perron-typography-body-sm);letter-spacing:var(--perron-typography-body-sm-tracking);color:var(--perron-color-text-secondary);margin:0}.patterns-card-parts,.patterns-designing-parts{font:var(--perron-typography-data-sm);letter-spacing:var(--perron-typography-data-sm-tracking);color:var(--perron-color-text-secondary)}.patterns-designing{grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--patterns-side-width)), 1fr));gap:var(--perron-space-300);margin:0;padding:0;list-style:none;display:grid}.patterns-designing-item{gap:var(--perron-space-150);padding:var(--perron-space-300) var(--perron-space-400);border:var(--perron-border-width-025) dashed var(--perron-color-border-strong);border-radius:var(--perron-radius-lg);flex-direction:column;display:flex}.patterns-designing-name{font:var(--perron-typography-heading-sm);letter-spacing:var(--perron-typography-heading-sm-tracking)}.patterns-use{gap:var(--perron-space-600);padding:var(--perron-space-500);border:var(--perron-border-width-025) solid var(--perron-color-border-subtle);border-radius:var(--perron-radius-xl);background:var(--perron-color-surface-raised);flex-wrap:wrap;display:flex}.patterns-use-text{flex:1 1 var(--patterns-side-width);gap:var(--perron-space-200);flex-direction:column;display:flex}.patterns-use-lead{font:var(--perron-typography-body);letter-spacing:var(--perron-typography-body-tracking);color:var(--perron-color-text-secondary);margin:0}.patterns-code{flex:1 1 var(--perron-size-sheet-width);min-inline-size:0;padding:var(--perron-space-400);border-radius:var(--perron-radius-lg);background:var(--perron-color-surface-inset);font:var(--perron-typography-data);letter-spacing:var(--perron-typography-data-tracking);color:var(--perron-color-text-secondary);margin:0;overflow-x:auto}.patterns-code-keyword{color:var(--perron-color-text-primary)}@media (max-width:1179.98px){.patterns-nav{display:none}}@media (max-width:759.98px){.patterns-screen,.patterns-screen[data-mode=kiosk]{row-gap:var(--perron-size-panel-gap);grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr);padding-inline-end:var(--perron-size-panel-gap)}.patterns-screen[data-mode=screen]{padding-block-end:calc(var(--perron-size-sheet-peek) + var(--perron-size-panel-gap))}.patterns-screen-overview,.patterns-screen-kiosk .pn-KioskBar{background:var(--perron-color-surface-default);-webkit-backdrop-filter:none;backdrop-filter:none}.patterns-stage .map{display:none}.patterns-screen-tools{grid-area:2/1}.patterns-screen-detail-marker{inset-block:auto calc(var(--perron-size-sheet-peek) - var(--perron-size-badge) / 2);inset-inline:var(--perron-space-200) auto}}