:root{
      --sage-50:#F2F5F0; --sage:#A3B18A; --sage-600:#7F9D73; --sage-700:#6E8C63;
      --ink:#263026; --gold:#B89A60; --paper:#FFFFFF;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; background:
        radial-gradient(1200px 1200px at 10% -10%, #ffffff80, transparent 60%),
        radial-gradient(900px 900px at 110% 0%, #ffffff80, transparent 50%),
        var(--sage-50);
      color:var(--ink);
      font-family: "Garamond", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
      -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      display:grid; place-items:start center; padding:24px;
    }
    .card{
      width:min(1000px, 96vw);
      background:var(--paper);
      border:1px solid #dfe6d7;
      border-radius:20px;
      box-shadow:0 20px 60px rgba(0,0,0,.08);
      overflow:hidden;
    }
    header{
      padding:28px 28px 18px;
      background:linear-gradient(180deg, #ffffff 0%, #ffffff 60%, #f7faf5 100%);
      border-bottom:1px solid #e6efe0;
      position:relative;
    }
    .crest{
      position:absolute; right:24px; top:20px; opacity:.2; width:84px; height:84px;
      border-radius:50%; border:2px solid var(--sage-600);
      display:grid; place-items:center; font-weight:700; color:var(--sage-700);
    }
    h1{ margin:0; font-size:clamp(1.6rem, 1rem + 2vw, 2.2rem); letter-spacing:.02em; }
    .subtitle{ margin:.35rem 0 0; color:#4b5a47 }
    .ribbons{ margin-top:10px; height:10px; display:flex; gap:8px; }
    .ribbon{ flex:1; height:10px; background:linear-gradient(90deg, #b9c8a8, #8fa27a); border-radius:99px }
    main{ padding:20px }
    .stage{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; }
    @media (max-width:900px){ .stage{ grid-template-columns:1fr; } }

    .preview{
      position:relative; border:10px solid var(--sage); border-radius:16px; overflow:hidden;
      background:#000; box-shadow:0 10px 28px rgba(0,0,0,.12);
    }
    video{ width:100%; height:auto; display:block; transform:scaleX(-1); }
    .overlay{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
    #countdown{
      font-size:clamp(2.2rem, 6vw, 6rem); font-weight:700; color:#fff; text-shadow:0 16px 40px rgba(0,0,0,.45);
      opacity:0; transform:scale(.9); transition:opacity .2s, transform .2s;
    }
    #countdown.show{ opacity:1; transform:scale(1) }

    .panel{
      background:#fff; border:1px solid #e2eadc; border-radius:16px; padding:16px; display:grid; gap:14px;
    }
    .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
    button,.btn{
      appearance:none; border:none; border-radius:999px; padding:12px 18px; font-size:16px; cursor:pointer;
      background:var(--sage); color:#fff; box-shadow:0 10px 22px rgba(163,177,138,.35);
      transition:transform .02s ease, background .2s ease;
    }
    button:active{ transform:translateY(1px) }
    button:hover:not(:disabled), .btn:hover{ background:var(--sage-600) }
    button:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none }
    .ghost{ background:transparent; color:var(--ink); border:2px solid var(--sage); box-shadow:none }
    .ghost:hover{ background:#e9f0e5 }
    .flag{ padding:8px 12px; border-radius:12px; background:#f5f8f2; border:1px solid #e3ecdf; color:#465341; font-size:.95rem; }
    .thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
    .thumbs img{
      width:100%; aspect-ratio:3/4; object-fit:cover; border:4px solid var(--sage); border-radius:10px; background:#fff;
    }
    #composite{ width:min(92vw, 460px); border-radius:18px; display:none; box-shadow:0 14px 40px rgba(0,0,0,.15) }
    .note{ color:#4a5a45 }
    .err{ color:#b60023 }
    footer{
      padding:18px 22px 26px; color:#53634f; border-top:1px solid #e6efe0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
    }
    .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; margin:0 8px }