@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/sora-latin-wght-normal.woff2) format('woff2')}
:root{--bg:#0d0f15;--glass:#161922;--field:#1e222d;--gb:#2a2f3d;--ink:#eceef6;--mute:#8e95ab;--v:#6d5efc;--c:#5b8cff;--pop:#1b1f2b;--bar:rgba(13,15,21,.94);--r:16px;--ease:cubic-bezier(.34,1.56,.64,1);--grad:linear-gradient(135deg,#6d5efc,#4f8cff);color-scheme:dark}
:root{--ar:1.92}
:root:has(input[value="3-inch"]:checked){--ar:2.88}
[data-theme=light]{--bg:#f2f4f9;--glass:#fff;--field:#eef0f6;--gb:#dde1ec;--ink:#151a2e;--mute:#5f6889;--pop:#fff;--bar:rgba(255,255,255,.95);--v:#6d5efc;--c:#5b8cff;--grad:linear-gradient(135deg,#6d5efc,#4f8cff);color-scheme:light}
[data-theme=ocean]{--bg:#0a1620;--glass:#12202c;--field:#1a2c3a;--gb:#2a4050;--ink:#e6f1f8;--mute:#7fa0b5;--pop:#0e1a24;--bar:rgba(10,22,32,.95);--v:#14b8a6;--c:#38bdf8;--grad:linear-gradient(135deg,#0d9488,#0284c7);color-scheme:dark}
[data-theme=ember]{--bg:#1a100c;--glass:#261a14;--field:#33241c;--gb:#4a3528;--ink:#f5ebe4;--mute:#b89a88;--pop:#1f1510;--bar:rgba(26,16,12,.95);--v:#f59e0b;--c:#fb7185;--grad:linear-gradient(135deg,#f59e0b,#e11d48);color-scheme:dark}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Sora',system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;height:100%}
body{background:#07080c;color:var(--ink);font-size:clamp(13px,3.4vw,14px);min-height:100dvh;height:100dvh;overflow:hidden}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--c);outline-offset:2px}

.app-shell{height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;padding:0;background:
  radial-gradient(1200px 600px at 10% -10%,rgba(109,94,252,.18),transparent 55%),
  radial-gradient(900px 500px at 100% 100%,rgba(79,140,255,.12),transparent 50%),
  #07080c}
[data-theme=light] body{background:#c8cdd8}
[data-theme=ocean] body{background:#061018}
[data-theme=ember] body{background:#120c08}
[data-theme=light] .app-shell{background:
  radial-gradient(1200px 600px at 10% -10%,rgba(109,94,252,.12),transparent 55%),
  radial-gradient(900px 500px at 100% 100%,rgba(79,140,255,.1),transparent 50%),
  #c8cdd8}
[data-theme=ocean] .app-shell{background:
  radial-gradient(1200px 600px at 10% -10%,rgba(20,184,166,.2),transparent 55%),
  radial-gradient(900px 500px at 100% 100%,rgba(56,189,248,.14),transparent 50%),
  #061018}
[data-theme=ember] .app-shell{background:
  radial-gradient(1200px 600px at 10% -10%,rgba(245,158,11,.18),transparent 55%),
  radial-gradient(900px 500px at 100% 100%,rgba(225,29,72,.14),transparent 50%),
  #120c08}
.app-frame{display:flex;flex-direction:column;width:100%;height:100%;max-height:100dvh;background:var(--bg);overflow:hidden;position:relative;
  border:1px solid rgba(255,255,255,.06);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 25px 80px rgba(0,0,0,.55)}
[data-theme=light] .app-frame{border-color:rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 25px 80px rgba(0,0,0,.18)}
[data-theme=ocean] .app-frame{border-color:rgba(56,189,248,.12)}
[data-theme=ember] .app-frame{border-color:rgba(245,158,11,.12)}
@media(min-width:720px){
  .app-shell{padding:18px}
  .app-frame{width:min(100%,1280px);height:min(100%,920px);border-radius:18px}
}
@media(min-width:1100px){
  .app-frame{width:min(100%,1480px);height:min(100%,960px);border-radius:20px}
}
body.is-fs .app-shell{padding:0}
body.is-fs .app-frame{width:100%;height:100%;max-height:none;border-radius:0;border:0;box-shadow:none}
body.is-native .app-shell{padding:0!important;background:var(--bg)!important}
body.is-native .app-frame{width:100%!important;height:100%!important;max-height:none!important;border-radius:0!important;border:0!important;box-shadow:none!important}
body.is-native{overflow:hidden}
.titlebar{flex:none;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 14px;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent),var(--bar);border-bottom:1px solid var(--gb);user-select:none;-webkit-app-region:drag;cursor:default;min-height:48px}
[data-theme=light] .titlebar{background:linear-gradient(180deg,rgba(255,255,255,.9),var(--bar))}
[data-theme=ocean] .titlebar{background:linear-gradient(180deg,rgba(56,189,248,.06),transparent),var(--bar)}
[data-theme=ember] .titlebar{background:linear-gradient(180deg,rgba(245,158,11,.06),transparent),var(--bar)}
.titlebar .traffic{display:flex;gap:7px;padding-right:6px;-webkit-app-region:no-drag}
.titlebar .traffic span{width:12px;height:12px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.titlebar .traffic .t-close{background:#ff5f57}
.titlebar .traffic .t-min{background:#febc2e}
.titlebar .traffic .t-max{background:#28c840}
.titlebar .tb-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.titlebar .tb-brand .brand-logo{width:30px;height:30px;border-radius:9px;box-shadow:0 2px 8px rgba(109,94,252,.3)}
.titlebar .tb-brand .brand-logo svg{width:18px;height:18px}
.titlebar .tb-brand .tb-title{font-weight:900;font-size:14px;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .tb-brand .tb-title small{display:block;font-weight:600;font-size:10px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;margin-top:1px}
.titlebar .win-btns{display:flex;gap:4px;margin-left:auto;-webkit-app-region:no-drag}
.titlebar .win-btn{width:36px;height:32px;border:0;background:transparent;border-radius:8px;color:var(--mute);cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.titlebar .win-btn:hover{background:var(--field);color:var(--ink)}
.titlebar .win-btn.danger:hover{background:#ff5f57;color:#fff}
.titlebar .win-btn.about-btn{width:auto;padding:0 10px;font-weight:700;font-size:12px;gap:6px;display:inline-flex;align-items:center}
.about-modal .about-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;margin-bottom:16px}
.about-modal .about-hero .brand-logo{width:64px;height:64px;border-radius:18px;box-shadow:0 8px 24px rgba(109,94,252,.4)}
.about-modal .about-hero .brand-logo svg{width:36px;height:36px}
.about-modal .about-hero h2{font-size:18px;font-weight:900;letter-spacing:-.02em}
.about-modal .about-hero .ver{display:inline-block;background:var(--field);border:1px solid var(--gb);border-radius:99px;padding:3px 12px;font-size:11px;font-weight:700;color:var(--c)}
.about-modal .about-body{font-size:13px;line-height:1.55;color:var(--ink);margin-bottom:14px}
.about-modal .about-body p{margin-bottom:12px;color:var(--mute)}
.about-modal .feat{display:grid;gap:6px;margin:0 0 14px}
.about-modal .feat li{list-style:none;background:var(--field);border:1px solid var(--gb);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px}
.about-modal .feat li i{color:var(--c);width:16px;text-align:center}
.about-modal .meta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.about-modal .meta div{background:var(--field);border-radius:10px;padding:8px 12px}
.about-modal .meta dt{font-size:10px;color:var(--mute);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.about-modal .meta dd{font-weight:700;font-size:13px;margin-top:2px}
.about-modal{width:min(100%,420px)}
.app-scroll{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;position:relative}
#pb{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);transform:scaleX(0);transform-origin:left;z-index:200}
#pb.run{animation:pb .9s ease-out}
@keyframes pb{0%{transform:scaleX(0);opacity:1}80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
header,.app-header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:var(--bar);border-bottom:1px solid var(--gb)}
.brand{order:1;display:none}
.brand-logo{width:44px;height:44px;border-radius:13px;background:var(--grad);display:grid;place-items:center;flex-shrink:0;box-shadow:0 4px 14px rgba(109,94,252,.35)}
.brand-logo svg{width:26px;height:26px;display:block}
.brand small{display:block;font-weight:600;font-size:11px;color:var(--mute);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.modal-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px)}
.modal-scrim.open{display:flex;animation:tin .25s var(--ease)}
.modal{background:var(--pop);border:1px solid var(--gb);border-radius:18px;padding:20px;width:min(100%,380px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.modal h2{font-size:16px;font-weight:800;margin-bottom:4px}
.modal .sub{color:var(--mute);font-size:12px;margin-bottom:14px}
.modal label.fn{display:block;font-weight:600;font-size:12px;color:var(--mute);margin-bottom:6px}
.modal .fn-row{display:flex;gap:8px;align-items:center}
.modal .fn-row input{flex:1;min-height:46px;padding:0 12px;font-size:15px;font-weight:600;border:1px solid var(--gb);border-radius:12px;background:var(--field);outline:none}
.modal .fn-row input:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(91,140,255,.2)}
.modal .ext{font-weight:700;color:var(--mute);font-size:13px;min-width:2.5em}
.tru-nums{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin:12px 0 4px}
.tru-nums button{min-height:40px;min-width:0;padding:0;border:1px solid var(--gb);background:var(--field);border-radius:10px;font-weight:800;cursor:pointer;font-size:14px}
.tru-nums button.on{background:var(--v);border-color:var(--v);color:#fff}
.modal .hint2{font-size:11px;color:var(--mute);margin-top:8px;margin-bottom:14px}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.modal-actions .btn{flex:1;min-height:48px}
.sp{flex:1;order:2}.sp2{display:none}
#themeBtn{order:3;width:44px;padding:0}

.header-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;order:4}
.header-export{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.header-export .sz{font-size:11px;font-weight:700;color:var(--mute);margin-right:4px}
.header-export input{width:88px;min-width:88px;min-height:38px;padding:0 8px;font-size:15px;font-weight:700;text-align:center;border:1px solid var(--gb);border-radius:10px;background:var(--field);color:var(--ink)}
.header-export .dim-x{font-weight:800;color:var(--mute);padding:0 2px}
.header-export .btn{min-height:38px;min-width:38px;padding:0}
.header-tools .btn-create-new,.header-tools .btn-clear-all{min-height:36px;padding:0 12px;font-size:12px}
.header-tools .btn-create-new{background:linear-gradient(135deg,#0d9488,#059669)!important;color:#fff!important;border-color:transparent!important;font-weight:800}
.header-tools .btn-clear-all{background:linear-gradient(135deg,#e11d48,#f97316)!important;color:#fff!important;border-color:transparent!important;font-weight:800}
@media(min-width:1100px){
 .header-tools{order:3;flex:1 1 auto;justify-content:flex-start;min-width:0}
 .seg{order:2;flex:none}
 .brand{order:1}
 .actions{order:6}
 #themeBtn{order:5;flex:none}
 .sp,.sp2{display:none!important}
}

.seg{order:4;flex:1 0 100%;display:flex;background:var(--field);border-radius:13px;padding:3px;border:1px solid var(--gb)}
.seg label{flex:1;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:42px;border-radius:10px;font-weight:700;color:var(--mute);transition:.25s}
.seg em{font-style:normal;font-weight:400;font-size:11px;opacity:.8}
.seg input:checked+span{background:var(--v);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--c)}
.btn{position:relative;overflow:hidden;min-height:44px;min-width:44px;border:1px solid var(--gb);background:var(--field);border-radius:12px;padding:8px 14px;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .25s var(--ease),border-color .2s,background .2s;white-space:nowrap}
.btn:hover{border-color:var(--c)}
.btn:active{transform:scale(.96)}
.btn.on{background:var(--v);border-color:var(--v);color:#fff}
.btn.pri{background:var(--grad);border-color:transparent;color:#fff}
.btn.done{background:#12a36b!important}
.rip{position:absolute;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.4);transform:translate(-50%,-50%) scale(0);animation:rip .6s ease-out;pointer-events:none}
@keyframes rip{to{transform:translate(-50%,-50%) scale(30);opacity:0}}
.actions{order:5;position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:10px max(12px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));background:var(--bar);border-top:1px solid var(--gb)}
.actions>.btn{flex:1}.menu{flex:2;position:relative}.menu>.btn{width:100%;min-height:48px}
.drop{position:fixed;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));background:var(--pop);border:1px solid var(--gb);border-radius:18px;padding:6px;display:none;z-index:40;box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.drop.open{display:block;animation:sheet .3s var(--ease)}
@keyframes sheet{from{opacity:0;transform:translateY(30px)}}
.drop [role=menuitem]{width:100%;text-align:left;border:0;background:none;min-height:52px;padding:0 14px;border-radius:12px;cursor:pointer;display:flex;gap:12px;align-items:center;font-weight:600;font-size:15px}
.drop [role=menuitem]:hover,.drop [role=menuitem]:active{background:var(--field)}
.export{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.export .xl{font-weight:700;color:var(--ink);font-size:12px;margin-right:2px}
.export input{width:78px;min-height:44px;padding:0 8px;font-size:16px;text-align:center;border:1px solid var(--gb);border-radius:12px;background:var(--field);outline:none}
.export input:focus{border-color:var(--c)}
.export .btn{padding:0;min-width:44px}
.note{font-size:11px}
.drop small{margin-left:auto;color:var(--mute);font-weight:500}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:25}
.drop.open+.scrim{display:block}
.app-main{display:flex;flex-direction:column;gap:12px;padding:12px max(12px,env(safe-area-inset-left))}
.card{background:var(--glass);border:1px solid var(--gb);border-radius:var(--r);padding:14px}
h3{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-bottom:10px;display:flex;align-items:center;gap:8px}
h3 i{color:var(--c)}
.stage{padding:12px;display:flex;flex-direction:column;gap:10px}

.stage-topbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stage-topbar .pills{flex:1;min-width:120px}
.stage-actions{display:flex;gap:6px;flex-shrink:0}
.stage-actions .btn{min-height:36px;padding:0 12px;font-size:12px;font-weight:700}

.stage-actions .btn-create-new{
  background:linear-gradient(135deg,#0d9488,#059669)!important;color:#fff!important;border-color:transparent!important;font-weight:800
}
.stage-actions .btn-create-new:hover{filter:brightness(1.08);color:#fff!important}
.stage-actions .btn-clear-all{
  background:linear-gradient(135deg,#e11d48,#f97316)!important;color:#fff!important;border-color:transparent!important;font-weight:800
}
.stage-actions .btn-clear-all:hover{filter:brightness(1.08);color:#fff!important}

@media(min-width:1100px){
 .stage-topbar .pills{display:none}
 .stage-actions{margin-left:auto}
}

.pills{display:flex;background:var(--field);border-radius:12px;padding:3px;border:1px solid var(--gb)}
.pill{flex:1;min-height:40px;border:0;background:none;border-radius:9px;font-weight:700;color:var(--mute);cursor:pointer;transition:.25s}
.pill[aria-selected=true]{background:var(--v);color:#fff}
.body{position:relative;background:repeating-conic-gradient(var(--field) 0 25%,transparent 0 50%) 0 0/20px 20px;border-radius:12px;border:1px solid var(--gb);overflow:hidden}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:16px 8px;min-height:180px;position:relative}
.tag{display:none}
.paper{background:#fff;padding:8px;border-radius:4px;box-shadow:0 8px 30px rgba(0,0,0,.35);width:min(100%,calc(52dvh * var(--ar) + 16px));display:block}
#monoCanvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:grab;touch-action:none;background:#fff}
#monoCanvas:active{cursor:grabbing}
.paper{position:relative}
#exportCanvas{display:none;width:100%;height:auto;image-rendering:pixelated;background:#fff;pointer-events:none}
.paper.custom{display:flex;align-items:center;justify-content:center;min-height:80px;
  background:
    linear-gradient(45deg,#c5cad6 25%,transparent 25%),
    linear-gradient(-45deg,#c5cad6 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#c5cad6 75%),
    linear-gradient(-45deg,transparent 75%,#c5cad6 75%);
  background-size:12px 12px;
  background-position:0 0,0 6px,6px -6px,-6px 0;
  background-color:#9aa3b5}
[data-theme=light] .paper.custom{background-color:#8b93a7}
[data-theme=ocean] .paper.custom{background-color:#3d5a6c}
[data-theme=ember] .paper.custom{background-color:#6b5344}
.paper.custom #exportCanvas{display:block;width:var(--ex-w-pct,100%);max-width:100%;height:auto;margin:0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.2);background:#fff}
.paper.custom #monoCanvas{position:absolute;left:8px;top:8px;width:calc(100% - 16px);height:calc(100% - 16px);opacity:0;z-index:2}
.stage.placing #monoCanvas,.stage.cropping #monoCanvas{cursor:crosshair}
#originalCanvas{display:block;width:min(100%,calc(36dvh * 1.5));height:auto;border-radius:8px;border:1px solid var(--gb);box-shadow:0 4px 16px rgba(0,0,0,.25)}
.cap{display:none}
.hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:var(--v);color:#fff;padding:8px 16px;border-radius:99px;font-weight:700;display:none;z-index:3;text-align:center;width:max-content;max-width:92%}
.stage.placing .hint,.stage.cropping .hint{display:block;animation:sheet .3s var(--ease)}
#cropOverlay{position:absolute;left:8px;top:8px;right:8px;bottom:8px;pointer-events:none;z-index:4;display:none}
.stage.cropping #cropOverlay{display:block}
#cropOverlay canvas{width:100%;height:100%;display:block}
.empty{position:absolute;inset:0;background:var(--glass);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;z-index:2;transition:.2s;text-align:center;padding:16px;border:2px dashed var(--gb);border-radius:12px;margin:8px}
.empty:hover,.empty.over{border-color:var(--c);background:var(--field)}
.empty.over{animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(91,140,255,.2)}}
.empty i{font-size:clamp(34px,10vw,44px);color:var(--c)}
.empty b{font-size:clamp(16px,4.6vw,19px)}.empty span{color:var(--mute);font-size:12px}
.tt{display:none}
@media(hover:none){.dd{display:none}.tt{display:inline}}
body.loaded .empty{display:none}
.bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;color:var(--mute);font-size:12px}
.bar .sz{background:var(--field);padding:5px 12px;border-radius:99px;border:1px solid var(--gb);color:var(--ink);font-weight:600}
.side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:12px;align-items:start}
.side>.card{flex:none}
#imageInput{display:none}
.open-btn{width:100%;min-height:46px}
.info{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.info div{background:var(--field);border-radius:10px;padding:6px 10px;min-width:0}
.info dt{color:var(--mute);font-size:10.5px}.info dd{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbl{display:flex;justify-content:space-between;font-weight:600}
.lbl output{color:var(--c);font-weight:800}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:40px;background:transparent;outline-offset:2px;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--v) var(--p,50%),var(--gb) var(--p,50%))}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:var(--gb)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:#fff;border:4px solid var(--v);box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .2s var(--ease)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--v)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:6px}
.tiles .btn{flex-direction:column;gap:4px;min-height:58px;padding:6px 2px;font-size:11px}
.tiles .btn i{font-size:16px;color:var(--c)}.tiles .btn.on i{color:#fff}
input[type=text],select{width:100%;min-height:46px;padding:0 12px;font-size:16px;border:1px solid var(--gb);border-radius:12px;background:var(--field);outline:none;transition:.2s}
input[type=text]:focus,select:focus{border-color:var(--c);box-shadow:0 0 0 3px rgba(91,140,255,.2)}
select option{background:var(--pop);color:var(--ink)}
.row{display:flex;gap:8px;margin-top:8px}.row .btn{flex:1}
.keys{display:none}
.app-footer{padding:8px 16px calc(96px + env(safe-area-inset-bottom));text-align:center;color:var(--mute);font-size:12px}
.toast{position:fixed;top:calc(12px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px);background:var(--pop);border:1px solid var(--gb);color:var(--ink);padding:11px 18px;border-radius:12px;font-weight:600;z-index:300;box-shadow:0 12px 34px rgba(0,0,0,.4);animation:tin .3s var(--ease)}
@keyframes tin{from{opacity:0;transform:translate(-50%,-14px)}}
.toast.err{border-color:#ff5c7a;background:#3a1626;color:#fff}.toast.ok{border-color:#22d3a0;background:#0f3229;color:#fff}
.tabcard{padding:10px 14px 14px}
.tabs{display:flex;flex-wrap:wrap;gap:10px;background:transparent;border:0;border-radius:0;padding:0;margin-bottom:16px}
.tab{
  flex:1 1 auto;min-width:calc(33% - 10px);min-height:46px;
  border:1.5px solid var(--gb);background:var(--field);
  border-radius:12px;font-weight:700;color:var(--mute);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;padding:8px 12px;transition:background .2s,border-color .2s,color .2s,box-shadow .2s;
  white-space:nowrap;box-shadow:0 1px 0 rgba(0,0,0,.04)
}
.tab:hover{border-color:var(--c);color:var(--ink)}
.tab[aria-selected=true]{
  background:var(--v);color:#fff;border-color:var(--v);
  box-shadow:0 4px 12px rgba(109,94,252,.28)
}
.tab[aria-selected=true] i{color:#fff}
.pane{display:none}.pane.on{display:block;animation:sheet .25s var(--ease)}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}
.chip{flex-direction:column;gap:4px;min-height:50px;font-size:12px;white-space:normal;text-align:center;line-height:1.2}
.mw{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mute);font-weight:600}
.mw input{height:32px}.mw output{min-width:34px;text-align:right;color:var(--c);font-weight:800}
.chip.wide{grid-column:1/-1;flex-direction:row;min-height:48px}
.chip i{color:var(--c);font-size:16px}.chip.on i{color:#fff}
.lbl2{display:block;font-weight:600;margin-bottom:6px;font-size:12px;color:var(--mute)}
@media(max-width:379px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:720px){
 header,.app-header{flex-wrap:wrap;padding-top:calc(12px + env(safe-area-inset-top));gap:8px}
 .seg{order:3;flex:0 0 auto}.seg label{flex:none}.seg span{flex-direction:row;gap:8px;padding:0 14px}
 .header-tools{order:4;flex:1 1 auto}
 .sp2{display:none}#themeBtn{order:5}
}
@media(min-width:1100px){
 .app-scroll{display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}
 header,.app-header{position:static;margin:12px 12px 0;border:1px solid var(--gb);border-radius:var(--r);padding:10px 14px}
 .actions{
    position:static;order:6;display:inline-flex;align-items:center;gap:6px;
    padding:4px;margin:0;background:var(--field);border:1px solid var(--gb);
    border-radius:12px;box-shadow:none;flex:none
  }
  .actions>.btn{flex:none;min-height:36px;padding:0 12px;font-size:12px;border-radius:9px}
  .menu{flex:none;position:relative}
  .menu>.btn{width:auto;min-height:36px;padding:0 12px;font-size:12px;border-radius:9px}
  header,.app-header{flex-wrap:nowrap;align-items:center;gap:8px 10px}
  .header-tools{flex-wrap:nowrap;gap:6px}
  .header-export input{width:92px;min-width:92px;min-height:38px;font-size:15px}

 .drop{position:absolute;left:auto;right:0;bottom:auto;top:calc(100% + 8px);min-width:220px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
 .drop [role=menuitem]{min-height:42px;font-size:13px}.scrim{display:none!important}
 .app-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,480px);grid-template-rows:minmax(0,1fr);padding:10px;min-height:0;gap:12px}
 .stage{min-height:0;overflow:hidden}.pills{display:none}
 .body{flex:1;min-height:0;display:flex;flex-direction:column}
 .stage{padding:8px;gap:6px}
 .stage-topbar{display:none}
 .stage .bar{display:none}
 .slides{flex:1;overflow:hidden;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 110px}
 .slide{min-height:0;container-type:size;overflow:hidden;padding:12px 10px 8px}
 .slide.after{grid-row:1}
 .slide.before{grid-row:2;justify-content:center;padding:10px 12px 8px;border-top:1px solid var(--gb);background:var(--glass)}
 .paper{width:min(100cqw,calc((100cqh - 8px) * var(--ar) + 16px));max-width:100%}
 #originalCanvas{width:min(100cqw,calc(100cqh * 1.5))}
 .tag{display:block;position:absolute;top:8px;left:12px;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
 .side{display:flex;flex-direction:column;align-items:stretch;overflow:auto;min-height:0;scrollbar-width:thin;gap:16px;padding-right:4px}
 .side .card{margin:0;padding:14px 16px}
 .tabcard{padding:14px 16px 16px}
 .tabs{gap:10px;padding:0;margin-bottom:16px;background:transparent;border:0;flex-wrap:wrap}
 .tab{flex:1 1 calc(33% - 10px);min-width:100px;min-height:48px;font-size:12px;padding:10px 12px;border-radius:12px;gap:8px;border:1.5px solid var(--gb)}
 .tab i{font-size:13px;flex-shrink:0}
 .tab[aria-selected=true]{border-color:var(--v)}
 .qr-subtabs{gap:8px;margin-bottom:14px}
 .qr-subtabs .qtab{min-height:38px;padding:6px 8px;font-size:11px;border-radius:10px}
 .pane .row,.qr-row{gap:8px}
 .chips{gap:10px;margin:12px 0 14px}
 .lbl2{margin-bottom:8px}

 .app-footer{padding:6px 16px 10px}
}
@media(min-width:1100px) and (max-height:800px){
 .side{gap:8px}.side .card{padding:10px 12px}.tabcard{padding:8px 12px 12px}
 .side h3{margin-bottom:8px}.open-btn{min-height:40px}
 .info{margin-top:8px;gap:4px}.info div{padding:3px 8px}
 .tabs{margin-bottom:12px;gap:8px}.tab{min-height:42px}
 .chips{gap:6px;margin:8px 0}.chip{min-height:44px;flex-direction:row;gap:8px}.chip.wide{min-height:42px}
 .mw input{height:28px}.lbl2{margin-bottom:4px}select,input[type=text]{min-height:42px}
}


.bill-modal{width:min(100%,560px);max-height:min(96dvh,960px);display:flex;flex-direction:column;padding:16px;overflow:hidden}
.bill-modal h2{margin-bottom:2px;flex:none}
.bill-modal .sub{flex:none}
.bill-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 12px;flex:none}
.bill-toolbar .seg2{display:flex;background:var(--field);border:1px solid var(--gb);border-radius:12px;padding:3px;flex:1;min-width:180px}
.bill-toolbar .seg2 button{flex:1;min-height:36px;border:0;background:none;border-radius:9px;font-weight:700;color:var(--mute);cursor:pointer;font-size:12px}
.bill-toolbar .seg2 button.on{background:var(--v);color:#fff}
.bill-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;background:#3a3a3a;border-radius:14px;padding:20px 16px 32px;display:flex;justify-content:center;align-items:flex-start;min-height:240px;-webkit-overflow-scrolling:touch}
.bill-paper{background:#f7f4ea;color:#1a1a1a;box-shadow:0 8px 28px rgba(0,0,0,.45);padding:12px 14px 20px;font-family:"Courier New",Courier,monospace;font-size:11px;line-height:1.35;image-rendering:pixelated;flex:none;margin:0 auto}
.bill-paper.w2{width:min(100%,280px)}
.bill-paper.w3{width:min(100%,360px)}
.bill-logo{display:block;width:100%;height:auto;image-rendering:pixelated;margin:0 auto 8px;background:#fff}
.bill-logo-wrap{display:flex;justify-content:center;align-items:flex-start;margin-bottom:8px;min-height:8px}
.bill-modal .bill-hint,.bill-modal .modal-actions{flex:none}
.bill-merge{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px}
.bill-merge .btn{flex:1;min-height:40px;font-size:12px}
.bill-merge .btn.on{background:var(--v);border-color:var(--v);color:#fff}
.bill-center{text-align:center}
.bill-left{text-align:left}
.bill-row{display:flex;justify-content:space-between;gap:8px}
.bill-muted{opacity:.75;font-size:10px}
.bill-line{border:0;border-top:1px dashed #333;margin:8px 0}
.bill-bold{font-weight:700}
.bill-total{font-size:13px;font-weight:700}
.bill-cut{text-align:center;color:#666;font-size:10px;margin-top:10px;letter-spacing:.12em}
.bill-hint{font-size:11px;color:var(--mute);margin-top:10px;text-align:center}



.stage.text-tool #monoCanvas{cursor:text}
.stage.text-tool.placing #monoCanvas{cursor:text}
.stage.text-moving #monoCanvas{cursor:grab}
.stage.text-moving #monoCanvas:active{cursor:grabbing}
.text-style-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.text-style-row .btn{min-width:42px;padding:0 10px;font-weight:800}
.text-style-row .btn.on{background:var(--v);color:#fff;border-color:var(--v)}
.txt-hint{font-size:11px;color:var(--mute);margin-top:8px;line-height:1.4}
#textCaretBlink{animation:caretBlink 1s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}




.titlebar .win-btn.nav-thermal{
  width:auto;padding:0 12px;min-height:34px;font-weight:900;font-size:13px;letter-spacing:.04em;
  background:transparent;color:#34d399;border-radius:10px
}
.titlebar .win-btn.nav-thermal:hover{background:var(--field);color:#6ee7b7}
[data-theme=light] .titlebar .win-btn.nav-thermal{color:#047857}
.thermal-modal{width:min(100%,720px);max-height:min(92dvh,900px);display:flex;flex-direction:column;padding:16px;overflow:hidden}
.thermal-modal h2{margin:0 0 4px;flex:none}
.thermal-modal .sub{flex:none;margin-bottom:10px}
.tt-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;flex:none}
.tt-tabs .ttab{flex:1 1 auto;min-width:calc(20% - 6px);min-height:36px;border:1.5px solid var(--gb);background:var(--field);border-radius:10px;font-weight:700;font-size:11px;color:var(--mute);cursor:pointer;padding:6px 8px}
.tt-tabs .ttab.on{background:var(--v);color:#fff;border-color:var(--v)}
.tt-body{flex:1;min-height:0;overflow:auto;padding-right:4px}
.tt-pane{display:none}.tt-pane.on{display:block}
.tt-metric{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--gb);font-size:12px}
.tt-metric b{font-weight:800}
.tt-rec{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--gb);background:var(--field);font-size:12px;line-height:1.45}
.tt-rec.ok{border-color:#22c55e;background:rgba(34,197,94,.08)}
.tt-rec.warn{border-color:#f59e0b;background:rgba(245,158,11,.1)}
.tt-rec.bad{border-color:#ef4444;background:rgba(239,68,68,.1)}
#ttDotCanvas,#ttPatternCanvas{image-rendering:pixelated;background:#fff;border:1px solid var(--gb);border-radius:8px;max-width:100%;display:block;margin:8px auto}
.tt-hex{font-family:ui-monospace,Consolas,monospace;font-size:11px;max-height:180px;overflow:auto;background:var(--field);border:1px solid var(--gb);border-radius:10px;padding:10px;white-space:pre;color:var(--ink)}


.titlebar .win-btn.nav-preview{
  width:auto;padding:0 12px;min-height:34px;font-weight:900;font-size:13px;letter-spacing:.06em;
  background:transparent;color:#38bdf8;border-radius:10px
}
.titlebar .win-btn.nav-preview:hover{background:var(--field);color:#7dd3fc}
.titlebar .win-btn.nav-about{
  width:auto;padding:0 12px;min-height:34px;font-weight:900;font-size:13px;letter-spacing:.06em;
  background:transparent;color:#c084fc;border-radius:10px
}
.titlebar .win-btn.nav-about:hover{background:var(--field);color:#e9d5ff}
[data-theme=light] .titlebar .win-btn.nav-preview{color:#0369a1}
[data-theme=light] .titlebar .win-btn.nav-about{color:#7e22ce}

.shape-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:6px}
.shape-grid .btn{flex-direction:column;gap:2px;min-height:54px;padding:6px 2px;font-size:10px}
.shape-grid .btn i{font-size:16px}
.shape-grid .btn.on{background:var(--v);color:#fff;border-color:var(--v)}
.line-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.line-opts select{min-height:40px}
.shape-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

.corner-rad-row{display:none;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.corner-rad-row.show{display:flex}
.corner-rad-row .lbl2{margin:0;min-width:90px}
.corner-rad-row .rad-val{font-weight:800;min-width:2.5em;text-align:center;font-variant-numeric:tabular-nums}
.corner-rad-row .btn{min-width:44px;min-height:40px;padding:0;font-size:18px;font-weight:900}

.stage.shape-tool #monoCanvas{cursor:crosshair}
.stage.handle-drag #monoCanvas{cursor:nwse-resize}



.qr-subtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.qr-subtabs .qtab{flex:1 1 calc(33% - 8px);min-width:72px;min-height:36px;border:1px solid var(--gb);background:var(--field);border-radius:10px;font-weight:700;font-size:11px;color:var(--mute);cursor:pointer;padding:6px 8px}
.qr-subtabs .qtab.on{background:var(--v);color:#fff;border-color:var(--v)}
.qr-pane{display:none}.qr-pane.on{display:block}
.qr-pane textarea{width:100%;min-height:88px;padding:10px;border:1px solid var(--gb);border-radius:12px;background:var(--field);color:var(--ink);resize:vertical;font-size:13px}
.qr-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;font-size:11px;color:var(--mute)}
.qr-stats b{color:var(--ink);font-weight:700}
.qr-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.qr-row .btn{flex:1;min-width:48px;min-height:36px;font-size:11px;padding:4px 8px}
.qr-row .btn.on{background:var(--v);color:#fff;border-color:var(--v)}
.qr-safe{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--gb);background:var(--field);font-size:12px;line-height:1.45}
.qr-safe.ok{border-color:#22c55e;background:rgba(34,197,94,.08)}
.qr-safe.warn{border-color:#f59e0b;background:rgba(245,158,11,.1)}
.qr-safe.bad{border-color:#ef4444;background:rgba(239,68,68,.1)}
.qr-safe h4{margin:0 0 6px;font-size:13px}
.qr-safe ul{margin:6px 0 0;padding-left:18px}
.qr-metric{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dashed var(--gb);font-size:11px}
.qr-metric:last-child{border:0}
.stage.qr-tool #monoCanvas{cursor:crosshair}
.stage.bc-tool #monoCanvas{cursor:crosshair}
#qrPreviewCanvas{width:100%;max-width:280px;image-rendering:pixelated;background:#fff;border:1px solid var(--gb);border-radius:8px}



@media(max-width:720px){
  .tabs{gap:6px;margin-bottom:12px}
  .tab{
    flex:1 1 calc(50% - 6px);min-width:calc(50% - 6px);max-width:100%;
    min-height:42px;font-size:11px;padding:8px 6px;gap:4px;
    border-radius:10px;white-space:normal;line-height:1.15;text-align:center
  }
  .tab i{font-size:12px;display:block;margin:0 auto 2px}
  .qr-subtabs{gap:5px}
  .qr-subtabs .qtab{
    flex:1 1 calc(33.33% - 5px);min-width:calc(33.33% - 5px);
    min-height:34px;font-size:10px;padding:5px 4px;line-height:1.1
  }
  .tt-tabs .ttab{flex:1 1 calc(50% - 6px);min-width:calc(50% - 6px);font-size:10px;min-height:34px}
  .header-tools{flex-wrap:wrap;gap:6px}
  .header-export input{width:72px;min-width:72px}
  .header-tools .btn-create-new,.header-tools .btn-clear-all{font-size:11px;padding:0 8px}
  .titlebar .win-btn.nav-preview,.titlebar .win-btn.nav-about,.titlebar .win-btn.nav-thermal{
    font-size:11px;padding:0 8px;min-height:30px
  }
  .seg span{font-size:12px;padding:0 10px;min-height:38px}
  .side .card{padding:12px}
}
@media(max-width:400px){
  .tab{flex:1 1 100%;min-width:100%;font-size:12px}
  .qr-subtabs .qtab{flex:1 1 calc(50% - 5px);min-width:calc(50% - 5px)}
  .titlebar .tb-title small{display:none}
}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


html{height:auto;scroll-behavior:smooth;scroll-padding-top:70px}
body{height:auto;min-height:100dvh;overflow:auto;background:var(--bg)}
[data-theme=light] body,[data-theme=ocean] body,[data-theme=ember] body{background:var(--bg)}
.site-nav{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:6px;padding:10px max(14px,env(safe-area-inset-left));background:var(--bar);backdrop-filter:blur(12px);border-bottom:1px solid var(--gb)}
.site-nav .logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);text-decoration:none;margin-right:auto}
.site-nav .logo .brand-logo{width:34px;height:34px;border-radius:10px}.site-nav .logo .brand-logo svg{width:20px;height:20px}
.site-nav a.l{color:var(--mute);text-decoration:none;font-weight:600;font-size:13px;padding:8px 10px;border-radius:9px}
.site-nav a.l:hover{background:var(--field);color:var(--ink)}
.site-nav button{border:1px solid var(--gb);background:var(--field);border-radius:10px;width:38px;height:36px;cursor:pointer}
@media(max-width:760px){.site-nav a.l{display:none}}
.wrap{width:min(100%,1180px);margin:0 auto;padding:0 max(16px,env(safe-area-inset-left))}
.sec{padding:clamp(40px,7vw,84px) 0}
.eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c);background:var(--field);border:1px solid var(--gb);border-radius:99px;padding:5px 12px}
.sec h2{font-size:clamp(24px,4.5vw,38px);letter-spacing:-.03em;margin:12px 0 8px}
.sec .lead{color:var(--mute);max-width:62ch;line-height:1.6;font-size:clamp(14px,2.2vw,16px)}
.hero{text-align:center;background:radial-gradient(900px 420px at 50% -10%,rgba(109,94,252,.28),transparent 60%)}
.hero h1{font-size:clamp(32px,7vw,64px);line-height:1.05;letter-spacing:-.04em;margin:16px auto 14px;max-width:16ch}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin:0 auto}
.cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.cta a{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:13px;font-weight:700;text-decoration:none;color:var(--ink);border:1px solid var(--gb);background:var(--field)}
.cta a.p{background:var(--grad);color:#fff;border:0;box-shadow:0 8px 24px rgba(109,94,252,.35)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.chips span{font-size:12px;font-weight:600;color:var(--mute);border:1px solid var(--gb);border-radius:99px;padding:6px 12px;background:var(--glass)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px;margin-top:28px;counter-reset:s}
.steps div{counter-increment:s;background:var(--glass);border:1px solid var(--gb);border-radius:18px;padding:20px}
.steps div:before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:800;margin-bottom:12px}
.steps b{display:block;margin-bottom:4px;font-size:15px}.steps p{color:var(--mute);font-size:13px;line-height:1.55}
#studio .app-shell{height:auto;padding:0;background:none}
#studio .app-frame{height:clamp(640px,92dvh,960px);width:100%;max-height:none;border-radius:18px}
body.is-fs #studio .app-frame{position:fixed;inset:0;z-index:300;height:100dvh;border-radius:0}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:28px}
.bento article{grid-column:span 2;background:var(--glass);border:1px solid var(--gb);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:8px;transition:transform .25s,border-color .25s}
.bento article:hover{transform:translateY(-3px);border-color:var(--v)}
.bento article.w{grid-column:span 3}
.bento i.ic{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--grad);color:#fff;font-size:17px}
.bento h3{font-size:16px}.bento p{color:var(--mute);font-size:13px;line-height:1.55;flex:1}
.bento ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}.bento li{font-size:11px;font-weight:600;background:var(--field);border:1px solid var(--gb);border-radius:8px;padding:4px 8px}
.bento button{align-self:flex-start;border:0;background:var(--field);color:var(--c);font-weight:700;border-radius:10px;padding:9px 14px;cursor:pointer;border:1px solid var(--gb)}
.bento button:hover{background:var(--v);color:#fff}
@media(max-width:900px){.bento article,.bento article.w{grid-column:span 3}}
@media(max-width:600px){.bento article,.bento article.w{grid-column:span 6}}
.faq{max-width:820px;margin:26px auto 0;display:grid;gap:10px}
.faq details{background:var(--glass);border:1px solid var(--gb);border-radius:14px;padding:0 18px}
.faq summary{cursor:pointer;font-weight:700;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary:after{content:"+";color:var(--c);font-size:20px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq p{color:var(--mute);line-height:1.65;padding-bottom:16px;font-size:14px}
footer.site{border-top:1px solid var(--gb);padding:28px 0 40px;text-align:center;color:var(--mute);font-size:13px}

.skip-link{position:absolute;left:8px;top:-60px;z-index:999;background:var(--v);color:#fff;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}.skip-link:focus{top:8px}
.byline{margin-top:14px;font-size:13px;color:var(--mute)}.byline a{color:var(--c)}
.hero-fig{margin:26px auto 0;max-width:760px}.hero-fig img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--gb);background:#fff}.hero-fig figcaption{margin-top:8px;font-size:12px;color:var(--mute)}
footer.site .fnav,footer.site .fl{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;margin-bottom:12px}footer.site a{color:var(--c);text-decoration:none}footer.site a:hover{text-decoration:underline}footer.site p{margin:0 auto 10px;max-width:760px;line-height:1.6}
.prose{max-width:760px;margin:0 auto;line-height:1.7}.prose h1{font-size:clamp(28px,5vw,40px);letter-spacing:-.03em;margin:8px 0 12px}.prose h2{font-size:22px;margin:28px 0 8px}.prose p,.prose li{color:var(--mute);margin-bottom:10px}.prose ul{padding-left:22px}.prose a{color:var(--c)}
.u1{padding-bottom:20px!important}.u2{margin-bottom:20px!important}.u3{margin-top:8px!important}.u4{flex:1!important}.u5{margin-top:10px!important}.u6{transform:rotate(-90deg)!important}.u7{margin-top:12px!important}.u8{text-align:center!important}.u9{width:100%;margin-top:10px!important}.u10{margin-top:6px!important}.u11{width:100%;margin-top:8px!important}.u12{margin-top:10px;text-align:center!important}.u13{width:100%!important}.u14{width:min(100%,400px)!important}.u15{overflow:auto;max-height:360px;margin-top:8px;text-align:center!important}.u16{overflow:auto;max-height:320px;margin-top:8px;text-align:center!important}.u17{margin:0 auto!important}.u18{text-align:left!important}.u19{margin:10px 0 0!important}.u20{margin:6px 0 0;padding-left:18px!important}.u21{margin:0 0 8px!important}.tbl{width:100%;border-collapse:collapse;margin:14px 0}.tbl th,.tbl td{border:1px solid var(--gb);padding:8px 12px;text-align:left}.tbl caption{text-align:left;color:var(--mute);margin-bottom:6px}#guide ul{padding-left:22px}#guide p,#guide li{color:var(--mute);line-height:1.7;margin-bottom:8px}#guide .fl{display:flex;flex-wrap:wrap;gap:6px 16px}#guide a{color:var(--c)}

/* SEO/accessibility support: static content and contact form. */
.seo-intro{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contact-form{display:grid;gap:14px;max-width:680px;margin:22px 0}.contact-form p{margin:0}.contact-form label{display:block;font-weight:700;margin-bottom:6px}.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid var(--gb);border-radius:10px;background:var(--field);color:var(--ink)}.contact-form textarea{resize:vertical}.contact-form .hidden{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}