@layer sections{.portrait{--cut:15cqi;--plane-x:6cqi;--plane-y:6cqi;--frame-x:5cqi;--frame-y:5cqi;--mark:clamp(10px, 4cqi, 18px);isolation:isolate;margin:0;position:relative;container-type:inline-size}.portrait__plane{z-index:-2;translate:var(--plane-x) calc(var(--py,0px) - var(--plane-y));background:radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--color-glow) 55%, transparent), transparent 60%), linear-gradient(150deg, var(--color-electric) 0%, var(--color-accent) 42%, var(--color-deep) 100%);box-shadow:0 40px 90px -40px color-mix(in oklab, var(--color-accent) 70%, transparent);position:absolute;inset:0}.portrait__frame{z-index:-1;translate:calc(-1 * var(--frame-x)) calc(var(--frame-y) + var(--fy,0px));pointer-events:none;position:absolute;inset:0}.portrait__rule{background:var(--color-border-strong);position:absolute}.portrait__rule--t{top:0;left:calc(-1 * var(--mark));right:calc(-1 * var(--mark));transform-origin:0;block-size:1px}.portrait__rule--r{right:0;top:calc(-1 * var(--mark));bottom:calc(-1 * var(--mark));transform-origin:50% 0;inline-size:1px}.portrait__rule--b{bottom:0;left:calc(-1 * var(--mark));right:calc(-1 * var(--mark));transform-origin:100%;block-size:1px}.portrait__rule--l{left:0;top:calc(-1 * var(--mark));bottom:calc(-1 * var(--mark));transform-origin:50% 100%;inline-size:1px}.portrait__window{aspect-ratio:4/5;clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);position:relative;overflow:hidden}.portrait__strips,.portrait__strips picture{block-size:100%;inline-size:100%;display:block}.portrait__img{object-fit:cover;object-position:50% 50%;block-size:100%;inline-size:100%;display:block}.portrait__shade{pointer-events:none;background:radial-gradient(45% 32% at 100% 0%, color-mix(in oklab, var(--color-electric) 26%, transparent), transparent 70%), linear-gradient(180deg, transparent 80%, color-mix(in oklab, var(--color-bg) 18%, transparent) 100%);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-text) 10%, transparent);position:absolute;inset:0}:root[data-theme=light] .portrait__shade{background:radial-gradient(45% 32% at 100% 0%, color-mix(in oklab, var(--color-electric) 16%, transparent), transparent 70%);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--color-text) 14%, transparent)}.portrait__sheen{pointer-events:none;opacity:0;mix-blend-mode:soft-light;background:linear-gradient(105deg,#0000 38%,#ffffff47 50%,#0000 62%);position:absolute;inset:-10% -30%}.portrait__cut{top:0;left:calc(100% - var(--cut));inline-size:calc(var(--cut) * 1.41421);transform-origin:0;block-size:1px;transform:rotate(45deg) scaleX(var(--draw,1));background:var(--color-glow);box-shadow:0 0 10px color-mix(in oklab, var(--color-electric) 80%, transparent);position:absolute}.portrait__spark{background:var(--color-glow);block-size:6px;inline-size:6px;box-shadow:0 0 0 3px color-mix(in oklab, var(--color-electric) 25%, transparent), 0 0 16px var(--color-electric);border-radius:50%;position:absolute;top:-2.5px;right:-3px}:root[data-theme=light] .portrait__cut{background:var(--color-accent);box-shadow:none}:root[data-theme=light] .portrait__spark{background:var(--color-accent);box-shadow:0 0 0 3px color-mix(in oklab, var(--color-accent) 18%, transparent)}:root[data-theme=light] .portrait__plane{box-shadow:0 50px 90px -45px color-mix(in oklab, var(--color-accent) 45%, transparent)}.tools{--tool-h:clamp(20px, 17px + .45vw, 26px);--tools-gap:clamp(2.5rem, 1.6rem + 3vw, 5rem);border-block:var(--bw-hairline) solid var(--color-border);padding-block:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);position:relative}.tools__label{padding-inline:var(--space-margin);text-align:center;text-transform:uppercase;letter-spacing:.16em;color:var(--color-text-muted);margin:0 auto clamp(1rem,.8rem + .6vw,1.5rem);font-size:clamp(.68rem,.64rem + .12vw,.75rem)}.tools__viewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,#0000,#000 10% 90%,#0000);mask:linear-gradient(90deg,#0000,#000 10% 90%,#0000)}.tools__row{inline-size:max-content;display:flex}.tools__track{align-items:center;gap:var(--tools-gap);flex:none;padding-inline-end:var(--tools-gap);animation:130s linear infinite marquee;display:flex}.tools:hover .tools__track,.tools.is-offscreen .tools__track{animation-play-state:paused}.tools__item{block-size:calc(var(--tool-h) * 1.9);color:var(--color-text);opacity:.74;transition:opacity var(--dur-base) var(--ease-settle);white-space:nowrap;flex:none;align-items:center;gap:.6em;display:inline-flex}:root[data-theme=light] .tools__item{opacity:.8}.tools__item:hover{opacity:1}.tools__mark{flex:none;display:inline-flex}.tools__mark svg{block-size:var(--tool-h);inline-size:var(--tool-h)}.tools__name{font-family:var(--font-display-stack);font-weight:600;font-size:calc(var(--tool-h) * .74);letter-spacing:-.01em}.tools__group{white-space:nowrap;color:var(--color-accent-text);letter-spacing:.14em;text-transform:uppercase;flex:none;align-items:center;gap:.9em;font-size:clamp(.62rem,.6rem + .1vw,.7rem);display:inline-flex}.tools__group:before{content:"";opacity:.6;background:currentColor;block-size:1px;inline-size:1.6rem}@media (prefers-reduced-motion:reduce){.tools__track{animation:none}.tools__track[data-copy="1"]{display:none}.tools__viewport{padding-inline:var(--space-margin);scrollbar-width:thin;overflow-x:auto;-webkit-mask:none;mask:none}}}