.tn-extra{padding:24px;border:1px solid var(--line,#d9e5e2);border-radius:14px;background:white}.tn-extra label{display:inline-flex;flex-direction:column;gap:8px;margin:8px 16px 12px 0;font-weight:600;max-width:100%}.tn-extra input,.tn-extra select,.tn-extra textarea{padding:10px;border:1px solid #bccfc9;border-radius:8px;max-width:100%;font:inherit}.tn-extra textarea{width:100%;font-family:monospace}.tn-extra label:has(textarea){display:flex;width:100%}.tn-extra button{padding:11px 18px;border:0;border-radius:8px;background:#0f6b5e;color:white;cursor:pointer;font:inherit;margin:8px 8px 8px 0}.tn-extra button:disabled{opacity:.5;cursor:wait}.tn-extra [hidden]{display:none!important}.tn-preview{overflow:auto;margin:16px 0;background:repeating-conic-gradient(#e1e5e3 0% 25%,white 0% 50%) 0/20px 20px;border:1px solid #ccd8d3}.tn-preview canvas{display:block;max-width:100%;height:auto;touch-action:none}.tn-status{min-height:1.5em}.tn-extra button:focus-visible,.tn-extra input:focus-visible,.tn-extra textarea:focus-visible{outline:3px solid #f5b63d;outline-offset:3px}
.tn-extra .tn-upload{display:flex;align-items:center;justify-content:center;min-height:130px;border:2px dashed #8eb3a8;border-radius:12px;padding:22px;background:#f3f9f6;text-align:center;cursor:pointer}.tn-upload.tn-drag{border-color:#0f6b5e;background:#e2f5e9}.tn-extra .tn-url-panel{padding:16px;background:#f3f9f6;border-radius:12px;margin:16px 0}.tn-extra .tn-url-panel input[type=url]{width:360px}.tn-extra .tn-view-options button,.tn-extra .tn-undo,.tn-extra .tn-reset,.tn-extra .tn-toolbar button{background:#e6f0ec;color:#123b30}.tn-extra .tn-remote-download{display:inline-block;padding:12px;color:#0f6b5e;font-weight:600}.tn-extra .tn-export{padding-top:12px}.tn-extra input[type=range]{accent-color:#0f6b5e}.tn-extra canvas{cursor:crosshair}