:root{--ink:#241d2c;--muted:#655d6a;--paper:#fcfaf6;--lavender:#eee6f8;--brand:#3d295d;--rule:#e8e1e6;--side:clamp(18px,4vw,48px);color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 "Segoe UI",system-ui,sans-serif}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%;object-fit:cover}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.07;letter-spacing:-.045em}h1{font-size:clamp(42px,6.4vw,91px);font-weight:780}h2{font-size:clamp(32px,4.4vw,56px);font-weight:760}h3{font-size:22px}.wrap{width:min(100%,1250px);margin-inline:auto;padding-inline:var(--side)}:focus-visible{outline:3px solid #9466cf;outline-offset:4px}.sr-only,.skip:not(:focus){position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}.skip:focus{position:absolute;z-index:5;top:4px;left:4px;padding:10px;background:white}
.top{border-bottom:1px solid var(--rule);background:var(--paper)}.nav{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:18px}.brand{font-size:22px;letter-spacing:-.07em;font-weight:800;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.brand span{margin-left:-7px;color:#8a62ba}.brand svg{color:var(--brand);flex-shrink:0}.nav nav{display:flex;gap:28px;align-items:center;color:var(--muted);font-size:14px;font-weight:600}.nav nav a:hover,.footer a:hover,.breadcrumbs a:hover{text-decoration:underline}
.button{display:inline-flex;justify-content:center;align-items:center;gap:13px;min-height:46px;padding:10px 18px;border:1px solid var(--brand);border-radius:10px;color:var(--brand);background:transparent;font-weight:700;font-size:14px;text-align:center}.button:hover{background:var(--lavender)}.button.primary{background:var(--brand);color:white;border-color:var(--brand);min-height:53px;padding:12px 22px}.button.primary:hover{background:#523679}.button:disabled{opacity:.55;cursor:wait}.button.small{padding-inline:13px}
.hero{background:#f6f0e7;border-bottom:1px solid var(--rule);padding-block:clamp(32px,5.6vw,76px)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,6vw,90px);align-items:center}.eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#5c4379;margin-bottom:16px}.eyebrow span{width:8px;height:8px;background:#a582c7;border-radius:50%}.hero h1 span{color:#8158a8}.lede{font-size:clamp(16px,1.65vw,20px);color:var(--muted);max-width:49ch;margin:19px 0 23px}.quiet{color:var(--muted);font-size:13px;margin-top:11px}.compare{--split:45%;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.18;border-radius:17px;background:#b6a586}.compare img{width:100%;height:100%;position:absolute;inset:0;object-position:center 40%}.compare .before-image{filter:brightness(.965) contrast(.99);clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-line{position:absolute;inset-block:0;left:var(--split);width:2px;background:#fff;pointer-events:none}.compare-line span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ink);width:42px;height:42px;border-radius:50%;background:white;display:grid;place-items:center;font-size:20px;white-space:nowrap}.badge{position:absolute;top:13px;border-radius:100px;background:#21172bc9;color:white;padding:5px 10px;font-size:11px;font-weight:700}.before{left:13px}.after{right:13px}.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.compare:focus-within{outline:3px solid #9466cf;outline-offset:4px}.hero-caption{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:var(--muted);font-size:11px}.hero-caption span:first-child{font-weight:800;letter-spacing:.12em}
.presets{padding-block:clamp(42px,6vw,80px);scroll-margin-top:15px}.section-top{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:25px}.section-top p:not(.eyebrow),.how p:not(.eyebrow){color:var(--muted);margin-top:9px}.filters,.pills,.downloads{display:flex;gap:8px;flex-wrap:wrap}.filters button,.pills button{border:1px solid #dcd3df;border-radius:100px;padding:8px 13px;background:white;color:var(--ink);font-size:13px;font-weight:650;min-height:44px}.filters button[aria-pressed=true],.pills button[aria-pressed=true]{background:var(--lavender);border-color:#a381c4;color:#37204f}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.card{background:#fff;border:1px solid var(--rule);border-radius:15px;overflow:hidden;min-width:0}.card[hidden]{display:none}.card-image{height:clamp(185px,22vw,280px);position:relative;display:block;overflow:hidden}.card-image img{width:100%;height:100%;object-position:center 42%;transition:transform .2s}.card-image:hover img{transform:scale(1.035)}.card-arrow{position:absolute;right:11px;bottom:11px;border-radius:50%;background:white;width:36px;height:36px;display:grid;place-items:center;font-weight:700}.card-body{padding:15px 15px 13px}.card-title{display:flex;align-items:baseline;justify-content:space-between;gap:7px}.card-title h3{font-size:19px}.card-title>span{flex-shrink:0;font-size:13px;color:#51356b;font-weight:750}.card-body p{color:var(--muted);font-size:14px;margin:8px 0 5px}.text-button{min-height:44px;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;color:var(--brand);font-size:14px;font-weight:750}.text-button:hover{text-decoration:underline}.peach{background:#e9c5a8}.sage{background:#abb399}.mint{background:#6d997e}.lilac{background:#c3abd6}.pink{background:#dfbedb}.sand{background:#ece1c7}
.how{background:var(--lavender);padding-block:55px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:25px}.steps>div{padding-top:15px;border-top:1px solid #cfc0dc}.steps strong{color:#785594;font-size:12px}.steps h3{margin-top:8px}.about{padding-block:36px}.about h2{font-size:23px}.about p{max-width:68ch;margin-top:8px;color:var(--muted)}.footer{display:flex;align-items:center;gap:25px;justify-content:space-between;padding-block:27px;border-top:1px solid var(--rule);font-size:14px}.footer p{color:var(--muted);font-size:13px;margin-top:4px}
.detail{padding-block:32px 65px}.breadcrumbs{font-size:13px;color:var(--muted);margin-bottom:30px}.detail h1{font-size:clamp(39px,5.5vw,70px)}.detail-art{border-radius:16px;overflow:hidden}.detail-art img{width:100%;aspect-ratio:1;height:auto}.detail-art figcaption{font-size:13px;padding:12px;background:#f0e8f5}.detail-info{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-block:40px}.detail-info>div{border-top:1px solid var(--rule);padding-top:18px}.detail-info h2{font-size:24px;margin-bottom:10px}.detail-info ul{padding-left:20px}.detail-info p,.detail-info li{color:var(--muted)}
dialog{border:1px solid var(--rule);border-radius:19px;padding:0;width:min(620px,calc(100% - 24px));max-height:calc(100dvh - 32px);background:white;color:var(--ink);box-shadow:0 24px 75px #1a10244a}dialog::backdrop{background:#1d172bbb}body:has(dialog[open]){overflow:hidden}.studio-head{display:flex;align-items:start;justify-content:space-between;gap:14px;padding:23px 24px 16px;border-bottom:1px solid var(--rule)}.studio-head h2{font-size:clamp(24px,5vw,34px)}.studio-head p{color:var(--muted);font-size:13px;margin-bottom:4px}.close{min-width:44px;min-height:44px;border-radius:50%;border:1px solid var(--rule);background:white;color:var(--ink);font-size:22px;line-height:1}.studio-body{padding:18px 24px 22px}.studio-footer{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;justify-content:space-between;padding:13px 24px max(13px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--rule)}.studio-footer .primary{margin-left:auto}.group{margin:0 0 16px;padding:0;border:0;min-inline-size:0}.group legend,.field>span:first-child{font-weight:750;font-size:15px;margin-bottom:6px}.field{display:grid;margin-bottom:14px;gap:3px}.field input,.field select,.field textarea{min-height:44px;padding:8px 10px;border:1px solid #bfb2c6;border-radius:8px;color:var(--ink);background:white;width:100%}.field textarea{min-height:83px;resize:vertical}.note,.helper{font-size:13px;color:var(--muted)}.note{padding:10px 12px;border-radius:8px;background:#f4eff8;margin:10px 0}.error{color:#982d39;margin:9px 0;font-size:14px}.error:empty{display:none}.uploads{display:grid;gap:8px;margin-block:12px}.upload-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px;border:1px solid var(--rule);border-radius:8px}.upload-row img{width:42px;height:42px;border-radius:5px}.upload-row strong{font-size:13px;margin-right:auto}.upload-row button{min-width:44px;min-height:44px;border:1px solid var(--rule);border-radius:8px;background:white;color:var(--ink)}.upload-row button:disabled{opacity:.4}.preview-img{display:block;width:auto;height:auto;max-height:47dvh;margin:10px auto;border:1px solid var(--rule);border-radius:9px}.downloads a{font-size:13px}.preview-tabs{margin-bottom:9px}
@media(max-width:800px){.section-top{align-items:start;flex-direction:column}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-image{height:clamp(175px,32vw,270px)}}
@media(max-width:610px){.nav{min-height:62px}.nav nav{display:none}.brand{font-size:20px}.hero-grid{grid-template-columns:1fr;gap:27px}.hero h1{font-size:clamp(48px,11vw,68px)}.hero-art{max-width:520px}.compare{aspect-ratio:1.28}.card-image{height:clamp(140px,45vw,220px)}.cards{gap:11px}.card-body{padding:10px}.card-title{display:grid;gap:2px}.card-title h3{font-size:17px}.card-body p{font-size:13px}.steps,.detail-info{grid-template-columns:1fr;gap:17px}.footer{flex-wrap:wrap;gap:12px}.footer>div{flex-basis:100%}.studio-head,.studio-body,.studio-footer{padding-inline:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.ref-uploads{display:grid;gap:11px;margin-bottom:12px}.ref-upload{position:relative;display:grid;grid-template-columns:76px 1fr;gap:13px;align-items:center;min-height:102px;padding:11px;border:1px dashed #b9a6c9;border-radius:12px;background:#f9f6fc;cursor:pointer}.ref-upload:focus-within{outline:3px solid #9466cf;outline-offset:3px}.ref-photo{display:grid;place-items:center;width:76px;height:76px;overflow:hidden;border-radius:8px;background:#eee6f8;color:#563c71;font-size:25px}.ref-photo img,.ref-mini img{width:100%;height:100%;object-fit:cover}.ref-upload strong,.ref-upload small,.ref-file{display:block}.ref-upload small,.ref-file{font-size:13px}.ref-upload small{color:var(--muted);margin:3px 0 4px}.ref-file{color:var(--brand);font-weight:700}.ref-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.ref-mini{display:flex;gap:12px;margin-bottom:16px}.ref-mini figure{width:86px}.ref-mini img{height:68px;border-radius:7px}.ref-mini figcaption{font-size:12px;color:var(--muted);margin-top:4px}.ref-check{display:flex;align-items:center;gap:9px;min-height:44px;font-size:14px}.ref-check input{width:18px;height:18px;accent-color:var(--brand)}.ref-redo{margin-top:15px}.ref-result{max-width:100%}

.ref-example{margin-top:40px}.ref-example h2{font-size:clamp(26px,4vw,38px);margin-bottom:14px}.ref-example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,16px)}.ref-example-grid img{width:100%;aspect-ratio:4/5;height:auto;border-radius:10px}.ref-example-grid figcaption{margin-top:6px;color:var(--muted);font-size:13px}
.custom-mark{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(ellipse at 65% 20%,#f3e7ff,#d7bcea 57%,#bea4dc);color:#41265d;font-size:clamp(82px,13vw,164px);font-weight:800;line-height:1}.detail-art .custom-mark{aspect-ratio:1}.ref-scopes{display:grid;gap:7px}.ref-scopes label{display:flex;align-items:center;gap:9px;border:1px solid var(--rule);border-radius:8px;padding:8px 10px;min-height:44px}.ref-scopes input{accent-color:var(--brand)}.ref-scopes strong,.ref-scopes small{display:block}.ref-scopes small{color:var(--muted)}.ref-order{margin:0}.ref-order>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--rule);font-size:14px}.ref-order dd{margin:0;text-align:right;font-weight:700;overflow-wrap:anywhere}.ref-order .ref-order-brief{display:block}.ref-order-brief dd{margin-top:3px;text-align:left;white-space:pre-wrap;font-weight:400}.ref-order .ref-total{padding-top:12px;color:var(--brand);font-weight:750}.ref-total dd{font-size:19px}
.test-order [hidden]{display:none!important}.test-order .downloads,.test-order form,.test-order>p:last-child{margin-top:18px}.test-order form{max-width:500px}
.resume-order{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:22px;padding:14px 16px;border:1px solid var(--rule);border-radius:12px;background:#f4eff8}.resume-order[hidden]{display:none}.resume-order p{margin:3px 0 0;color:var(--muted);font-size:14px}.resume-order .button{white-space:nowrap}.test-order [data-link-fallback]{max-width:500px;margin-top:10px}.test-order [data-copy-status]:empty{display:none}
.footer-policies{display:flex;flex-wrap:wrap;gap:16px}.legal-page{max-width:920px}.legal-page h1{margin-bottom:22px}.legal-page h2{font-size:clamp(22px,3vw,30px);margin:25px 0 8px}.legal-page p+p{margin-top:12px}.legal-page a{text-decoration:underline}

.ref-upload.drag-over {
  background: #f1e7fa;
  border-color: var(--brand);
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.order-preview {
  width: auto;
  max-width: min(100%, 520px);
  max-height: min(65vh, 560px);
  height: auto;
  object-fit: contain;
  margin-top: 18px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: #f4eff6;
}

.compare .before-image { filter: none; }
.work-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.work-feature { background: #f5f0e9; border-top: 1px solid var(--rule); padding-block: clamp(36px, 5vw, 66px); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 16px); }
.work-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.work-tile { min-width: 0; background: white; border: 1px solid var(--rule); border-radius: 14px; }
.work-tile > a { display: block; border-radius: inherit; }
.work-tile img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #ede7e6; border-radius: 13px 13px 0 0; }
.work-tile-copy { position: relative; padding: 10px 30px 11px 11px; }
.work-tile-copy > span:first-child { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }
.work-tile-copy h3 { font-size: clamp(16px, 2vw, 21px); }
.work-tile a:hover h3 { text-decoration: underline; }
.work-arrow { position: absolute; right: 12px; bottom: 13px; color: var(--brand); }
.work-comparison { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); align-items: start; gap: clamp(10px, 2vw, 24px); }
.work-comparison.work-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; }
.work-frame { min-width: 0; }
.work-frame a { display: grid; place-items: center; background: #f1ece9; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.work-frame img { width: 100%; height: auto; }
.work-frame figcaption { padding-top: 7px; color: var(--muted); font-size: 14px; font-weight: 650; }
.work-finished figcaption { color: var(--brand); }
.work-page .work-actions { margin-top: 26px; }
.card-image .work-preset-art, .detail-art .work-preset-art, .ref-example-grid img { object-fit: contain; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.past-nav[aria-current="page"] { background: var(--lavender); }
.past-pictures [role="status"] { color: var(--muted); }
.past-pictures [role="status"]:empty { display: none; }
.picture-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 12px; padding: 0; margin: 0 0 16px; }
.picture-list:empty { margin: 0; }
.picture-list a { display: block; height: 100%; overflow: hidden; border: 1px solid var(--rule); border-radius: 12px; background: white; }
.picture-list a:hover strong { text-decoration: underline; }
.picture-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f1ece9; }
.picture-list span { display: grid; gap: 3px; padding: 10px 12px; }
.picture-list small { color: var(--muted); }

@media (max-width: 900px) {
  .past-nav + .pick-preset { display: none; }
  .nav nav { gap: 16px; }
}

@media (max-width: 350px) {
  .nav { gap: 6px; }
  .nav .brand { font-size: 18px; }
  .nav .past-nav { padding-inline: 8px; }
}

@media (max-width: 800px) {
  .work-grid, .work-comparison { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-comparison:not(.work-pair) .work-finished { grid-column: 1 / -1; max-width: 500px; width: 100%; }
}