*{box-sizing:border-box}

:root{
  --bg:#080808;
  --panel:#111;
  --border:#292929;
  --text:#f5f5f5;
  --muted:#999;
}

html,body{
  margin:0;
  min-height:100%;
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

header{
  height:58px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  border-bottom:1px solid #222;
  background:#0c0c0c;
  position:sticky;
  top:0;
  z-index:10;
}

header a{
  color:#ddd;
  text-decoration:none;
}

header span{
  margin-left:auto;
  color:#777;
  font-size:12px;
}

.app{
  display:grid;
  grid-template-columns:minmax(320px,430px) 1fr;
  min-height:calc(100vh - 58px);
}

.editor{
  padding:20px;
  border-right:1px solid #222;
  overflow:auto;
  max-height:calc(100vh - 58px);
}

h1{
  margin:0;
  font-size:24px;
}

.intro{
  color:var(--muted);
  font-size:13px;
  margin:7px 0 20px;
}

label{
  display:block;
  color:#aaa;
  font-size:12px;
  margin:12px 0;
}

textarea,select{
  width:100%;
  margin-top:7px;
  background:#151515;
  color:#eee;
  border:1px solid #333;
  border-radius:10px;
  padding:11px;
  font:inherit;
  outline:none;
}

textarea:focus,select:focus{
  border-color:#666;
}

#htmlInput{
  min-height:390px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  line-height:1.55;
}

.controls{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.controls label:last-child{
  grid-column:1/-1;
}

.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

button{
  border:0;
  border-radius:10px;
  padding:12px;
  font-weight:700;
  cursor:pointer;
  background:#eee;
  color:#111;
}

button:disabled{
  opacity:.5;
  cursor:wait;
}

button.secondary{
  background:#191919;
  color:#ddd;
  border:1px solid #333;
}

.status{
  min-height:18px;
  color:#888;
  font-size:11px;
  margin:12px 0 0;
}

.privacy{
  color:#666;
  font-size:11px;
  line-height:1.5;
}

.preview-area{
  padding:25px;
  overflow:auto;
  background:#0a0a0a;
}

.preview-label{
  color:#777;
  font-size:11px;
  letter-spacing:.12em;
  margin:0 auto 12px;
  width:min(210mm,100%);
}

#preview{
  margin:auto;
  width:fit-content;
}

.paper{
  width:210mm;
  min-height:297mm;
  background:#fff;
  color:#111;
  padding:12mm;
  margin:0 auto 25px;
  box-shadow:0 4px 25px #0008;
  overflow:hidden;
  position:relative;
  overflow-wrap:anywhere;
  word-wrap:break-word;
}

.paper.landscape{
  width:297mm;
  min-height:210mm;
}

.paper *{
  max-width:100%;
  box-sizing:border-box;
}

.paper img,
.paper video,
.paper canvas,
.paper svg{
  max-width:100% !important;
  height:auto;
}

.paper iframe{
  max-width:100%;
}

.paper table{
  width:100% !important;
  max-width:100% !important;
  border-collapse:collapse;
  table-layout:fixed;
}

.paper th,
.paper td{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.paper pre,
.paper code{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
}

.paper pre{
  overflow:hidden;
}

.paper h1,
.paper h2,
.paper h3,
.paper h4,
.paper h5,
.paper h6,
.paper p,
.paper div,
.paper section,
.paper article{
  overflow-wrap:anywhere;
}

.empty{
  color:#999;
  font-family:system-ui,sans-serif;
  text-align:center;
  padding-top:80mm;
}

@media(max-width:900px){
  .app{
    grid-template-columns:1fr;
  }

  .editor{
    max-height:none;
    border-right:0;
    border-bottom:1px solid #222;
  }

  .preview-area{
    min-height:600px;
  }
}

@media print{
  @page{
    margin:0;
  }

  header,
  .editor,
  .preview-label{
    display:none !important;
  }

  body{
    background:#fff;
  }

  .app{
    display:block;
  }

  .preview-area{
    padding:0;
    overflow:visible;
    background:#fff;
  }

  #preview{
    width:auto;
  }

  .paper{
    margin:0;
    box-shadow:none;
  }
}