/* Web Lab — cut-paper playground: ultramarine, pink, tangerine */
body{--paper:#f6eafb;--ink:#282770;--quiet:#5d5378;--rule:#9b8aba;--card:#fffbff;--field:#f7f0fc;--pop:#ffb778;--art-second:#f19bd8;--tint:#e4ddfc;--radius:20px 3px 20px 3px;--button-radius:7px;--canvas:radial-gradient(ellipse at 75% 16%,#e3b1ea,transparent 34%),#f6eafb}
.intro{min-height:430px;padding-top:70px}.intro h1{font:900 clamp(48px,6vw,85px)/1.02 Arial,sans-serif;letter-spacing:-.075em;rotate:-2deg;transform-origin:left}.design-art .shape-a{background:#342ea0;width:240px;height:200px;border-radius:15px;rotate:-12deg;top:20%;left:5%;box-shadow:8px 12px 0 #bab0e7;animation:none}.design-art .shape-b{background:#ffb778;width:100px;height:100px;right:1%;top:5%;clip-path:polygon(50% 0,61% 29%,85% 15%,72% 42%,100% 50%,72% 60%,85% 85%,60% 72%,50% 100%,40% 72%,15% 85%,28% 60%,0 50%,28% 40%,15% 15%,40% 28%);border-radius:0}.design-art .shape-c{width:120px;height:55px;background:#f19bd8;border:2px solid var(--ink);border-radius:100%;bottom:8%;right:0;rotate:22deg}.design-art b{font:700 45px Consolas,monospace;color:#fff3eb;rotate:-12deg;top:38%;left:12%;letter-spacing:-.07em}.design-art .art-note{background:#f0d9ff;rotate:9deg;top:71%;left:12%;right:auto;box-shadow:5px 5px 0 #282770}.design-art .art-label{left:0;bottom:0;font-size:10px}.appbar strong{font-weight:850}.pill{rotate:3deg}.preview-grid article:nth-child(2){background:#ffdbb1;rotate:2deg}.preview-grid article:nth-child(3){background:#e0d5fa;rotate:-1deg}.panel{box-shadow:6px 8px 0 #c0b2db;border:2px solid #282770}.case-nav a{border:2px solid #282770}.case-nav a:nth-child(3){rotate:2deg}.code-editor{background:#f9f4fd}.code-preview{border:3px solid #282770;border-radius:20px 3px 20px 3px;box-shadow:6px 6px 0 #f19bd8}.dependency-map span:nth-child(2){rotate:-4deg;background:#ffdbb1}.report-list article{border-color:#342ea0}@media(max-width:800px){.intro{min-height:0;padding:30px 0 20px}.design-art .shape-a{width:210px;height:140px}.design-art b{font-size:35px}.intro h1{rotate:0}}
#overview .preview-grid{gap:26px}
#overview .preview-grid article:first-child{flex-basis:36%;border-radius:45px 4px 4px 4px}
#overview .preview-grid article:nth-child(2){flex-basis:18%;margin-top:55px}
#overview .preview-grid article:nth-child(3){flex-basis:22%}
@media(max-width:800px){#overview .preview-grid article:nth-child(n){flex-basis:100%;margin-top:0;rotate:0}}