*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif;background:#0b0c10;color:#e6e6e6}main{max-width:900px;margin:0 auto;padding:32px 20px 64px}h1{font-size:2rem;margin:0 0 8px}h2{font-size:1.1rem;margin:0 0 12px}.hint,.lead{color:#9aa0a6;line-height:1.5}.card{background:#15171c;border:1px solid #23262d;border-radius:12px;padding:20px;margin-top:20px}.uploads{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.filename{color:#9aa0a6;font-size:.9rem;margin:10px 0 0;text-align:center;word-break:break-all}.upload{display:block;border:2px dashed #3a3f48;border-radius:10px;padding:24px;text-align:center;cursor:pointer}.upload:hover{border-color:#f5a524}.upload input{display:none}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-gap:14px 24px;gap:14px 24px;margin:20px 0}.grid label{display:flex;flex-direction:column;gap:6px;font-size:.9rem;color:#c2c6cc}.grid b{color:#f5a524}.actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}input[type=range]{accent-color:#f5a524;width:100%;height:28px}button{min-height:44px;background:#f5a524;color:#111;border:0;border-radius:8px;padding:10px 18px;font-weight:600;cursor:pointer}button.secondary{background:#2a2e36;color:#e6e6e6}button:disabled{opacity:.4;cursor:not-allowed}.status{color:#9aa0a6;font-size:.9rem}.error{color:#ff6b6b}.strip{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#3a3f48 transparent}.strip canvas{height:110px;border-radius:4px}.viewer{width:100%;height:440px;border-radius:8px;overflow:hidden}.tips ul{color:#9aa0a6;line-height:1.7;padding-left:20px;margin:0}@media (max-width:600px){main{padding:20px 14px 48px}h1{font-size:1.6rem}.card{padding:16px;margin-top:14px}.uploads{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px}.filename{color:#9aa0a6;font-size:.9rem;margin:10px 0 0;text-align:center;word-break:break-all}.upload{padding:28px 12px}.grid{grid-template-columns:1fr;gap:10px}.actions button{flex:1 1 100%}.status{width:100%;text-align:center}.viewer{height:340px}.strip canvas{height:90px}}a{color:#f5a524}.steps ol{margin:0;padding-left:20px;line-height:1.7;color:#c2c6cc}.steps b{color:#e6e6e6}button.link{background:none;color:#9aa0a6;padding:12px 0 0;min-height:0;font-weight:500;text-decoration:underline}.grid small{color:#6f757d;font-size:.78rem}.stats{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px;gap:10px;margin-bottom:14px}.stats div{background:#0f1115;border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:2px}.stats b{color:#f5a524;font-size:1rem}.stats span{color:#9aa0a6;font-size:.75rem}button.download{width:100%;margin-top:12px}.mat-page{background:#fff;min-height:100vh;color:#111}.mat-toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px 16px;background:#15171c;color:#e6e6e6}.mat-sheet{display:flex;justify-content:center;padding:16px}.mat-sheet svg{width:min(100%,210mm);height:auto;box-shadow:0 2px 12px rgba(0,0,0,.25)}@page{size:A4 portrait;margin:0}@media print{body{background:#fff}.no-print{display:none!important}.mat-sheet{padding:0}.mat-sheet svg{width:210mm;height:297mm;box-shadow:none}}@media (max-width:600px){.stats{grid-template-columns:repeat(2,1fr)}}