.card, .row{
  position:relative;isolation:isolate;border:0;border-radius:5px;overflow:visible;
  background:var(--cb-face);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,var(--cb-lift) 44%,transparent),
    inset 0 -1px 0 rgba(90,62,32,.30),
    0 var(--cb-thick) 0 var(--cb-edge),
    0 calc(var(--cb-thick) + 1.5px) 0 var(--cb-edge-dark),
    0 calc(var(--cb-thick) + 5px) 7px rgba(50,32,14,.30);
}
.card::before, .row::before{
  content:'';position:absolute;left:1px;right:1px;
  bottom:calc(-1 * var(--cb-thick));height:var(--cb-thick);
  border-radius:0 0 4px 4px;z-index:-1;
  background:
    linear-gradient(180deg,rgba(60,40,18,.55) 0 1px,transparent 1px),
    linear-gradient(0deg,rgba(60,40,18,.6) 0 1px,transparent 1px),
    var(--cb-flute);
  transition:height 110ms ease,bottom 110ms ease;
}
.card::after, .row::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:inherit;mix-blend-mode:multiply;opacity:var(--cb-grain-o);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22f%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.022%200.85%22%20numOctaves%3D%224%22%20seed%3D%227%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23f%29%22%20opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%3E%3Cfilter%20id%3D%22s%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%221.4%22%20numOctaves%3D%221%22%20seed%3D%223%22%2F%3E%3CfeColorMatrix%20type%3D%22matrix%22%20value%3D%22%22%20values%3D%220%200%200%200%200.16%20%200%200%200%200%200.10%20%200%200%200%200%200.05%20%200%200%200%201%200%22%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D%22discrete%22%20tableValues%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%201%22%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url%28%23s%29%22%2F%3E%3C%2Fsvg%3E");
  background-size:190px 190px,150px 150px;
  background-position:37px 11px,-23px 44px;
}

/* UI-only adaptation of 123Chair's Kraft material. Artwork is never tinted. */
[hidden]{display:none!important}
:root{--shadow-ink:rgba(50,32,14,.30);--press-shadow:rgba(60,40,18,.4)}
body{font-size:15px;line-height:1.5;min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
button,input,select{font:inherit}button,a,summary{touch-action:manipulation}button{cursor:pointer;color:inherit}
a{color:var(--brand)}button:disabled{opacity:.55;cursor:wait}input,select,textarea{font-size:16px}
button,summary{min-height:48px}button{border:0}svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--brand);outline-offset:4px}h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--font-display);color:var(--cb-marker);font-weight:900;line-height:1.15;text-shadow:0 0 1.5px rgba(36,23,8,.3),0 1px 0 color-mix(in srgb,var(--cb-lift) 40%,transparent)}
h1{font-size:clamp(30px,3.3vw,44px);letter-spacing:-.03em}h2{font-size:27px}h3{font-size:22px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);text-shadow:0 -1px 1px rgba(58,38,16,.4),0 1px 0 color-mix(in srgb,var(--cb-lift) 80%,transparent)}
.thin{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:9px 16px;min-height:48px;border:1px solid var(--border);border-radius:5px;background:var(--cb-face);color:var(--text);font-weight:600;box-shadow:0 2px 0 var(--cb-edge),0 3px 3px var(--shadow-ink);text-decoration:none;transition:transform 110ms var(--ease-snap),box-shadow 110ms var(--ease-snap)}
.thin:active,.choice-tabs button:active{transform:translateY(2px);box-shadow:inset 0 2px 5px var(--press-shadow)}
.primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand);box-shadow:0 2px 0 color-mix(in srgb,var(--brand) 65%,var(--cb-marker)),0 3px 3px var(--shadow-ink)}
.topbar{background:var(--cb-sheet);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top)}
.topbar-inner{max-width:1280px;margin:auto;display:flex;align-items:center;gap:18px;padding:17px 32px}
.ham{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:none;padding:0;border-radius:5px;background:var(--cb-face);box-shadow:0 2px 0 var(--cb-edge),0 3.5px 0 var(--cb-edge-dark),0 5px 6px var(--shadow-ink)}
.wordmark{display:flex;flex-direction:column;color:var(--brand);text-decoration:none;line-height:1.15;margin-right:auto}
.wordmark>span{font:900 24px var(--font-display);transform:rotate(-.9deg);text-shadow:0 0 1.5px rgba(36,23,8,.3),0 1px 0 color-mix(in srgb,var(--cb-lift) 40%,transparent)}
.wordmark small{font-size:9px;letter-spacing:.24em;font-weight:700;margin-top:4px;color:var(--muted)}
.saved-door{font-size:13px}.saved-door #saved-count{margin-left:5px;font-variant-numeric:tabular-nums}
.studio{max-width:1280px;margin:0 auto;padding:28px 32px 32px;display:grid;grid-template-columns:minmax(0,1.22fr) minmax(375px,1fr);gap:34px;align-items:start}
.workspace{min-width:0}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}.preview-heading .eyebrow{margin-bottom:4px}
.segmented{display:flex;flex:none;padding:4px;gap:3px;background:color-mix(in srgb,var(--cb-edge) 14%,var(--surface));box-shadow:inset 0 2px 5px var(--press-shadow),inset 0 -1px 0 color-mix(in srgb,var(--cb-lift) 30%,transparent);border-radius:5px}
.segmented button{min-height:44px;padding:5px 16px;background:transparent;font-size:13px;border-radius:3px;font-weight:600}.segmented [aria-pressed="true"]{background:var(--cb-face);box-shadow:0 2px 0 var(--cb-edge),0 3px 3px var(--shadow-ink);color:var(--brand)}
.preview-board{padding:10px}.art{position:relative;z-index:3;display:block;isolation:isolate;border-radius:3px;max-width:100%;filter:none;mix-blend-mode:normal}
.canvas-wrap{position:relative;overflow:hidden;aspect-ratio:1}.canvas-wrap canvas{width:100%;height:100%;display:block;object-fit:contain}
.expand{position:absolute;right:12px;bottom:12px;padding:0;width:44px;min-height:44px;z-index:4}
.preview-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 5px 2px;font-size:11px;color:var(--muted)}
.load-state{position:absolute;inset:auto 12px 12px 12px;z-index:5;background:var(--cb-face);border:1px solid var(--border);padding:10px 12px;font-size:13px}.load-state.error{color:var(--red)}
.browse-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}.browse-bar>span{font-size:11px;color:var(--muted)}.browse-bar button{font-size:13px}
.playback{margin-top:14px;border-top:1px solid var(--line-soft)}summary{display:flex;align-items:center;font-size:12px;font-weight:600;cursor:pointer;gap:8px}summary::before{content:'+';font-size:20px;font-weight:400}details[open]>summary::before{content:'−'}.playback-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:5px 0 10px}.playback-controls label{display:flex;flex-direction:column;gap:4px;font-size:11px}select{min-height:48px;max-width:100%;border:1px solid var(--cb-edge);border-radius:5px;color:var(--text);background:color-mix(in srgb,var(--cb-edge) 14%,var(--surface));box-shadow:inset 0 2px 5px var(--press-shadow);padding:8px}
.chooser{padding:24px 22px 22px;display:flex;flex-direction:column;min-width:0;margin-top:4px}.chooser-heading{margin-bottom:20px}.chooser-heading p{font-size:12px;color:var(--muted);margin-top:7px}
.choice-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice-tabs button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:9px 15px;min-height:66px;border:1px solid var(--border);border-radius:5px;background:var(--cb-face);box-shadow:0 2px 0 var(--cb-edge);text-align:left;transition:transform 110ms var(--ease-snap)}
.choice-tabs button>span{font-size:15px;font-weight:700}.choice-tabs small{font-size:11px;color:var(--muted)}.choice-tabs [aria-selected="true"]{outline:2px solid var(--brand);outline-offset:-2px}.choice-tabs [aria-selected="true"]>span{color:var(--brand)}.choice-tabs [aria-selected="true"]::after{content:'';height:3px;position:absolute;bottom:0;left:16px;right:16px;background:var(--brand)}
.choices-scroll{max-height:510px;min-height:350px;overflow-y:auto;padding:0 4px 15px;margin:0 -4px;scrollbar-color:var(--cb-edge-dark) var(--surface);scrollbar-width:thin}.option-caption{font-size:11px;color:var(--muted);padding:18px 0 12px}.style-grid,.fade-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px;padding:3px}
.choice-card{padding:5px 5px 9px;text-align:left;font-weight:600;position:relative;transition:transform 110ms var(--ease-snap);min-width:0}.choice-card canvas{display:block;width:100%;height:auto;border-radius:2px}.choice-card .choice-label{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:30px;padding:5px 2px 0;font-size:11px;line-height:1.3}.choice-card .check{border:1px solid var(--cb-edge-dark);width:14px;height:14px;flex:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:transparent}.choice-card[aria-pressed="true"]{outline:2px solid var(--brand);outline-offset:2px}.choice-card[aria-pressed="true"] .check{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.choice-card:active{transform:translateY(var(--cb-press-y)) scale(1.004,.988);box-shadow:inset 0 2px 7px var(--press-shadow),0 1px 0 var(--cb-edge)}.choice-card:active::before{height:1px;bottom:-1px}
.selection-actions{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}.selection-line>p{font-size:12px;font-weight:600;margin-top:5px}.action-buttons{display:flex;gap:12px;margin-top:13px}.action-buttons .primary{flex:1;font-size:13px}.action-buttons #save{font-size:13px}.action-buttons #save[aria-pressed="true"]{color:var(--brand)}.action-buttons #save[aria-pressed="true"] svg{fill:var(--brand)}
footer{max-width:1280px;margin:auto;padding:0 32px 24px;display:flex;justify-content:space-between;color:var(--muted);font-size:10px}
dialog{color:var(--text);font:inherit;margin:auto;max-height:calc(100dvh - 44px);max-width:calc(100vw - 32px)}dialog::backdrop{background:rgba(36,23,8,.56)}dialog[open]{animation:arrive 240ms var(--ease-out-smooth)}@keyframes arrive{from{opacity:0;translate:0 10px}}
.modal{width:590px;padding:24px;overflow-y:auto!important}.wide-modal{width:1000px}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.dialog-heading .eyebrow{margin-bottom:5px}.icon-button{width:44px;min-height:44px;padding:0;flex:none;font-size:25px}.dialog-intro,.local-note,#choice-help{font-size:13px;color:var(--muted);line-height:1.6}.dialog-intro{margin-bottom:20px}.local-note{margin-top:20px;font-size:11px}.drawer{margin:0 auto 0 0;min-height:100dvh;max-height:100dvh;width:320px;padding:24px 20px;border-radius:0!important}.menu-item{display:flex;width:100%;justify-content:flex-start;margin-bottom:14px}.menu-settings{margin-top:34px}.motion-toggle{display:flex;align-items:center;gap:10px;min-height:48px;font-size:13px;cursor:pointer}.motion-toggle input{width:20px;height:20px;accent-color:var(--brand)}
.saved-look{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:12px;margin-bottom:20px}.saved-look canvas{width:96px;height:96px}.saved-look h3{font-family:var(--font-ui);font-size:13px;font-weight:700;line-height:1.4;text-shadow:none}.saved-look p{font-size:11px;color:var(--muted);margin:3px 0 8px}.saved-actions{display:flex;flex-wrap:wrap;gap:8px}.saved-actions button{min-height:44px;padding:6px 10px;font-size:11px}.empty{padding:35px 14px;text-align:center;color:var(--muted)}.empty h3{margin-bottom:9px}.empty p{font-size:13px}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.compare-look{min-width:0}.compare-look canvas{width:100%;height:auto;margin:10px 0 14px}.compare-look h3{font-size:20px}.compare-look p{font-size:12px;margin:6px 0 14px}.compare-look button{width:100%;font-size:13px}#chosen-preview{width:100%;height:auto;max-height:55dvh;object-fit:contain;margin-bottom:20px}#chosen-name{margin-bottom:8px}#chosen-age{font-size:13px;margin-bottom:12px}#choice-help{margin-bottom:18px}.dialog-actions{display:flex;gap:12px;flex-wrap:wrap}.dialog-actions button{font-size:13px}#download-status{font-size:12px;margin-top:10px}
.toast{position:fixed;z-index:100;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);width:max-content;box-shadow:0 3px 0 var(--cb-edge),0 8px 18px var(--shadow-ink);font-size:13px;text-align:center}.screen-reader,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;z-index:110;top:8px;left:8px;padding:14px;background:var(--cb-face)}
@media(min-width:1100px){.canvas-wrap{max-height:65dvh;min-height:440px}.canvas-wrap canvas{object-fit:contain}.chooser{min-height:640px}.choices-scroll{flex:1}.workspace{position:sticky;top:20px}}
@media(max-width:1000px){.studio{padding:22px 22px 28px;gap:24px;grid-template-columns:minmax(0,1fr) minmax(340px,1fr)}.chooser{padding:20px 16px}.topbar-inner{padding:14px 22px}.browse-bar>span{display:none}.style-grid,.fade-grid{gap:14px 9px}.preview-heading{gap:10px}.segmented button{padding:5px 12px}.choice-card .choice-label{font-size:10px}.choices-scroll{min-height:325px}}
@media(max-width:760px){
 .topbar-inner{padding:10px 16px;gap:12px}.wordmark>span{font-size:20px}.wordmark small{font-size:8px}.saved-door{padding:8px 11px;min-height:44px;font-size:12px}.saved-door svg{width:17px;height:17px}.ham{width:44px;height:44px;min-height:44px}
 .studio{display:flex;flex-direction:column;padding:18px 16px 26px;gap:22px;max-width:540px}.workspace,.chooser{width:100%}.preview-heading{margin-bottom:12px}h1{font-size:30px}.preview-heading .eyebrow{font-size:9px}.segmented button{font-size:12px}.preview-board{padding:7px}.canvas-wrap{height:min(37dvh,330px);aspect-ratio:auto}.canvas-wrap canvas{object-fit:contain}.preview-foot{font-size:10px;padding-top:6px}.browse-bar{margin-top:16px}.browse-bar>span{display:block;font-size:10px}.browse-bar .thin{min-height:44px;padding:7px 11px;font-size:12px}.playback{margin-top:10px}.playback>summary{min-height:44px;font-size:11px}
 .chooser{padding:18px 15px;margin-top:0}.chooser-heading{display:none}.choice-tabs button{min-height:60px}.choices-scroll{max-height:360px;min-height:0}.option-caption{padding-top:14px}.choice-card .choice-label{font-size:11px}.selection-actions{margin-top:8px;padding-top:12px}.action-buttons{margin-top:10px}.selection-line>p{font-size:11px}.selection-line .eyebrow{font-size:9px}.style-grid,.fade-grid{gap:14px 12px}.choice-card canvas{aspect-ratio:1.22;object-fit:cover}footer{padding:0 16px 20px;font-size:9px;gap:12px}footer span:last-child{text-align:right}
 .modal{padding:18px}.dialog-heading h2{font-size:24px}.compare-grid{gap:12px}.compare-look h3{font-size:17px}.compare-look p{font-size:11px}.compare-look button{padding:7px;font-size:11px}.saved-look{grid-template-columns:75px 1fr;gap:10px}.saved-look canvas{width:75px;height:75px}.saved-actions{gap:6px}.saved-actions button{font-size:10px;padding:6px 8px}
}
@media(max-width:370px){.wordmark>span{font-size:17px}.saved-door{gap:5px;padding:8px}.topbar-inner{gap:9px;padding-inline:12px}.studio{padding-inline:12px}.action-buttons{gap:8px}.action-buttons .thin{padding-inline:11px}.browse-bar>span{display:none}.compare-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.choice-card:active,.thin:active{transform:none}}
/* Keep customer actions within thumb reach; this is an action row, not app navigation. */
@media(max-width:760px){
 body{padding-bottom:calc(118px + env(safe-area-inset-bottom))}
 .canvas-wrap{height:min(30dvh,290px)}
 .selection-actions{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;padding:10px 16px calc(12px + env(safe-area-inset-bottom));background:var(--cb-sheet);border-top:1px solid var(--cb-edge);box-shadow:0 -3px 12px var(--shadow-ink)}
 .selection-line{display:flex;align-items:center;gap:10px;max-width:508px;margin:auto}.selection-line>p{margin:0}.action-buttons{max-width:508px;margin:8px auto 0}.action-buttons .thin{min-height:48px}
 .chooser{padding-bottom:20px}.choices-scroll{max-height:390px}.toast{bottom:calc(116px + env(safe-area-inset-bottom))}
}
/* Dialog stock has its own grain, while each image sits above it untouched. */
.dialog-heading,.dialog-actions,.saved-actions{position:relative;z-index:3}
@media(hover:hover){.thin:hover,.choice-card:hover{outline:1px solid var(--cb-edge-dark);outline-offset:1px}.choice-card[aria-pressed="true"]:hover{outline:2px solid var(--brand);outline-offset:2px}}
/* Nested card layers must never put parent board grain over haircut pixels. */
.choices-scroll,#saved-list,.compare-grid{position:relative;z-index:3}
.choice-card:focus-visible,.thin:focus-visible,.choice-tabs button:focus-visible{outline:3px solid var(--brand);outline-offset:4px}

/* Scroll inside the board so the outer corrugated edge remains visible. */
.modal{padding:0;overflow:visible!important}.modal-content{max-height:calc(100dvh - 60px);overflow-y:auto;padding:24px;border-radius:inherit}
@media(max-width:760px){.modal-content{padding:18px}}

/* Revision 5: one centered identity, one clear set of preview controls. */
.wordmark{display:block;margin:0;text-align:center}.wordmark>span{font-size:28px;transform:none}
.topbar-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:16px}.ham{justify-self:start}.saved-door{justify-self:end}
.preview-heading{display:block;text-align:center;margin-bottom:20px}.preview-heading .eyebrow{font-size:12px;letter-spacing:.2em;margin-bottom:7px}
.preview-board{padding:8px}.canvas-wrap{background:linear-gradient(var(--stage-top),var(--stage-bottom))}
:root[data-skin="kraft"]{--stage-top:#e2c7a4;--stage-bottom:#d0ae8a}
.browse-bar{display:grid;grid-template-columns:48px auto 48px;align-items:center;justify-content:center;gap:24px;margin-top:22px}
.browse-arrow{width:48px;height:48px;padding:0}.browse-arrow svg{width:22px;height:22px}
.browse-bar .segmented{justify-self:center}.browse-bar .segmented button{min-width:78px}
.choices-scroll{padding-top:20px}.chooser-heading{margin-bottom:20px}.chooser{margin-top:0}
@media(min-width:1100px){.workspace{padding-top:6px}.chooser{min-height:640px}}
@media(max-width:760px){
 .topbar-inner{gap:10px}.wordmark>span{font-size:25px}.saved-door{font-size:11px;padding:8px 10px}
 .preview-heading{margin-bottom:14px}.preview-heading .eyebrow{font-size:10px;margin-bottom:5px}
 .preview-board{padding:6px}.canvas-wrap{height:min(33dvh,310px)}
 .browse-bar{margin-top:18px;gap:22px;grid-template-columns:44px auto 44px}.browse-bar .browse-arrow{width:44px;height:44px;padding:0}
 .browse-bar .segmented button{min-width:75px}.studio{gap:25px;padding-bottom:30px}
 .choices-scroll{padding-top:18px}.chooser{padding-top:16px}
}