/* Structure Toolkit. (c) 2026 Applied Sciences and AI (ASAI). All rights reserved. */
@font-face{font-family:"Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Sans";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Arabic";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Arabic";font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Serif";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-serif-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-serif-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Serif";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-serif-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/ibm-plex-serif-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}

:root{
  --ink:#10283a; --ink-2:#465b6b; --ink-3:#6d7f8c;
  --page:#edf1f4; --paper:#ffffff; --line:#d3dce3; --line-2:#e6ecf0; --soft:#f5f8fa;
  --navy:#0b2f4a; --teal:#14677f; --teal-soft:#e3f1f3;
  --ok:#1b7450; --warn:#955a00; --warn-bg:#fdf1d8; --bad:#b0271f; --bad-bg:#fbe6e3;
  --sans:"Plex Sans","Plex Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Plex Serif","Plex Arabic",Georgia,"Times New Roman",serif;
  --mono:"Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --w:78rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 1rem/1.55 var(--sans)}
[dir=rtl] body{font-family:"Plex Arabic","Plex Sans",system-ui,sans-serif;line-height:1.8}
a{color:var(--teal)} a:hover{color:var(--navy)}
:focus-visible{outline:3px solid #ffc46b;outline-offset:2px;border-radius:3px}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}

.top,main,.foot{max-width:var(--w);margin-inline:auto;padding-inline:1.25rem}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem}
/* ASAI text logo, the same as on Research Output Report */
.logo{display:inline-flex;align-items:center;gap:12px;direction:ltr;text-decoration:none;user-select:none}
.logo-mark{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1}
.logo-mark .l1{color:#0b2545}.logo-mark .l2{color:#1f5fbf}
.logo-rule{width:2px;height:30px;background:#cfd6e0}
.logo-text{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;color:#0b2545;line-height:1.35;text-transform:uppercase;white-space:nowrap}
.lang{display:flex;flex:none;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}
.lang button{border:0;background:none;padding:.35rem .7rem;font-size:.875rem;color:var(--ink-2);cursor:pointer}
.lang button[aria-pressed=true]{background:var(--navy);color:#fff}

.intro{padding-block:1.4rem 1.2rem;max-width:50rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);margin:0 0 1rem}
.brand-name{font:600 1.15rem/1 var(--sans);letter-spacing:-.01em}
.brand-tag{color:var(--ink-3);font-size:.9rem;border-inline-start:1px solid var(--line);padding-inline-start:.6rem}
h1{font:500 clamp(1.7rem,3.8vw,2.4rem)/1.15 var(--serif);letter-spacing:-.015em;margin:0 0 .7rem;color:var(--navy);text-wrap:balance}
[dir=rtl] h1{font-family:"Plex Arabic",sans-serif;font-weight:600;line-height:1.4;letter-spacing:0}
.lede{margin:0;color:var(--ink-2);font-size:1.05rem;max-width:46rem}

.btn{font:500 .95rem/1 var(--sans);padding:.7rem 1.05rem;border-radius:6px;border:1px solid var(--line);background:var(--paper);color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
[dir=rtl] .btn{font-family:"Plex Arabic","Plex Sans",sans-serif}
.btn:hover{border-color:var(--teal)}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.primary:hover{background:var(--teal);border-color:var(--teal)}
.btn:disabled{opacity:.45;cursor:default;border-color:var(--line)}
.btn.quiet{border-color:transparent;background:none;color:var(--teal);text-decoration:underline;text-underline-offset:3px;padding-inline:.4rem}
.btn.small{padding:.5rem .75rem;font-size:.875rem}
.msg{margin:.8rem 0 0;padding:.65rem .85rem;border-radius:6px;background:var(--warn-bg);color:#5c3900;font-size:.92rem}
.msg.bad{background:var(--bad-bg);color:#6d1711}

/* opening a file */
.drop{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;background:var(--paper);border:1.5px dashed #b4c2cc;border-radius:10px;padding:1.3rem 1.5rem}
.drop.over{border-color:var(--teal);background:var(--teal-soft)}
.drop-title{font:500 1.2rem/1.3 var(--serif);margin:0;color:var(--navy)}
[dir=rtl] .drop-title{font-family:"Plex Arabic",sans-serif;font-weight:600}
.drop-sub{margin:.25rem 0 0;color:var(--ink-3);font-size:.9rem}
.drop-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.paste{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin-top:.7rem}
.paste label{font-weight:500;font-size:.92rem}
.paste textarea{display:block;width:100%;margin-top:.4rem;border:1px solid var(--line);border-radius:6px;padding:.6rem .7rem;font:400 .84rem/1.5 var(--mono);resize:vertical;text-align:left}
.paste-row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.7rem}
.paste-row select{padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;background:var(--paper)}
.examples{margin:.8rem 0 0;font-size:.92rem;color:var(--ink-3)}
.examples button{border:0;background:none;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.1rem .3rem;font-size:.92rem}

/* the workspace */
.work{margin-top:1.6rem}
.filebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem}
.fileinfo{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;min-width:0}
.fname{font:500 1.15rem/1.3 var(--serif);color:var(--navy);overflow-wrap:anywhere}
.ffmt{color:var(--ink-3);font-size:.9rem}
.filebtns{display:flex;gap:.4rem}
.notes{list-style:none;margin:.7rem 0 0;padding:.65rem .9rem;background:var(--warn-bg);color:#5c3900;border-radius:6px;font-size:.9rem;display:grid;gap:.25rem}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 25rem;gap:1.1rem;margin-top:.9rem;align-items:start}
.stage{background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:sticky;top:.8rem}
.vbar{display:flex;flex-wrap:wrap;gap:.45rem .9rem;align-items:center;padding:.55rem .7rem;border-bottom:1px solid var(--line-2);background:var(--soft)}
.vgroup{display:inline-flex;flex-wrap:wrap;max-width:100%;align-items:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--paper)}
.vgroup .vlabel{padding:0 .55rem;font-size:.8rem;color:var(--ink-3);white-space:nowrap}
.vgroup button{border:0;border-inline-start:1px solid var(--line-2);background:none;padding:.42rem .62rem;font-size:.84rem;color:var(--ink-2);cursor:pointer;line-height:1.2;white-space:nowrap}
.vgroup button:first-child{border-inline-start:0}
.vgroup button:hover{background:var(--teal-soft);color:var(--navy)}
.vgroup button[aria-pressed=true]{background:var(--navy);color:#fff}
.vgroup button[data-view=a],.vgroup button[data-view=b],.vgroup button[data-view=c]{font:italic 500 .95rem var(--serif);padding-inline:.7rem}
.vbar{position:relative}
.menu{position:absolute;inset-inline-end:.7rem;top:calc(100% - .2rem);z-index:5;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(11,47,74,.16);padding:.3rem;display:grid;min-width:15rem}
.menu button{border:0;background:none;text-align:start;padding:.55rem .7rem;border-radius:5px;cursor:pointer;font-size:.9rem;color:var(--ink);display:grid;gap:.1rem}
.menu button:hover,.menu button:focus-visible{background:var(--teal-soft)}
.menu button small{color:var(--ink-3);font-size:.8rem}
.canvas-wrap{position:relative;height:min(68vh,38rem);min-height:21rem}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline-offset:-3px}
#view:active{cursor:grabbing}
.vhint{margin:0;padding:.5rem .8rem;border-top:1px solid var(--line-2);font-size:.8rem;color:var(--ink-3)}
.measure{margin:0;padding:0 .8rem .6rem;font-size:.92rem;color:var(--ink);min-height:1.3rem}
.measure:empty{display:none}
.measure b{font-weight:600;font-variant-numeric:tabular-nums}
.side{display:grid;gap:1.1rem;min-width:0}
.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1.05rem 1.15rem 1.15rem;min-width:0}
h2{font:600 1.05rem/1.3 var(--sans);margin:0 0 .75rem;color:var(--navy)}
[dir=rtl] h2,[dir=rtl] h3{font-family:"Plex Arabic",sans-serif}
.how>h2{font-size:1.3rem}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin:0;font-size:.92rem}
.facts dt{color:var(--ink-3)}
.facts dd{margin:0;font-variant-numeric:tabular-nums;text-align:end;overflow-wrap:anywhere}
.facts dd.formula{font-family:var(--serif);font-size:1.02rem}
.facts dd.alert{color:var(--bad);font-weight:500}
.facts sub{font-size:.72em}
.legend{list-style:none;margin:.85rem 0 0;padding:.75rem 0 0;border-top:1px solid var(--line-2);display:flex;flex-wrap:wrap;gap:.4rem .9rem;font-size:.9rem}
.legend li{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:.85rem;height:.85rem;border-radius:50%;border:1px solid rgba(0,0,0,.35);display:inline-block}
.legend b{font-weight:500}.legend span{color:var(--ink-3);font-variant-numeric:tabular-nums}
.tool{padding:.85rem 0;border-top:1px solid var(--line-2)}
.tool:first-of-type{border-top:0;padding-top:0}
h3{font:600 .92rem/1.3 var(--sans);margin:0 0 .5rem;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.row.tight{gap:.3rem;flex-wrap:nowrap}
input[type=number],.side select{color:var(--ink);font-size:.95rem;width:4.3rem;padding:.45rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff;font-variant-numeric:tabular-nums;text-align:center}
.side select{width:auto;text-align:start}
.row.tight input{width:3.3rem}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:.6rem .9rem;margin-bottom:.6rem;justify-content:start}
.fields.two{grid-template-columns:1fr 1fr;justify-content:stretch}
.fields label{display:grid;gap:.25rem;font-size:.82rem;color:var(--ink-3)}
.fields input[type=number]{width:100%;min-width:3.6rem}
.fields.two select{width:100%}
.tnote{margin:.45rem 0 0;font-size:.82rem;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.preview{margin:.2rem 0 .8rem;padding:.7rem .8rem;background:#0f2433;color:#dbe7ee;border-radius:6px;font:400 .76rem/1.5 var(--mono);max-height:15rem;overflow:auto;white-space:pre;text-align:left}

/* tabs on the side panel */
.tabs{display:flex;flex-wrap:wrap;gap:.1rem;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.3rem}
.tabs button{flex:1 1 auto;border:0;background:none;border-radius:7px;padding:.5rem .3rem;font-size:.84rem;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.tabs button:hover{background:var(--teal-soft);color:var(--navy)}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff}
.side>.msg{margin:0}
.row.gap{margin-top:.8rem}
h3.sub{margin-top:.9rem}
label.wide{display:grid;gap:.25rem;font-size:.82rem;color:var(--ink-3);margin-bottom:.6rem}
label.wide select{width:100%}
input.wide-n{width:4.9rem}
input.el-in{width:3.2rem;padding:.45rem .4rem;border:1px solid var(--line);border-radius:6px;text-align:center;font-size:.95rem;background:#fff}
.side .row{margin-bottom:.45rem}
.side .row:last-child{margin-bottom:0}
.chk{display:inline-flex;align-items:center;gap:.3rem;font-size:.9rem;white-space:nowrap}
.selinfo{margin:0 0 .55rem;font-size:.92rem;min-height:1.4rem}
.selinfo b{font-weight:600}
.slider{display:grid;grid-template-columns:8.5rem 1fr;align-items:center;gap:.6rem;font-size:.86rem;color:var(--ink-2);margin-bottom:.45rem}
.slider input{width:100%;accent-color:var(--teal)}
.elrow{display:grid;grid-template-columns:2.2rem 2.6rem 1fr auto;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.9rem}
.elrow input[type=color]{width:2.4rem;height:1.9rem;padding:0;border:1px solid var(--line);border-radius:5px;background:#fff;cursor:pointer}
.elrow input[type=number]{width:4.6rem}
.elrow span{color:var(--ink-3);font-size:.8rem}
.kbox{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:.1rem 0 .7rem;font-size:.86rem;color:var(--ink-2)}
.kbox label{display:inline-flex;align-items:center;gap:.4rem}
.kgrid{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.extra{margin:-.3rem 0 .8rem;padding:.5rem .7rem;background:var(--soft);border-radius:6px;font:400 .78rem/1.5 var(--mono);overflow-wrap:anywhere;text-align:left}
.frames{display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem;border-top:1px solid var(--line-2);background:var(--soft)}
.frames input{flex:1;accent-color:var(--teal)}
.frames span{font-size:.86rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.under-drop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem 1.5rem;margin-top:.8rem}
.under-drop .examples{margin:0}
.cod{display:flex;align-items:center;gap:.45rem;font-size:.9rem;color:var(--ink-3)}
.cod input{width:7rem;padding:.42rem .5rem;border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:.86rem;background:#fff}
.batch{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin-top:.8rem}
.batch ul{list-style:none;margin:0 0 .8rem;padding:0;display:grid;gap:.25rem;font-size:.9rem;max-height:14rem;overflow:auto}
.batch li{display:flex;gap:.6rem;justify-content:space-between;border-bottom:1px solid var(--line-2);padding:.2rem 0}
.batch li span:last-child{color:var(--ink-3);white-space:nowrap}
.batch li.bad span:last-child{color:var(--bad)}
.batch .row select{padding:.45rem .6rem;border:1px solid var(--line);border-radius:6px;background:#fff}
/* diffraction pattern */
.xrd{margin-top:1.1rem}
.xrd-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem}
.xrd-head h2{margin:0}
.xrd-head .row{gap:.5rem 1rem;font-size:.88rem;color:var(--ink-2)}
.xrd-head label{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.xrd select{padding:.42rem .5rem;border:1px solid var(--line);border-radius:6px;background:#fff}
.plot-wrap{position:relative;height:22rem;margin-top:.8rem}
#xPlot{position:absolute;inset:0;width:100%;height:100%;display:block}
.tip{position:absolute;pointer-events:none;background:#0f2433;color:#fff;border-radius:6px;padding:.4rem .6rem;font-size:.8rem;line-height:1.45;white-space:nowrap;box-shadow:0 6px 18px rgba(11,47,74,.25)}
.tip b{font-weight:600}
.tablewrap{margin-top:.9rem;max-height:17rem;overflow:auto;border:1px solid var(--line-2);border-radius:6px}
table.peaks{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
table.peaks th{position:sticky;top:0;background:var(--soft);text-align:end;font-weight:600;padding:.4rem .7rem;color:var(--ink-2)}
table.peaks td{text-align:end;padding:.3rem .7rem;border-top:1px solid var(--line-2)}
table.peaks td:last-child,table.peaks th:last-child{text-align:start}
table.peaks .ibar{display:inline-block;height:.5rem;background:var(--teal);border-radius:2px;vertical-align:middle;margin-inline-start:.4rem}
.btn.small.primary{padding:.5rem .9rem}
.how{margin-top:3.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
#howBody{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem;margin-top:1rem}
#howBody h3{font-size:1rem;margin:0 0 .35rem;color:var(--navy)}
#howBody p{margin:0;color:var(--ink-2);font-size:.94rem}
.foot{margin-top:3rem;padding-block:1.4rem 2.2rem;border-top:1px solid var(--line);color:var(--ink-3);font-size:.875rem}
.foot p{margin:.2rem 0}

@media (max-width:960px){
  .grid{grid-template-columns:1fr}
  .stage{position:static}
  .canvas-wrap{height:min(60vh,30rem)}
}
@media (max-width:560px){
  .brand-tag{display:none}
  .top{gap:.5rem}
  .logo-text{font-size:9.5px;letter-spacing:.1em}
  .lang button{padding:.32rem .5rem;font-size:.8rem}
  .drop{padding:1.1rem}
  .drop-actions .btn{flex:1 1 auto;justify-content:center}
  .canvas-wrap{height:22rem;min-height:0}
  .fields{grid-template-columns:1fr 1fr}
}
@media print{.lang,.loader,.vbar,.vhint,.how,.filebtns,.side,.frames{display:none!important} body{background:#fff}}