.heading{display:block}.heading .sub{max-width:960px;font-size:16px;line-height:1.6}.site-nav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.site-nav a{padding:8px;font-size:13px}.layout-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.layout-picker button{min-width:0;padding:10px;border:2px solid var(--line);border-radius:6px;background:white;color:inherit;cursor:pointer;font:inherit}.layout-picker canvas{display:block;height:140px;width:auto;max-width:100%;margin:auto}.layout-picker span{display:block;font-size:13px;margin-top:8px}.layout-picker button[aria-pressed=true],.swatches [aria-pressed=true]{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}.shorts-workspace{align-items:start}.editor,.results,.card-previews figure{min-width:0}.editor label{display:block;font-size:13px;margin:16px 0 8px}.editor .upload{display:flex;margin-top:0}.editor .toggle{display:flex;align-items:center;gap:8px;min-height:44px}.editor input[type=file]{max-width:100%;font-size:13px}.editor input[type=text],.editor input[type=number],.editor textarea{width:100%;min-height:44px;padding:8px;border:1px solid var(--line);border-radius:5px;background:white;color:inherit;font:inherit}.editor textarea{resize:vertical}.editor fieldset{border:0;padding:0;margin:16px 0;min-width:0}.editor legend{font-size:13px}.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.swatches button{border:2px solid #bbb;border-radius:5px}.white{background:#fff;color:#141414}.black{background:#141414;color:#fff}.pale-yellow{background:#ffe7a0;color:#141414}.mint{background:#a5e9dc;color:#141414}.editor [hidden],.results [hidden]{display:none}.results figure{margin:0 0 16px}.results figcaption{font-size:13px;margin-bottom:8px}.results #preview{display:block;width:100%;max-width:340px;height:auto;aspect-ratio:9/16}.card-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.measured-preview{max-width:100%;overflow-x:auto}.measured-preview canvas{display:block;max-width:none}.results #desktop-card{width:216.1875px;height:324.28125px}.results #mobile-card{width:167.5px;height:251.25px}.results button,.editor button{min-height:44px;width:100%;font:inherit;cursor:pointer;margin-top:8px}.notes{margin-top:40px;overflow-wrap:anywhere}.notes article{max-width:960px}.notes h3{font-size:17px;margin-top:24px}.notes p,.notes li{line-height:1.65}.notes li{margin-bottom:8px}#status,#error{overflow-wrap:anywhere}.limitations{border-left:3px solid var(--line);padding-left:16px}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,.measured-preview:focus-visible{outline:2px solid var(--green);outline-offset:3px}@media(max-width:1000px){header{flex-wrap:wrap;gap:14px}.site-nav{width:100%}}@media(max-width:760px){main{padding:24px 20px}header,footer{padding:20px}.layout-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.layout-picker canvas{height:96px}.shorts-workspace{grid-template-columns:minmax(0,1fr)}.results{grid-row:1}.editor{grid-row:2}.heading .sub{font-size:14px}.results #preview{max-width:280px}.card-previews{gap:10px}.card-previews figcaption{font-size:11px}h1{font-size:32px}}

@media(max-width:760px){.site-nav,header .site-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.site-nav a{white-space:normal;text-align:center;min-height:44px}}