:root{font-family:Arial,Helvetica,sans-serif;color:#2c253a;background:#f8f7f4;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{touch-action:manipulation}a{color:inherit;text-underline-offset:4px}button{min-height:48px;padding:12px 20px;border:1px solid #ada6bc;border-radius:6px;background:transparent;color:inherit;cursor:pointer}button:hover{background:#eae5f4}button:disabled{opacity:.45;cursor:not-allowed}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #7d50ca;outline-offset:3px}.skip{position:absolute;top:-100px}.skip:focus{top:4px;z-index:10;background:white;padding:12px}header{display:flex;align-items:center;gap:35px;margin:0 4vw;padding:28px 0;border-bottom:1px solid #d8d2df}header>a:last-child{margin-left:auto;font-size:14px}.brand{font-size:16px;line-height:1;text-decoration:none;font-weight:900;letter-spacing:-.5px}.brand span{font-size:32px}header p{font-size:14px;line-height:1.7;margin:0}header small{font-size:11px;color:#6b6576}main{max-width:1280px;margin:auto;padding:0 4vw}.intro{padding:55px 0 35px;display:grid;grid-template-columns:1fr 1fr;align-items:end}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700}.intro .eyebrow{grid-column:1/-1}.intro h1{font-size:clamp(38px,4.7vw,68px);line-height:1.02;letter-spacing:-3px;margin:12px 0}.intro>p:last-child{font-size:17px;line-height:1.7;justify-self:end}.desk{background:#ede7f8;border:1px solid #d5cbe4;border-radius:14px;padding:24px}.import-line{display:flex;align-items:center;justify-content:space-between;gap:20px}.import-label{display:block;font-size:14px;font-weight:bold;margin-bottom:12px}input[type=file]{display:block;max-width:100%;min-height:48px;font-size:13px}input[type=file]::file-selector-button{background:#33235f;color:white;border:0;border-radius:6px;min-height:48px;padding:12px 16px;margin-right:10px;cursor:pointer}#file-info{font:12px ui-monospace,monospace;color:#635872}.quick{display:flex;gap:10px;flex-wrap:wrap}.artboard-area{padding:22px 0}.artboard-frame{position:relative;aspect-ratio:16/9;background:#dbd4e8;border:1px solid #c2b6d6;border-radius:8px;overflow:hidden}canvas{display:block;max-width:100%}#artboard{width:100%;height:auto}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}#empty span{font-size:40px;color:#7c649f}#empty h2{font-size:clamp(20px,3vw,42px);line-height:1.08;letter-spacing:-1px;margin:12px}#empty p{font-size:13px;line-height:1.8;color:#635872}[hidden]{display:none!important}.corner-label{display:block;font:10px ui-monospace,monospace;letter-spacing:.8px;margin-top:12px;color:#6a5c7d}.controls{display:grid;grid-template-columns:1fr 1.2fr .8fr;gap:25px;border-top:1px solid #cbbfdd;padding:24px 0 0}fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-weight:700;font-size:14px;margin-bottom:10px}fieldset label{display:flex;align-items:center;gap:8px;min-height:42px;font-size:14px}input[type=checkbox]{width:20px;height:20px;accent-color:#33235f}.sliders>div+div{margin-top:20px}.controls>div label{display:block;font-size:13px;font-weight:bold;margin-bottom:10px}output{float:right;font:12px ui-monospace,monospace}input[type=range]{width:100%;min-height:36px;accent-color:#33235f}input[type=text]{width:100%;min-height:48px;border:1px solid #b3a5cd;border-radius:6px;background:#faf8fe;padding:12px}.readout{font-size:12px;line-height:1.7;color:#665675;border-top:1px solid #cbbfdd;padding-top:16px}.export{display:flex;align-items:center;gap:20px}.export button{background:#33235f;color:white;border-color:#33235f;font-weight:bold}.export p{font-size:12px;line-height:1.7;color:#6a5c7d}.comparisons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:35px;align-items:start;padding:60px 0}.comparisons h2,.notes h2{font-size:38px;line-height:1.05;letter-spacing:-1.5px;margin:15px 0}.comparison-intro>p:last-child{font-size:14px;line-height:1.7;max-width:260px}.comparisons figure{margin:0;padding:25px;border:1px solid #d8d2df;border-radius:10px;min-height:280px;background:#fff}.comparisons canvas{background:#eee9f5;border-radius:5px}#small-preview{width:168px;height:95px}#crop-preview{width:192px;height:240px}figcaption{margin-top:20px;font-size:13px;line-height:1.6}figcaption b,figcaption span{display:block}figcaption span{color:#6b6576;font-size:12px;margin-top:8px}.notes{border-top:1px solid #d8d2df;display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:40px 0}.notes article{margin-bottom:28px;max-width:700px}.notes h3{font-size:16px}.notes p{font-size:14px;line-height:1.8;color:#6b6576}.notes .checked{font-size:10px}footer{margin:20px 4vw 0;border-top:1px solid #d8d2df;padding:22px 0;display:flex;gap:25px;align-items:center;font-size:11px;color:#6b6576}footer p{margin-right:auto}#error{background:#fff0e9;color:#833d25;border-left:3px solid #a64e33;padding:14px;font-size:14px}@media(max-width:850px){.intro{display:block}.intro>p:last-child{justify-self:start}.controls{grid-template-columns:1fr 1fr}.controls>div:last-child{grid-column:1/-1;max-width:260px}.comparisons{gap:16px;grid-template-columns:1fr 1fr}.comparison-intro{grid-column:1/-1}.comparisons figure{padding:20px}.notes{gap:25px}.quick{max-width:180px}}@media(max-width:560px){header{gap:20px;padding:22px 0}header>a:last-child{display:none}.brand span{font-size:27px}header p{font-size:12px}.intro{padding-top:35px}.intro h1{letter-spacing:-1.8px}.intro>p:last-child{font-size:14px}.desk{padding:16px;border-radius:10px}.import-line{display:block}.quick{max-width:none;margin-top:15px}.quick button{flex:1;padding:10px}.artboard-area{padding:18px 0}.controls{grid-template-columns:1fr;gap:20px}.controls>div:last-child{grid-column:auto;max-width:none}.export{display:block}.export button{width:100%}.comparisons{grid-template-columns:1fr;padding:35px 0}.comparison-intro{grid-column:auto}.comparisons figure{min-height:0;display:flex;align-items:center;gap:20px}.comparisons figure:last-child{display:block}.comparisons figure:first-of-type{padding:16px;gap:14px}figcaption{margin-top:0;min-width:0}.comparisons figure:last-child figcaption{margin-top:18px}.notes{display:block;padding-top:24px}.notes h2{font-size:32px}footer{flex-wrap:wrap;gap:16px}footer p{flex-basis:100%;margin:0}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}