@import url('../../../css/site.css?v=pdf15');
:root{--ink:#23334d;--muted:#748297;--line:#e2e8f1;--blue:#315ce7;--paper:#fff;--wash:#f4f6fb}*{box-sizing:border-box}body{margin:0;background:#f7f9fc;color:var(--ink);font:14px/1.6 Arial,'Malgun Gothic',sans-serif}button,input,select{font:inherit;color:inherit}button,select{cursor:pointer}button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:7px 13px;border:1px solid var(--line);border-radius:7px;background:white;font-size:12px;font-weight:600;transition:background .15s}button:hover{background:#edf2ff;border-color:#bfd0f4}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #86a6ff;outline-offset:3px}.primary{background:var(--blue);color:white;border-color:var(--blue)}.primary:hover{background:#254ccd;color:white}.primary-subtle{background:#edf2ff;color:#315ad2;border-color:#dce6ff}.quiet{border-color:transparent;background:transparent;color:var(--muted)}[hidden]{display:none!important}.full{width:100%;margin-top:8px}.skip{position:absolute;top:-70px;left:10px;z-index:20}.skip:focus{top:8px;background:white;padding:12px}header{display:flex;align-items:center;gap:20px;min-height:76px;padding:18px max(24px,calc((100% - 1440px)/2));background:white;border-bottom:1px solid var(--line)}header img{display:block;object-fit:contain}a{text-decoration:none;color:inherit}header .product{font-size:13px;font-weight:700;white-space:nowrap}.divider{height:22px;width:1px;background:var(--line)}header nav{display:flex;gap:23px;margin-left:auto;font-size:11px;color:var(--muted)}header select{margin-left:auto;font-size:11px;border:0;background:#f4f6fa;padding:8px;border-radius:6px;max-width:115px}main{max-width:1440px;margin:auto;padding:0 28px 30px}.intro{display:flex;align-items:center;justify-content:space-between;padding:36px 2px 28px}.eyebrow{color:#7d8caa;font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 9px}h1{font-size:29px;letter-spacing:-1px;line-height:1.25;margin:0 0 12px}.intro p:not(.eyebrow){font-size:12px;color:var(--muted);margin:0;max-width:750px}.intro-art{position:relative;width:156px;height:74px;margin-right:20px}.intro-art span{position:absolute;color:#345ee9;font-size:48px;top:-20px;left:52px}.intro-art i{position:absolute;border:1px solid #ccd7f1;border-radius:8px;width:44px;height:44px;left:18px;top:0;transform:rotate(-14deg)}.intro-art i:nth-of-type(2){left:48px;transform:rotate(0)}.intro-art i:nth-of-type(3){left:78px;transform:rotate(14deg)}.intro-art b{position:absolute;bottom:0;left:30px;letter-spacing:3px;font-size:9px;color:#8a9bbb}.studio{border:1px solid #dce4ef;background:white;border-radius:14px;overflow:hidden;box-shadow:0 10px 36px #2a416407}.command-bar{display:flex;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}.command-bar>div{display:flex;gap:7px;align-items:center}.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px}.work-panel{min-width:0;display:flex;flex-direction:column}.panel-title{display:flex;align-items:center;gap:10px;padding:15px 19px;min-height:51px}.panel-title h2,h2{font-size:12px;margin:0;font-weight:650}.panel-title>span{font-size:10px;color:var(--muted)}.original{display:flex;gap:6px;align-items:center;font-size:10px;color:var(--muted);margin-left:auto}.original input{width:12px;height:12px;accent-color:var(--blue)}.canvas-stage{background-color:#f5f7fc;background-image:radial-gradient(#d7deeb .8px,transparent .8px);background-size:16px 16px;min-height:490px;flex:1;overflow:auto;display:grid;place-items:center;padding:26px;max-height:640px}.canvas-stage.dragging{outline:3px dashed var(--blue);outline-offset:-8px;background-color:#eaf0ff}canvas{image-rendering:pixelated}#canvas{background-color:white;background-image:conic-gradient(#e8ebf2 25%,#fff 0 50%,#e8ebf2 0 75%,#fff 0);background-size:16px 16px;box-shadow:0 6px 28px #2e405318;max-width:none;display:block}#canvas.picking{cursor:crosshair;outline:2px solid var(--blue)}#empty{text-align:center;padding:30px 8px}#empty strong{display:block;font-size:15px;margin:12px 0}#empty span{font-size:10px;color:var(--muted)}.upload-icon{width:54px;height:54px;background:white;border:1px solid #dbe3f0;border-radius:14px;margin:auto;color:#4d70c2;font-size:30px}.canvas-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:10px 18px;color:var(--muted);font-size:10px}.canvas-bar label{display:flex;gap:8px;align-items:center}.canvas-bar select{font-size:10px;padding:2px;border:none;background:transparent}#frame-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}.settings{border-left:1px solid var(--line);background:#fff}.preview-panel{border-bottom:1px solid var(--line);padding-bottom:12px}.live-dot{margin-left:auto!important;font-size:8px!important;letter-spacing:1px;color:#7991c3!important}.preview-stage{margin:0 17px;height:138px;background-color:#f4f6fa;background-image:conic-gradient(#e8ecf3 25%,transparent 0 50%,#e8ecf3 0 75%,transparent 0);background-size:16px 16px;border:1px solid #e5eaf2;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}#preview{max-width:100%;max-height:125px;object-fit:contain}#preview-empty{color:#b4c0d6}.playback{display:flex;align-items:center;gap:5px;padding:10px 16px 0;font-size:10px}.playback button{min-height:29px;padding:4px 7px;font-size:10px}.playback label{display:flex;gap:4px;align-items:center;margin-left:auto}.playback select{font-size:10px;padding:4px 2px;border:1px solid var(--line);border-radius:5px}.scope{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px;background:#fafbfe;font-size:10px;color:var(--muted);border-bottom:1px solid var(--line)}select{background:#fff;border:1px solid var(--line);padding:6px;border-radius:5px;font-size:11px}.settings-section{padding:17px 18px;border-bottom:1px solid var(--line)}.settings-section:last-child{border:0}.settings-section h2{display:flex;align-items:center;gap:8px;margin-bottom:14px}.step{font-size:9px;color:#869ac3;background:#eef2fa;border-radius:5px;padding:2px 6px;letter-spacing:.5px}.field{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:11px}.color-field label{margin-right:auto}input[type=color]{width:32px;height:28px;border:1px solid var(--line);padding:2px;background:white;border-radius:5px;cursor:pointer}.color-field button{font-size:10px;padding:3px 5px;min-height:28px}.range-label{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}input[type=range]{width:100%;height:18px;margin:7px 0 9px;accent-color:var(--blue)}.check{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:#6d7d95;margin:9px 0;line-height:1.5}.check input{width:13px;height:13px;accent-color:var(--blue);margin:1px 0;flex:none}.size-fields{display:flex;gap:8px;align-items:end;margin:12px 0;font-size:10px;color:var(--muted)}.size-fields label{flex:1;min-width:0}.size-fields label span{display:block;margin-bottom:4px}.size-fields input{width:100%;height:31px;border:1px solid var(--line);border-radius:5px;padding:5px;font-size:11px}.size-fields>span{padding-bottom:7px}.size-fields>select{width:66px;height:31px}.alignment{display:flex;gap:8px}.alignment select{flex:1}.alignment button{min-height:31px}.timeline{border-top:1px solid var(--line);background:#fff}.timeline .panel-title{padding:12px 18px}.frame-actions{display:flex;gap:4px;margin-left:auto}.frame-actions button{min-height:25px;height:25px;padding:2px 7px;color:#7484a0}#frames{display:flex;overflow:auto;gap:9px;padding:2px 18px 12px;min-height:94px}.frame{position:relative;display:block;flex:0 0 74px;padding:5px;border:1px solid var(--line);border-radius:7px;background:#fafbfe;cursor:grab}.frame.selected{border:2px solid #557bed;padding:4px;background:#f0f4ff}.frame canvas{display:block;width:62px;height:52px;object-fit:contain}.frame span{font-size:9px;color:#8a98b1;display:block;text-align:center}.timeline>p{font-size:9px;color:#9ca7ba;margin:0 18px 12px}.export-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-top:1px solid var(--line);background:#fafbfe}.export-bar>div{display:flex;align-items:center;gap:8px}.footnote{font-size:11px;color:#8290a6;line-height:1.8;margin:16px 2px}footer{max-width:1440px;padding:25px 30px 32px;margin:auto;border-top:1px solid var(--line);display:flex;gap:25px;align-items:center;font-size:10px;color:var(--muted)}footer strong{font-size:17px;color:#536985}footer p{margin:4px 0}footer nav{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}footer small{white-space:nowrap;font-size:9px}.simple-only{display:none!important}body[data-mode=simple] .advanced{display:none!important}body[data-mode=simple] .simple-only{display:inline-flex!important}body[data-mode=simple] .canvas-stage{min-height:500px}body[data-mode=simple] .settings{display:flex;flex-direction:column;justify-content:center}dialog{border:1px solid #dce4ef;border-radius:15px;padding:24px;width:min(510px,calc(100% - 28px));max-height:90vh;overflow:auto;color:var(--ink);box-shadow:0 20px 70px #1d30472e}dialog::backdrop{background:#26395870;backdrop-filter:blur(4px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.dialog-heading h2{font-size:17px}.dialog-heading button{border:0;font-size:18px;min-height:28px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}dialog p{font-size:11px;color:var(--muted)}dialog [role=alert]{color:#b74545}.split-preview{background:#f1f4fa;max-height:280px;overflow:auto;text-align:center}.split-preview canvas{max-width:100%;max-height:260px;object-fit:contain}#busy-dialog{width:230px;text-align:center;padding:30px}#busy-dialog button{margin-top:8px}.spinner{display:block;width:26px;height:26px;border:3px solid #e1e8f8;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:#253651;color:white;padding:13px 22px;font-size:12px;box-shadow:0 5px 20px #22344d33;border-radius:9px;z-index:99}.doc{max-width:900px;background:white;border:1px solid var(--line);border-radius:14px;padding:32px;margin:20px auto}.doc h2{font-size:17px;margin:24px 0 8px}.doc p,.doc li{font-size:13px;color:#667790;line-height:1.9}.doc ul{padding-left:20px}.doc a{color:var(--blue)}
@media(max-width:1000px){header nav{display:none}.intro-art{display:none}.studio-grid{grid-template-columns:minmax(0,1fr) 290px}.command-bar{flex-wrap:wrap}.export-bar{align-items:flex-start}.export-bar>div:last-child{flex-wrap:wrap;justify-content:flex-end}.canvas-stage{min-height:480px}footer{flex-wrap:wrap}footer nav{margin-left:0}}
@media(max-width:700px){header{padding:13px 16px;gap:12px;min-height:62px}header img{width:72px;height:28px}.divider{display:none}header .product{font-size:10px;white-space:normal}header select{max-width:90px}main{padding:0 12px 20px}.intro{padding:25px 4px 20px}h1{font-size:24px}.intro p:not(.eyebrow){font-size:11px}.studio-grid{display:flex;flex-direction:column}.command-bar{padding:11px;gap:8px}.command-bar>div{flex-wrap:wrap;gap:3px}.command-bar button{font-size:10px;padding:6px 8px}.canvas-stage,body[data-mode=simple] .canvas-stage{min-height:280px;max-height:420px;padding:20px}.panel-title{padding:12px}.panel-title h2{font-size:11px}.original{font-size:9px}.settings{border-left:0;border-top:1px solid var(--line)}.preview-panel{padding-bottom:15px}.preview-stage{height:150px}.playback{justify-content:center}.playback label{margin-left:15px}.settings-section{padding:18px}.scope{padding:12px 18px}.settings-section h2{font-size:13px}.check,.range-label{font-size:12px}.settings button{font-size:12px}.size-fields input,select{font-size:14px}.export-bar{padding:14px;display:block}.export-bar>div:last-child{margin-top:12px;justify-content:flex-start}.export-bar button{font-size:11px}.footnote{font-size:10px}footer{padding:20px 18px;gap:12px}.doc{padding:20px}.frame{touch-action:pan-x}#empty strong{font-size:13px}#empty span{font-size:9px}.canvas-bar{padding:9px 12px}}

#picked-color{font:10px monospace;color:#637693}.color-field{flex-wrap:wrap}.color-field button{margin-left:auto}.settings-section .footnote{font-size:10px;margin:4px 0 10px}
/* Readability matches the Minecraft tool: 16px actions, 14px labels, 13px help. */
body{font-size:16px}button,select,input{font-size:16px}button{min-height:42px;padding:9px 14px;border-color:#b9c7da;background:#f7f9fc;font-weight:600;box-shadow:0 1px 2px #23334d0a}.quiet{background:#f3f6fb;border:1px solid #b9c7da;color:#425873}.quiet:hover{background:#e5edfb;border-color:#8ca7ce}.primary{background:var(--blue);border-color:var(--blue);color:white}.primary-subtle{background:#e9efff;border-color:#afc2f2;color:#274fc4}button[aria-pressed=true]{background:#dfeaff;border-color:#648ad6;color:#224eaa}button:disabled{box-shadow:none}
header .product{font-size:16px}header nav{font-size:14px;gap:18px}header select{font-size:14px;max-width:135px}.intro p:not(.eyebrow){font-size:16px}.eyebrow{font-size:12px}h1{font-size:32px}.studio-grid{grid-template-columns:minmax(0,1fr) 370px}.command-bar{flex-wrap:wrap}.command-bar>div{flex-wrap:wrap}.command-bar button{font-size:16px}.panel-title{flex-wrap:wrap}.panel-title h2,h2{font-size:16px}.panel-title>span,.original{font-size:13px}.original input{width:16px;height:16px}#empty strong{font-size:18px}#empty span{font-size:13px}.canvas-bar,.canvas-bar select{font-size:13px}.canvas-bar select{min-height:34px}.playback{flex-wrap:wrap;font-size:14px;gap:8px}.playback button{font-size:14px;min-height:38px;padding:7px 11px}.playback select{font-size:14px;padding:7px 5px}.scope{font-size:14px}.scope select{font-size:14px}.settings-section h2{font-size:16px}.step{font-size:12px}.field{font-size:14px}.color-field label{font-size:14px}#picked-color{font-size:13px}.color-field button{font-size:14px;min-height:40px;padding:8px 12px;margin:4px 0 0;width:100%}input[type=color]{width:40px;height:34px}.range-label,.check{font-size:14px}.check{gap:9px;line-height:1.65}.check input{width:17px;height:17px;margin-top:3px}.size-fields{font-size:14px;gap:9px}.size-fields input{font-size:16px;height:39px;padding:7px}.size-fields>select{width:82px;height:39px;font-size:14px}.alignment select{font-size:16px;min-width:0}.alignment button{min-height:40px}.settings-section .footnote,.footnote{font-size:13px;line-height:1.8;color:#657892}.frame-actions button{min-height:36px;height:36px;min-width:36px;font-size:17px}.frame span{font-size:12px}.timeline>p{font-size:13px;color:#6d7d96}.export-bar{flex-wrap:wrap}.export-bar>div{flex-wrap:wrap}.export-bar button{font-size:16px}.export-bar h2{font-size:16px}footer{font-size:13px;flex-wrap:wrap}footer small{font-size:12px}dialog p{font-size:14px}dialog select{font-size:16px}#toast{font-size:15px}.doc p,.doc li{font-size:16px}.doc h2{font-size:20px}
@media(max-width:1150px){header nav{display:none}.studio-grid{grid-template-columns:minmax(0,1fr) 340px}.export-bar>div:last-child{justify-content:flex-start}}
@media(max-width:850px){.studio-grid{display:flex;flex-direction:column}.settings{border-left:0;border-top:1px solid var(--line)}.canvas-stage{min-height:330px;max-height:480px}.playback{justify-content:center}.playback label{margin-left:8px}}
@media(max-width:700px){header{flex-wrap:wrap;gap:10px}header .product{font-size:14px;flex:1}header select{max-width:105px;font-size:14px}.intro p:not(.eyebrow){font-size:15px}h1{font-size:27px}.command-bar>div{gap:7px}.command-bar button{font-size:14px;min-height:42px;padding:8px 10px}.panel-title h2,.settings-section h2{font-size:16px}.original{font-size:13px;margin-left:0}.panel-title{gap:8px}.settings button{font-size:16px}.settings #picker{font-size:16px}.check,.range-label{font-size:14px}.size-fields input,select{font-size:16px}.export-bar button{font-size:14px;min-height:44px}.export-bar>div:last-child{gap:8px}.footnote{font-size:13px}#empty strong{font-size:16px}#empty span{font-size:13px}.frame-actions{gap:3px}.frame-actions button{min-width:32px;padding:3px 6px}.timeline .panel-title{padding:12px}.canvas-bar{font-size:12px}.canvas-bar select{font-size:14px}.canvas-bar label{flex:none}#frame-name{max-width:50%}footer nav{gap:14px}.live-dot{font-size:11px!important}}

/* The two image tools remain reachable at every screen width. */
header .tool-switch{display:flex;gap:5px;margin:0;align-items:center;background:#f0f4fa;padding:5px;border:1px solid #dce4ef;border-radius:10px;flex-wrap:wrap}
header .tool-switch a{display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;font-size:14px;font-weight:600;color:#60738f;border:1px solid transparent;border-radius:7px;text-decoration:none;line-height:1.4}
header .tool-switch a:hover{background:#e2eafa;color:#254fc1}
header .tool-switch a[aria-current=page]{background:white;border-color:#b9cbec;color:#2855ce;box-shadow:0 1px 4px #20375a0a}
header .help-nav{margin-left:auto}header #language{flex-shrink:0}
@media(max-width:1150px){header .help-nav{display:none}header .tool-switch{display:flex}header{gap:14px;flex-wrap:wrap}}
@media(max-width:700px){header{display:grid;grid-template-columns:1fr auto;gap:12px}header .divider{display:none}header>a{grid-column:1;grid-row:1}header #language{grid-column:2;grid-row:1;margin-left:0}header .tool-switch{grid-column:1/-1;grid-row:2;display:flex;width:100%;gap:4px}header .tool-switch a{flex:1;min-width:0;padding:9px 7px;font-size:14px;text-align:center;overflow-wrap:anywhere}}