.case-title--product{align-items:center;gap:.26em;display:flex}.case-title--product span{white-space:nowrap}.case-app-icon{border-radius:22%;flex:none;width:.9em;height:.9em;box-shadow:0 12px 26px -16px #0f192899}.case-video--app,.field-frames--app{aspect-ratio:1280/658}.field-thumbs--app{grid-template-columns:repeat(4,minmax(0,1fr))}.field-thumbs--app .field-thumb img{aspect-ratio:1280/658}.compare{aspect-ratio:797/599;--split:50%;touch-action:pan-y;cursor:ew-resize;-webkit-user-select:none;user-select:none;background:#1c2a26;position:relative;overflow:hidden}.compare-after,.compare-before{position:absolute;inset:0}.compare picture,.compare img{width:100%;height:100%;display:block}.compare img{object-fit:cover;pointer-events:none}.compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-tag{letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:#f3f6efeb;padding:5px 10px;font-size:11px;font-weight:700;line-height:1.3;position:absolute;top:14px}.compare-tag--before{left:14px}.compare-tag--after{right:14px}.compare-line{top:0;bottom:0;left:var(--split);pointer-events:none;background:#f3f6ef;width:2px;margin-left:-1px;position:absolute;box-shadow:0 0 0 1px #00000029}.compare-knob{background:#f3f6ef;border-radius:50%;width:36px;height:36px;margin:-18px 0 0 -18px;position:absolute;top:50%;left:50%;box-shadow:0 8px 20px -8px #00000080}.compare-knob:before,.compare-knob:after{content:"";border:5px solid #0000;width:0;height:0;margin-top:-5px;position:absolute;top:50%}.compare-knob:before{border-right-color:var(--ink);left:7px}.compare-knob:after{border-left-color:var(--ink);right:7px}.compare-range{opacity:0;pointer-events:none;width:100%;height:1px;margin:0;position:absolute;bottom:0;left:0}.compare:has(.compare-range:focus-visible) .compare-knob{outline:2px solid var(--blue);outline-offset:3px}.compare[data-dragging] .compare-knob{transform:scale(1.08)}.keys{margin:4px 0 6px}.keys-title{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;font-size:11.5px;font-weight:700}.keys dl{gap:8px;margin:0;display:grid}.keys dl>div{grid-template-columns:92px minmax(0,1fr);align-items:center;gap:12px;display:grid}.keys dd{color:var(--muted);margin:0;font-size:14px;line-height:1.4}.keys kbd{min-width:32px;color:var(--ink);text-align:center;background:#fbfbf5;border:1px solid #c7d3c9;border-bottom-width:2px;border-radius:5px;padding:3px 8px;font:600 12px/1.4 ui-monospace,Consolas,monospace;display:inline-block}.flow-file{color:var(--ink);margin:0;font:600 13px/1.4 ui-monospace,Consolas,monospace}.planes{padding:clamp(22px,2.6vw,36px);position:relative}.plane{grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:center;gap:20px;display:grid}.plane-text{gap:6px;display:grid}.plane-title{letter-spacing:-.015em;font-size:15px;font-weight:620}.plane-note,.plane-values{color:var(--muted);font-size:13px;line-height:1.5}.plane-art{aspect-ratio:3/2;border:1px solid var(--line);background:#f0f3ec;position:relative;overflow:hidden}.plane-image{background:linear-gradient(135deg,#d9e1d6,#c9d4c8) 0 0/100% 100%;position:absolute;inset:0}.plane-box{left:var(--bl);top:var(--bt);width:var(--bw);height:var(--bh);border:1.5px solid var(--blue);background:#2857d50f;position:absolute}.plane-center{left:var(--bx);top:var(--by);background:var(--blue);border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;position:absolute}.plane--0 .plane-image{transform-origin:50%;transform:translateY(14%)scale(1.22)}.plane--1 .plane-image,.plane--2 .plane-image{inset:9% 9% 12%}.plane--2 .plane-image{background:0 0;border:1px dashed #9db3a5}.plane-tick{color:var(--muted);font:500 10px/1 ui-monospace,Consolas,monospace;position:absolute}.plane-tick--x{bottom:3%;left:9%}.plane-tick--y{writing-mode:vertical-rl;top:9%;right:2%}.plane-values{color:var(--ink);flex-wrap:wrap;gap:4px 14px;font-family:ui-monospace,Consolas,monospace;font-size:12.5px;display:flex}.plane-values i{color:var(--muted);margin-right:6px;font-style:normal}.plane-link{color:var(--muted);padding:14px 0 14px 228px;font:500 12px/1.45 ui-monospace,Consolas,monospace;position:relative}.plane-link:before{content:"";background:#9db3a5;width:1px;position:absolute;top:6px;bottom:6px;left:100px}.plane-link:after{content:"";border:4.5px solid #0000;border-top:8px solid #9db3a5;border-bottom:0;position:absolute;bottom:4px;left:96px}.undo{border-top:1px solid var(--line);align-items:center;gap:18px;margin-top:22px;padding-top:20px;display:flex}.undo-cards{flex:none;width:72px;height:46px;position:relative}.undo-cards i{background:#fbfbf5;border:1px solid #b9c7bc;width:52px;height:30px;position:absolute;bottom:0;left:0}.undo-cards i:nth-child(2){transform:translate(5px,-4px)}.undo-cards i:nth-child(3){transform:translate(10px,-8px)}.undo-cards i:nth-child(4){transform:translate(15px,-12px)}.undo-cards i:nth-child(5){border-color:var(--ink);transform:translate(20px,-16px)}.undo p{color:var(--muted);gap:2px;font-size:13px;line-height:1.5;display:grid}.undo b{color:var(--ink);font-size:15px;font-weight:620}.labelfile{flex-wrap:wrap;gap:clamp(20px,3vw,40px);padding:clamp(22px,2.6vw,36px);display:flex;position:relative}.tree-block{flex:180px}.line-block{flex:2 330px;min-width:0}.labelfile-label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;font-size:11.5px;font-weight:700}.tree{color:var(--ink);margin:0;padding:0;font:500 13px/1.95 ui-monospace,Consolas,monospace;list-style:none}.tree li{padding-left:calc(var(--d) * 20px);position:relative}.tree li:not(:first-child):before{content:"";left:calc(var(--d) * 20px - 13px);border-bottom:1px solid #b9c7bc;border-left:1px solid #b9c7bc;width:8px;height:calc(50% + 2px);position:absolute;top:-2px}.tree span{color:var(--muted);margin-left:8px;font-family:Manrope Variable,sans-serif;font-size:11.5px}.yolo-line{grid-template-columns:repeat(5,auto);justify-content:start;gap:7px 12px;display:grid}.yolo-values,.yolo-names{display:contents}.yolo-values span{border-bottom:2px solid var(--ink);color:var(--ink);padding-bottom:7px;font:600 15px/1.4 ui-monospace,Consolas,monospace}.yolo-values span:first-child{border-color:var(--blue)}.yolo-names span{color:var(--muted);font-size:12px;line-height:1.3}.yolo-schematic{margin-top:26px}.ys-image{aspect-ratio:3/2;background:#eef2ea;border:1px solid #b9c7bc;max-width:300px;margin-left:16px;display:block;position:relative}.ys-box{border:1.5px solid var(--ink);width:38%;height:46%;position:absolute;top:22%;left:34%}.ys-center{background:var(--blue);border-radius:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;position:absolute;top:45%;left:53%}.ys-w,.ys-h{color:var(--muted);font-size:11.5px;line-height:1;position:absolute}.ys-w{text-align:center;bottom:-18px;left:0;right:0}.ys-h{top:50%;left:calc(100% + 8px);transform:translateY(-50%)}.ys-axis{color:var(--muted);font:500 10px/1 ui-monospace,Consolas,monospace;position:absolute}.ys-axis--x{bottom:-16px;left:0}.ys-axis--y{writing-mode:vertical-rl;top:0;left:-16px}.ys-note{letter-spacing:.04em;color:var(--muted);margin:28px 0 0 16px;font-size:11.5px}.case-scope--wide{max-width:90ch;margin-top:34px}.plane,.plane-link,.undo,.tree-block,.line-block{transition:opacity .6s var(--ease) calc(var(--i,0)*.14s + .45s),transform .7s var(--ease) calc(var(--i,0)*.14s + .45s)}.line-block{--i:1}[data-case-motion] [data-figure]:not(.is-in) :is(.plane,.plane-link,.undo,.tree-block,.line-block){opacity:0;transform:translateY(10px)}.case:not([data-enhanced]) .compare{aspect-ratio:auto;cursor:auto;background:0 0;flex-direction:column-reverse;gap:12px;display:flex}.case:not([data-enhanced]) :is(.compare-after,.compare-before){clip-path:none;position:relative}.case:not([data-enhanced]) :is(.compare-line,.compare-range){display:none}.case:not([data-enhanced]) .field-frames--app .field-video{aspect-ratio:1280/658}@media (width<=760px){.field-thumbs--app{grid-template-columns:repeat(2,minmax(0,1fr))}.plane{grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:14px}.plane-link{padding-left:150px}.plane-link:before{left:66px}.plane-link:after{left:62px}.yolo-values span{font-size:13px}.yolo-line{column-gap:9px}.keys dl>div{grid-template-columns:84px minmax(0,1fr)}.compare-tag{padding:4px 8px;font-size:10px;top:10px}.compare-tag--before{left:10px}.compare-tag--after{right:10px}}@media (width<=400px){.labelfile{padding:20px 16px}.yolo-values span{font-size:12px}.yolo-line{column-gap:7px}}