:root{color:#192039;background:#f3f5f9;font:16px system-ui,sans-serif}*{box-sizing:border-box}body{margin:0}header{background:#fff;border-bottom:1px solid #dce2ef;justify-content:space-between;padding:16px max(16px,4vw);display:flex}a{color:#304ed1;font-weight:700}main{padding:24px max(16px,4vw)}h1{margin:0;font-size:clamp(1.6rem,4vw,2.4rem)}.lead,p{color:#526078;line-height:1.45}.editor{grid-template-columns:1.15fr .9fr 1fr;align-items:start;gap:14px;display:grid}.panel{background:#fff;border:1px solid #dce2ef;border-radius:16px;min-width:0;padding:15px}.panel h2{margin:0 0 14px;font-size:1.1rem}label{gap:5px;margin:8px 0;font-size:.88rem;font-weight:650;display:grid}input,select,button{font:inherit;accent-color:#3856dd;max-width:100%}button,select,input[type=number]{color:inherit;background:#f7f9ff;border:1px solid #c9d3e5;border-radius:8px;padding:8px}button{cursor:pointer;min-height:42px}button:disabled{opacity:.45;cursor:default}.primary,button[aria-pressed=true]{color:#fff;background:#3856dd}.bar{flex-wrap:wrap;gap:6px;margin:10px 0;display:flex}canvas{max-width:100%;display:block}.panel>canvas{background:repeating-conic-gradient(#e5e9f2 0% 25%,#f8f9fc 0% 50%) 0/16px 16px;border-radius:8px;width:100%;height:auto}#source{touch-action:none;cursor:crosshair}#viewer{background:#eef1f9;border-radius:9px;height:270px;overflow:hidden}.dimensions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.dimensions input{width:100%;min-width:0}input[type=color]{background:0 0;border:0;width:42px;height:38px}.panel p{font-size:.86rem}#status[data-error=true]{color:#a52238}@media (width<=960px){.editor{grid-template-columns:1fr 1fr}}@media (width<=640px){.editor{grid-template-columns:1fr}}[hidden]{display:none!important}#processedFrame{background:repeating-conic-gradient(#e5e9f2 0% 25%,#f8f9fc 0% 50%) 0/16px 16px;border-radius:8px;position:relative;overflow:hidden}#processed{width:100%;height:auto}#channelGuide{pointer-events:none;border-top:2px dashed #fff;position:absolute;box-shadow:0 -1px #304ed1,0 1px #304ed1}#channelGuide[data-vertical=true]{border-top:0;border-left:2px dashed #fff;box-shadow:-1px 0 #304ed1,1px 0 #304ed1}.body-color{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.check{align-items:center;gap:8px;min-height:40px;display:flex}.check input{width:18px;height:18px}.views button{min-height:36px;font-size:.85rem}#viewer{position:relative}#viewerHint{text-align:center;place-items:center;margin:0;padding:16px;display:grid;position:absolute;inset:0}#viewer[data-ready=false] canvas{visibility:hidden}#finishedFace{background:repeating-conic-gradient(#e5e9f2 0% 25%,#f8f9fc 0% 50%) 0/16px 16px;border-radius:8px;width:100%;height:auto}#printSlots{padding-inline-start:1.6em;font-size:.88rem}#printSlots li{margin-block:5px}.print-swatch{vertical-align:-.12em;border:1px solid #79859e;border-radius:3px;width:1em;height:1em;display:inline-block}#warnings{color:#75521b;background:#fff4de;border-radius:8px;padding:8px 10px}#channelHint{margin:4px 0 12px}#channelHint[data-error=true]{color:#a52238}.channel-offset{background:#f3f5f9;border:1px solid #dce2ef;border-radius:12px;margin-top:12px;padding:10px 12px 2px}.channel-offset-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.channel-offset-heading label{margin:0}#channelOffsetValue{color:#304ed1;text-align:center;font-variant-numeric:tabular-nums;background:#fff;border:1px solid #dce2ef;border-radius:8px;min-width:3rem;padding:3px 8px;font-size:.86rem;font-weight:650}#channelPosition{appearance:none;cursor:pointer;background:0 0;width:100%;height:44px;margin:0;display:block}#channelPosition::-webkit-slider-runnable-track{background:linear-gradient(to right,#3856dd var(--channel-fill,52.86%),#dce2ef var(--channel-fill,52.86%));border-radius:99px;height:5px}#channelPosition::-webkit-slider-thumb{appearance:none;background:#fff;border:1px solid #c9d3e5;border-radius:50%;width:24px;height:24px;margin-top:-9.5px;box-shadow:0 2px 5px #19203926}#channelPosition::-moz-range-track{background:#dce2ef;border-radius:99px;height:5px}#channelPosition::-moz-range-progress{background:#3856dd;border-radius:99px;height:5px}#channelPosition::-moz-range-thumb{background:#fff;border:1px solid #c9d3e5;border-radius:50%;width:22px;height:22px;box-shadow:0 2px 5px #19203926}#channelPosition:focus-visible{outline-offset:2px;border-radius:8px;outline:2px solid #3856dd}#channelPosition:disabled{opacity:.45;cursor:default}input[aria-invalid=true]{border-color:#a52238}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}main{max-width:1660px;margin-inline:auto;padding-inline:clamp(12px,3vw,48px)}h1{letter-spacing:-.04em;font-weight:760}header{align-items:center;gap:12px}header a{text-decoration:none}header span{color:#526078;font-size:.84rem}.editor{grid-template:"source preview model""colors preview model"1fr/minmax(235px,.85fr) minmax(300px,1.65fr) minmax(260px,1fr);gap:16px}.source-panel{grid-area:source}.colors-panel{grid-area:colors}.preview-panel{grid-area:preview;position:sticky;top:16px}.model-panel{grid-area:model}.paracord-help{max-width:76ch;margin-top:16px}.panel{border-radius:18px;padding:16px;box-shadow:0 3px 12px #19203909}.panel h2{letter-spacing:-.025em;font-weight:720}.preview-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;display:flex}.preview-heading h2,.preview-heading .bar{margin:0}#viewer{background-color:#eef1f9;border:1px solid #dce2ef;border-radius:14px;height:clamp(330px,52vh,620px)}#viewer[data-ready=false]{background-image:radial-gradient(#c9d3e5 1px,#0000 1px);background-size:20px 20px}#viewerHint{color:#526078;font-weight:600}.preview-actions{grid-template-columns:1fr 1fr;margin:12px 0 0;display:grid}button,select,input[type=number]{border-radius:11px;min-height:44px;padding:8px 11px}button{background:#eef1f9;border-color:#0000;font-weight:650}button:not(:disabled):hover{filter:brightness(.96)}button:not(:disabled):active{transform:translateY(1px)}.preview-actions #build:not(:disabled){color:#304ed1}select,input[type=number]{background-color:#f3f5f9}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23526078' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 9px center;background-repeat:no-repeat;padding-right:30px}button:focus-visible,select:focus-visible,input:focus-visible{outline-offset:2px;outline:2px solid #3856dd}.views{background:#eef1f9;border-radius:12px;flex-wrap:nowrap;gap:3px;padding:3px}.views button{color:#526078;background:0 0;min-height:44px;padding:5px 8px}.views button[aria-pressed=true]{color:#192039;background:#fff;box-shadow:0 1px 4px #19203923}.check{justify-content:space-between;gap:10px;min-height:44px}.check input{appearance:none;cursor:pointer;background:#aab5c8;border:0;border-radius:20px;flex:none;order:1;width:46px;height:27px;margin:0;position:relative}.check input:after{content:"";background:#fff;border-radius:50%;width:21px;height:21px;position:absolute;top:3px;left:3px;box-shadow:0 1px 4px #19203930}.check input:checked{background:#3856dd}.check input:checked:after{transform:translate(19px)}#upload::file-selector-button{color:#304ed1;min-height:44px;font:inherit;cursor:pointer;background:#eef1f9;border:0;border-radius:10px;margin-right:8px;padding:6px 10px;font-weight:650}@media (width<=1040px){.editor{grid-template:"source preview""colors preview""model preview"1fr/minmax(0,1fr) minmax(0,1fr)}}@media (width<=640px){.editor{grid-template:"source""preview""colors""model"/minmax(0,1fr);gap:12px}.preview-panel{position:static}#viewer{height:clamp(230px,42vh,420px)}.preview-heading .views{width:100%}.views button{flex:1}select,input[type=number]{font-size:16px}}
