@font-face { font-family: "Allura"; src: url("/fonts/allura/Allura-Regular.ttf"); }
@font-face { font-family: "Armadillo"; src: url("/fonts/armadillo/Armadillo.ttf"); }
@font-face { font-family: "Baksoap"; src: url("/fonts/baksoap/Baksoap.otf"); }
@font-face { font-family: "Butflow"; src: url("/fonts/butflow/Butflow.otf"); }
@font-face { font-family: "Chainsaw Carnage"; src: url("/fonts/chainsaw-carnage/ChainsawCarnage.otf"); }
@font-face { font-family: "Chopin Script"; src: url("/fonts/chopin-script/ChopinScript.ttf"); }
@font-face { font-family: "Contour Generator"; src: url("/fonts/contour-generator/Contour%20Generator.otf"); }
@font-face { font-family: "Corleone"; src: url("/fonts/corleone/Corleone.ttf"); }
@font-face { font-family: "Corleone Due"; src: url("/fonts/corleone/CorleoneDue.ttf"); }
@font-face { font-family: "Dystopian Canticle"; src: url("/fonts/dystopian-canticle/Dystopian-Canticle-Regular.otf"); }
@font-face { font-family: "Ferro Rosso"; src: url("/fonts/ferro-rosso/FerroRosso.ttf"); }
@font-face { font-family: "Heart Breaking Bad"; src: url("/fonts/heart-breaking-bad/Heart%20Breaking%20Bad.otf"); }
@font-face { font-family: "Homoarakhn"; src: url("/fonts/homoarakhn/HOMOARAK.TTF"); }
@font-face { font-family: "If"; src: url("/fonts/if/If.ttf"); }
@font-face { font-family: "League Gothic"; src: url("/fonts/league-gothic/LeagueGothic-Regular.otf"); }
@font-face { font-family: "League Gothic Condensed"; src: url("/fonts/league-gothic/LeagueGothic-CondensedRegular.otf"); }
@font-face { font-family: "Libre Baskerville"; src: url("/fonts/libre-baskerville/LibreBaskerville-Regular.ttf"); }
@font-face { font-family: "Magnolia Script"; src: url("/fonts/magnolia-script/Magnolia%20Script.otf"); }
@font-face { font-family: "Marlboro"; src: url("/fonts/marlboro/Marlboro.ttf"); }
@font-face { font-family: "Miltown"; src: url("/fonts/miltown/Miltown_.ttf"); }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat/Montserrat-Bold.otf"); }
@font-face { font-family: "Pixemon"; src: url("/fonts/pixemon/Pixemon.otf"); }
@font-face { font-family: "Poppins"; src: url("/fonts/poppins/Poppins-Bold.ttf"); }
@font-face { font-family: "Punk Kid"; src: url("/fonts/punk-kid/punk%20kid.ttf"); }
@font-face { font-family: "Ranch Mails"; src: url("/fonts/ranch-mails/Ranch%20Mails.otf"); }
@font-face { font-family: "The Battle Continuez"; src: url("/fonts/the-battle-continuez/TheBattleCont.ttf"); }
@font-face { font-family: "The Rave Is In Your Pants"; src: url("/fonts/the-rave-is-in-your-pants/The%20Rave%20Is%20In%20Your%20Pants.otf"); }
@font-face { font-family: "Underground"; src: url("/fonts/underground/UndergroundNF.otf"); }
@font-face { font-family: "Bold Doodle"; src: url("/fonts/bold-doodle/BoldDoodle-Regular.otf"); }
@font-face { font-family: "Great Vibes"; src: url("/fonts/great-vibes/GreatVibes-Regular.ttf"); }
@font-face { font-family: "Jo Wrote a Lovesong"; src: url("/fonts/jo-wrote-a-lovesong/Jo_wrote_a_lovesong.ttf"); }
@font-face { font-family: "Lora"; src: url("/fonts/lora/Lora-Regular.ttf"); }
@font-face { font-family: "Chunk Five"; src: url("/fonts/chunk-five/Chunk.otf"); }
@font-face { font-family: "Chunk Five Print"; src: url("/fonts/chunk-five/Chunk%20Five%20Print.otf"); }
@font-face { font-family: "Lexographer"; src: url("/fonts/lexographer/lexo.ttf"); }
@font-face { font-family: "CMU Serif"; src: url("/fonts/cmu/cmunrm.ttf"); }
@font-face { font-family: "CMU Sans"; src: url("/fonts/cmu/cmunss.ttf"); }
@font-face { font-family: "CMU Typewriter"; src: url("/fonts/cmu/cmuntt.ttf"); }
@font-face { font-family: "League Gothic Italic"; src: url("/fonts/league-gothic/LeagueGothic-Italic.otf"); }
@font-face { font-family: "League Gothic Condensed Italic"; src: url("/fonts/league-gothic/LeagueGothic-CondensedItalic.otf"); }
@font-face { font-family: "Libre Baskerville Bold"; src: url("/fonts/libre-baskerville/LibreBaskerville-Bold.ttf"); }
@font-face { font-family: "Libre Baskerville Italic"; src: url("/fonts/libre-baskerville/LibreBaskerville-Italic.ttf"); }
@font-face { font-family: "Montserrat Regular"; src: url("/fonts/montserrat/Montserrat-Regular.otf"); }
@font-face { font-family: "Montserrat Black"; src: url("/fonts/montserrat/Montserrat-Black.otf"); }
@font-face { font-family: "Montserrat Italic"; src: url("/fonts/montserrat/Montserrat-Italic.otf"); }
@font-face { font-family: "Poppins Regular"; src: url("/fonts/poppins/Poppins-Regular.ttf"); }
@font-face { font-family: "Poppins Black"; src: url("/fonts/poppins/Poppins-Black.ttf"); }
@font-face { font-family: "Poppins Italic"; src: url("/fonts/poppins/Poppins-Italic.ttf"); }
@font-face { font-family: "Lora Bold"; src: url("/fonts/lora/Lora-Bold.ttf"); }
@font-face { font-family: "Lora Italic"; src: url("/fonts/lora/Lora-Italic.ttf"); }
@font-face { font-family: "Lora Bold Italic"; src: url("/fonts/lora/Lora-BoldItalic.ttf"); }
@font-face { font-family: "CMU Serif Bold"; src: url("/fonts/cmu/cmunbx.ttf"); }
@font-face { font-family: "CMU Sans Bold"; src: url("/fonts/cmu/cmunsx.ttf"); }
@font-face { font-family: "Sudegnak No4 Red"; src: url("/fonts/sudegnakno4/SudegnakNo4-Red.ttf"); }
@font-face { font-family: "Sudegnak No4 Orange"; src: url("/fonts/sudegnakno4/SudegnakNo4-Orange.ttf"); }
@font-face { font-family: "Sudegnak No4 Blue"; src: url("/fonts/sudegnakno4/SudegnakNo4-Blue.ttf"); }
@font-face { font-family: "Sudegnak No4 Green"; src: url("/fonts/sudegnakno4/SudegnakNo4-Green.ttf"); }

.type-editor-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.86); }
.type-editor-modal.hidden { display: none; }
.type-editor-shell { width: min(1180px, 100%); max-height: 96vh; overflow: auto; padding: 18px; border: 1px solid var(--border-strong); border-radius: 18px; background: #151615; box-shadow: 0 30px 90px #000; }
.type-editor-head, .type-editor-actions, .type-layer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.type-editor-head h2 { margin: 0; }
.type-editor-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(280px, 380px); gap: 18px; margin-top: 16px; }
.type-canvas-wrap { position: relative; align-self: start; border: 1px solid var(--border); background: #080808; touch-action: none; }
.type-canvas-wrap canvas { display: block; width: 100%; height: auto; cursor: grab; }
.type-canvas-wrap canvas.dragging { cursor: grabbing; }
.type-controls { display: grid; gap: 12px; align-content: start; }
.type-layer-list { display: flex; flex-wrap: wrap; gap: 7px; }
.type-layer-list button.active { border-color: var(--copper-bright); color: var(--copper-bright); }
.type-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-controls label { margin: 0; }
.type-controls input[type="range"] { padding: 0; }
.type-controls input[type="color"] { min-height: 44px; padding: 4px; }
.font-picker { position: relative; margin-top: 6px; }
.font-picker-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; }
.font-picker-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: min(560px, 65vh); padding: 8px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: #202120; box-shadow: 0 18px 45px rgba(0,0,0,.65); }
.font-picker-menu.hidden { display: none; }
.font-picker-menu input { margin-bottom: 8px; }
.font-preview-list { display: grid; gap: 5px; max-height: min(485px, 55vh); overflow-y: auto; }
.font-preview-option { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(145px, 1.2fr); align-items: center; gap: 10px; width: 100%; padding: 9px 10px; text-align: left; }
.font-preview-option.active { border-color: var(--copper-bright); background: var(--copper-wash); }
.font-preview-option small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.font-preview-option strong { overflow: hidden; font-family: var(--preview-font); font-size: 1.45rem; font-weight: 400; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.type-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.type-editor-actions { justify-content: flex-end; margin-top: 16px; }
.type-editor-actions button, .type-layer-actions button { width: auto; }
.type-help { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
body.type-editor-open { overflow: hidden; }

@media (max-width: 820px) {
  .type-editor-grid { grid-template-columns: 1fr; }
  .type-controls { order: 2; }
}