:root{--paper:#faf3ed;--ink:#342922;--muted:#786253;--line:#e3cfc0;--green:#ab4933;--accent:#ab4933;--surface:#fffdfa;--field:#fff;--soft:#f4e4d8;--focus:#d79c85;--radius:2px;--mark:"◉";}

body{background:var(--paper);color:var(--ink)}.demo-header{max-width:none;padding:24px max(24px,calc((100vw - 1100px)/2));background:var(--surface);border-bottom:1px solid var(--line)}.demo-header .brand{font-size:23px;letter-spacing:-.8px}.demo-header nav a{font-size:13px;font-weight:600}.demo-main{margin-top:45px}.demo-main h1{max-width:850px}.panel{background:var(--surface);border-color:var(--line);border-radius:var(--radius,12px);box-shadow:var(--shadow,none)}.panel h2{letter-spacing:-.8px}.intro,.note{color:var(--muted)}input,select,textarea{background:var(--field);color:var(--ink);border-color:var(--line);border-radius:8px}input:focus,select:focus,textarea:focus{outline:3px solid var(--focus);outline-offset:2px}button{background:var(--green);color:var(--button-ink,#fff);border-radius:8px;transition:transform .15s}button:hover:not(:disabled){transform:translateY(-1px)}button.secondary{background:var(--soft);color:var(--ink);margin-left:0;margin-right:8px}.result{background:var(--soft);border:1px solid var(--line);border-radius:8px;color:var(--ink)}.error{background:#ffe4e6;color:#881337}.tags span,.panel details,td,th{border-color:var(--line)}.metrics{margin:24px 0}.metrics>div{background:var(--soft);padding:18px 22px;border-radius:8px}.metrics strong{color:var(--green)}em{color:var(--accent);font-family:inherit}.workflow li{border-color:var(--accent)}summary:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}.eyebrow{color:var(--accent)}.brand:before{content:var(--mark);display:grid;place-items:center;width:36px;height:36px;background:var(--green);color:var(--button-ink,#fff);border-radius:var(--radius,8px);font:700 16px monospace;flex-shrink:0}audio{border-radius:30px}@media(max-width:650px){.demo-header{padding:18px 20px;gap:20px;align-items:flex-start}.demo-header .brand{font-size:18px;gap:9px}.demo-header nav a{font-size:12px}.demo-main h1{font-size:38px}.demo-main{padding:0 20px 45px}.brand:before{width:30px;height:30px}.metrics>div{padding:12px}.panel{padding:20px}}

.demo-main{max-width:930px}.demo-main h1{font:400 64px/1.1 Georgia,serif;letter-spacing:-2px}.demo-header{border-top:5px solid #ab4933}.panel{border-top:5px solid #ab4933}.preview-image{max-height:400px;padding:14px;background:white;box-shadow:0 6px 20px #40201020}input[type=file]{padding:25px;border:2px dashed #cda48f;background:#fbf1e9}.panel h2{font-family:Georgia,serif}
@media(max-width:650px){.demo-main h1{font-size:38px;letter-spacing:-1.5px}.demo-header{flex-wrap:wrap}.panel{padding:20px}.demo-header nav{margin-left:auto}.demo-main .metrics{gap:10px}.demo-main .metrics>div{flex:1 1 120px}}

.demo-main{max-width:1200px}.photo-workspace{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:start}.photo-stage{padding:22px;background:#efe2d6;border:1px solid #dec6b3}.photo-stage-top{display:flex;justify-content:space-between;font:10px monospace;color:#876852;margin-bottom:20px}.photo-mat{min-height:300px;background:#fffaf5;border:12px solid white;box-shadow:0 5px 20px #4d2c1715;display:grid;place-items:center}.photo-mat #image-placeholder{text-align:center;padding:30px}.picture-outline{font-size:65px;color:#ba8b70}.photo-mat h2{font:25px Georgia,serif}.photo-mat p{font-size:12px;color:#876852}.photo-mat .preview-image{padding:0;margin:0;border:0;box-shadow:none;max-height:400px;width:100%;object-fit:contain}.caption-sheet{background:#fffdfa;padding:35px 30px;transform:rotate(.6deg);box-shadow:3px 5px 0 #e5d2c0;border:1px solid #e1caba}.caption-sheet h2{font:38px/1.15 Georgia,serif;margin:22px 0}.caption-sheet>p{font-size:14px;color:#786253}.caption-sheet .result{background:transparent;border:0;border-left:3px solid #b4533a;border-radius:0;font:22px/1.6 Georgia,serif}.caption-foot{border-top:1px solid #dfc9b6;margin-top:30px;padding-top:20px}.caption-foot b,.desk-label{font:10px monospace;color:#ab4933}.caption-foot p{font-size:12px;color:#786253}@media(max-width:750px){.photo-workspace{grid-template-columns:1fr}.caption-sheet{transform:none}.photo-mat{min-height:220px}}