:root{font-family:Arial,Helvetica,sans-serif;color:#26272a;background:#f5f4ef;--red:#df4835;--line:#deded7;--muted:#74756f}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:1800px;padding:26px 32px;margin:auto}header{display:flex;align-items:center;gap:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}.brand{color:inherit;font-size:24px;font-weight:900;letter-spacing:-1.5px;text-decoration:none}.brand span{border:2px solid;padding:1px 3px;margin-left:2px}.brand i{display:inline-block;width:6px;height:6px;background:var(--red);margin:0 0 13px 6px}.studio-wordmark{font:700 13px monospace;letter-spacing:2px}.local{margin-left:auto;color:var(--muted);font-size:11px}.intro{display:flex;align-items:baseline;gap:24px;padding:27px 0}h1{margin:0;font-size:34px;letter-spacing:-1.5px}h1 span{color:var(--red)}.intro p{font-size:13px;color:var(--muted);margin:0}.studio{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}.stage-column{min-width:0;background:#ebece6;border:1px solid var(--line);border-radius:6px;overflow:hidden}.stage-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:10px}#dimensions{font:11px monospace;letter-spacing:1px;color:#62655e}.history{display:flex;gap:5px}.workspace{padding:0 20px}.canvas-scroll{overflow:auto;background:#171c24;border:1px solid #c8ccc9;border-radius:4px}#canvas-size{position:relative;box-sizing:border-box;width:100%;padding:12% 14%;line-height:0;background:#171c24}.art-surface{position:relative;width:100%;background:repeating-conic-gradient(#303642 0% 25%,#242a35 0% 50%) 50% / 12px 12px}canvas{width:100%;height:auto;aspect-ratio:8/3;display:block;image-rendering:pixelated;touch-action:none;cursor:crosshair}.cover-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}#cover-rim{display:none}#cover-opening{stroke-opacity:.25;stroke-width:1}#cover-render{position:absolute;max-width:none;color:#c7d4df;opacity:.35;pointer-events:none;user-select:none;z-index:2}#cover-render rect,#cover-render path{vector-effect:non-scaling-stroke}.canvas-caption{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;color:#6e726b;font-size:10px}#grid-label{margin-right:auto}.canvas-caption label{font-size:10px;gap:4px}#cover-opacity{width:60px}.stage-bottom{border-top:1px solid #d8dad2;padding:17px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}#status{font-size:11px;color:#6d716a;flex:1;min-width:160px;text-align:right}.inspector{background:#fffefa;border:1px solid var(--line);border-radius:6px;overflow:hidden}.modes{display:grid;grid-template-columns:repeat(3,1fr);padding:7px;gap:5px;border-bottom:1px solid var(--line)}button,select,input,textarea{font:inherit}button,select{min-height:38px;padding:8px 10px;background:transparent;border:1px solid #d8dad3;border-radius:4px;color:#32352f;font-size:12px;cursor:pointer}button:hover{background:#eeeee8}button:disabled{opacity:.35;cursor:default}button[aria-pressed=true]{background:#272b29;color:#fff;border-color:#272b29}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,canvas:focus-visible{outline:2px solid #bd4536;outline-offset:3px}label{display:inline-flex;align-items:center;gap:9px;font-size:12px}input[type=range]{width:110px;min-width:50px;accent-color:#6c756b}input[type=color]{width:30px;height:30px;padding:1px;border:1px solid #d6d8d1;background:none;border-radius:3px}input[type=checkbox]{accent-color:#353c33}textarea,input[type=number]{border:1px solid #d8dad3;border-radius:4px;background:#fff;padding:10px}textarea{resize:vertical;width:100%;min-height:65px;line-height:1.5}input[type=number]{width:115px}.mode-panel{padding:20px;min-height:210px}h2{font-size:16px;font-weight:600;letter-spacing:-.3px;margin:0 0 18px}.toolset{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.control-row,.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0}.stack{display:flex;flex-direction:column;align-items:stretch;gap:7px;flex:1;min-width:0}.stack select{width:100%;min-width:0}.hint,.small{font-size:11px;color:#777d73;line-height:1.6}.hint{margin:12px 0 0}.quiet{border:0;color:#777d73;min-height:34px;padding-left:0;font-size:11px}.position{border-top:1px solid #eee;padding-top:14px;margin-top:16px;display:grid;gap:12px}.position label{justify-content:space-between}.label{font:10px monospace;letter-spacing:1px;color:#777d73}.layer-section{padding:18px 20px;border-top:1px solid var(--line)}.layer-section h2{font-size:12px;margin-bottom:10px;display:flex;justify-content:space-between}.layer-section h2 span{font-size:10px;color:#8b9087;font-weight:normal}.layer-row{display:grid;grid-template-columns:22px 1fr;align-items:center;gap:0 6px;padding:3px 0}.layer-row button{text-align:left;border:0;min-height:32px;padding:6px 9px}.layer-row button[aria-pressed=true]{background:#edeee7;color:#2c3028}.layer-opacity{display:none;grid-column:2;font-size:10px;padding:9px;justify-content:space-between}.layer-row.selected .layer-opacity{display:flex}.background-color{display:flex;justify-content:space-between;margin-top:12px;font-size:11px}.export-section{padding:18px 20px;border-top:1px solid var(--line)}.primary{width:100%;background:var(--red);border-color:var(--red);color:#fff;font-weight:bold}.primary:hover{background:#c73c2c}.project-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}details{font-size:12px;margin-top:18px;padding:16px 0;border-top:1px solid var(--line);line-height:1.6}summary{cursor:pointer;color:#666e62}.cover-controls{display:flex;gap:18px;flex-wrap:wrap;margin-top:15px}.cover-controls p{flex:1;min-width:200px;font-size:11px}footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0;font-size:10px;color:#83877e;line-height:1.6}footer>span:first-child{font-family:monospace;letter-spacing:1px}footer a{color:inherit;white-space:nowrap}#text-selection{position:absolute;border:1px dashed #7dcfff;z-index:5;cursor:move;touch-action:none;min-width:12px;min-height:12px}#text-resize{position:absolute;right:-13px;bottom:-13px;width:26px;height:26px;min-height:26px;padding:0;background:#d9f2ff;color:#173747;border:1px solid #64b6e5;border-radius:4px;cursor:nwse-resize;touch-action:none}dialog{width:min(920px,94vw);max-height:92vh;overflow:auto;border:1px solid #cbd0d5;border-radius:6px;padding:24px;color:#262830}dialog::backdrop{background:#111827aa}.photo-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.photo-header h2{margin:0}#photo-preview{width:100%;height:auto;aspect-ratio:auto;border:1px solid #b7bdc5;cursor:grab;touch-action:none}.photo-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0}.photo-controls label{flex-wrap:wrap}.photo-controls input{flex:1}.photo-controls output{min-width:42px}#photo-apply{width:auto;margin-left:auto}@media(min-width:1200px){.stage-column{position:sticky;top:20px}}@media(max-width:1000px){main{padding:20px}.studio{grid-template-columns:1fr}.inspector{display:grid;grid-template-columns:1fr 1fr}.modes{grid-column:1/-1}.mode-panel{grid-row:2/4}.layer-section{border-top:0;border-left:1px solid var(--line)}.export-section{grid-column:2;border-left:1px solid var(--line)}.stage-column{position:static}}@media(max-width:600px){main{padding:16px 12px}.local{display:none}header{gap:15px}.studio-wordmark{font-size:11px}.intro{display:block;padding:22px 0}.intro p{margin-top:8px}h1{font-size:30px}.workspace{padding:0 10px}.stage-toolbar{padding:10px}.history button{font-size:10px;padding:5px;min-height:32px}.inspector{display:block}.layer-section,.export-section{border-left:0;border-top:1px solid var(--line)}#status{text-align:left}.stage-bottom{padding:14px 10px}footer{flex-wrap:wrap;gap:8px}.photo-controls{grid-template-columns:1fr}dialog{padding:16px}}

.layer-row{grid-template-columns:26px 22px 1fr}.layer-opacity{grid-column:3}.layer-row .layer-handle{padding:0;text-align:center;font-size:20px;color:#8a9184;cursor:grab;touch-action:none}.layer-row.dragging{background:#eef0e7;outline:1px dashed #9aa690}.layer-row.dragging .layer-handle{cursor:grabbing}.layer-lock{font-size:12px;text-align:center;color:#9a9e95}

.layer-row.drop-before{box-shadow:0 -3px 0 #df4835}.layer-row.dragging{opacity:.55}.layer-row .layer-handle{min-width:28px;min-height:36px;user-select:none;-webkit-user-select:none}

.keep-creating{border-top:1px solid var(--line);padding:25px 0 10px;margin-top:16px}.keep-creating h2{font-size:19px;margin-bottom:8px}.keep-creating p{font-size:12px;color:#74796e;line-height:1.6;max-width:760px}.creative-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}.creative-links a{display:flex;flex-direction:column;gap:9px;padding:17px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:#353a31}.creative-links a:hover{background:#eeeee7;border-color:#aeb5a6}.creative-links a:focus-visible{outline:2px solid var(--red);outline-offset:3px}.creative-links strong{font-size:13px}.creative-links span{font-size:12px;color:#74796e;line-height:1.5}.keep-creating .creative-tip{font-size:11px}@media(max-width:600px){.creative-links{grid-template-columns:1fr}}

.upload-help-link{display:block;font-size:11px;text-align:center;color:#68715f;margin:12px 0;text-underline-offset:3px}.phone-guide{border-top:1px solid var(--line);margin-top:28px;padding:32px 0;scroll-margin-top:20px}.guide-heading h2{font-size:28px;letter-spacing:-.8px;margin:12px 0}.guide-heading p,.phone-guide p{font-size:13px;line-height:1.65;color:#6a7265}.guide-prep{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:28px 0;padding:0}.guide-prep li,.guide-step-title,.guide-finish{display:flex;align-items:flex-start;gap:15px}.step-number{flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;background:#2e352c;color:#fff;font:bold 14px monospace;border-radius:3px}.phone-guide h3{font-size:16px;margin:3px 0 8px;letter-spacing:-.2px}.phone-guide p{margin:0}.guide-prep a{color:#ae3526}.guide-screens{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:980px;margin:0 auto}.guide-screens article{background:#eeeee8;border:1px solid var(--line);border-radius:5px;padding:24px}.guide-step-title{min-height:120px}.guide-phone{position:relative;max-width:270px;margin:auto;line-height:0;background:#000;border-radius:13px;overflow:hidden}.guide-phone img{display:block;width:100%;height:auto}.guide-screens figure{margin:18px 0 0}.guide-screens figcaption{text-align:center;font-size:11px;line-height:1.8;color:#677060;margin-top:15px}.guide-highlight{position:absolute;border:2px solid #ff6751;box-shadow:0 0 0 1px #0008;border-radius:6px;pointer-events:none}.guide-highlight b{position:absolute;left:-9px;top:-10px;background:#e04732;color:white;font:bold 10px monospace;line-height:18px;text-align:center;width:18px;height:18px;border-radius:2px}.picture-highlight{left:45%;top:89.8%;width:10%;height:3.5%}.files-highlight{left:65.5%;top:41.2%;width:30.2%;height:3.5%}.add-highlight{left:4%;top:46.5%;width:92%;height:5%}.save-highlight{left:85%;top:33%;width:12%;height:2.6%}.guide-finish{max-width:980px;margin:25px auto 0;padding:22px;background:#eeeee8;border:1px solid var(--line);border-radius:4px}.guide-finish .guide-celebrate{margin-top:9px;font-weight:bold;color:#383f32}.phone-guide .guide-platform{font-size:11px;margin:16px auto 0;max-width:980px;color:#808777}@media(max-width:650px){.guide-prep,.guide-screens{grid-template-columns:1fr;gap:20px}.guide-screens article{padding:18px}.guide-step-title{min-height:0}.guide-heading h2{font-size:25px}}