@charset "UTF-8";
:root {
  --paper:#f4f2ea;
  --ink:#283b31;
  --muted:#62685d;
  --line:#d7d9cc;
  --orange:#cd5c31;
  --serif:Georgia,'Times New Roman',serif;
  --sans:Arial,Helvetica,sans-serif
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65
}

button,input,select {
  font:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

a {
  color:inherit;
  text-decoration:none
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px
}

button:disabled {
  opacity:.6;
  cursor:wait
}

button {
  color:inherit
}

p,h1,h2,h3 {
  margin-top:0
}

p {
  margin-bottom:20px
}

h1,h2 {
  font-weight:400;
  letter-spacing:-.055em;
  line-height:1.08
}

h1 {
  font-size:clamp(50px,4.7vw,79px);
  margin-bottom:28px
}

h2 {
  font-size:clamp(38px,3.6vw,58px);
  margin-bottom:28px
}

h1 em,h2 em {
  font-family:var(--serif);
  font-weight:400
}

h3 {
  font-size:24px;
  letter-spacing:-.04em;
  font-weight:400
}

canvas {
  display:block;
  width:100%;
  height:100%
}

.preview-banner {
  background:var(--ink);
  color:#edeedf;
  min-height:31px;
  padding:6px 5%;
  text-align:center;
  font-size:9px;
  letter-spacing:.15em
}

.preview-banner span {
  margin-left:22px;
  color:#c2cbbd;
  letter-spacing:.04em
}

.site-header {
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 5%;
  border-bottom:1px solid var(--line);
  gap:20px
}

.wordmark {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:28px;
  font-weight:700;
  letter-spacing:-1.6px;
  line-height:1
}

.wordmark>span {
  font-size:10px;
  align-self:flex-start;
  margin-top:3px;
  letter-spacing:0
}

.site-header nav {
  display:flex;
  gap:30px;
  font-size:12px
}

.site-header nav a:hover {
  color:var(--orange)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:20px
}

.header-cart {
  border-bottom:1px solid currentColor;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase
}

.button {
  border:1px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:#f9f7ed;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:38px;
  min-height:54px;
  padding:15px 24px;
  font-size:12px;
  letter-spacing:.015em;
  transition:background .2s,transform .2s
}

.button:hover {
  background:#405745;
  transform:translateY(-2px)
}

.button>span {
  font-size:20px;
  line-height:1
}

.button-small {
  font-size:11px;
  min-height:42px;
  padding:10px 17px;
  gap:22px
}

.eyebrow {
  font-size:9px;
  letter-spacing:.16em;
  font-weight:600;
  margin-bottom:25px
}

.dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  display:inline-block;
  margin-right:7px;
  vertical-align:middle
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.05fr;
  min-height:650px;
  margin:0 5%;
  padding:38px 0 35px;
  gap:4%
}

.hero-copy {
  padding-top:36px;
  display:flex;
  align-items:flex-start;
  flex-direction:column
}

.hero-copy .eyebrow {
  margin-bottom:32px
}

.hero-description {
  max-width:375px;
  font-size:14px;
  line-height:1.85;
  margin-bottom:27px;
  color:var(--muted)
}

.quiet {
  color:var(--muted);
  font-size:11px;
  line-height:1.7
}

.hero-note {
  margin-top:13px;
  font-size:10px
}

.hero-bottom {
  display:flex;
  width:100%;
  justify-content:space-between;
  align-items:flex-end;
  margin-top:auto;
  padding-top:44px;
  font-size:9px;
  letter-spacing:.13em;
  line-height:1.5
}

.hero-bottom>a {
  font-size:8px;
  letter-spacing:.12em;
  padding:5px 0
}

.hero-bottom>a span {
  font-size:22px;
  margin-left:16px
}

.hero-art {
  position:relative;
  min-height:565px;
  overflow:hidden;
  background:radial-gradient(ellipse at 60% 25%,#e9e8db,#d9dccd 72%);
  border-radius:2px;
  display:flex;
  flex-direction:column
}

.hero-art canvas {
  position:absolute;
  top:12%;
  left:-5%;
  width:110%;
  height:75%
}

.art-top {
  display:flex;
  justify-content:space-between;
  padding:24px;
  font-size:7px;
  letter-spacing:.13em;
  z-index:1
}

.art-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding:0 26px 27px;
  z-index:1;
  pointer-events:none
}

.art-caption .eyebrow {
  font-size:7px
}

.art-caption p {
  font-size:21px;
  font-family:var(--serif);
  margin:8px 0 0
}

.coordinate {
  font-size:10px;
  line-height:1.5;
  text-align:right;
  letter-spacing:.06em
}

.art-disclaimer {
  position:absolute;
  bottom:4px;
  left:26px;
  margin:0;
  color:#535e50;
  font-size:8px
}

.values-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 5%;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:9px;
  letter-spacing:.12em
}

.asterisk {
  color:#7e8b68;
  font-size:24px;
  line-height:1
}

.section-pad {
  padding:100px 8%
}

.idea {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:50px
}

.idea>.eyebrow {
  padding-top:12px
}

.idea>div {
  max-width:710px
}

.idea p:not(.eyebrow) {
  max-width:550px;
  font-size:15px;
  color:var(--muted)
}

.text-link {
  display:flex;
  gap:50px;
  font-size:9px;
  letter-spacing:.12em;
  margin-top:36px
}

.text-link>span {
  font-size:18px
}

.product {
  padding-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8%;
  align-items:center
}

.product-visual {
  height:500px;
  position:relative;
  background:#dedfd2;
  padding:28px;
  display:flex;
  flex-direction:column;
  overflow:hidden
}

.product-visual canvas {
  position:absolute;
  top:40px;
  left:-8%;
  width:116%;
  height:85%
}

.product-visual>.eyebrow {
  font-size:8px;
  z-index:1
}

.visual-footer {
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.1em;
  margin-top:auto;
  z-index:1
}

.product-copy>p:not(.eyebrow):not(.quiet) {
  font-size:14px;
  color:var(--muted)
}

.product-specs {
  margin:30px 0
}

.product-specs>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  font-size:11px
}

.product-specs dd {
  margin:0;
  text-align:right
}

.product-specs dt {
  color:var(--muted)
}

.product-price {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:12px
}

.product-price>span {
  font-size:10px
}

.product-price strong {
  font-size:25px;
  font-weight:400;
  margin-left:12px
}

.text-button {
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  padding:6px 0;
  font-size:12px;
  text-align:left
}

.text-button:hover {
  color:var(--orange)
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px
}

.section-heading h2 {
  margin-bottom:0
}

.section-heading>.text-button {
  margin-bottom:8px
}

.process {
  background:#e9eadf
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:65px
}

.steps article {
  position:relative;
  border-top:1px solid #bfc6b6;
  padding-top:22px
}

.step-number {
  font-size:11px;
  letter-spacing:.12em
}

.step-icon {
  font-size:44px;
  line-height:1;
  margin:25px 0;
  color:#738165
}

.steps p {
  font-size:13px;
  color:var(--muted);
  max-width:290px
}

.step-status {
  display:block;
  font-size:8px;
  letter-spacing:.08em
}

.closing {
  position:relative;
  overflow:hidden;
  text-align:center;
  background:var(--ink);
  color:var(--paper);
  padding:85px 20px 95px
}

.closing h2 {
  font-size:82px;
  margin-bottom:20px
}

.closing>p:not(.eyebrow) {
  font-size:13px;
  color:#c9d0bd
}

.closing .eyebrow {
  font-size:8px
}

.button-light {
  background:var(--paper);
  color:var(--ink);
  position:relative;
  z-index:1;
  margin-top:8px
}

.button-light:hover {
  background:#e0e6d3
}

.closing-contour {
  position:absolute;
  width:470px;
  height:420px;
  right:-290px;
  top:40px;
  border-radius:42% 58% 52% 48%;
  border:1px solid #849378;
  box-shadow:0 0 0 20px #283b31,0 0 0 21px #64735b,0 0 0 42px #283b31,0 0 0 43px #64735b,0 0 0 65px #283b31,0 0 0 66px #64735b,0 0 0 90px #283b31,0 0 0 91px #64735b;
  opacity:.3;
  transform:rotate(-30deg)
}

footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:38px 5%
}

footer>.wordmark {
  font-size:24px
}

footer>span {
  font-size:8px;
  letter-spacing:.12em
}

footer p {
  font-size:9px;
  color:var(--muted);
  margin:0
}

.noscript {
  padding:20px;
  background:#f2d7bc
}

dialog {
  width:min(1060px,calc(100% - 32px));
  max-height:92vh;
  border:1px solid var(--line);
  padding:0;
  background:var(--paper);
  color:var(--ink);
  border-radius:4px;
  box-shadow:0 30px 120px #10271f55
}

dialog::backdrop {
  background:#14271c99;
  backdrop-filter:blur(6px)
}

body.modal-open {
  overflow:hidden
}

.dialog-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  padding:20px 32px
}

.dialog-header .wordmark {
  font-size:23px
}

.icon-button {
  border:1px solid var(--line);
  width:38px;
  height:38px;
  border-radius:50%;
  background:transparent;
  font-size:16px
}

.icon-button:hover {
  background:#e1e4d7
}

.dialog-body {
  padding:40px 55px
}

#upload-step {
  max-width:560px;
  margin:auto;
  text-align:center
}

#upload-step h2 {
  font-size:64px;
  margin-bottom:18px
}

.dialog-intro {
  font-size:14px;
  color:var(--muted)
}

.upload-zone {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:26px 20px;
  border:1px dashed #8a957e;
  background:#e9ecdf;
  cursor:pointer
}

.upload-zone:focus-within,.upload-zone.dragover {
  outline:3px solid var(--orange);
  outline-offset:3px;
  background:#e1e5d4
}

.upload-zone input {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  opacity:0;
  cursor:pointer
}

.upload-zone strong {
  font-size:15px;
  font-weight:400
}

.upload-zone>span:not(.upload-icon) {
  font-size:11px
}

.upload-icon {
  font-size:32px;
  line-height:1.2
}

.file-button {
  border-bottom:1px solid var(--ink);
  padding:3px 0;
  margin-top:8px
}

.error {
  color:#a63a21;
  font-size:13px;
  margin:12px 0;
  min-height:0
}

.error:empty {
  display:none
}

.demo-button {
  margin-top:24px
}

.privacy-note {
  font-size:11px;
  color:var(--muted);
  max-width:380px;
  margin:22px auto 0
}

.route-name {
  font-family:var(--serif);
  font-size:24px;
  overflow-wrap:anywhere
}

.route-analysis {
  display:grid;
  grid-template-columns:1fr 180px;
  gap:30px;
  margin:25px 0 18px
}

.route-map {
  background-color:#e6e9dc;
  background-image:linear-gradient(#d4dbc980 1px,transparent 1px),linear-gradient(90deg,#d4dbc980 1px,transparent 1px);
  background-size:35px 35px;
  min-width:0;
  position:relative
}

.route-map svg {
  display:block;
  width:100%;
  height:280px
}

.route-map>span {
  position:absolute;
  bottom:10px;
  left:14px;
  font-size:7px;
  letter-spacing:.08em
}

.route-stats {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:25px
}

.route-stats>div>span {
  display:block;
  font-size:8px;
  letter-spacing:.12em
}

.route-stats strong {
  font-size:27px;
  font-weight:400
}

.notice {
  padding:18px 22px;
  background:#e9e6d8;
  border-left:2px solid #b39356;
  font-size:12px;
  margin:24px 0
}

.notice p {
  margin:6px 0 0;
  color:var(--muted)
}

.notice strong {
  font-weight:500
}

.step-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:28px
}

.design-layout {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:38px
}

.design-preview {
  position:sticky;
  top:16px;
  align-self:start;
  background:#dfe2d3;
  min-height:430px;
  overflow:hidden
}

.design-preview canvas {
  height:350px;
  width:100%
}

.story-label {
  text-align:center;
  padding:0 20px;
  overflow-wrap:anywhere
}

.story-label strong {
  display:block;
  font-family:var(--serif);
  font-weight:400;
  font-size:23px
}

.story-label span {
  font-size:9px;
  letter-spacing:.05em
}

.design-preview>p {
  text-align:center;
  font-size:8px;
  padding:18px 10px 0;
  color:var(--muted)
}

fieldset {
  border:0;
  border-top:1px solid var(--line);
  padding:13px 0 19px;
  margin:0
}

legend {
  padding-right:15px;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.12em
}

label:not(.upload-zone) {
  display:block;
  font-size:11px;
  margin:5px 0 6px
}

select,input[type=text],input[type=date],input[type=email] {
  display:block;
  width:100%;
  max-width:100%;
  background:transparent;
  color:var(--ink);
  border:1px solid #aeb8a4;
  border-radius:2px;
  min-height:42px;
  padding:10px 12px;
  font-size:12px
}

#story-date {
  margin-bottom:0
}

#story-title {
  margin-bottom:12px
}

#design-form>.button {
  width:100%
}

#design-form>.quiet {
  margin-top:10px
}

#save-status {
  font-size:11px;
  color:var(--muted)
}

[hidden] {
  display:none!important
}

@media(min-width:1600px) {
  .site-header,.hero {
    max-width:1500px;
    margin-left:auto;
    margin-right:auto
  }
  .section-pad {
    padding-left:max(8%,calc((100vw - 1350px)/2));
    padding-right:max(8%,calc((100vw - 1350px)/2))
  }
  .hero {
    min-height:750px
  }
  .hero-art {
    min-height:640px
  }
}

@media(max-width:1000px) {
  .site-header nav {
    gap:17px
  }
  .hero {
    gap:3%;
    min-height:580px
  }
  .hero-art {
    min-height:510px
  }
  .hero-copy {
    padding-top:24px
  }
  .hero-copy .eyebrow {
    font-size:8px
  }
  h1 {
    font-size:49px
  }
  .hero-description {
    font-size:13px
  }
  .art-top {
    font-size:6px;
    padding:20px 16px
  }
  .art-caption {
    padding:0 18px 35px
  }
  .art-caption p {
    font-size:18px
  }
  .section-pad {
    padding:75px 5%
  }
  .product {
    gap:5%;
    padding-top:10px
  }
  .product-visual {
    height:450px
  }
  .product-price {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
  .steps {
    gap:25px
  }
  .dialog-body {
    padding:32px
  }
  .design-layout {
    gap:25px
  }
  .design-preview canvas {
    height:310px
  }
  .design-preview {
    min-height:390px
  }
}

@media(max-width:700px) {
  .preview-banner {
    font-size:8px;
    padding:7px 12px
  }
  .preview-banner span {
    display:none
  }
  .site-header {
    height:80px
  }
  .wordmark {
    font-size:25px
  }
  .site-header nav {
    display:none
  }
  .header-actions {
    gap:10px
  }
  .site-header .button {
    font-size:10px;
    gap:10px;
    padding:9px 11px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:16px;
    gap:25px
  }
  .hero-copy {
    padding-top:22px
  }
  .hero-copy .eyebrow {
    font-size:8px;
    margin-bottom:25px
  }
  h1 {
    font-size:clamp(44px,9.3vw,66px)
  }
  .hero-description {
    max-width:440px;
    font-size:14px
  }
  .hero-bottom {
    display:none
  }
  .hero-art {
    min-height:470px
  }
  .hero-art canvas {
    top:7%;
    height:82%
  }
  .art-top {
    font-size:7px;
    padding:20px
  }
  .art-caption {
    padding:0 22px 32px
  }
  .art-caption p {
    font-size:22px
  }
  .values-strip {
    display:grid;
    grid-template-columns:1fr 1fr;
    text-align:center;
    gap:16px;
    font-size:8px;
    padding:24px 5%
  }
  .values-strip .asterisk {
    display:none
  }
  .section-pad {
    padding:58px 6%
  }
  .idea {
    grid-template-columns:1fr;
    gap:0
  }
  .idea>.eyebrow {
    padding:0;
    margin-bottom:24px
  }
  .idea p:not(.eyebrow) {
    font-size:14px
  }
  .product {
    grid-template-columns:1fr;
    gap:35px;
    padding-top:0
  }
  .product-visual {
    height:440px
  }
  .product-price {
    flex-direction:row;
    align-items:center
  }
  .section-heading {
    display:block
  }
  .section-heading>.text-button {
    margin-top:18px
  }
  .steps {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:35px
  }
  .steps article {
    padding-left:50px
  }
  .step-number {
    position:absolute;
    left:0;
    top:24px
  }
  .step-icon {
    display:none
  }
  .steps h3 {
    margin-bottom:12px
  }
  .steps p {
    max-width:100%;
    margin-bottom:12px
  }
  .closing {
    padding:60px 20px
  }
  .closing h2 {
    font-size:65px
  }
  .closing>p:not(.eyebrow) {
    max-width:270px;
    margin:0 auto 22px
  }
  footer {
    flex-wrap:wrap;
    padding:30px 6%
  }
  footer>span {
    font-size:7px
  }
  footer p {
    width:100%;
    font-size:9px
  }
  dialog {
    width:calc(100% - 16px);
    max-height:95dvh
  }
  .dialog-header {
    padding:14px 20px
  }
  .dialog-body {
    padding:26px 20px
  }
  .dialog-body h2 {
    font-size:42px
  }
  #upload-step h2 {
    font-size:53px
  }
  .dialog-body .eyebrow {
    font-size:8px
  }
  .route-analysis {
    grid-template-columns:1fr;
    gap:20px
  }
  .route-stats {
    flex-direction:row;
    justify-content:space-between;
    gap:12px
  }
  .route-stats strong {
    font-size:22px
  }
  .route-stats>div>span {
    font-size:7px
  }
  .route-map svg {
    height:230px
  }
  .step-actions {
    gap:16px;
    flex-wrap:wrap
  }
  .step-actions .button {
    font-size:11px;
    gap:14px;
    padding:12px 16px
  }
  .design-layout {
    grid-template-columns:1fr
  }
  .design-preview {
    position:relative;
    top:0;
    min-height:370px
  }
  .design-preview canvas {
    height:300px
  }
  .upload-zone {
    padding:24px 10px
  }
  .demo-button {
    font-size:11px
  }
  .hero-note {
    font-size:9px
  }
}

.dialog-header {
  position:sticky;
  top:0;
  z-index:3;
  background:var(--paper)
}

dialog {
  width:min(1280px,calc(100% - 32px))
}

.reveal-layout {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(250px,.65fr);
  gap:42px;
  align-items:center
}

.reveal-preview {
  min-height:520px;
  background:radial-gradient(ellipse at 55% 25%,#ecebdf,#d9ddcd 72%);
  display:flex;
  flex-direction:column;
  overflow:hidden
}

.reveal-preview canvas {
  min-height:440px
}

.reveal-preview .story-label {
  padding:0 24px 24px
}

.reveal-copy p {
  color:var(--muted);
  font-size:13px
}

.studio-layout {
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(280px,.8fr);
  gap:34px;
  align-items:start
}

.studio-preview {
  min-width:0;
  position:sticky;
  top:82px;
  align-self:start;
  background:radial-gradient(ellipse at 55% 25%,#ecebdf,#d7dccb 74%);
  overflow:hidden;
  border:1px solid #d1d6c7
}

.studio-canvas-wrap {
  height:560px;
  position:relative;
  overflow:hidden
}

#studio-canvas {
  width:100%;
  height:100%;
  touch-action:none;
  cursor:grab;
  overscroll-behavior:contain
}

#studio-canvas:active {
  cursor:grabbing
}

#studio-canvas:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:-4px
}

.studio-toolbar {
  position:absolute;
  right:14px;
  bottom:14px
}

.studio-tool {
  min-height:38px;
  border:1px solid #ffffffaa;
  background:#f4f2eae8;
  color:var(--ink);
  padding:8px 13px;
  font-size:10px;
  letter-spacing:.04em;
  box-shadow:0 5px 25px #22312622
}

.studio-tool:hover {
  background:#fffdf5
}

.studio-render-error {
  position:absolute;
  inset:20px;
  display:grid;
  place-items:center;
  padding:30px;
  text-align:center;
  background:#f4f2eaf2;
  color:#a63a21;
  z-index:2
}

.studio-object-label {
  padding:18px 24px 10px;
  text-align:center;
  border-top:1px solid #d1d6c7;
  min-height:72px;
  overflow-wrap:anywhere
}

.studio-object-label strong {
  display:block;
  font-family:var(--serif);
  font-size:23px;
  font-weight:400;
  line-height:1.25
}

.studio-object-label span {
  display:block;
  margin-top:4px;
  font-size:9px;
  letter-spacing:.06em
}

.studio-facts {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:10px 20px;
  border-top:1px solid #d1d6c7;
  border-bottom:1px solid #d1d6c7;
  font-size:7px;
  letter-spacing:.1em
}

.studio-preview>.quiet {
  margin:0;
  padding:12px 20px 16px;
  text-align:center
}

.studio-controls {
  min-width:0
}

.control-copy {
  margin:3px 0 10px;
  font-size:11px;
  color:var(--muted)
}

.style-options {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}

.style-option {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  border:1px solid #afb7a6;
  border-radius:2px;
  background:transparent;
  padding:8px;
  color:var(--ink);
  text-align:left;
  font-size:10px;
  line-height:1.3
}

.style-option:hover {
  background:#e8eadd
}

.style-option[aria-checked=true] {
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
  background:#ececdf
}

.style-swatch {
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--swatch-color);
  border:1px solid #283b3133;
  box-shadow:inset 0 0 0 2px #ffffff33
}

.studio-controls>.button {
  width:100%
}

.studio-controls>.quiet {
  margin:10px 0 4px
}

.commerce-layout {
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);
  gap:34px;
  align-items:start
}

.summary-visual {
  min-height:520px;
  background:radial-gradient(ellipse at 55% 25%,#ecebdf,#d7dccb 74%);
  border:1px solid #d1d6c7
}

.summary-visual canvas {
  min-height:520px
}

.commerce-card {
  border:1px solid var(--line);
  background:#eeeee4;
  padding:28px
}

.commerce-card h3 {
  font-family:var(--serif);
  font-size:30px
}

.summary-list {
  margin:20px 0
}

.summary-list>div {
  display:grid;
  grid-template-columns:minmax(90px,.4fr) minmax(0,1fr);
  gap:18px;
  border-top:1px solid var(--line);
  padding:11px 0
}

.summary-list dt {
  color:var(--muted);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase
}

.summary-list dd {
  margin:0;
  font-size:12px;
  overflow-wrap:anywhere
}

.commerce-total {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:24px;
  border-top:1px solid var(--ink);
  padding:18px 0
}

.commerce-total strong {
  font-family:var(--serif);
  font-size:27px;
  font-weight:400
}

.commerce-card>.button,.checkout-form>.button {
  width:100%
}

.cart-route main>:not(#cart-page) {
  display:none
}

.cart-page {
  width:min(1400px,90%);
  min-height:calc(100vh - 131px);
  margin:0 auto;
  padding:70px 0 110px
}

.cart-page-heading {
  max-width:760px;
  margin-bottom:55px
}

.cart-page-heading>p:last-child {
  max-width:520px;
  color:var(--muted)
}

.cart-page-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,390px);
  gap:clamp(36px,6vw,90px);
  align-items:start
}

.cart-collection {
  min-width:0
}

.cart-items {
  display:grid;
  gap:0;
  list-style:none;
  padding:0;
  margin:0 0 22px
}

.cart-items>li {
  border-top:1px solid var(--line)
}

.cart-items>li:last-child {
  border-bottom:1px solid var(--line)
}

.cart-item {
  display:grid;
  grid-template-columns:150px minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  padding:24px 0
}

.cart-item-preview {
  aspect-ratio:1;
  border:10px solid var(--preview-frame,#32372f);
  background:var(--preview-landscape,#c7c6ab);
  box-shadow:0 10px 28px rgba(40,59,49,.12);
  padding:13px
}

.cart-item-preview svg {
  width:100%;
  height:100%;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.15))
}

.cart-item h3 {
  font-family:var(--serif);
  font-size:28px;
  margin:2px 0 7px
}

.cart-item p {
  color:var(--muted);
  font-size:11px;
  margin-bottom:8px
}

.cart-item-product,.cart-item-status {
  display:block;
  color:var(--muted);
  font-size:8px;
  letter-spacing:.12em;
  text-transform:uppercase
}

.cart-item-status {
  margin-bottom:8px
}

.cart-item-price {
  font-family:var(--serif);
  font-size:20px;
  font-weight:400
}

.cart-actions {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px
}

.cart-actions select {
  width:auto;
  min-width:72px
}

.cart-total {
  position:sticky;
  top:24px;
  width:100%
}

.cart-summary-counts,.cart-unresolved {
  margin:0 0 22px
}

.cart-summary-counts>div,.cart-unresolved>div {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid var(--line);
  padding:10px 0;
  font-size:11px
}

.cart-summary-counts dt,.cart-unresolved dt {
  color:var(--muted)
}

.cart-summary-counts dd,.cart-unresolved dd {
  margin:0;
  text-align:right
}

.create-another {
  margin-top:20px
}

.cart-empty {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:55px 0 65px
}

.cart-empty h2 {
  max-width:620px
}

.confirmation-items {
  border-top:1px solid var(--line);
  margin:20px 0;
  padding:15px 0 15px 20px;
  font-size:12px
}

.checkout-form {
  max-width:720px
}

.checkout-form fieldset {
  margin-bottom:16px
}

.checkout-form input:not([type=checkbox]),.checkout-form select {
  margin-bottom:12px
}

.address-row {
  display:grid;
  grid-template-columns:minmax(120px,.4fr) minmax(0,1fr);
  gap:14px
}

.confirmation {
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin:16px 0!important;
  font-size:12px!important
}

.confirmation input {
  width:18px;
  height:18px;
  margin:1px 0 0
}

.confirmation a,footer a:not(.wordmark) {
  text-decoration:underline;
  text-underline-offset:3px
}

.price-breakdown {
  display:grid;
  gap:7px;
  margin:20px 0
}

.price-line {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px
}

.price-line.total {
  border-top:1px solid var(--ink);
  padding-top:12px;
  font-weight:700
}

.sandbox-notice {
  border-left:2px solid #b39356;
  background:#e9e6d8;
  padding:12px 16px;
  font-size:11px
}

.legal-page {
  width:min(900px,90%);
  margin:70px auto 110px
}

.legal-page>section {
  border-top:1px solid var(--line);
  padding:30px 0
}

.legal-page h2 {
  font-size:32px
}

.legal-page li {
  margin:8px 0
}

@media(max-width:1000px) {
  .studio-layout {
    grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);
    gap:24px
  }
  .studio-canvas-wrap {
    height:470px
  }
  .style-options {
    grid-template-columns:1fr
  }
  .commerce-layout {
    grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr)
  }
  .cart-page-layout {
    grid-template-columns:minmax(0,1fr) minmax(280px,330px);
    gap:38px
  }
  .cart-item {
    grid-template-columns:120px minmax(0,1fr)
  }
  .cart-actions {
    grid-column:2;
    flex-direction:row;
    justify-content:flex-start
  }
}

@media(max-width:700px) {
  dialog {
    width:calc(100% - 16px)
  }
  .reveal-layout,.studio-layout,.commerce-layout {
    grid-template-columns:1fr
  }
  .reveal-layout {
    gap:24px
  }
  .reveal-preview {
    min-height:380px
  }
  .reveal-preview canvas {
    min-height:310px
  }
  .studio-preview {
    position:relative;
    top:0
  }
  .studio-canvas-wrap {
    height:390px
  }
  .studio-facts {
    flex-wrap:wrap
  }
  .style-options {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .summary-visual,.summary-visual canvas {
    min-height:360px
  }
  .commerce-card {
    padding:20px
  }
  .cart-page {
    width:90%;
    padding:45px 0 75px
  }
  .cart-page-heading {
    margin-bottom:35px
  }
  .cart-page-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .cart-total {
    position:static;
    min-width:0
  }
  .cart-item,.address-row {
    grid-template-columns:1fr
  }
  .cart-item-preview {
    width:min(180px,55vw)
  }
  .cart-actions {
    grid-column:auto;
    flex-direction:row;
    justify-content:flex-start
  }
}

@media(max-width:360px) {
  .studio-canvas-wrap {
    height:335px
  }
  .style-options {
    grid-template-columns:1fr
  }
  .studio-facts {
    font-size:6px
  }
}

@media(max-width:360px) {
  .site-header {
    gap:10px
  }
  .site-header .wordmark {
    font-size:21px;
    gap:5px
  }
  .site-header .wordmark img {
    width:23px;
    height:23px
  }
  .site-header .button {
    font-size:9px;
    gap:8px;
    min-height:40px;
    padding:8px
  }
  .header-cart {
    font-size:9px
  }
  .hero h1 {
    font-size:42px
  }
}

@media(max-width:500px) {
  .site-header .header-actions>.button {
    display:none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}