.upload-animation { padding:24px; margin:20px 0; border:1px solid #85673d; border-radius:8px; background:#101312; text-align:center; }
.legacy-guide-layout.upload-written-guide { display:block; }
.upload-animation-heading { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:20px; }
.upload-animation-heading h3 { margin:0; font-size:1.15rem; }
.upload-demo { display:grid; grid-template-columns:minmax(75px,1fr) minmax(100px,190px) minmax(75px,1fr); gap:12px; max-width:490px; margin:0 auto; align-items:start; }
.upload-demo-watch { position:relative; }
.upload-demo-watch img { display:block; width:100%; height:auto; }
.upload-demo-button { position:absolute; top:31.5%; width:19%; aspect-ratio:1; border:2px solid #c9b389; border-radius:50%; background:#16171288; transform:translate(-50%,-50%); }
.upload-demo-button.left { left:13%; }.upload-demo-button.right { left:87%; }
.upload-demo-label { padding-top:76%; font-size:.95rem; line-height:1.4; color:var(--muted); }
.upload-demo-label strong { display:block; font:600 .95rem var(--heading); color:var(--gold-lt); }
.upload-demo-label span { display:block; margin-top:8px; padding:5px 8px; border:1px solid #66573d; border-radius:4px; font-weight:600; }
.upload-animation[data-left-held='false']:is([data-phase='release-left'],[data-phase='release-right'],[data-phase='release-all'],[data-phase='done']) .upload-demo-button.left { border-color:#86d1ab; background:#0c1b14; box-shadow:0 0 0 5px #86d1ab20; }
.upload-animation[data-left-held='false']:is([data-phase='release-left'],[data-phase='release-right'],[data-phase='release-all'],[data-phase='done']) [data-guide-left] { color:#abebc9; border-color:#86d1ab; }
.upload-animation[data-left-held='true'] .upload-demo-button.left { background:#e7b85e; border-color:#fff0b9; box-shadow:0 0 0 7px #e7b85e35,0 0 24px #e7b85e80; animation:upload-press 1s ease-in-out infinite; }
.upload-animation[data-left-held='true'] [data-guide-left] { color:#171208; background:#e7b85e; border-color:#e7b85e; }
.upload-animation[data-right-held='false']:is([data-phase='release-left'],[data-phase='release-right'],[data-phase='release-all'],[data-phase='done']) .upload-demo-button.right { border-color:#86d1ab; background:#0c1b14; box-shadow:0 0 0 5px #86d1ab20; }
.upload-animation[data-right-held='false']:is([data-phase='release-left'],[data-phase='release-right'],[data-phase='release-all'],[data-phase='done']) [data-guide-right] { color:#abebc9; border-color:#86d1ab; }
.upload-animation[data-right-held='true'] .upload-demo-button.right { background:#e7b85e; border-color:#fff0b9; box-shadow:0 0 0 7px #e7b85e35,0 0 24px #e7b85e80; animation:upload-press 1s ease-in-out infinite; }
.upload-animation[data-right-held='true'] [data-guide-right] { color:#171208; background:#e7b85e; border-color:#e7b85e; }
.upload-guide-instruction { max-width:620px; margin:12px auto 0; }
.upload-guide-count { display:block; font:600 2.4rem/1.2 var(--heading); color:#f2d497; font-variant-numeric:tabular-nums; margin-bottom:12px; }
.upload-guide-instruction h4 { font:600 1.35rem/1.35 var(--body); color:#f3e7d0; margin:0 0 8px; }
.upload-guide-instruction p { min-height:3.2em; margin:0 0 18px; line-height:1.5; }
.upload-guide-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.upload-animation .field-help { margin:16px 0 0; font-size:.95rem; }
@keyframes upload-press { 50% { box-shadow:0 0 0 10px #e7b85e20,0 0 28px #e7b85e80; } }
@media(max-width:600px) { .upload-animation { padding:18px 10px; } .upload-demo { gap:5px; grid-template-columns:minmax(50px,1fr) minmax(70px,145px) minmax(50px,1fr); } .upload-demo-label { padding-top:65%; font-size:.85rem; } .upload-demo-label strong { font-size:.8rem; } .upload-demo-label span { padding:5px 2px; font-size:.8rem; } .upload-guide-instruction h4 { font-size:1.2rem; } }
@media(prefers-reduced-motion:reduce) { .upload-demo-button { animation:none!important; } }