.hood{min-height:0;padding:clamp(4rem,10vh,6.5rem) var(--gutter) clamp(3rem,7vh,4.5rem);&#top{padding-top:clamp(7rem,16vh,9rem)}.intro{max-width:38rem;margin-top:1.2rem;color:var(--ink-soft);font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5}.diagram{margin-top:clamp(3rem,8vh,5rem);svg{display:block;width:min(60rem,100%);font-size:14px}text{fill:var(--ink)}.title{font-weight:700}.small{fill:var(--ink-soft);font-size:11px}.mono{font-family:var(--mono);font-size:12px}.box,.host{fill:var(--paper);stroke:var(--ink)}.slot{fill:var(--well);stroke:var(--rule)}.wall{fill:none;stroke:var(--ink);stroke-width:4}.files{fill:none;stroke:var(--ink-soft);stroke-dasharray:4 4}.granted,.page{fill:var(--ink)}.on-ink{fill:var(--paper)}.route{fill:none;stroke:var(--accent);stroke-width:2;&.blocked{stroke:var(--ink-soft);stroke-dasharray:3 4}}.cross{stroke:var(--ink);stroke-width:3}}.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(22rem,1fr));gap:2rem 4rem;align-items:start;margin-top:1.6rem;.intro{margin-top:0}}.sample{padding-left:1.6rem;border-left:1px solid var(--rule);figcaption{color:var(--ink-soft);font-size:.8rem}pre{padding-top:.6rem;overflow-x:auto;font-family:var(--mono);font-size:.9rem;line-height:1.8}}.list{width:100%;margin-top:clamp(3rem,8vh,5rem);border-collapse:collapse;border-top:1px solid var(--ink);th,td{padding:.9rem 1.5rem .9rem 0;border-bottom:1px solid var(--rule);line-height:1.5;text-align:left;vertical-align:top;&:last-child{padding-right:0}}th{color:var(--ink-soft);font-size:.8rem;font-weight:400;white-space:nowrap}thead th{position:sticky;top:60px;z-index:1;border-bottom:0;background:var(--paper);box-shadow:inset 0 -1px var(--rule)}.group th{padding-top:2rem;border-bottom-color:var(--ink);color:var(--ink);font-size:.8rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}td:first-child code{color:var(--ink);font-weight:600;white-space:nowrap}td:nth-child(3){color:var(--ink-soft)}@media(width<48rem){th:nth-child(3),td:nth-child(3){display:none}}}.bars li,.list td.level{position:relative;padding-left:1.2rem;&:before{content:"";position:absolute;top:.6rem;left:0;width:3px;height:1.1rem;background:#c7c7cc}&.red:before{background:#d70015}&.yellow:before{background:repeating-linear-gradient(#e8a300 0 4px,transparent 4px 7px)}}.list td.level{color:var(--ink-soft);white-space:nowrap;&:before{top:1rem}}.columns{display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:3rem;margin-top:clamp(3rem,8vh,5rem);padding-top:1.4rem;border-top:1px solid var(--ink);@media(width<48rem){grid-template-columns:1fr}h3{font-size:1.1rem}ul{margin-top:1rem;list-style:none}p{max-width:34rem;margin-top:1rem;color:var(--ink-soft);line-height:1.5}}.bars li{padding-block:.5rem}.rules li,.docs li{padding:.7rem 0;border-bottom:1px solid var(--rule);line-height:1.5}.gaps{margin-top:clamp(3rem,8vh,5rem);border-top:1px solid var(--ink);div{display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:.5rem 3rem;padding:1.2rem 0;border-bottom:1px solid var(--rule);@media(width<48rem){grid-template-columns:1fr}}dt{font-weight:700;line-height:1.5}dd{max-width:40rem;color:var(--ink-soft);line-height:1.5}}}@media(prefers-reduced-motion:no-preference){.hood{:is(.label,.headline,.intro,.sample,.numbered>li){animation:rise ease-out both;animation-timeline:view();animation-range:entry 0% cover 30%}.numbered>li:nth-child(2){animation-range:entry 0% cover 34%}.numbered>li:nth-child(3){animation-range:entry 0% cover 38%}.numbered>li:nth-child(4){animation-range:entry 0% cover 42%}&#top{:is(.label,.headline,.intro,.diagram){animation:rise .8s ease-out both}.headline{animation-delay:.08s}.intro{animation-delay:.16s}.diagram{animation-delay:.24s;:is(.route,.cross,.refuses){animation:.5s ease-out var(--at) both paused}&[data-play] :is(.route,.cross,.refuses){animation-play-state:running}.route{animation-name:draw;&:not(.blocked){stroke-dasharray:1}&.blocked{animation-name:draw-up}}.cross{transform-box:fill-box;transform-origin:center;animation-name:strike}.refuses{animation-name:rise}}}}}@keyframes draw-up{0%{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes strike{0%{opacity:0;scale:1.8}}
