.tn-ib64-page {
  --ib-paper:#faf6ee; --ib-surface:#fffcf4; --ib-wash:#f5efdf; --ib-ink:#1a1208;
  --ib-muted:#5a4a30; --ib-line:#b8a888; --ib-soft:#ddd4be; --ib-button:#ede6d4;
  --ib-hover:#dfd4bb; --ib-accent:#c44a00; --ib-primary:#1a1208; --ib-primary-ink:#faf6ee; --ib-image-line:rgba(0,0,0,.1);
  width:calc(100% - 10px); max-width:1180px; margin-inline:auto; color:var(--ib-ink); -webkit-text-fill-color:var(--ib-ink); -webkit-font-smoothing:antialiased;
}
.tn-ib64-page *, .tn-ib64-page *::before, .tn-ib64-page *::after { box-sizing:border-box; }
.tn-ib64-page .tn-ib64-ad { width:min(728px,100%); min-height:90px; margin-inline:auto; background:transparent; }
.tn-ib64-page .tn-ib64-ad--top { margin-top:54px; margin-bottom:18px; }
.tn-ib64-page .tn-ib64-ad--bottom { margin-top:16px; margin-bottom:26px; }
.tn-ib64-page .tn-ib64-tool { padding:24px; border:1px solid var(--ib-line); background:var(--ib-paper); font-family:-apple-system,BlinkMacSystemFont,Pretendard,"Segoe UI",system-ui,sans-serif; }
.tn-ib64-page .tn-ib64-tool [hidden] { display:none!important; }
.tn-ib64-page .tn-ib64-tool :is(h2,p) { margin:0; }
.tn-ib64-page .tn-ib64-tool :is(code,pre,kbd,samp) { padding:0; border:0; border-radius:0; background:transparent; color:inherit; -webkit-text-fill-color:inherit; }
.tn-ib64-page .tn-ib64-tool button { display:inline-flex; justify-content:center; align-items:center; gap:6px; min-height:42px; min-width:40px; padding:10px 15px; border:1px solid var(--ib-line); border-radius:0; box-shadow:none; background:var(--ib-button); color:var(--ib-ink); -webkit-text-fill-color:var(--ib-ink); font-family:"Courier New",monospace; font-size:13px; font-weight:900; line-height:1.35; text-align:center; cursor:pointer; transition:background-color .18s ease,border-color .18s ease,transform .18s ease; }
.tn-ib64-page .tn-ib64-tool button:not(:disabled):hover { background:var(--ib-hover); border-color:var(--ib-ink); }
.tn-ib64-page .tn-ib64-tool button:not(:disabled):active { transform:scale(.96); }
.tn-ib64-page .tn-ib64-tool button:disabled { opacity:.45; cursor:not-allowed; }
.tn-ib64-page .tn-ib64-tool :is(button,textarea):focus-visible { outline:2px solid var(--ib-accent); outline-offset:3px; }
.tn-ib64-page .tn-ib64-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:22px; }
.tn-ib64-page .tn-ib64-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:3px; gap:3px; border:1px solid var(--ib-line); background:var(--ib-wash); }
.tn-ib64-page .tn-ib64-modes button { background:transparent; border-color:transparent; }
.tn-ib64-page .tn-ib64-modes button[aria-pressed="true"],.tn-ib64-page .tn-ib64-modes button[aria-pressed="true"]:hover,
.tn-ib64-page .tn-ib64-tool :is(#ib64-select,#ib64-restore,#ib64-copy-url,#ib64-download) { background:var(--ib-primary); border-color:var(--ib-primary); color:var(--ib-primary-ink); -webkit-text-fill-color:var(--ib-primary-ink); }
.tn-ib64-page .tn-ib64-tool :is(#ib64-select,#ib64-restore,#ib64-copy-url,#ib64-download):not(:disabled):hover { border-color:var(--ib-accent); }
.tn-ib64-page .tn-ib64-workbench { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:24px; align-items:stretch; }
.tn-ib64-page :is(.tn-ib64-source,.tn-ib64-result) { min-width:0; display:flex; flex-direction:column; border:1px solid var(--ib-line); padding:20px; background:var(--ib-surface); }
.tn-ib64-page .tn-ib64-pane-label { display:flex; align-items:center; gap:10px; padding-bottom:17px; }
.tn-ib64-page .tn-ib64-pane-label h2,.tn-ib64-page .tn-ib64-output-heading h2 { font-size:15px; font-weight:800; line-height:1.4; color:var(--ib-ink); -webkit-text-fill-color:var(--ib-ink); }
.tn-ib64-page .tn-ib64-pane-label > span:first-child { color:var(--ib-accent); -webkit-text-fill-color:var(--ib-accent); font-size:11px; font-weight:800; font-variant-numeric:tabular-nums; }
.tn-ib64-page #ib64-preview-tag { margin-left:auto; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); font-size:11px; }
.tn-ib64-page #ib64-upload { display:flex; flex-direction:column; flex:1; }
.tn-ib64-page .tn-ib64-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:28px 18px; min-height:240px; flex:1; border:1px dashed var(--ib-line); background:var(--ib-wash); text-align:center; transition:background-color .18s ease,border-color .18s ease; }
.tn-ib64-page .tn-ib64-drop[data-drag="true"] { border-color:var(--ib-accent); background:var(--ib-hover); }
.tn-ib64-page .tn-ib64-drop svg { color:var(--ib-accent); flex-shrink:0; }
.tn-ib64-page .tn-ib64-drop strong { font-size:16px; line-height:1.5; }
.tn-ib64-page .tn-ib64-drop > span { font-size:12px; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); }
.tn-ib64-page .tn-ib64-drop button { margin-top:5px; }
.tn-ib64-page .tn-ib64-hint { margin-top:12px!important; font-size:12px; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); line-height:1.7; }
.tn-ib64-page .tn-ib64-local { display:flex; gap:8px; padding-top:16px; margin-top:auto; font-size:11px; line-height:1.5; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); }
.tn-ib64-page .tn-ib64-preview { display:grid; place-items:center; flex:1; min-height:250px; padding:20px; border:1px solid var(--ib-soft); background:repeating-conic-gradient(var(--ib-wash) 0% 25%,var(--ib-surface) 0% 50%) 50%/20px 20px; }
.tn-ib64-page .tn-ib64-preview img { display:block; max-width:100%; max-height:300px; width:auto; height:auto; object-fit:contain; outline:1px solid var(--ib-image-line); outline-offset:-1px; }
.tn-ib64-page #ib64-empty { text-align:center; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); }
.tn-ib64-page #ib64-empty > span { display:block; font-size:32px; font-weight:400; margin-bottom:10px; }
.tn-ib64-page #ib64-empty p { font-size:13px; line-height:1.8; }
.tn-ib64-page .tn-ib64-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px 20px; padding-top:18px; }
.tn-ib64-page .tn-ib64-details > div { min-width:0; display:flex; flex-direction:column; gap:5px; }
.tn-ib64-page .tn-ib64-details span { font-size:11px; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); }
.tn-ib64-page .tn-ib64-details strong { font-size:13px; font-weight:800; line-height:1.5; font-variant-numeric:lining-nums tabular-nums; overflow-wrap:anywhere; }
.tn-ib64-page #ib64-decode-input { flex:1; }
.tn-ib64-page #ib64-decode-input label { display:block; font-size:12px; font-weight:700; margin:0 0 8px; }
.tn-ib64-page .tn-ib64-tool textarea { width:100%; max-width:100%; display:block; padding:15px; border:1px solid var(--ib-line); border-radius:0; background:var(--ib-wash); color:var(--ib-ink); -webkit-text-fill-color:var(--ib-ink); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.65; resize:vertical; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-all; }
.tn-ib64-page .tn-ib64-tool textarea::placeholder { color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); opacity:.65; }
.tn-ib64-page #ib64-input { min-height:208px; }
.tn-ib64-page #ib64-input[aria-invalid="true"] { border-color:var(--ib-accent); }
.tn-ib64-page #ib64-restore { margin-top:14px; }
.tn-ib64-page .tn-ib64-output { margin-top:24px; padding:20px; border:1px solid var(--ib-line); background:var(--ib-surface); }
.tn-ib64-page .tn-ib64-output-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.tn-ib64-page .tn-ib64-output-heading > span { font-size:11px; line-height:1.6; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); }
.tn-ib64-page .tn-ib64-output-heading b { font-family:-apple-system,BlinkMacSystemFont,Pretendard,"Segoe UI",system-ui,sans-serif; font-weight:800; font-variant-numeric:lining-nums tabular-nums; }
.tn-ib64-page .tn-ib64-output-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.tn-ib64-page .tn-ib64-status { margin-top:16px!important; min-height:22px; font-size:12px; line-height:1.7; color:var(--ib-muted); -webkit-text-fill-color:var(--ib-muted); overflow-wrap:anywhere; }
.tn-ib64-page .tn-ib64-status[data-state="error"] { color:var(--ib-accent); -webkit-text-fill-color:var(--ib-accent); }
body:is([data-scheme="dark"],[data-scheme="inverse"],[data-scheme="auto"][data-l="dark"],[data-scheme="auto"][data-d="dark"]) .tn-ib64-page,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-ib64-page { --ib-paper:#241d12; --ib-surface:#322a1a; --ib-wash:#2c2517; --ib-ink:#f7ead1; --ib-muted:#c3b492; --ib-line:#6f6047; --ib-soft:#574a37; --ib-button:#3c321f; --ib-hover:#4a3b27; --ib-accent:#e8823f; --ib-primary:#4a3116; --ib-primary-ink:#f7ead1; --ib-image-line:rgba(255,255,255,.1); }
@media (prefers-color-scheme:dark) {
  body[data-scheme="auto"] .tn-ib64-page { --ib-paper:#241d12; --ib-surface:#322a1a; --ib-wash:#2c2517; --ib-ink:#f7ead1; --ib-muted:#c3b492; --ib-line:#6f6047; --ib-soft:#574a37; --ib-button:#3c321f; --ib-hover:#4a3b27; --ib-accent:#e8823f; --ib-primary:#4a3116; --ib-primary-ink:#f7ead1; --ib-image-line:rgba(255,255,255,.1); }
}
@media (max-width:760px) {
  .tn-ib64-page .tn-ib64-ad--top { margin-top:48px; }
  .tn-ib64-page .tn-ib64-tool { padding:16px; }
  .tn-ib64-page .tn-ib64-toolbar { flex-wrap:wrap; gap:10px; padding-bottom:16px; }
  .tn-ib64-page .tn-ib64-modes { flex:1 1 100%; }
  .tn-ib64-page .tn-ib64-modes button { padding:10px 6px; font-size:12px; }
  .tn-ib64-page #ib64-reset { margin-left:auto; min-height:40px; padding:8px 12px; }
  .tn-ib64-page .tn-ib64-workbench { grid-template-columns:minmax(0,1fr); gap:16px; }
  .tn-ib64-page :is(.tn-ib64-source,.tn-ib64-result) { padding:16px; }
  .tn-ib64-page .tn-ib64-drop { min-height:220px; padding:22px 12px; }
  .tn-ib64-page .tn-ib64-preview { min-height:210px; }
  .tn-ib64-page .tn-ib64-output { margin-top:16px; padding:16px; }
  .tn-ib64-page .tn-ib64-output-actions button { padding:10px 11px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .tn-ib64-page .tn-ib64-tool :is(button,.tn-ib64-drop) { transition:none; } .tn-ib64-page .tn-ib64-tool button:not(:disabled):active { transform:none; } }