:root{--bg:#0b0d12;--panel:#12161d;--panel-2:#181d26;--border:#ffffff14;--text:#f3f6fb;--muted:#98a4b8;--accent:#6fb1ff;--accent-2:#8ef0cb;--danger:#ffffff1f;--radius:18px;--shadow:0 10px 28px #00000047;--max:1380px}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100svh;color:var(--text);background:radial-gradient(circle at top,#6fb1ff1f,#0000 28%),linear-gradient(#0a0d12,#0f1319 40%,#0b0d12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}.app{width:min(calc(100% - 20px), var(--max));margin:12px auto 28px}.hero,.toolbar,.canvas{border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#12161de6}.hero{border-radius:24px;place-items:center;min-height:68svh;padding:26px;display:grid}.hero-inner{text-align:center;width:min(100%,760px)}.eyebrow{color:var(--muted);background:#ffffff0d;border:1px solid #ffffff12;border-radius:999px;align-items:center;gap:8px;margin-bottom:16px;padding:8px 12px;font-size:13px;display:inline-flex}h1{letter-spacing:-.03em;margin:0 0 10px;font-size:clamp(30px,8vw,54px);line-height:.98}.lead{max-width:620px;color:var(--muted);margin:0 auto 20px;font-size:clamp(14px,3.8vw,17px);line-height:1.45}.dropzone{cursor:pointer;background:linear-gradient(#6fb1ff1f,#8ef0cb0d);border:2px dashed #6fb1ff66;border-radius:24px;place-items:center;width:100%;min-height:300px;padding:24px;transition:all .18s;display:grid}.dropzone:hover,.dropzone.dragover{background:linear-gradient(#6fb1ff2e,#8ef0cb17);border-color:#6fb1ffe6;transform:translateY(-1px)}.dropzone strong{margin-bottom:8px;font-size:clamp(24px,5vw,32px);display:block}.dropzone span{color:var(--muted);font-size:15px;line-height:1.45;display:block}.subnote{color:var(--muted);margin-top:14px;font-size:13px}.status-toast{left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);min-width:min(92vw,360px);max-width:min(92vw,480px);color:var(--text);box-shadow:var(--shadow);opacity:0;pointer-events:none;z-index:120;text-align:center;background:#12161df5;border:1px solid #ffffff17;border-radius:14px;padding:12px 14px;font-size:13px;line-height:1.4;transition:all .18s;position:fixed;transform:translate(-50%)translateY(10px)}.status-toast.show{opacity:1;transform:translate(-50%)translateY(0)}.status-toast.error{background:#2e1216f5;border-color:#ff787873}.hidden{display:none!important}.toolbar{top:calc(env(safe-area-inset-top,0px) + 8px);z-index:60;border-radius:20px;margin-bottom:12px;padding:12px;position:sticky}.toolbar-grid{gap:10px;display:grid}.toolbar-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar-row-top{justify-content:space-between}.toolbar-row-bottom{justify-content:center}.toolbar-group{flex-wrap:wrap;align-items:center;gap:8px;min-width:0;display:flex}.toolbar-group-file{flex:auto}.toolbar-group-export{flex:none;margin-left:auto}.toolbar-cluster{background:#ffffff06;border:1px solid #ffffff0d;border-radius:14px;flex-wrap:wrap;gap:8px;padding:4px 6px;display:flex}.file-pill{color:#f3f6fbd1;letter-spacing:.01em;white-space:nowrap;text-overflow:ellipsis;background:#ffffff0b;border:1px solid #ffffff12;border-radius:14px;flex:180px;min-width:0;max-width:250px;padding:10px 12px;font-size:12.5px;font-weight:500;overflow:hidden}.btn,.seg button{color:var(--text);letter-spacing:.01em;cursor:pointer;background:linear-gradient(#1d2430,#171c25);border:1px solid #ffffff14;border-radius:14px;min-height:44px;padding:11px 14px;font-size:13px;font-weight:600;transition:border-color .16s,transform .16s,background .16s,box-shadow .16s;box-shadow:inset 0 1px #ffffff0a}.btn:hover,.seg button:hover{border-color:#6fb1ff73;transform:translateY(-1px);box-shadow:inset 0 1px #ffffff0d,0 8px 18px #0000002e}.btn.primary{background:linear-gradient(#2c69ab,#234f82);border-color:#6fb1ffcc}.btn.success{background:linear-gradient(#257a5c,#1c5e47);border-color:#8ef0cbbf}.btn.soft.active,.seg button.active{background:linear-gradient(#234664,#1d334a);border-color:#6fb1ffb3}.seg{background:#ffffff08;border:1px solid #ffffff0f;border-radius:16px;gap:8px;padding:4px;display:inline-flex}.zoom-wrap{background:#ffffff0a;border:1px solid #ffffff12;border-radius:14px;flex:260px;align-items:center;gap:10px;min-width:0;max-width:250px;padding:8px 10px;display:flex}.zoom-wrap label{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;font-size:12px;font-weight:600}.zoom-wrap input[type=range]{width:100%;accent-color:var(--accent)}.canvas{border-radius:24px;padding:12px;overflow:visible}.grid{column-count:auto;column-width:300px;column-gap:16px}.card{break-inside:avoid;background:linear-gradient(#151a21,#11161d);border:1px solid #ffffff12;border-radius:20px;width:100%;min-width:0;margin-bottom:16px;display:inline-block;overflow:hidden}.card-stress-test{opacity:.88;border-style:dashed;border-color:#ffffff1f}.card-top{justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 12px 8px;display:flex}.card-title{min-width:0}.platform-head{align-items:center;gap:8px;min-width:0;display:flex}.platform-mark{letter-spacing:.02em;color:#f3f6fb;background:var(--platform-accent,#4f7ab8);border:1px solid #ffffff3d;border-radius:999px;flex:none;place-items:center;width:20px;height:20px;font-size:10px;font-weight:800;display:grid;box-shadow:0 3px 10px #00000040}.platform-mark.hidden{display:none}.card h2{min-width:0;margin:0;font-size:14px;line-height:1.2}.card p{color:var(--muted);margin:5px 0 0;font-size:11px;line-height:1.35}.tag{color:var(--muted);background:#ffffff08;border:1px solid #ffffff14;border-radius:999px;flex:none;padding:6px 8px;font-size:11px}.frame-wrap{padding:10px 12px 12px}.frame{touch-action:pan-y pinch-zoom;cursor:grab;-webkit-user-select:none;user-select:none;background-color:#0f141b;background-image:linear-gradient(45deg,#ffffff0a 25%,#0000 25%),linear-gradient(-45deg,#ffffff0a 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ffffff0a 75%),linear-gradient(-45deg,#0000 75%,#ffffff0a 75%),none;background-position:0 0,0 9px,9px -9px,-9px 0;background-repeat:repeat,repeat,repeat,repeat,repeat;background-size:18px 18px;background-attachment:scroll,scroll,scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box;border:1px solid #ffffff12;border-radius:18px;width:100%;position:relative;overflow:hidden}.frame:after{content:"";border:1px solid var(--platform-accent,#6fb1ff59);border-radius:inherit;opacity:.22;pointer-events:none;z-index:2;position:absolute;inset:0}.frame.dragging{cursor:grabbing}@media (hover:none){.frame,.frame.dragging{cursor:default}}.frame.pan-enabled{touch-action:none}.frame:before{content:"";padding-top:var(--aspect-percent);display:block}.stage,.overlay,.empty-state,.mobile-wrap{position:absolute;inset:0}.stage{overflow:hidden}.stage img{pointer-events:none;max-width:none;position:absolute}.empty-state{text-align:center;color:var(--muted);place-items:center;padding:16px;font-size:13px;line-height:1.4;display:grid}.overlay{pointer-events:none;display:none}.overlay.show{display:block}.card .overlay .line,.card .overlay .pill{background:color-mix(in srgb, var(--platform-accent,#6fb1ff) 72%, #fff 28%);opacity:.82}.card .overlay .ui{border-color:color-mix(in srgb, var(--platform-accent,#6fb1ff) 42%, #fff 58%);background:color-mix(in srgb, var(--platform-accent,#6fb1ff) 24%, #00000057 76%)}.card .overlay .text-chip{border-color:color-mix(in srgb, var(--platform-accent,#6fb1ff) 35%, #ffffff1f 65%)}.ui{background:#00000057;border:1px solid #ffffff29;border-radius:10px;position:absolute}.line,.pill,.text-chip,.circle{pointer-events:none;position:absolute}.line,.pill{opacity:.85;background:#ffffffc7;border-radius:999px}.circle{opacity:.9;background:#ffffffd9;border-radius:999px}.text-chip{color:#ffffffed;letter-spacing:.02em;background:#0000008c;border:1px solid #ffffff1f;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:700}.mobile-wrap{background:linear-gradient(#1a202a,#0f141b);border:1px solid #ffffff14;border-radius:24px;display:none;inset:10px;box-shadow:inset 0 0 0 1px #ffffff0a}.mobile-wrap.show{display:block}.mobile-top{background:#ffffff0f;border-radius:999px;height:18px;position:absolute;top:10px;left:10px;right:10px}.mobile-thumb{background:#ffffff0d;border:1px solid #ffffff14;border-radius:14px;height:35%;position:absolute;top:40px;left:14px;right:14px;overflow:hidden}.mobile-title{height:33%;position:absolute;top:calc(52px + 35%);left:14px;right:14px}.mobile-title .mline{opacity:.8;background:#ffffffc2;border-radius:999px;height:10px;margin-bottom:10px}.mobile-title .a{width:95%}.mobile-title .b{width:80%}.mobile-title .c{width:58%}.mobile-meta{background:#ffffff12;border-radius:999px;height:28px;position:absolute;bottom:18px;left:14px;right:14px}.card-actions{flex-wrap:wrap;gap:8px;margin-top:auto;padding:0 12px 12px;display:flex}.card-stress-test .card-actions{text-align:center;color:var(--muted);padding:8px 12px 12px;font-size:12px}.stress-label{color:var(--muted);font-size:12px;font-style:italic;line-height:1}.card-actions .btn{justify-content:center;width:100%}.hintbar{color:var(--muted);text-align:center;margin:12px 4px 4px;font-size:12px;line-height:1.45}.file-input,.mobile-only{display:none}.zoom-value{text-align:right;min-width:44px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:13px}.touch-tip{color:var(--text);opacity:0;pointer-events:none;background:#080c12e0;border:1px solid #6fb1ff59;border-radius:999px;padding:8px 10px;font-size:12px;line-height:1;transition:opacity .18s,transform .18s;position:absolute;bottom:14px;left:50%;transform:translate(-50%)translateY(8px);box-shadow:0 8px 20px #00000047}.touch-tip.show{opacity:1;transform:translate(-50%)translateY(0)}.seo-copy,.faq,.support-card,.contact-card{border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#12161de6;border-radius:24px;margin-top:24px;padding:18px}.seo-copy{margin-top:32px}.seo-copy h2,.faq h2,.support-card h2,.contact-card h2{letter-spacing:-.02em;margin:0 0 10px;font-size:clamp(22px,3vw,30px)}.seo-copy p,.faq p,.support-card p,.contact-card p{color:var(--muted);margin:0;font-size:15px;line-height:1.55}.feature-list{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:14px;display:grid}.feature-item{background:#ffffff08;border:1px solid #ffffff12;border-radius:16px;padding:12px}.feature-item strong{margin-bottom:6px;font-size:14px;display:block}.feature-item span{color:var(--muted);font-size:13px;line-height:1.45}.faq-list{gap:10px;margin-top:14px;display:grid}.faq-item{background:#ffffff08;border:1px solid #ffffff12;border-radius:16px;padding:12px}.faq-item h3{margin:0 0 6px;font-size:15px}.support-card{display:none}.support-card.show{display:block}.support-actions{flex-wrap:wrap;gap:10px;margin-top:14px;display:flex}.support-disclosure{color:var(--muted);margin-top:12px;font-size:12px;line-height:1.45}.contact-form{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px;display:grid}.contact-form .field{gap:6px;display:grid}.contact-form .field.full{grid-column:1/-1}.contact-form label{color:var(--muted);letter-spacing:.03em;text-transform:uppercase;font-size:12px;font-weight:600}.contact-form input,.contact-form textarea{width:100%;color:var(--text);font:inherit;background:#080c12bf;border:1px solid #ffffff1a;border-radius:12px;padding:11px 12px}.contact-form textarea{resize:vertical;min-height:120px}.site-footer{border:1px solid var(--border);color:var(--muted);text-align:center;background:#12161ddb;border-radius:18px;margin-top:14px;padding:16px 18px;font-size:13px;line-height:1.55}.site-footer p{margin:0}.site-footer p+p{margin-top:6px}.site-footer a{color:var(--accent);text-decoration:none}.site-footer a:hover{text-decoration:underline}@media (width<=699px){.mobile-only{display:inline-flex}}@media (width>=700px){.toolbar{padding:14px 16px}.toolbar-grid{grid-template-columns:minmax(0,1fr);gap:12px}.toolbar-row-top{align-items:center}.toolbar-group-file{gap:10px}.toolbar-row-bottom{gap:10px;max-width:980px;margin:0 auto}.zoom-wrap{flex:0 360px;max-width:360px}.seg{flex:none}.card-actions .btn{width:auto}}@media (width<=699px){.app{width:min(calc(100% - 12px), var(--max));margin-top:8px}.hero{border-radius:20px;min-height:auto;padding:24px 16px}.dropzone{border-radius:16px;min-height:160px;padding:16px}.toolbar{border-radius:18px;margin-bottom:10px;padding:8px;top:6px}.toolbar-grid{gap:8px}.canvas{border-radius:20px;padding:8px}.grid{column-width:168px;column-gap:10px}.card{border-radius:16px;margin-bottom:10px}.card-top{gap:8px;padding:10px 10px 6px}.card h2{font-size:13px}.card p{margin-top:4px;font-size:10px;line-height:1.3}.tag{padding:5px 7px;font-size:10px}.frame-wrap{padding:8px 10px 10px}.frame{border-radius:14px}.card-actions{padding:0 10px 10px}.toolbar-row{gap:6px}.toolbar-row-top{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;display:grid}.toolbar-row-top .toolbar-group{width:auto;min-width:0}.toolbar-row-bottom{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;align-items:start;display:grid}.toolbar-row-bottom>*{min-width:0}.toolbar-group{width:100%}.toolbar-group-export{margin-left:0}.toolbar-group-file{align-items:stretch}.btn,.seg button{flex:auto;min-height:38px;padding:9px 11px;font-size:12px}.file-pill{flex:100%;max-width:100%;padding:8px 10px;font-size:12px}.zoom-wrap{flex:100%;grid-column:1/-1;gap:8px;max-width:none;padding:7px 8px}.zoom-wrap label{font-size:11px}.seg{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.toolbar-cluster{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;padding:4px;display:grid}.zoom-value{min-width:38px;font-size:12px}#changeImageBtn,#exportAllBtn{width:100%;min-width:0}#rotateBtn,#brandToggleBtn,#overlayBtn,#panModeBtn,#resetBtn{flex:calc(50% - 3px);min-width:0}#fileLabel{display:none}}