:root{--ink:#153334;--muted:#6b7b7b;--paper:#f5f2ea;--card:#fffdf8;--line:#dedbd2;--accent:#d7684f;--accent-dark:#b94f39;--teal:#214d4c;--shadow:0 16px 42px rgba(34,53,52,.10)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.topbar{height:78px;padding:0 max(24px,4vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(245,242,234,.92);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:42px;height:42px;border-radius:14px;background:var(--teal);color:white;display:grid;place-items:center;font-family:Georgia,serif}.brand strong,.brand small{display:block}.brand small{color:var(--muted);font-size:12px;margin-top:2px}.header-right{display:flex;align-items:center;gap:20px}.header-logo{display:block;width:auto;height:54px;max-width:145px;object-fit:contain}.privacy{font-size:12px;color:var(--muted)}.privacy span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#49a477;margin-right:7px}.panel{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}main{padding:34px max(24px,4vw) 54px}.empty{max-width:880px;margin:5vh auto;padding:72px;text-align:center;background:radial-gradient(circle at 50% 0,#fff 0,var(--card) 58%)}.tooth{margin:auto;width:62px;height:62px;display:grid;place-items:center;border:1px solid var(--line);border-radius:22px;font-size:26px;color:var(--accent)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--accent);margin:22px 0 10px}.empty h1{font:500 clamp(42px,7vw,78px)/.95 Georgia,serif;margin:0}.lede{max-width:610px;margin:25px auto 34px;color:var(--muted);line-height:1.7}.button{border:0;border-radius:12px;padding:13px 18px;font:700 14px inherit;cursor:pointer;display:inline-flex;justify-content:center;align-items:center}.primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent-dark)}.hint,.microcopy{color:var(--muted);font-size:12px;line-height:1.5}.workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px;max-width:1480px;margin:auto}.hidden{display:none!important}.sidebar{padding:22px;align-self:start;position:sticky;top:102px}.section-title,.stage-head{display:flex;align-items:center;justify-content:space-between}.section-title .eyebrow,.stage-head .eyebrow{margin:0 0 4px}.section-title h2,.stage-head h2{margin:0;font:500 27px Georgia,serif}.icon-button{width:38px;height:38px;border-radius:12px;background:#edf1ec;display:grid;place-items:center;font-size:22px;cursor:pointer}.photo-list{display:grid;gap:10px;margin:22px 0}.photo-card{display:grid;grid-template-columns:62px 1fr 24px;gap:10px;align-items:center;padding:8px;border:1px solid transparent;border-radius:14px;cursor:pointer}.photo-card:hover{background:#f6f4ed}.photo-card.active{border-color:#d78a77;background:#fff4ef}.photo-card.dragging{opacity:.4}.photo-card img{width:62px;height:48px;object-fit:cover;border-radius:9px}.photo-meta strong,.photo-meta input{display:block;width:100%;font-size:13px}.photo-meta input{border:0;background:transparent;color:var(--muted);padding:3px 0}.drag{color:#9ba4a2;font-size:18px;cursor:grab}.danger{width:100%;margin-top:12px;background:transparent;color:#a84b3a;border:1px solid #e9c5bc}.stage-column{display:grid;gap:16px}.stage{padding:22px}.segmented{padding:4px;background:#eef0ea;border-radius:12px}.segmented button{border:0;background:transparent;padding:8px 12px;border-radius:9px;color:var(--muted);cursor:pointer}.segmented button.active{background:white;color:var(--ink);box-shadow:0 2px 8px #ccd2cb}.canvas-wrap{position:relative;margin-top:20px;border-radius:16px;overflow:hidden;background:#152322;aspect-ratio:5/3}canvas{display:block;width:100%;height:100%;touch-action:none}.drop-overlay{position:absolute;inset:16px;border:2px dashed #e6a999;border-radius:12px;background:rgba(16,42,42,.82);color:white;display:none;place-items:center;font-weight:700}.canvas-wrap.dragover .drop-overlay{display:grid}.transport{display:grid;grid-template-columns:44px 1fr 50px;gap:14px;align-items:center;margin-top:16px}.play-button{border:0;background:var(--teal);color:white;width:42px;height:42px;border-radius:50%;cursor:pointer}.transport input,.control input{accent-color:var(--accent)}.transport span{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}.controls{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;gap:24px;align-items:end;padding:20px 24px}.control label{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:10px}.control output{color:var(--accent)}.control input,.control select{width:100%}.control select{border:1px solid var(--line);border-radius:10px;padding:9px;background:white}.secondary{background:var(--accent);color:white}.ghost{background:#eef0ea;color:var(--ink)}.edit-help{padding:20px 24px}.edit-help p{color:var(--muted);font-size:13px;line-height:1.55}.edit-actions{display:flex;gap:9px}.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:#153334;color:white;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.export-actions{display:flex;gap:8px;align-items:center}.export-actions a{text-decoration:none;white-space:nowrap}.edit-actions{flex-wrap:wrap}@media(max-width:800px){.privacy{display:none}.header-right{gap:0}.header-logo{height:44px;max-width:112px}.workspace{grid-template-columns:1fr}.sidebar{position:static}.photo-list{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}.controls{grid-template-columns:1fr}.empty{padding:44px 22px}.stage{padding:14px}.stage-head{align-items:flex-end}.topbar{height:68px}.canvas-wrap{aspect-ratio:4/3}}

/* Step-by-step guide below the timeline. */
.sidebar-column{display:grid;gap:16px;align-self:start;position:sticky;top:102px}
.sidebar-column .sidebar{position:static;align-self:auto}
.workflow-guide{padding:22px}
.workflow-guide .eyebrow{margin:0 0 7px}
.workflow-guide h2{margin:0;font:500 21px/1.2 Georgia,serif}
.workflow-guide ol{margin:18px 0 0;padding-left:22px;color:var(--muted);font-size:13px;line-height:1.5}
.workflow-guide li{padding-left:4px}
.workflow-guide li+li{margin-top:12px}
.workflow-guide li::marker{color:var(--accent);font-weight:800}
.workflow-guide strong{color:var(--ink)}

@media(max-width:800px){
  .sidebar-column{position:static}
}