*{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);height:200px;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;cursor:pointer;padding:30px;overflow-y:auto}.frame-info{font-size:.9rem;color:var(--pico-muted-color);margin-top:.5rem}.processing-indicator{display:none;text-align:center;padding:20px;color:var(--pico-primary)}.processing-indicator.show{display:block}.files-container:hover{border-color:#0172ad;background-color:#0172ad22}.files-container.dragover{border-color:#0172ad;background-color:#0172ad22;transform:scale(1.02);transition:all .2s ease}#frame-range{font-family:monospace}.dialog-message{line-height:1.6}@media (max-width: 768px){h1{font-size:40px}.files-container{height:150px;padding:20px}}.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;transition:all .3s ease}.files-container div{font-size:1.1rem;color:var(--pico-muted-color);font-weight:500}.processing-indicator{background:var(--pico-card-background-color);border-radius:var(--pico-border-radius);border:1px solid var(--pico-form-element-border-color);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}