*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0}h1{font-size:60px;color:#0172ad;text-shadow:4px 4px 4px #0172AD33}main{margin:50px 0}footer{margin:40px 0;text-align:center}#canvas{border-radius:var(--pico-border-radius);background:var(--pico-card-background-color);box-shadow:var(--pico-card-box-shadow)}header{position:relative}@media (min-width: 768px){div.language{width:220px;position:absolute;right:0;top:20px}}@media (min-width: 1024px){a.coffee{width:160px;position:absolute;right:240px;top:20px}}a.coffee img{cursor:pointer}p.dialog-title{font-weight:700}.files-container{border:4px dashed var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:30px;overflow:hidden;position:relative;transition:all .2s ease}.files-container.has-files{cursor:default}.files-container .drop-message{text-align:center;color:var(--pico-muted-color)}.file-list{width:100%;display:flex;flex-direction:column;gap:4px;max-height:320px;overflow-y:auto;padding:1px;box-sizing:border-box}.file-card{background:var(--pico-card-background-color);border:1px solid var(--pico-form-element-border-color);border-radius:8px;padding:4px 8px;display:flex;align-items:center;gap:8px;box-shadow:var(--pico-card-box-shadow);position:relative;cursor:grab;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}.file-card:active,.file-card.sortable-chosen{cursor:grabbing;border-color:var(--pico-primary);box-shadow:0 8px 16px #0172ad40}.file-card.sortable-ghost{opacity:.75;border-color:var(--pico-primary);background:#0172ad14}.file-order{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:999px;background:#0172ad26;color:var(--pico-primary);font-weight:600;font-size:.7rem}.file-meta{display:flex;flex-direction:column;flex:1;min-width:0}.file-name{font-weight:600;font-size:.75rem;color:var(--pico-color);word-break:break-word}.file-actions{display:flex;gap:6px;flex-shrink:0;margin-left:auto}.file-remove-btn{all:unset;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:.7rem;border:1px solid var(--pico-form-element-border-color);border-radius:4px;box-sizing:border-box;color:var(--pico-muted-color);background:transparent;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;margin-bottom:0!important}.file-remove-btn:hover{background:#d143431f;color:#d14343;border-color:#d14343}.file-remove-btn:focus-visible{outline:2px solid var(--pico-primary);outline-offset:2px}body.processing-active{overflow:hidden}.frame-info{font-size:.9rem;color:var(--pico-muted-color);margin-top:.5rem}.processing-indicator{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:16px;background:#0f172a52;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);cursor:wait;z-index:999}.processing-indicator.show{display:flex}.processing-card{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);border:1px solid var(--pico-form-element-border-color);box-shadow:0 16px 40px #0f172a38;cursor:default;max-width:360px;width:100%}.processing-spinner{width:32px;height:32px;border-radius:50%;border:3px solid rgba(1,114,173,.18);border-top-color:var(--pico-primary);animation:spin .9s linear infinite}.processing-details{display:flex;flex-direction:column;gap:8px;width:100%}.processing-details #processing-title{font-weight:600;color:var(--pico-color);margin:0}.processing-details #processing-message{color:var(--pico-muted-color);font-size:.85rem;margin:0}.processing-details .progress-container{margin-left:0;margin-right:0}.processing-details .progress-text{text-align:right;font-variant-numeric:tabular-nums}.files-container:hover,.files-container.dragover{border-color:#0172ad;background-color:#0172ad11;transform:scale(1.01)}#frame-range{font-family:monospace}.dialog-message{line-height:1.6}@media (max-width: 768px){h1{font-size:40px}.files-container{min-height:0;padding:20px 16px}.file-list{max-height:none;overflow-y:visible}}.progress-container{margin-top:15px;width:100%;max-width:400px;margin-left:auto;margin-right:auto}.progress-bar{width:100%;height:20px;background-color:var(--pico-form-element-background-color);border-radius:10px;overflow:hidden;border:1px solid var(--pico-form-element-border-color)}.progress-fill{height:100%;background:linear-gradient(45deg,#0172ad,#00a6ff);width:0%;transition:width .3s ease;border-radius:10px}.progress-text{text-align:center;margin-top:8px;font-size:.9rem;font-weight:700;color:var(--pico-primary)}.main-nav{margin-top:2rem;margin-bottom:1rem;padding:1rem 0;border-top:1px solid var(--pico-form-element-border-color);border-bottom:1px solid var(--pico-form-element-border-color);max-width:100%;overflow:hidden}.nav-links{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}.nav-link{display:inline-flex;align-items:center;padding:.5rem 1rem;text-decoration:none;color:var(--pico-color);background:var(--pico-card-background-color);border:1px solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);transition:all .2s ease;font-weight:500}.nav-link:hover{background:var(--pico-primary);color:var(--pico-primary-inverse);text-decoration:none;transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.nav-link:active{transform:translateY(0)}header hgroup{margin-bottom:1rem}.grid>div{padding:1.5rem;background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);border:1px solid var(--pico-form-element-border-color);transition:all .2s ease}.grid>div:hover{transform:translateY(-4px);box-shadow:0 8px 16px #0000001a;border-color:#0172ad}.grid>div h3{margin-bottom:1rem;color:var(--pico-primary)}.faq h3{color:var(--pico-primary);margin-top:2rem;margin-bottom:.5rem;font-size:1.1rem}.faq h3:first-of-type{margin-top:1rem}[role=button].outline:hover{background:var(--pico-primary);color:var(--pico-primary-inverse);border-color:var(--pico-primary)}@media (max-width: 768px){.nav-links{gap:1rem}.nav-link{padding:.4rem .8rem;font-size:.9rem}.main-nav{margin-top:1.5rem}}.footer-content{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.footer-content>div:last-child{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}@media (max-width: 768px){.footer-content{gap:.8rem}}.features-section{background:linear-gradient(135deg,#ff6b350d,#f7931e0d);padding:2rem;border-radius:var(--pico-border-radius);margin:3rem 0;max-width:100%}.feature-card{text-align:center;height:100%}.feature-card h3{font-size:1.3rem;margin-bottom:1rem}.feature-card p{line-height:1.6;color:var(--pico-muted-color)}.cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}.cta-buttons [role=button]{min-width:180px}.pico article{background:var(--pico-card-background-color);border:1px solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);padding:2rem;box-shadow:0 2px 4px #0000000d;max-width:100%;box-sizing:border-box}.files-container{background:#0172ad11;border-style:dashed;border-width:3px}.files-container .drop-message{font-size:1.05rem;font-weight:500}margin-top: 1rem; } section.pico{margin-bottom:3rem}h2{color:var(--pico-primary);font-weight:600}@media (max-width: 768px){.cta-buttons{flex-direction:column;align-items:center}.cta-buttons [role=button]{width:100%;max-width:280px}.features-section{padding:1.5rem}}.faq-section{background:var(--pico-card-background-color);padding:2.5rem;border-radius:var(--pico-border-radius);border:1px solid var(--pico-form-element-border-color);max-width:100%}.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem;max-width:100%}@media (min-width: 1200px){.faq-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 768px) and (max-width: 1199px){.faq-grid{grid-template-columns:repeat(2,1fr)}}.faq-item{background:#ff6b3505;padding:1.5rem;border-radius:var(--pico-border-radius);border:1px solid rgba(255,107,53,.1);transition:all .2s ease}.faq-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a;border-color:#ff6b354d}.faq-item h3{color:var(--pico-primary);margin-bottom:.8rem;font-size:1rem;font-weight:600}.faq-item p{line-height:1.3;color:var(--pico-muted-color);margin-bottom:0}@media (max-width: 768px){.faq-grid{grid-template-columns:1fr;gap:1rem}.faq-section{padding:1.5rem}.faq-item{padding:1.2rem}}section.pico{max-width:100%;box-sizing:border-box}details.advanced-panel{margin-top:1rem}.advanced-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px;align-items:start;margin-top:10px}.size-input-group{display:flex;flex-direction:column;gap:6px}.size-input-group label{font-weight:600;color:var(--pico-color);font-size:.95rem}.input-inline{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.input-inline input[type=number]{width:100%;padding:8px 10px;border:1px solid var(--pico-form-element-border-color);border-radius:var(--pico-border-radius);background:var(--pico-form-element-background-color)}.input-inline .suffix{color:var(--pico-muted-color);font-size:.9rem}.checkbox-group .checkbox{display:inline-flex;align-items:center;gap:8px;font-weight:600}.color-group input[type=color]{width:44px;height:32px;padding:0;border:1px solid var(--pico-form-element-border-color);border-radius:6px;background:var(--pico-card-background-color);cursor:pointer}.frame-info{margin-top:6px}@media (max-width: 768px){.advanced-controls{grid-template-columns:1fr 1fr}}@media (max-width: 480px){.advanced-controls{grid-template-columns:1fr}}.features-section,.faq-section,.main-nav{width:auto;max-width:100%;box-sizing:border-box}.form-field.field-hidden{display:none!important}