.brand{gap:10px;font-size:1.25rem;font-weight:600;letter-spacing:.045em}.brand .brand-mark{width:36px;height:36px;padding:0;display:block;flex:none;background:#161616;overflow:hidden;border-radius:27%;position:relative}.brand-mark img{width:100%;height:100%;display:block}.draft-transfer{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.draft-transfer h3{font-size:1rem;margin:0 0 8px}.draft-transfer>p{font-size:.8125rem;color:var(--muted)}.draft-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.draft-actions button{flex:1;min-width:145px}.draft-summary{white-space:pre-wrap;overflow-wrap:anywhere;max-height:200px;overflow:auto;padding:18px;background:#f4f4f0;border-radius:12px}.help-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px}.app-version{font-size:.6875rem;color:var(--muted)}
.ruby-tools{flex-wrap:nowrap;margin-bottom:0}.ruby-tools .ruby-button{flex:none;white-space:nowrap}.latin-orientation{display:flex;align-items:center;gap:6px;min-width:0}.latin-orientation>span{font-size:.75rem;color:var(--muted);white-space:nowrap}.latin-orientation .segmented{flex:none;gap:2px}.latin-orientation button{width:44px;min-height:44px;padding:6px;font-size:.8125rem}.latin-orientation button[aria-pressed=true]{background:var(--ink);color:white}.mora-row{display:flex;justify-content:flex-end;margin:2px 0 18px}
.mora-button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:6px 4px 6px 9px;background:none;border-radius:12px;font-size:.8125rem;color:var(--muted);font-variant-numeric:tabular-nums}.mora-button:hover{background:#f5f6f2;color:var(--ink)}.mora-button svg{width:19px;height:19px;flex:none}.mora-button[aria-busy=true] svg{opacity:.4}
.paper-section{border-top:1px solid var(--line);padding:22px 0}.paper-section .field-heading>span:last-child{font-size:.6875rem}.paper-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:15px 0 4px}.paper-choice{min-width:0;background:none;padding:0;color:var(--muted);font-size:.6875rem;display:grid;gap:9px;text-align:center;border-radius:10px}.paper-choice canvas{width:100%;height:auto;border-radius:8px;border:1px solid #2326200c;transition:box-shadow .15s}.paper-choice[aria-pressed=true]{color:var(--ink);font-weight:600}.paper-choice[aria-pressed=true] canvas{box-shadow:0 0 0 2px white,0 0 0 3.5px var(--ink)}#paper-strength-control{padding-top:22px}
.mora-dialog{max-width:460px}.mora-meter{display:flex;justify-content:center;align-items:baseline;gap:8px;padding:10px 0 0;font-variant-numeric:tabular-nums}.mora-meter output{font-size:4.5rem;font-weight:350;line-height:1.15;letter-spacing:-.065em}.mora-meter>span{color:var(--muted);font-size:.875rem}.mora-rhythm{display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:12px 0 18px;font-variant-numeric:tabular-nums}.mora-rhythm:empty{display:none}.mora-rhythm span{display:flex;align-items:center;font-size:1.0625rem}.mora-rhythm span+span:before{content:'·';padding:0 11px;color:#a8aba3}.mora-note{color:var(--muted);font-size:.8125rem;text-align:center;min-height:2.8em;margin:18px 0}#mora-reading{min-height:120px;max-height:240px}#mora-reading:disabled{opacity:.55}.mora-dialog .save-button{margin-top:20px}.mora-dialog .small-note{margin-top:10px}.mora-dialog .ruby-label{margin-top:20px}.export-dialog .small-note{text-align:center}
@media(max-width:899px){.brand{font-size:1.125rem;gap:8px}.brand .brand-mark{width:32px;height:32px}}
@media(max-width:359px){.paper-options{gap:8px}.paper-choice{font-size:.625rem}.ruby-tools{gap:2px}.ruby-button{padding-left:9px;padding-right:9px}.mora-button{font-size:.75rem}}
@media(max-width:1024px){.keyboard-open .mora-dialog .dialog-header{margin-bottom:0}.keyboard-open .mora-meter{padding:0}.keyboard-open .mora-meter output{font-size:2.5rem}.keyboard-open .mora-note{margin:8px 0;min-height:0}.keyboard-open .mora-rhythm{margin:6px 0}.keyboard-open #mora-reading{min-height:84px;height:84px}.keyboard-open .mora-dialog .ruby-label{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.paper-choice canvas{transition:none}}

/* Reveal the canvas only after the saved photo and the exact font have rendered. */
.paper:not(.artwork-ready){transition:none}.paper:not(.artwork-ready) #artwork{visibility:hidden}

.handoff-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 15px;border:1px solid #dcdfd6;border-radius:24px;background:transparent;color:var(--ink);font-size:.875rem;font-weight:500;white-space:nowrap}
.handoff-button svg{width:18px;height:18px}
.handoff-button:hover{background:#eceee7;border-color:#c9cdc2}
.handoff-button:active{background:#e2e5dc}
@media(max-width:599px){
  .app-header{column-gap:6px}
  .header-actions{gap:4px}
  .handoff-button{padding:10px;font-size:.75rem}
  .handoff-button svg{display:none}
  .header-save{min-width:72px;padding:10px 12px;gap:6px;font-size:.8125rem}
}
@media(max-width:374px){.app-header{padding-left:12px;padding-right:12px}}
@media(max-width:359px){
  :root{--header-h:calc(110px + env(safe-area-inset-top))}
  .app-header{display:grid;grid-template-columns:1fr;align-content:center;row-gap:6px}
  .header-actions{justify-content:flex-end}
  .header-actions .icon-button{position:absolute;top:calc(8px + env(safe-area-inset-top));right:12px}
  .handoff-button{padding-left:14px;padding-right:14px}
  .header-save{min-width:82px}
}