@font-face{
  font-family:FusionPixel;
  src:url('/assets/fonts/fusion-pixel-12px-zh-hant.woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}
@font-face{
  font-family:EB;
  src:url('/assets/fonts/eb-garamond-latin-400.woff2');
  font-display:swap
}
@font-face{
  font-family:EB;
  src:url('/assets/fonts/eb-garamond-latin-italic-400.woff2');
  font-style:italic;
  font-display:swap
}
@font-face{
  font-family:EB;
  src:url('/assets/fonts/eb-garamond-cyrillic-400.woff2');
  font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face{
  font-family:EB;
  src:url('/assets/fonts/eb-garamond-cyrillic-italic-400.woff2');
  font-style:italic;
  font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}
@font-face{
  font-family:Courier;
  src:url('/assets/fonts/courier-prime-latin-400.woff2');
  font-display:swap
}
@font-face{
  font-family:ShipCommon;
  src:url('/assets/fonts/shippori-mincho-common.woff2');
  font-display:swap
}
@font-face{
  font-family:Ship;
  src:url('/assets/fonts/shippori-mincho-subset.woff2');
  font-display:swap
}
@font-face{
  font-family:IMing;
  src:url('/assets/fonts/iming-gap.woff2');
  font-display:swap
}
@font-face{
  font-family:Noto;
  src:url('/assets/fonts/noto-serif-sc-subset.woff2');
  font-display:swap
}
html[data-ui-locale="zh-Hans"]{
  --serif:EB,Noto,ShipCommon,Ship,IMing,serif
}
:root{
  color-scheme:light dark;
  --bg:#f5f2eb;
  --ink:#171614;
  --muted:#625e57;
  --line:#d7d2c8;
  --panel:#ece8df;
  --field:#fcfaf6;
  --accent:#8a2f1d;
  --serif:EB,ShipCommon,Ship,IMing,Noto,serif;
  --ui:system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:Courier,monospace
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#151412;
    --ink:#e8e4dc;
    --muted:#aaa49a;
    --line:#34312c;
    --panel:#1d1b18;
    --field:#1c1a17;
    --accent:#cf765e
  }
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 var(--ui)
}
a{
  color:inherit;
  text-underline-offset:.25em
}
button,select,input,textarea{
  font:inherit
}
button,a,input,select,textarea,summary{
  -webkit-tap-highlight-color:transparent
}
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px
}
[hidden]{
  display:none!important
}
h1,h2,h3,h4,p{
  margin-top:0
}
h1,h2,h3,h4{
  font-weight:400
}
button{
  cursor:pointer
}
button:disabled{
  opacity:.5;
  cursor:wait
}
.studio-header,main,footer{
  max-width:1540px;
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,64px)
}
.studio-header{
  display:flex;
  align-items:center;
  gap:clamp(18px,4vw,60px);
  padding-block:22px;
  border-bottom:1px solid var(--line)
}
.signature{
  font:28px/1.3 var(--serif);
  text-decoration:none;
  white-space:nowrap
}
.signature span{
  font-size:14px;
  margin-left:10px
}
.studio-header nav{
  display:flex;
  align-items:center;
  gap:24px;
  margin-inline-start:auto;
  font-size:13px
}
.studio-header nav a{
  text-decoration:none
}
.studio-header nav [aria-current]{
  color:var(--muted)
}
#ui-locale{
  max-width:145px;
  width:auto;
  min-height:42px;
  padding:6px 9px;
  font-size:13px
}
.studio-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:2rem;
  padding-block:40px 32px
}
.eyebrow,.micro,figcaption{
  font:12px/1.6 var(--mono);
  color:var(--muted)
}
.eyebrow{
  letter-spacing:.07em;
  margin-bottom:12px
}
h1{
  font:clamp(34px,4vw,55px)/1.2 var(--serif);
  margin:0
}
.studio-deck{
  font-size:14px;
  color:var(--muted);
  max-width:30ch;
  margin:0
}
.workspace{
  display:grid;
  grid-template-columns:minmax(290px,370px) minmax(0,1fr);
  gap:clamp(24px,4vw,60px);
  align-items:start
}
.controls,.proof-area{
  min-width:0
}
.controls fieldset{
  padding:20px 0 28px;
  margin:0;
  border:0;
  border-top:1px solid var(--line);
  min-width:0
}
.controls legend{
  padding-inline-end:20px;
  font:21px var(--serif)
}
legend span,.proof-toolbar h2 span{
  font:12px var(--mono);
  margin-inline-end:13px;
  color:var(--muted)
}
label{
  display:block;
  font-size:13px;
  font-weight:500;
  margin:16px 0 7px
}
select,input,textarea{
  display:block;
  width:100%;
  min-height:46px;
  background:var(--field);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:3px;
  padding:10px 12px;
  font-size:15px
}
select{
  padding-right:25px
}
input[readonly]{
  background:transparent;
  color:var(--muted)
}
textarea{
  min-height:270px;
  resize:vertical;
  font:19px/1.85 var(--serif);
  padding:15px
}
#title{
  font:19px var(--serif)
}
.pair{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(82px,1fr);
  gap:12px
}
.note{
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:12px 0
}
#source-note{
  margin-top:8px
}
.receipt-details{
  border-block:1px solid var(--line);
  padding-block:16px;
  margin-bottom:20px
}
.receipt-details summary{
  font-size:13px;
  cursor:pointer;
  min-height:30px
}
.receipt-details .note{
  overflow-wrap:anywhere
}
.primary{
  width:100%;
  min-height:52px;
  padding:13px 0;
  background:transparent;
  color:var(--ink);
  border:0;
  border-block:1px solid var(--ink);
  border-radius:0;
  font:13px/1.55 var(--mono);
  letter-spacing:.02em;
  text-align:start
}
.primary:hover{
  background:transparent;
  color:var(--accent);
  border-color:currentColor
}
#message{
  font-size:12px;
  line-height:1.7;
  min-height:2.7em;
  color:var(--muted);
  margin-top:12px
}
.proof-toolbar{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  min-height:50px;
  margin-bottom:15px
}
.proof-toolbar h2{
  font:21px var(--serif);
  margin:0;
  white-space:nowrap
}
.view-switch{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  justify-content:flex-end
}
.view-switch button{
  min-height:42px;
  padding:7px 8px;
  background:transparent;
  color:var(--muted);
  border:0;
  border-bottom:1px solid transparent;
  border-radius:0;
  font:12px/1.4 var(--mono)
}
.view-switch button[aria-pressed=true]{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink)
}
.view-switch button:hover{
  color:var(--accent);
  border-color:currentColor
}
.proof-desk{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:clamp(12px,2vw,30px);
  padding:clamp(16px,3vw,40px);
  background:var(--panel);
  border:1px solid var(--line);
  min-height:420px
}
.proof-desk figure{
  min-width:0;
  max-width:360px;
  width:100%;
  margin:0;
  justify-self:center
}
figcaption{
  font-size:10px;
  margin-bottom:13px
}
.paper{
  padding:5%;
  background:#fff;
  box-shadow:0 7px 18px #0002;
  border-bottom:3px dotted #d8d5cf
}
.paper img{
  display:block;
  width:100%;
  height:auto
}
.single{
  grid-template-columns:1fr
}
.single figure{
  max-width:420px
}
.reading{
  padding:clamp(20px,4vw,50px);
  background:var(--field);
  border:1px solid var(--line);
  font-family:var(--serif)
}
.reading h3{
  font-size:30px
}
.reading h4{
  font-size:25px;
  margin:30px 0 15px
}
.verse{
  font:22px/1.9 var(--serif);
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.export-bar{
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:20px
}
.export-bar h2{
  font:21px var(--serif);
  margin-bottom:15px
}
.downloads{
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.downloads a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  border:0;
  border-bottom:1px solid var(--line);
  padding:8px 0;
  color:var(--muted);
  text-decoration:none;
  border-radius:0;
  font:12px/1.4 var(--mono)
}
.downloads a:first-child{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink)
}
.downloads a:hover{
  color:var(--accent);
  border-color:currentColor
}
#proof-note{
  margin-top:16px;
  overflow-wrap:anywhere
}
footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:64px;
  border-top:1px solid var(--line);
  padding-block:25px;
  font-size:12px;
  color:var(--muted)
}
footer span{
  font-family:var(--mono)
}
.skip{
  position:absolute;
  inset-block-start:-100px;
  inset-inline-start:20px
}
.skip:focus{
  top:10px;
  padding:10px;
  background:var(--bg);
  z-index:5
}
noscript{
  padding:20px
}
.studio-header,main,footer{
  overflow-wrap:anywhere
}
@media(max-width:980px){
  .workspace{
    grid-template-columns:minmax(260px,330px) minmax(0,1fr);
    gap:24px
  }
  .proof-desk{
    grid-template-columns:1fr
  }
  .proof-desk figure{
    max-width:300px
  }
  .proof-toolbar{
    align-items:start;
    flex-direction:column
  }
  .view-switch{
    justify-content:start
  }
}
@media(max-width:680px){
  .studio-header{
    flex-wrap:wrap;
    gap:16px
  }
  .studio-header nav{
    order:3;
    width:100%;
    margin:0;
    padding-top:8px;
    border-top:1px solid var(--line)
  }
  #ui-locale{
    margin-inline-start:auto;
    max-width:128px
  }
  .signature{
    font-size:25px
  }
  .signature span{
    display:none
  }
  .studio-heading{
    padding-top:28px;
    display:block
  }
  .studio-deck{
    margin-top:15px;
    max-width:none
  }
  .workspace{
    grid-template-columns:1fr
  }
  select,input{
    font-size:16px
  }
  .proof-area{
    scroll-margin-block-start:24px
  }
  .proof-desk figure{
    max-width:360px
  }
  .proof-desk{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    padding:16px 12px
  }
  .proof-desk.single{
    grid-template-columns:1fr
  }
  .proof-toolbar{
    flex-direction:row;
    align-items:center;
    flex-wrap:wrap
  }
  .proof-desk.single figure{
    max-width:360px
  }
  .controls fieldset{
    padding-bottom:22px
  }
  .make-action{
    position:relative
  }
  .export-bar{
    margin-top:18px
  }
  footer{
    flex-wrap:wrap;
    margin-top:40px
  }
  textarea{
    min-height:230px
  }
}
@media(max-width:380px){
  .proof-desk{
    grid-template-columns:1fr
  }
  .proof-desk figure{
    max-width:260px
  }
}
@media(prefers-reduced-motion:no-preference){
  .primary,.downloads a{
    transition:background .12s,border-color .12s
  }
}
@media(forced-colors:active){
  .paper{
    border:1px solid CanvasText
  }
  .primary{
    border:1px solid ButtonText
  }
}