.p-notch-lab { container-type: inline-size; min-width: 0; margin: 30px 0 38px; overflow: hidden; border: 1px solid var(--p-rule); border-radius: 15px; background: var(--p-surface); box-shadow: var(--p-shadow); }
.p-notch-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 25px 0; }
.p-notch-heading .p-mono { color: var(--p-accent); font-size: 8px; letter-spacing: .07em; }
.p-prose .p-notch-heading h3 { margin: 7px 0 0; font: 37px/1.04 var(--p-serif); letter-spacing: -.04em; }
.p-notch-edition { flex-shrink: 0; align-self: start; padding-top: 3px; }
.p-prose .p-notch-intro { max-width: 52ch; margin: 15px 25px 22px; color: var(--p-muted); font-size: 12px; line-height: 1.8; }
.p-notch-tools { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 25px 22px; }
.p-notch-mode { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--p-rule); border-radius: 8px; background: var(--p-paper); }
.p-site .p-notch-mode>button { min-width: 105px; min-height: 48px; padding: 7px 12px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--p-muted); text-align: left; font-size: 11px; line-height: 1.4; }
.p-notch-mode>button>span { display: block; margin-top: 3px; font-size: 8px; }
.p-site .p-notch-mode>button[aria-pressed='true'] { border-color: var(--p-rule); background: var(--p-surface); color: var(--p-accent); box-shadow: 0 1px 3px #142d280b; }
.p-site .p-notch-trace { display: inline-flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 40px; padding: 9px 12px; border: 1px solid var(--p-rule); border-radius: 7px; background: var(--p-surface); color: var(--p-accent); font-size: 10px; white-space: nowrap; }
.p-notch-trace[aria-pressed='true']>span:last-child { font-size: 0; }
.p-notch-trace[aria-pressed='true']>span:last-child::after { content: '■'; font-size: 9px; }
.p-notch-stage { --notch-edge: 64px; position: relative; isolation: isolate; height: clamp(260px,70cqw,500px); min-width: 0; overflow: hidden; border-block: 1px solid var(--p-rule); background: var(--p-paper); }
.p-notch-stage::after { content: ''; position: absolute; z-index: 0; inset: var(--notch-edge) 0 0; background-image: radial-gradient(var(--p-muted) .6px,transparent .6px); background-size: 22px 22px; opacity: .17; pointer-events: none; }
.p-notch-stage-label, .p-notch-framing { position: absolute; z-index: 3; top: 16px; left: 24px; color: var(--p-muted); font-size: 7px; letter-spacing: .035em; }
.p-notch-framing { right: 24px; left: auto; letter-spacing: .01em; }
.p-notch-wall { position: absolute; z-index: -1; inset: var(--notch-edge) 0 0; background-image: linear-gradient(180deg,#142d2812,#142d2812),var(--p-wall); background-size: cover; background-position: var(--p-wall-position,center); opacity: .19; }
.p-notch-edge { position: absolute; z-index: 0; top: var(--notch-edge); left: 0; right: 0; height: 1px; background: color-mix(in srgb,var(--p-ink) 40%,transparent); }
.p-notch-edge::before, .p-notch-edge::after { content: ''; position: absolute; top: -6px; width: 1px; height: 12px; background: var(--p-rule); }.p-notch-edge::before { left: 24px; }.p-notch-edge::after { right: 24px; }
.p-notch-static { position: absolute; top: calc(var(--notch-edge) + 4px); left: 50%; display: grid; place-items: center; width: 140px; height: 28px; border-radius: 99px; background: #050607; color: #f7f7ef; font: 12px var(--p-mono); transform: translateX(-50%); }
.p-notch-outline, .p-notch-surface, .p-notch-ruler { display: none; }
[data-shape-ready] .p-notch-static { display: none; }
[data-shape-ready] .p-notch-outline, [data-shape-ready] .p-notch-surface { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.p-notch-outline { z-index: 1; overflow: visible; fill: #050607; filter: drop-shadow(0 9px 11px #0000001a); }
.p-notch-surface { z-index: 2; pointer-events: none; }
.p-notch-clock, .p-notch-capture { position: absolute; overflow: hidden; }
.p-notch-clock { display: flex; align-items: center; justify-content: center; color: #f7f7ef; font: 13px/1 var(--p-mono); letter-spacing: .04em; }
.p-site .p-notch-capture>img { position: absolute; display: block; max-width: none; height: auto; border-radius: 0; }
.p-notch-capture[data-unavailable]::after { content: attr(data-panel-title); display: grid; place-items: center; height: 100%; padding: 12px; color: #f7f7ef; font: 12px/1.6 var(--p-sans); text-align: center; }
[data-shape-ready] .p-notch-ruler { position: absolute; z-index: 3; top: 43px; display: flex; align-items: center; justify-content: space-between; height: 11px; border-top: 1px solid var(--p-accent); color: var(--p-accent); pointer-events: none; }
.p-notch-ruler>span { position: absolute; top: -10px; left: 50%; padding: 0 8px; background: var(--p-paper); font: 9px/1.6 var(--p-mono); transform: translateX(-50%); white-space: nowrap; }
.p-notch-ruler>i { position: absolute; top: -4px; width: 1px; height: 7px; background: var(--p-accent); }.p-notch-ruler>i:first-child { left: 0; }.p-notch-ruler>i:last-child { right: 0; }
.p-notch-height-rule { display: none; }
[data-shape-ready] .p-notch-height-rule { position: absolute; z-index: 3; display: block; width: 9px; border-left: 1px solid var(--p-accent); color: var(--p-accent); pointer-events: none; }
.p-notch-height-rule>span { position: absolute; top: 50%; left: 4px; padding: 5px 0; background: var(--p-paper); font: 8px/1.4 var(--p-mono); white-space: nowrap; writing-mode: vertical-rl; transform: translateY(-50%); }
.p-notch-height-rule>i { position: absolute; left: -4px; width: 7px; height: 1px; background: var(--p-accent); }.p-notch-height-rule>i:first-child { top: 0; }.p-notch-height-rule>i:last-child { bottom: 0; }
.p-notch-baseline { position: absolute; z-index: 3; bottom: 12px; left: 24px; right: 24px; color: var(--p-muted); text-align: center; font-size: 8px; letter-spacing: .01em; }
.p-notch-controls { padding: 21px 25px 0; }
.p-notch-width { display: block; }
.p-notch-width>span { display: flex; justify-content: space-between; gap: 15px; font-size: 11px; }
.p-notch-width output { color: var(--p-accent); font: 10px var(--p-mono); }
.p-notch-width>input { display: block; width: 100%; height: 28px; margin: 7px 0 2px; padding: 0; accent-color: var(--p-accent); cursor: ew-resize; }
.p-notch-width>small { display: block; color: var(--p-muted); font-size: 9px; line-height: 1.6; }
.p-notch-faces { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin-top: 22px; }
.p-site .p-notch-faces>button { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: 0; min-height: 45px; padding: 9px 7px; border: 1px solid var(--p-rule); border-radius: 7px; background: var(--p-surface); color: var(--p-muted); font-size: 10px; }
.p-notch-faces>button>span { color: var(--p-muted); font: 8px var(--p-mono); }
.p-site .p-notch-faces>button[aria-pressed='true'] { border-color: var(--p-accent); background: var(--p-wash); color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); }
.p-notch-faces>button[aria-pressed='true']>span { color: color-mix(in srgb,var(--p-muted) 90%,var(--p-ink)); }
.p-prose .p-notch-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; padding: 0; margin: 22px 25px 0; border-block: 1px solid var(--p-rule); }
.p-notch-facts>div { min-width: 0; padding: 15px 0; }.p-notch-facts>div+div { padding-left: 15px; border-left: 1px solid var(--p-rule); }
.p-notch-facts dt { margin: 0 0 7px; color: var(--p-muted); font-size: 8px; line-height: 1.5; }
.p-notch-facts dd { margin: 0; color: var(--p-ink); font: 12px/1.5 var(--p-mono); white-space: nowrap; }
.p-prose .p-notch-caption { min-height: 4lh; margin: 18px 25px 0; color: var(--p-ink); font-size: 12px; line-height: 1.75; }
.p-prose .p-notch-note { padding: 0 25px 22px; margin: 9px 0 0; color: var(--p-muted); font-size: 9px; line-height: 1.8; }
@media (hover:hover) { .p-site :is(.p-notch-trace,.p-notch-faces>button,.p-notch-mode>button):hover { border-color: var(--p-accent); background: var(--p-wash); color: color-mix(in srgb,var(--p-accent) 90%,var(--p-ink)); } .p-notch-faces>button:hover>span { color: color-mix(in srgb,var(--p-muted) 90%,var(--p-ink)); } }
.p-site :is(.p-notch-trace,.p-notch-faces>button,.p-notch-mode>button):active { box-shadow: inset 0 1px 4px #142d281a; }
@media (prefers-reduced-motion:no-preference) { .p-site :is(.p-notch-trace,.p-notch-faces>button,.p-notch-mode>button) { transition: background-color 160ms var(--p-ease-out),border-color 160ms var(--p-ease-out),color 160ms var(--p-ease-out),box-shadow 90ms var(--p-ease-out); } }
@container (max-width:440px) {
  .p-notch-heading { padding: 20px 17px 0; gap: 10px; }.p-prose .p-notch-heading h3 { font-size: 31px; }.p-notch-edition { font-size: 6px !important; }
  .p-prose .p-notch-intro { margin: 13px 17px 18px; font-size: 11px; }
  .p-notch-tools { align-items: stretch; gap: 8px; padding: 0 17px 18px; }.p-notch-mode { flex: 1; min-width: 0; }
  .p-site .p-notch-mode>button { flex: 1; min-width: 0; min-height: 45px; padding: 6px 8px; font-size: 10px; }.p-notch-mode>button>span { font-size: 7px; }
  .p-site .p-notch-trace { flex-shrink: 0; gap: 8px; padding: 8px; font-size: 8px; }.p-notch-trace>span:first-child { max-width: 52px; white-space: normal; line-height: 1.5; text-align: left; }
  .p-notch-stage-label, .p-notch-framing { left: 17px; font-size: 6px; }.p-notch-framing { right: 17px; left: auto; }
  .p-notch-controls { padding: 19px 17px 0; }.p-notch-faces { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 19px; }.p-site .p-notch-faces>button { justify-content: start; padding: 10px 13px; font-size: 10px; }
  .p-prose .p-notch-facts { margin-inline: 17px; }.p-notch-facts>div+div { padding-left: 9px; }.p-notch-facts dt { font-size: 7px; }.p-notch-facts dd { font-size: 9px; }
  .p-prose .p-notch-caption { margin-inline: 17px; font-size: 11px; }.p-prose .p-notch-note { padding-inline: 17px; font-size: 8px; }
}
@media print { .p-notch-tools, .p-notch-controls, .p-notch-stage { display: none !important; }.p-notch-lab { box-shadow: none; break-inside: avoid; }.p-prose .p-notch-caption { min-height: 0; } }