#phase-upload{width:100%}#phase-upload h3{font-family:Cinzel,serif;font-size:1.1rem;font-weight:600;color:var(--text);margin-bottom:8px}#phase-upload>p{font-size:.9rem;color:var(--muted);margin-bottom:24px}.upload-zone{display:inline-flex;align-items:center;gap:12px;margin-bottom:28px}.upload-zone input[type=file]{display:none}.upload-zone label{display:inline-block;cursor:pointer;font-family:Cinzel,serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;padding:10px 22px;border:1px solid var(--gold-dim);border-radius:8px;color:var(--gold);background:transparent;transition:background .2s,border-color .2s,color .2s}.upload-zone label:hover{background:#c9a84c14;border-color:var(--gold)}.upload-zone label.file-chosen{border-color:var(--teal-dim);color:var(--teal)}.upload-zone label.file-chosen:hover{background:#2dd4bf14;border-color:var(--teal)}.grid-container{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;background-color:var(--surface);border:1px solid var(--border);padding:14px;border-radius:10px;margin-bottom:8px}.grid-item{position:relative}.grid-item a .check{opacity:0;z-index:9;transition:opacity .25s ease;position:absolute;transform:translate(75%,100%)}.grid-item a:hover .check,.grid-item a.active .check{opacity:1}.check img{background-color:transparent}img.style{object-fit:contain;width:100%;height:180px;border:1px solid var(--border);border-radius:4px;background-color:#000;display:block;transition:border-color .2s}.grid-item a:hover img.style{border-color:var(--gold-dim)}.grid-item a.active img.style{border-color:var(--gold)}.next-step{display:none;margin-top:24px}.next-step button{font-family:Cinzel,serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;padding:12px 28px;background:transparent;color:var(--gold);border:1px solid var(--gold-dim);border-radius:8px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.next-step button:hover{background:#c9a84c1a;border-color:var(--gold)}#phase-processing{max-width:600px;margin:0 auto;padding:40px 0}#progress-text{font-size:.9rem;color:var(--muted);margin-bottom:16px}#progress-bar{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:3px;overflow:hidden;border:none;background:var(--border)}#progress-bar::-webkit-progress-bar{background:var(--border)}#progress-bar::-webkit-progress-value{background:var(--gold);border-radius:3px}#progress-bar::-moz-progress-bar{background:var(--gold);border-radius:3px}.about-explainer{margin-top:32px;max-width:700px}.about-youtube-link{display:inline-block;position:relative}.about-youtube-thumb{max-width:100%;width:560px;display:block;border-radius:6px}.about-youtube-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.home-grid-container{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;background-color:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px}.home-grid-item{text-align:center;padding:10px;color:var(--text);min-width:0}.home-grid-item img{width:100%;height:auto;aspect-ratio:4 / 3}img{object-fit:contain;background-color:#000}h1{margin:0;font-size:24px}h3{font-size:16px}@media(max-width:600px){.grid-container{grid-template-columns:1fr}img.style{height:auto;aspect-ratio:4 / 3}.next-step{position:fixed;bottom:0;left:0;right:0;margin:0;padding:16px 24px;background:var(--surface);border-top:1px solid var(--border)}.next-step button{width:100%}}.container_canvas{width:100%;display:flex;gap:12px;align-items:flex-start}section{border-radius:7px;background:var(--surface);border:1px solid var(--border)}.tools-board{width:210px;flex-shrink:0;padding:15px 15px 0}.tools-board .row{margin-bottom:20px}.row .title{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.row .options{padding-left:0;list-style:none;margin:10px 0 0 5px}.row .options .option{display:flex;-webkit-user-select:none;user-select:none;cursor:pointer;align-items:center;margin-bottom:10px}.option img{filter:brightness(0) invert(1) opacity(.45);background-color:transparent;width:18px;height:18px}.option:is(:hover,.active) img{filter:brightness(0) invert(1);background-color:transparent}.option :where(span,label){color:var(--muted);cursor:pointer;padding-left:10px;font-size:.85rem}.option:is(:hover,.active) :where(span,label){color:var(--gold)}.option #size-slider{width:100%;height:5px;margin-top:10px;accent-color:var(--gold)}.buttons button{width:100%;border:none;outline:none;padding:10px 0;font-family:Cinzel,serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;margin-bottom:10px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.buttons .clear-canvas{color:var(--muted);background:transparent;border:1px solid var(--border)}.buttons .clear-canvas:hover{color:var(--text);border-color:var(--gold-dim)}.buttons .save-img{color:var(--gold);background:transparent;border:1px solid var(--gold-dim)}.buttons .save-img:hover{background:#c9a84c1a;border-color:var(--gold)}#draw-style-grid{grid-template-columns:auto auto auto;justify-content:start;background:transparent;border:none;padding:0;gap:6px}#draw-style-grid .grid-item a .check{opacity:1;position:static;transform:none}#draw-style-grid .grid-item.selected a .check img{border:2px solid var(--gold)}.check img{border:1px solid var(--border);object-fit:contain;width:50px;height:50px;border-radius:3px;display:block}.drawing-board{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start}.drawing-board canvas{display:block;max-width:100%;height:auto;cursor:crosshair}.video-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 0}.video-controls button{padding:5px 12px;border-radius:4px;border:1px solid var(--border);cursor:pointer;background:transparent;color:var(--muted);font-size:.85rem;transition:color .2s,border-color .2s}.video-controls button:hover{color:var(--text);border-color:var(--gold-dim)}#frame-counter{font-size:.8rem;color:var(--muted)}#time-estimate{font-size:.85rem;color:var(--muted);margin:8px 0 16px}@media(max-width:600px){.container_canvas{flex-direction:column-reverse;gap:0}.tools-board{width:100%;padding:12px;border-radius:0 0 7px 7px;border-top:1px solid var(--border)}.drawing-board{width:100%;border-radius:7px 7px 0 0}.drawing-board canvas{width:100%;height:auto;touch-action:none}.row.styles{order:-1}#draw-style-grid{grid-template-columns:repeat(auto-fill,minmax(50px,1fr))}}