@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Caslon+Display&display=swap');
:root{--ink:#273e31;--paper:#f7f6ef;--accent:#b8c7a1}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px 'DM Sans',sans-serif}header{display:flex;align-items:center;justify-content:space-between;max-width:1240px;margin:auto;padding:30px 40px;border-bottom:1px solid #d9ded1}.brand{font-size:38px;letter-spacing:-2px;font-weight:600;text-decoration:none;color:inherit}.brand span{display:block;font-size:8px;letter-spacing:2px}.badge,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600}.badge{padding:10px 14px;border:1px solid #ccd3c1;border-radius:30px}main{max-width:1160px;margin:auto;padding:42px 24px}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:0 70px;margin-bottom:36px}.intro .eyebrow{grid-column:1/-1}h1{font:58px/1.03 'Libre Caslon Display',Georgia,serif;margin:8px 0}.intro>p:last-child{max-width:370px;color:#677163;line-height:1.7;margin-bottom:7px}.studio{display:grid;grid-template-columns:1.35fr 1fr;border:1px solid #d5d9cd;border-radius:22px;overflow:hidden;background:#fffef8}.mirror{position:relative;background:#e6e9dd;min-height:540px;display:flex;align-items:center;justify-content:center;overflow:hidden}#placeholder{text-align:center;padding:44px 18px;width:100%}.oval{width:150px;height:190px;border:1px solid #b1bd9e;border-radius:50%;margin:auto;display:grid;place-items:center}.oval svg{width:95px;stroke:#839674;stroke-width:1;fill:none}h2{font:32px 'Libre Caslon Display',Georgia,serif;margin:20px 0 10px}#placeholder p{color:#6c7762;font-size:13px;margin-bottom:26px}button,.shop{font:inherit;cursor:pointer;border:1px solid #cbd2bf;background:transparent;border-radius:9px;padding:12px 17px;color:var(--ink)}button:disabled{opacity:.4;cursor:default}.primary{background:var(--ink);color:white;border-color:var(--ink);display:block;margin:0 auto 16px;min-width:200px}.upload{display:block;text-decoration:underline;cursor:pointer;font-size:12px}aside{padding:36px}.muted{color:#737c6d;line-height:1.6;font-size:13px}.colors{display:flex;gap:15px;margin:27px 0}.swatch{height:43px;width:43px;border-radius:50%;padding:0;border:4px solid #fff;outline:1px solid #ddd}.swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:3px}.selection{border-bottom:1px solid #e2e4d9;padding-bottom:22px;margin-bottom:24px}.selection span{text-transform:uppercase;font-size:10px;letter-spacing:2px;color:#818975}.selection h3{font:28px 'Libre Caslon Display',Georgia,serif;margin:6px 0}.selection p{font-size:11px;color:#79806f}.range-label{display:flex;justify-content:space-between;font-size:12px}input[type=range]{width:100%;accent-color:var(--ink);margin:17px 0 23px}.actions{display:flex;gap:8px}.actions button{flex:1;font-size:12px;padding:11px 5px}#retry{font-size:11px;border:0;text-decoration:underline;padding:15px 0}.shop{display:block;text-decoration:none;text-align:center;background:var(--ink);color:white;margin-top:10px}.note{font-size:11px;line-height:1.7;color:#858a7a;margin-top:18px}#canvas{width:100%;height:auto;max-height:660px;object-fit:contain}#status{position:absolute;bottom:17px;left:14px;right:14px;text-align:center;font-size:11px;background:#fffef1e8;border-radius:20px;padding:9px;pointer-events:none}#stop{position:absolute;top:15px;right:15px;background:#fffdf1e8;font-size:11px}footer{margin-top:24px;text-align:center;color:#7b8373;font-size:11px;line-height:1.6}button:focus-visible,a:focus-visible,.upload:focus-within{outline:3px solid #a57e4f;outline-offset:4px}[hidden]{display:none!important}@media(max-width:720px){header{padding:20px}.brand{font-size:31px}.badge{font-size:8px;letter-spacing:1px;padding:8px}.intro{display:block}.intro h1{font-size:45px}.intro>p:last-child{font-size:13px}.studio{grid-template-columns:1fr}.mirror{min-height:440px}aside{padding:26px}main{padding:25px 16px}.colors{justify-content:space-between;max-width:330px}#canvas{max-height:560px}}

.applications{border:0;padding:0;margin:0 0 15px}.applications legend{font-size:11px;letter-spacing:.8px;margin-bottom:17px}.application input[type=range]{margin:10px 0 15px}.range-label span{display:flex;align-items:center;gap:8px}.range-label input[type=checkbox]{accent-color:var(--ink);width:15px;height:15px;margin:0}.application:has(input[type=checkbox]:not(:checked)) input[type=range]{opacity:.35}.studio{align-items:stretch}.mirror{min-height:610px}aside{padding:28px 36px}.selection{padding-bottom:12px;margin-bottom:17px}.colors{margin:22px 0}.note{margin-bottom:0}@media(max-width:720px){.mirror{min-height:430px}aside{padding:26px}}

#status.long-message{border-radius:10px;line-height:1.5;text-align:left;padding:12px 15px;font-size:12px}#placeholder{padding-bottom:105px}

.brand{display:block;line-height:0;flex-shrink:0}.brand img{display:block;width:120px;height:auto}header{padding-top:18px;padding-bottom:18px}@media(max-width:720px){.brand img{width:96px}}