:root{font-family:Arial,sans-serif;color:#15343b;background:#f3f7f6;font-size:17px}*{box-sizing:border-box}body{margin:0}a{color:#087d7d}header{display:flex;justify-content:space-between;gap:20px;padding:23px 5vw;border-bottom:1px solid #cddfda;flex-wrap:wrap}.brand{font-weight:800;letter-spacing:.08em;text-decoration:none}nav{display:flex;gap:16px 24px;flex-wrap:wrap}nav a{text-decoration:none}nav [aria-current]{border-bottom:3px solid #087d7d}main{max-width:1160px;padding:36px 24px;margin:auto}h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.045em;line-height:1.06;margin:13px 0 23px}h2{font-size:31px;line-height:1.2;margin:7px 0 20px}h3{font-size:22px}p,li{line-height:1.65}.lead{font-size:22px;max-width:950px}.intro{margin-bottom:35px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;color:#087d7d}.panel{background:white;border:1px solid #cddfda;border-radius:17px;padding:30px;margin:27px 0}.links,.controls{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin:18px 0}button,.button,select,input{font:inherit;color:inherit}button,.button{padding:11px 15px;background:#eef6f3;border:1px solid #a8cbc3;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block}button:hover,.button:hover{background:#dcf0e8}.primary{background:#087d7d;color:white}.primary:hover{background:#086768}button:disabled{opacity:.6;cursor:wait}select,input[type=number]{padding:9px;border:1px solid #abcac3;border-radius:6px;background:white}input[type=number]{width:90px}label{line-height:1.5}label output{font-size:14px;font-weight:bold;display:block}input[type=range]{display:block;max-width:100%}.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.steps article{padding:22px;background:#f1f8f5;border-radius:12px;min-width:0}.steps article>span{color:#087d7d;font-weight:800}.steps h3{margin:10px 0}.steps p{font-size:16px}.steps pre{font-size:14px}pre{font:15px/1.65 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;border-radius:9px;background:#102d35;color:#e6f8f1;overflow:auto}pre code{padding:0;background:none;color:inherit}code{background:#edf5f1;padding:3px;border-radius:3px}.command{border-left:4px solid #63baa4}.small,footer{font-size:14px;color:#506d74}.sampleCards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.sampleCard{padding:0;text-align:left;overflow:hidden;background:white;border:2px solid #cddfda;border-radius:13px}.sampleCard.selected{border-color:#087d7d;box-shadow:0 0 0 2px #c7ece1}.sampleCard img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.sampleCard strong{display:block;font-size:23px;padding:17px 18px 8px}.sampleCard span{display:block;font-size:14px;line-height:1.5;padding:0 18px 17px}.sourceNote{font-size:15px;background:#e7f5ed;border-left:4px solid #087d7d;padding:14px 18px}.views{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.views>div{min-width:0}.views h3{margin:12px 0}.views video,.views canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#102027;border-radius:10px}.frameInfo{font:15px/1.6 Consolas,monospace;min-height:3.2em}details{margin:25px 0}summary{cursor:pointer;font-weight:800;color:#087d7d}textarea{display:block;width:100%;font:14px/1.55 Consolas,monospace;padding:12px;margin:15px 0;border:1px solid #abcac3;border-radius:7px;resize:vertical}.sourceCode{max-height:560px;white-space:pre;overflow-wrap:normal}li{margin:9px 0}#previewStatus{min-height:1.7em}footer{padding:10px 0 25px}@media(max-width:700px){main{padding:24px 14px}.panel{padding:22px 17px}.steps,.sampleCards,.views{grid-template-columns:1fr}h2{font-size:27px}.lead{font-size:20px}pre{padding:14px;font-size:13px}.sampleCard strong{font-size:21px}.sourceCode{font-size:13px}}@media print{header,.controls,video,canvas,button,.sampleCards{display:none}.panel{border:0;padding:10px}.sourceCode{max-height:none;white-space:pre-wrap}pre{background:#eef6f3;color:#15343b}}
.frameScrubber{display:block;margin:20px 0 12px;font-weight:700}.frameScrubber input[type=range]{width:100%;margin-top:12px}

.comparisonTable{overflow:auto}table{border-collapse:collapse;width:100%;margin:20px 0}th,td{padding:14px;text-align:left;border-bottom:1px solid #cddfda;white-space:nowrap}th{background:#edf7f2}#tinyStatus{min-height:3.3em}#tinySplit{min-height:1.7em}

@media(min-width:1000px){.sampleCards{grid-template-columns:repeat(3,minmax(0,1fr))}}

.customSticker{display:grid;grid-template-columns:82px minmax(0,1fr);gap:18px;border:1px solid #cddfda;border-radius:10px;padding:18px;margin:22px 0}.customSticker .controls{margin:0 0 8px}.customSticker p{margin:6px 0}.customSticker input[type=file]{max-width:280px}.stickerThumbnail{width:80px;height:80px;display:grid;place-items:center;background:repeating-conic-gradient(#e2e9e6 0% 25%,#fff 0% 50%) 0/16px 16px;border:1px solid #abcac3;border-radius:7px;overflow:hidden}.stickerThumbnail span{font-size:13px;text-align:center;color:#425f65}.stickerThumbnail img{width:100%;height:100%;object-fit:contain}.stickerThumbnail [hidden]{display:none}#stickerStatus{min-height:3.1em;overflow-wrap:anywhere}@media(max-width:600px){.customSticker{grid-template-columns:1fr}.customSticker input[type=file]{max-width:100%}}