:root{--brand-bg: #fcfbf9;--brand-text: #212121;--brand-muted: #73716d;--brand-soft: #f5f2ec;--brand-line: rgba(33, 33, 33, .18);--brand-line-strong: #212121;--brand-focus: rgba(33, 33, 33, .18);--preview-bg: #e8e4dc;--title-font: "Bricolage Grotesque", "Arial Black", "Arial", sans-serif;--body-font: "DM Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--button-radius: 6px}*{box-sizing:border-box}html{width:100%;overflow-x:hidden;background:var(--brand-bg)}body{margin:0;width:100%;overflow-x:hidden;color:var(--brand-text);background:var(--brand-bg);font-family:var(--body-font)}button,input{font:inherit}button,label{-webkit-tap-highlight-color:transparent}.tester-shell{width:min(100%,1180px);margin:0 auto;padding:22px 24px 32px}.intro{max-width:900px;margin:0 auto 18px;text-align:center}.intro-title{margin:0;font-family:var(--title-font);font-size:20px;font-weight:600;line-height:1.05;letter-spacing:0}.intro-copy{max-width:760px;margin:8px auto 0;color:var(--brand-muted);font-size:clamp(.94rem,1.35vw,1.03rem);line-height:1.4}.tester-studio{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr);gap:24px;align-items:start}.preview-stage{position:sticky;top:18px;min-width:0}.image-wrap{position:relative;overflow:hidden;aspect-ratio:16 / 10;border:1px solid var(--brand-line-strong);border-radius:8px;background:var(--preview-bg);box-shadow:none}.base-image,.look-image,.tone-wash,.grain-layer,.vignette-layer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.base-image,.look-image{object-fit:contain;object-position:center}.image-wrap.is-default-image .base-image,.image-wrap.is-default-image .look-image{object-fit:cover}.base-image{filter:saturate(.95) contrast(.96) brightness(.98)}.look-image{transition:filter .18s ease,opacity .18s ease}.tone-wash,.grain-layer,.vignette-layer{pointer-events:none}.tone-wash{mix-blend-mode:soft-light;transition:background .18s ease,opacity .18s ease}.grain-layer{background-image:repeating-radial-gradient(circle at 22% 28%,rgba(255,255,255,.28) 0 1px,transparent 1px 4px),repeating-radial-gradient(circle at 74% 62%,rgba(0,0,0,.22) 0 1px,transparent 1px 5px);background-size:92px 84px,78px 74px;mix-blend-mode:overlay}.vignette-layer{background:radial-gradient(circle at center,transparent 50%,rgba(0,0,0,.32) 100%)}.upload-button{position:absolute;top:18px;right:18px;z-index:4;display:inline-flex;align-items:center;justify-content:center;min-height:42px;max-width:calc(100% - 36px);padding:0 22px;border:1px solid var(--brand-line-strong);border-radius:999px;color:var(--brand-text);background:var(--brand-soft);cursor:pointer;font-size:.82rem;font-weight:600;text-align:center}.upload-button input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.info-button{position:absolute;left:18px;bottom:18px;z-index:5;width:38px;height:38px;border:1px solid var(--brand-line-strong);border-radius:50%;color:var(--brand-text);background:var(--brand-soft);cursor:pointer;font-weight:900}.info-button:hover,.info-button:focus-visible{color:var(--brand-bg);background:var(--brand-text)}.info-note{position:absolute;left:66px;bottom:18px;z-index:5;width:min(520px,calc(100% - 96px));padding:16px 18px;border:1px solid var(--brand-line-strong);border-radius:8px;color:var(--brand-text);background:#f5f2ecf5;box-shadow:0 18px 44px #2121211f;font-size:.9rem;line-height:1.5;opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease,visibility .15s ease;visibility:hidden}.info-button:hover+.info-note,.info-button:focus-visible+.info-note,.info-note:hover{opacity:1;pointer-events:auto;transform:translateY(0);visibility:visible}.selected-caption{min-height:22px;margin:12px 2px 0;color:var(--brand-muted);font-size:.9rem}.looks-panel{min-width:0;padding:18px;border:1px solid var(--brand-line-strong);border-radius:8px;background:var(--brand-bg)}.looks-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--brand-line)}.looks-heading span{color:var(--brand-text);font-family:var(--body-font);font-size:clamp(1.45rem,2vw,1.85rem);font-weight:400;line-height:1;text-transform:uppercase}.looks-heading strong{color:var(--brand-muted);font-size:.72rem;font-weight:400;white-space:nowrap}.preset-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.preset-button{position:relative;min-height:40px;padding:0 6px;overflow:hidden;border:1px solid transparent;border-radius:var(--button-radius);color:var(--brand-text);background:var(--brand-soft);cursor:pointer;font-size:.82rem;font-weight:200;text-align:center;text-overflow:ellipsis;white-space:nowrap}.preset-button:before{position:absolute;top:0;bottom:0;left:0;width:5px;background:transparent;content:""}.preset-button:hover{border-color:var(--brand-line);background:#efebe3}.preset-button.is-active{border-color:var(--brand-line-strong);background:var(--brand-soft)}.preset-button.is-active:before{background:var(--brand-text)}.pack-note{display:flex;min-height:40px;padding:8px 10px;border-radius:var(--button-radius);color:var(--brand-bg);background:var(--brand-text);flex-direction:column;justify-content:center;gap:2px}.pack-note strong{font-size:.78rem;font-weight:400;line-height:1.1}.pack-note span{color:#fcfbf9bd;font-size:.66rem;font-weight:200;line-height:1.25}button:hover,.upload-button:hover{filter:none;background-color:#efebe3}button:focus-visible,input:focus-visible,.upload-button:focus-within{outline:3px solid var(--brand-focus);outline-offset:2px}@media (max-width: 980px){.tester-shell{padding:30px 18px 36px}.tester-studio{grid-template-columns:1fr;gap:22px}.preview-stage{position:static}}@media (max-width: 620px){.tester-shell{padding:26px 12px 32px}.intro{margin-bottom:20px}.intro-copy{font-size:.94rem}.image-wrap{aspect-ratio:4 / 3;border-radius:7px}.upload-button{left:12px;right:12px;top:12px;min-height:40px;padding:0 14px}.info-button{left:12px;bottom:12px}.info-note{left:12px;right:12px;bottom:58px;width:auto}.looks-panel{max-height:none;overflow:visible;padding:18px}.looks-heading{align-items:flex-start;flex-direction:column;gap:6px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preset-button{min-height:44px;padding-inline:8px;font-size:.82rem;font-weight:200}.pack-note{grid-column:1 / -1;min-height:58px;padding:12px}.pack-note strong{font-size:.82rem}.pack-note span{font-size:.72rem}}
