:root{--color-1:#011d4f!important;--color-2:#7bc7f8!important;--color-3:#55b0f7!important;--color-4:#01061a!important;--color-5:#a2dbf8!important;--paper:#020f2f!important;--ink:#ccf0fc!important;--hair:#315d8b!important;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}html body{height:100dvh;display:grid;grid-template-rows:72px minmax(0,1fr) 36px;overflow:hidden;background:#01061a!important;color:#ccf0fc!important}html header,html footer{max-width:none;margin:0;background:#020f2f!important;color:#a2dbf8!important;border-color:#315d8b!important;padding:12px 24px}html header{gap:18px}html header small{color:#a2dbf8!important;font-size:11px}html .brand{display:flex;align-items:baseline;font-size:28px;letter-spacing:-1px;color:#ccf0fc!important}html .brand span{color:#7bc7f8!important}html .brand em{font:inherit;font-style:normal;font-weight:500;color:#ccf0fc!important}html .workspace{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:0;overflow:hidden}html .controls{grid-column:2;grid-row:1;overflow:auto;padding:24px!important;background:#020f2f!important;border:0;border-inline-start:1px solid #315d8b;scrollbar-color:#3c94eb #020f2f}html .controls section{background:transparent!important;border:0;padding:0;margin:0}html .controls h2{display:none}html .controls label{font-size:12px;color:#ccf0fc!important;margin:18px 0 8px}html .controls .select-source{display:none}html small,html .hint,html .disclaimer,html .stamp-caption{color:#a2dbf8!important}html .hint{font-size:11px;line-height:1.6}html button{min-height:40px;padding:10px 14px;border:1px solid #315d8b;border-radius:10px;background:#011d4f;color:#ccf0fc;font:600 12px/1.4 ui-sans-serif,system-ui,sans-serif;box-shadow:none;opacity:1;cursor:pointer}html button:hover:not(:disabled){background:#023b8c;color:#ccf0fc;border-color:#7bc7f8}html button:disabled{background:#011d4f;color:#a2dbf8;border:1px dashed #315d8b;opacity:1;cursor:not-allowed}html button.secondary{background:transparent;color:#a2dbf8;border:1px solid #315d8b}html :is(button,input,select,summary,a,canvas):focus-visible{outline:3px solid #7bc7f8!important;outline-offset:3px;box-shadow:0 0 0 2px #01061a}html .studio-nav,html .tabs{display:flex;gap:4px;padding:4px;margin:0 0 22px!important;border:1px solid #315d8b;border-radius:14px;background:#01061a}html .studio-nav button,html .tabs button{flex:1;min-width:0;min-height:40px;padding:10px 5px;border:1px solid transparent;border-radius:10px;background:transparent;color:#a2dbf8;font-size:12px;box-shadow:none}html .studio-nav button[aria-selected=true],html .tabs button[aria-pressed=true],html .patterns button[aria-pressed=true]{background:#011d4f;color:#ccf0fc;border-color:#7bc7f8;box-shadow:inset 0 -2px #7bc7f8}html input[type=text],html select,html .range-number,html input[type=color]{background:#011d4f!important;color:#ccf0fc!important;border:1px solid #315d8b!important;border-radius:10px;padding:10px;font-size:12px}html input[type=text],html select,html input[type=color]{min-height:44px}html option{background:#011d4f;color:#ccf0fc}html input::placeholder{color:#a2dbf8;opacity:1}html input[type=range],html input[type=checkbox]{accent-color:#55b0f7}html .range-number{float:inline-end;width:66px;min-height:32px;margin-top:-6px;padding:5px 8px}html output{display:none}html .controls input[type=range]{clear:both;margin:16px 0 24px;height:20px}html .font-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:12px}html .patterns{gap:8px}html .patterns button{min-height:76px;background:#011d4f;color:#a2dbf8;border:1px solid #315d8b;border-radius:10px;padding:12px 4px}html summary{display:block;min-height:40px;padding:11px 12px;border:1px solid #315d8b;border-radius:10px;background:#011d4f;color:#a2dbf8;font-size:12px}html #symbols{padding:8px;background:#01061a;border:1px solid #315d8b;border-radius:14px}html #symbols .symbol-tabs button{min-height:40px;padding:8px 4px!important;border-radius:10px!important;background:#011d4f!important;color:#a2dbf8!important;border:1px solid transparent;font-size:11px!important}html #symbols .symbol-tabs button[aria-selected=true]{background:#011d4f!important;color:#ccf0fc!important;border-color:#7bc7f8;box-shadow:inset 0 -2px #7bc7f8}html #symbols .symbol-grid button{min-height:40px;margin:0;background:#011d4f;color:#ccf0fc;border-radius:10px;font-size:18px}html .live-mark{overflow:hidden;margin:20px 0;border:1px solid #315d8b;border-radius:14px;background:#01061a}html .live-mark>.eyebrow{display:block;padding:12px 14px;color:#a2dbf8;background:#020f2f;font:10px system-ui;letter-spacing:1.5px}html .mark-sample{display:flex;align-items:center;justify-content:center;gap:10px;min-height:110px;padding:20px;overflow:hidden;background:#7bc7f8;background-image:conic-gradient(#a2dbf8 25%,transparent 0 50%,#a2dbf8 0 75%,transparent 0);background-size:16px 16px}html .mark-sample span{font-size:25px;overflow-wrap:anywhere;text-shadow:1px 1px #01061a,-1px -1px #ccf0fc!important}html .mark-sample img{max-width:64px;max-height:56px;object-fit:contain;filter:drop-shadow(1px 1px #01061a) drop-shadow(-1px -1px #ccf0fc)}html .live-mark small{display:block;padding:10px 14px;font-size:10px}html .remember{border-top:1px solid #315d8b;padding-top:18px}html .drop{background:#011d4f!important;color:#ccf0fc!important;border:1px dashed #7bc7f8;border-radius:14px;padding:22px 14px}html .downloads{display:grid;gap:10px;margin-top:24px}html .downloads button{min-height:46px;border-radius:10px}html #download:not(:disabled),html .choose-photos{background:#55b0f7;color:#01061a;border-color:#55b0f7}html #download:hover:not(:disabled),html .choose-photos:hover{background:#7bc7f8;color:#01061a;border-color:#7bc7f8}html #status{color:#ccf0fc;font-size:12px;overflow-wrap:anywhere}html #status:not(:empty){padding:12px;border:1px solid #315d8b;border-radius:10px;background:#011d4f}html .disclaimer{font-size:10px;margin-top:24px}html .preview-workspace{grid-column:1;grid-row:1;min-height:0;min-width:0;padding:0 28px 20px;background-color:#01061a!important;background-image:radial-gradient(#315d8b55 .8px,transparent .8px)!important;background-size:20px 20px!important}html .preview-top{padding:20px 0!important;justify-content:flex-end!important}html .add-photos{background:#011d4f;color:#ccf0fc;border:1px solid #315d8b;border-radius:10px;font-size:12px}html .stage{min-height:0;padding:20px;background:transparent!important}html #empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px!important;width:min(520px,100%)!important;min-height:280px!important;padding:32px!important;margin:0!important;border:1px dashed #315d8b!important;border-radius:20px;background:#020f2f!important;transform:none!important;box-shadow:none!important;color:#a2dbf8}html #empty:before{display:none!important}html #empty strong{max-width:340px;font:600 clamp(24px,3vw,34px)/1.2 system-ui!important;letter-spacing:-1px;color:#ccf0fc}html .stage canvas{border:6px solid #020f2f;border-radius:6px;box-shadow:0 18px 60px #0006;background-color:#fff}html .filmstrip{display:grid;grid-template-columns:1fr auto;gap:10px;flex-shrink:0;padding:16px;margin:18px 0 0;background:#020f2f;border:1px solid #315d8b;border-radius:14px}html .filmstrip h2{font-size:12px;margin:0;color:#ccf0fc}html .filmstrip .drop{grid-column:2;grid-row:1;margin:0;padding:10px 14px;border-style:solid;font-size:11px}html .filmstrip .drop .hint,html .filmstrip .drop input,html .filmstrip>p{display:none}html .filmstrip #photoList{grid-column:1/-1;min-width:0;flex-wrap:nowrap;overflow:auto;padding:4px;margin:0}html .filmstrip .image-tools{grid-column:1/-1;margin:0;justify-content:space-between}html .filmstrip .image-tools button{min-height:40px;padding:8px 14px;border:1px solid #315d8b;border-radius:10px;background:transparent;color:#a2dbf8}html .thumbs button{border:2px solid #315d8b;border-radius:10px;background:#011d4f}html .thumbs button[aria-pressed=true]{border-color:#7bc7f8;outline:1px solid #7bc7f8;outline-offset:2px}html #logoList button{background:#ccf0fc}html #logoList img{filter:drop-shadow(0 0 1px #01061a) drop-shadow(0 0 1px #01061a)}html footer{padding:8px 24px;font-size:10px}html .language-control{margin:0;min-width:110px;max-width:190px}html .language-control span{font-size:10px;color:#a2dbf8}html .language-control select{margin-top:3px;min-height:36px;padding:6px 8px;font-size:12px}html .locale-note{padding:8px 10px;margin:0 0 18px;border:1px solid #315d8b;border-radius:10px;background:#011d4f;color:#a2dbf8;font:11px/1.5 system-ui}html ::selection{background:#7bc7f8;color:#01061a}[hidden]{display:none!important}@media(max-width:800px){html body{display:block;height:auto;overflow:auto;min-height:100dvh}html header{position:sticky;top:0;z-index:4;min-height:76px;height:auto;padding:10px 14px}html header small{display:none}html .workspace{display:flex;flex-direction:column;overflow:visible}html .preview-workspace{position:relative;top:auto;order:-1;height:520px;min-height:360px;padding:0 14px 16px}html .stage{padding:8px}html #empty{min-height:230px!important;padding:24px!important}html .controls{overflow:visible;padding:24px 18px!important;border:0;border-top:1px solid #315d8b}html .controls section,html .studio-nav,html .locale-note{max-width:520px;margin-inline:auto!important}html .studio-nav{position:sticky;top:76px;z-index:3}html footer{flex-direction:column;gap:8px;padding:16px}}@media(prefers-reduced-motion:no-preference){html button{transition:background-color .16s,border-color .16s,color .16s}}@media(forced-colors:active){html button[aria-selected=true],html button[aria-pressed=true]{outline:2px solid Highlight}}
