/* Foundation · BRAND PRINCIPLES (tools/foundation_principles.py). Graphite lines, bone ground, one red accent. */
#principles.pr-section{position:relative;z-index:2;max-inline-size:1180px;margin:0 auto;padding:clamp(56px,8vw,112px) 20px;background:transparent;color:#242522}
#principles .pr-head{display:block;margin:0 0 clamp(28px,4vw,48px)}
#principles .pr-line{display:block;inline-size:40px;block-size:2px;background:#ff3b30;margin-block-end:16px}
#principles .section-title{margin:0!important;padding:0!important;font:600 clamp(34px,5.5vw,64px)/1 'Oswald','Arial Narrow',sans-serif!important;text-transform:uppercase;letter-spacing:.01em;color:#242522}
#principles .principles-list{list-style:none;margin:0!important;padding:0!important;display:grid;gap:0}
#principles .principle{display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;grid-template-areas:"num text" "viz viz";gap:12px 16px!important;align-items:start;margin:0!important;padding:28px 0!important;min-block-size:0!important;block-size:auto!important;border:0!important;border-block-start:1px solid #c6c4bb!important;background:#f0ede5}
#principles .principle:last-child{border-block-end:1px solid #c6c4bb!important}
#principles .principle-number{grid-area:num;font:600 clamp(28px,4vw,44px)/1 'Oswald',sans-serif!important;color:#ff3b30!important;opacity:1!important;letter-spacing:.02em}
#principles .principle-content{grid-area:text;display:flex!important;flex-direction:column;gap:10px!important;padding:0!important;min-inline-size:0}
#principles .principle-name{display:block;font:600 clamp(22px,2.6vw,32px)/1.12 'Oswald','Arial Narrow',sans-serif!important;text-transform:uppercase!important;letter-spacing:.01em;color:#242522}
#principles .principle-desc{display:block;max-inline-size:52ch;font:400 17px/1.6 'Inter',system-ui,sans-serif!important;color:#3a3b36!important}
#principles .fx-example{align-self:flex-start;display:inline-flex;align-items:center;min-block-size:44px;margin-block-start:2px;font:500 14px/1.2 'Inter',sans-serif;color:#242522;text-decoration:none;border-block-end:1px solid #ff3b30}
#principles .fx-example:focus-visible{outline:3px solid #ff3b30;outline-offset:3px}
#principles .pr-viz{grid-area:viz;margin:4px 0 0;inline-size:min(100%,240px);justify-self:start}
#principles .pr-viz svg{display:block;inline-size:100%;block-size:auto;overflow:visible}
@media (min-width:860px){#principles .principle{grid-template-columns:96px minmax(0,1fr) 240px!important;grid-template-areas:"num text viz";gap:32px!important;padding:40px 0!important;align-items:center}
 #principles .pr-viz{margin:0;justify-self:end}}
.pr-viz .pr-frame{fill:#f7f5ef;stroke:#d6d2c7;stroke-width:1}
.pr-viz line,.pr-viz circle{vector-effect:non-scaling-stroke}
.pr-viz .pr-faint{stroke:#c6c4bb;stroke-width:1}
.pr-viz .pr-ring{fill:none;stroke:#242522;stroke-width:1.2}
.pr-viz .pr-dot{fill:#242522}
.pr-viz .pr-hit{fill:#ff3b30}
.pr-viz .pr-draw{fill:none;stroke:#242522;stroke-width:1.4}
.pr-viz .pr-radius{stroke:#ff3b30;stroke-width:1.4}
.pr-viz .pr-math{font:italic 500 22px/1 'Inter',serif;fill:#242522}
.pr-viz .pr-pulse{fill:none;stroke:#ff3b30;stroke-width:2}
.pr-viz .pr-node{fill:#f0ede5;stroke:#242522;stroke-width:1.4}
.pr-viz .pr-keep{stroke:#ff3b30;stroke-width:3}
.pr-viz .pr-cut{stroke:#242522;stroke-width:1.4;opacity:.12}
.pr-viz .pr-orbit{transform-origin:120px 120px;transform:rotate(-40deg)}
/* Motion: only when JS armed the section and the reader allows motion; final state is the default. */
.pr-armed .pr-viz:not(.is-play) .pr-dot{transform:translate(var(--x),var(--y))}
.pr-armed .pr-viz:not(.is-play) .pr-hit,.pr-armed .pr-viz:not(.is-play) .pr-ring{opacity:0}
.pr-armed .pr-viz:not(.is-play) .pr-draw{stroke-dasharray:1;stroke-dashoffset:1}
.pr-armed .pr-viz:not(.is-play) .pr-pulse{opacity:0;transform:scale(.2)}
.pr-armed .pr-viz:not(.is-play) .pr-cut{opacity:1}
.pr-armed .pr-viz:not(.is-play) .pr-keep{stroke:#242522;stroke-width:1.4}
.pr-armed .pr-viz:not(.is-play) .pr-node{opacity:.35}
.pr-armed .pr-viz .pr-dot{transition:transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.pr-armed .pr-viz .pr-hit,.pr-armed .pr-viz .pr-ring{transition:opacity .5s ease 1.1s}
.pr-armed .pr-viz .pr-draw{stroke-dasharray:1;transition:stroke-dashoffset 1s ease var(--d,0ms)}
.pr-armed .pr-viz .pr-pulse{transform-box:fill-box;transform-origin:center;transition:opacity .6s ease 1.1s,transform 1.2s cubic-bezier(.2,.7,.2,1) 1.1s}
.pr-armed .pr-viz .pr-late{transition-delay:1.6s}
.pr-armed .pr-viz .pr-cut{transition:opacity .7s ease var(--d,0ms)}
.pr-armed .pr-viz .pr-keep{transition:stroke .5s ease .9s,stroke-width .5s ease .9s}
.pr-armed .pr-viz .pr-node{transition:opacity .6s ease .4s}
.pr-armed .pr-viz.is-play .pr-orbit{animation:pr-orbit 9s linear 1s infinite}
@keyframes pr-orbit{from{transform:rotate(-40deg)}to{transform:rotate(320deg)}}
@media (prefers-reduced-motion:reduce){.pr-armed .pr-viz *{transition:none!important;animation:none!important}}
html.pr-in-view #kostina-euler-backdrop{opacity:0!important;transition:opacity .4s ease}
@media print{#principles .pr-viz{display:none}}