@font-face{
  font-family:"Calendar Sans";
  src:url("/static/fonts/DejaVuSans.ttf") format("truetype");
  font-weight:400;
  font-display:block
}
@font-face{
  font-family:"Calendar Sans";
  src:url("/static/fonts/DejaVuSans-Bold.ttf") format("truetype");
  font-weight:700;
  font-display:block
}
@font-face{
  font-family:"Calendar Serif";
  src:url("/static/fonts/DejaVuSerif.ttf") format("truetype");
  font-weight:400;
  font-display:block
}
@font-face{
  font-family:"Calendar Serif";
  src:url("/static/fonts/DejaVuSerif-Bold.ttf") format("truetype");
  font-weight:700;
  font-display:block
}
@font-face{
  font-family:"Calendar Mono";
  src:url("/static/fonts/DejaVuSansMono.ttf") format("truetype");
  font-weight:400;
  font-display:block
}
@font-face{
  font-family:"Calendar Mono";
  src:url("/static/fonts/DejaVuSansMono-Bold.ttf") format("truetype");
  font-weight:700;
  font-display:block
}
:root{
  font-family:Segoe UI,system-ui,sans-serif;
  color:#253e35;
  background:#f8f6f0;
  font-synthesis:none;
  --green:#234d3d;
  --muted:#758078;
  --line:#dedfd5;
  --red:#a44c3b
}
*{
  box-sizing:border-box
}
body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column
}
button,input{
  font:inherit
}
button,a,input{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer
}
button:disabled{
  opacity:.5;
  cursor:wait
}
button:focus-visible,a:focus-visible,input:focus-visible,svg:focus-visible{
  outline:3px solid #d6a64c;
  outline-offset:3px
}
[hidden]{
  display:none!important
}
a{
  color:inherit
}
button{
  border:0
}
h1,h2,h3,p{
  margin-top:0
}
h2{
  font-size:23px;
  letter-spacing:-.6px
}
h3{
  font-size:14px
}
small{
  display:block
}
.masthead{
  height:104px;
  flex-shrink:0;
  padding:0 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  gap:14px;
  align-items:center;
  text-decoration:none;
  font-size:19px;
  font-weight:650;
  letter-spacing:-.4px
}
.brand-mark{
  background:var(--green);
  color:#fff7df;
  width:43px;
  height:49px;
  display:grid;
  place-items:center;
  font-family:Georgia,serif;
  font-size:26px;
  border-radius:14px 14px 5px 5px
}
.brand small{
  font-size:11px;
  font-weight:400;
  letter-spacing:.2px;
  color:var(--muted);
  margin-top:5px
}
.header-note{
  font:italic 17px Georgia,serif;
  color:#8b7b62
}
main{
  width:100%;
  flex:1;
  padding:0 56px
}
.intro{
  padding:65px 0 46px;
  position:relative
}
.intro:after{
  content:"✳";
  position:absolute;
  right:9%;
  top:30px;
  font-size:225px;
  font-weight:200;
  color:#e5e9dd;
  z-index:-1
}
.eyebrow{
  font-size:10px;
  font-weight:750;
  letter-spacing:2px;
  color:#8e7547
}
h1{
  font:normal clamp(38px,4.4vw,65px)/1.07 Georgia,serif;
  letter-spacing:-2px;
  margin:18px 0 20px
}
h1 em{
  color:#54725c;
  font-weight:400
}
.intro p{
  font-size:14px;
  line-height:1.9;
  color:var(--muted)
}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 25px
}
.section-heading h2{
  margin-bottom:7px
}
.section-heading p{
  font-size:12px;
  color:var(--muted);
  margin:0
}
.primary,.secondary{
  padding:12px 19px;
  border-radius:7px;
  font-size:12px;
  font-weight:650;
  letter-spacing:.1px;
  transition:background .15s
}
.primary{
  color:white;
  background:var(--green)
}
.primary:hover{
  background:#35624f
}
.secondary{
  background:white;
  border:1px solid #d5dacd;
  color:var(--green)
}
.secondary:hover{
  background:#eef1e8
}
.wide{
  width:100%
}
.text-button{
  background:none;
  color:var(--green);
  padding:0;
  font-size:12px
}
.project-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:22px;
  min-height:180px
}
.project-card{
  background:white;
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden;
  text-align:left;
  padding:0;
  color:inherit;
  transition:transform .15s,box-shadow .15s
}
.project-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px #234d3d0c
}
.project-art{
  height:136px;
  display:grid;
  grid-template-columns:repeat(6,23px);
  grid-template-rows:repeat(4,23px);
  justify-content:center;
  align-content:center;
  gap:3px;
  background:#e9ede3
}
.project-art span{
  border:1px solid #8a9e8770;
  border-radius:2px;
  display:grid;
  place-items:center;
  font:9px Georgia,serif;
  color:#829379
}
.project-art span:nth-child(3n){
  background:#d6dfcd
}
.project-card-body{
  padding:20px
}
.project-card h3{
  font-size:17px;
  margin:0 0 8px;
  font-weight:600
}
.project-card small{
  font:10px Consolas,monospace;
  color:#8d978f;
  overflow-wrap:anywhere
}
.empty-state{
  grid-column:1/-1;
  border:1px dashed #c3cdbe;
  border-radius:10px;
  padding:35px;
  text-align:center;
  color:var(--muted);
  font-size:14px
}
.folder-dropzone{
  min-height:250px;
  padding:35px 20px;
  border:2px dashed #c3cdbe;
  border-radius:12px;
  background:#fffefa;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transition:border-color .15s,background .15s
}
.folder-dropzone.drag-over{
  border-color:var(--green);
  background:#eef3e9
}
.folder-icon{
  width:48px;
  height:48px;
  margin-bottom:12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e9ede3;
  color:var(--green);
  font-size:27px
}
.folder-dropzone h2{
  margin:0 0 8px;
  font:24px Georgia,serif
}
.folder-dropzone p,.privacy-notice{
  color:var(--muted);
  font-size:13px;
  line-height:1.7
}
.folder-dropzone p{
  margin:0 0 18px
}
.privacy-notice{
  max-width:860px;
  margin:18px auto 0
}
.privacy-notice strong{
  color:var(--green)
}
.editor-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:26px 0
}
.editor-heading .text-button{
  display:block;
  margin-bottom:12px;
  color:var(--muted)
}
#project-name{
  display:block;
  font:normal 29px Georgia,serif;
  padding:0 0 4px;
  border:0;
  border-bottom:1px solid transparent;
  background:transparent;
  color:var(--green);
  width:min(65vw,600px)
}
#project-name:hover,#project-name:focus{
  border-bottom-color:#b4bdab
}
.editor-heading small{
  font:10px Consolas,monospace;
  color:#8a948b
}
.save-state{
  font-size:11px;
  background:#e8eee1;
  border-radius:20px;
  padding:8px 13px;
  color:#617451
}
.save-state.dirty{
  background:#fbefd8;
  color:#927141
}
.workbench{
  display:grid;
  grid-template-columns:minmax(0,1fr) 278px;
  gap:23px;
  align-items:start
}
.canvas-panel{
  border:1px solid var(--line);
  border-radius:10px;
  background:#efeee8;
  overflow:hidden
}
.canvas-heading{
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fffefa;
  border-bottom:1px solid var(--line);
  gap:10px
}
.canvas-heading>span{
  font-size:8px;
  letter-spacing:1.2px;
  color:#969c92
}
.tabs{
  display:flex;
  gap:5px;
  background:#f0f1eb;
  padding:4px;
  border-radius:7px
}
.tabs button{
  border-radius:5px;
  padding:9px 11px;
  font-size:11px;
  color:#7e897c;
  background:transparent
}
.tabs button.active{
  background:white;
  color:var(--green);
  box-shadow:0 1px 5px #0000000c;
  font-weight:650
}
.drop-zone{
  position:relative;
  margin:28px;
  aspect-ratio:297/210;
  background:white;
  box-shadow:0 3px 16px #303f2712
}
.drop-zone.drag-over{
  outline:3px dashed #66865c;
  outline-offset:5px
}
#sheet{
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  user-select:none;
  overflow:hidden
}
#sheet image.front-image{
  cursor:grab
}
#sheet.dragging image.front-image{
  cursor:grabbing
}
.drop-hint{
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  pointer-events:none;
  color:#61775f;
  gap:5px;
  background:none;
  margin:0;
  padding:0 18px 18px;
  border-radius:9px;
  text-align:center
}
.drop-hint strong{
  font:14px Georgia,serif
}
.drop-hint>span:last-child{
  font-size:11px;
  line-height:1.5
}
.canvas-footer{
  display:flex;
  justify-content:space-between;
  padding:0 28px 20px;
  color:#899182;
  font-size:9px;
  letter-spacing:1px
}
.tools{
  background:#fffefa;
  border:1px solid var(--line);
  border-radius:10px;
  padding:23px 20px
}
.tools h2{
  font:24px Georgia,serif;
  margin:12px 0
}
.muted{
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}
.tools .primary,.tools .secondary{
  padding:11px 9px
}
.tools label{
  font-size:11px;
  display:block;
  margin:15px 0 9px
}
.tools label span{
  float:right;
  color:var(--muted)
}
input[type=range]{
  width:100%;
  accent-color:var(--green)
}
input[type=text],input[type=url],input[type=number],dialog input,textarea{
  width:100%;
  border:1px solid #d9dece;
  border-radius:5px;
  padding:10px 11px;
  color:var(--green);
  background:white
}
.coordinate-fields{
  display:flex;
  gap:10px
}
.layer-slider-row{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:14px
}
.tools .layer-slider-row label{
  text-align:center;
  margin:12px 0 3px
}
.tools .layer-slider-row label span{
  float:none;
  display:block
}
.layer-slider-row input{
  display:block;
  margin:0
}
.layer-list-heading{
  margin-top:14px
}
textarea{
  resize:vertical;
  min-height:60px;
  font:inherit
}
#add-text{
  margin-bottom:6px
}
.coordinate-fields label{
  width:50%
}
.coordinate-fields input{
  margin-top:7px;
  padding:7px
}
.button-row{
  display:flex;
  gap:7px;
  margin:10px 0 15px
}
.button-row button{
  flex:1;
  font-size:10px
}
.danger{
  color:var(--red)
}
hr{
  border:0;
  border-top:1px solid #e8e9df;
  margin:23px 0
}
.tools h3{
  display:flex;
  justify-content:space-between
}
.tools h3 span{
  color:var(--muted);
  font-weight:400
}
.layer-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:250px;
  overflow:auto
}
.layer-item{
  display:flex;
  gap:10px;
  align-items:center;
  background:transparent;
  border:1px solid #e6e8df;
  border-radius:6px;
  padding:6px;
  color:var(--muted);
  font-size:11px;
  text-align:left
}
.layer-item.selected{
  border-color:#779271;
  background:#f0f4eb;
  color:var(--green)
}
.layer-item img,.layer-item > span{
  width:38px;
  height:30px;
  flex-shrink:0;
  object-fit:cover;
  border-radius:3px
}
.layer-item > span{
  display:grid;
  place-items:center;
  font:24px Georgia,serif;
  background:#f0f3e9
}
.layer-empty{
  font-size:11px;
  color:#949b8e;
  line-height:1.7
}
.info-card{
  background:#f0f3e9;
  border-radius:7px;
  padding:16px;
  margin-top:24px;
  font-size:11px;
  line-height:1.8;
  color:#74826b
}
.info-card strong{
  color:var(--green)
}
.info-card p{
  margin:10px 0 0
}
.action-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:24px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fffefa
}
.action-bar strong{
  font:18px Georgia,serif
}
.action-bar small{
  font-size:10px;
  color:var(--muted);
  margin-top:6px
}
.action-buttons{
  display:flex;
  gap:10px
}
.print-note{
  font-size:10px;
  line-height:1.7;
  color:#8d9589;
  margin:15px 0
}
.downloads{
  padding:18px;
  background:#e8eee1;
  border-radius:7px;
  margin-top:14px;
  font-size:12px;
  display:flex;
  gap:18px;
  flex-wrap:wrap
}
.downloads p{
  width:100%;
  margin:0
}
.site-footer{
  margin:65px 56px 0;
  padding:24px 0;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1.2px;
  color:#9b9f92
}
.site-footer span:last-child{
  letter-spacing:0;
  font:italic 12px Georgia,serif
}
#status{
  padding:14px 18px;
  border-radius:7px;
  margin-top:20px;
  font-size:13px;
  background:#e5eddf;
  color:var(--green)
}
#status.error{
  background:#fae8e2;
  color:#983b2d
}
dialog{
  border:1px solid var(--line);
  border-radius:13px;
  padding:30px;
  width:min(560px,92vw);
  max-height:90vh;
  color:var(--green);
  background:#fffefa
}
dialog::backdrop{
  background:#152c2266;
  backdrop-filter:blur(3px)
}
dialog h2{
  font:29px Georgia,serif;
  margin:14px 0 20px
}
dialog p{
  font-size:12px;
  line-height:1.7;
  color:var(--muted)
}
dialog label{
  font-size:12px;
  display:block;
  margin-bottom:8px
}
dialog input{
  margin-top:7px
}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:23px
}
.form-error{
  color:var(--red);
  margin:14px 0 0
}
#links-dialog{
  width:min(800px,94vw)
}
.links-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  flex-wrap:wrap
}
.links-heading>div{
  flex:1 1 270px
}
.links-upload{
  flex:0 1 225px;
  padding:15px;
  border:1px dashed #8a9e87;
  border-radius:7px;
  color:var(--green);
  background:#f0f3e9;
  text-align:center;
  font-size:12px
}
.links-upload span{
  display:block;
  margin-top:7px;
  font-size:10px;
  line-height:1.6;
  color:var(--muted)
}
.links-upload.drag-over{
  outline:3px solid #66865c;
  background:#e1ead7
}
.links-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:repeat(12,auto);
  grid-auto-flow:column;
  gap:5px 16px
}
.number-menu{
  position:fixed;
  z-index:20;
  width:260px;
  max-width:calc(100vw - 20px);
  max-height:calc(100vh - 20px);
  overflow:auto;
  padding:16px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fffefa;
  box-shadow:0 10px 35px #152c2230
}
.number-menu-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px
}
.number-menu h3{
  margin:0
}
.number-menu label{
  display:block;
  margin:12px 0 7px;
  font-size:11px
}
.number-menu label span{
  float:right;
  color:var(--muted)
}
.number-menu .muted{
  margin:0;
  font-size:10px
}
.number-style-row{
  display:grid;
  grid-template-columns:50% auto 24px;
  align-items:flex-end;
  justify-content:space-between;
  gap:6px
}
.number-size-control{
  min-width:0
}
.tools label.bold-toggle,.number-menu label.bold-toggle{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0 0 5px;
  white-space:nowrap;
  cursor:pointer
}
.bold-toggle input{
  appearance:none;
  width:14px;
  height:14px;
  margin:0;
  border:1px solid #758078;
  border-radius:50%;
  background:white;
  cursor:pointer
}
.bold-toggle input:checked{
  background:var(--green);
  box-shadow:inset 0 0 0 3px white
}
.tools select,.number-menu select{
  width:100%;
  padding:8px;
  border:1px solid #d5dacd;
  border-radius:5px;
  color:var(--green);
  background:white;
  font:inherit;
  font-size:12px
}
input.color-swatch{
  display:block;
  width:24px;
  height:24px;
  margin:0 0 2px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  cursor:pointer
}
input.color-swatch::-webkit-color-swatch-wrapper{
  padding:0
}
input.color-swatch::-webkit-color-swatch{
  border:0
}
input.color-swatch::-moz-color-swatch{
  border:0
}
#sheet .door-number{
  cursor:grab;
  outline:none
}
#sheet .door-number:focus-visible{
  stroke:#d19e38;
  stroke-width:1
}
#sheet.dragging .door-number{
  cursor:grabbing
}
.links-grid label{
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:center;
  gap:6px;
  margin:0;
  font-size:12px
}
.links-grid label span{
  text-align:right;
  font-variant-numeric:tabular-nums;
  cursor:grab
}
.links-grid input.duplicate-link{
  border-color:#a65c00;
  background:#fff0d4;
  color:#733f00
}
#links-duplicate-warning{
  color:#733f00
}
.links-grid input.link-drop-target{
  outline:2px solid #66865c;
  background:#edf3e6
}
.links-grid input{
  min-width:0;
  margin:0;
  padding:3px 8px;
  font-size:12px;
  line-height:18px
}
.spacing-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px
}
.square-style-controls{
  display:grid;
  grid-template-columns:max-content 24px minmax(40px,1fr);
  gap:8px;
  align-items:center;
  margin-top:10px
}
.tools .square-style-controls label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:10px
}
.square-style-controls input[type=checkbox]{
  margin:0;
  flex-shrink:0;
  accent-color:var(--green)
}
.tools label.export-option{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:12px 0;
  line-height:1.4
}
.tools label.export-option input{
  flex-shrink:0;
  margin:1px 0 0;
  accent-color:var(--green)
}
.square-style-controls input[type=range]{
  min-width:0;
  margin:0
}
.tools .spacing-heading,.tools .number-style-heading,.tools .image-section-heading{
  margin-bottom:5px
}
.tools .number-style-heading,.image-section-heading{
  margin-top:14px
}
.tools .spacing-heading{
  cursor:help
}
.tools .spacing-controls label{
  margin:2px 0
}
.spacing-controls input[type=range],.number-size-control input[type=range]{
  display:block;
  margin:0
}
.tools .number-size-control label,.number-menu .number-size-control label{
  text-align:center;
  margin:5px 0 2px
}
.number-font-select{
  margin-top:3px
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
@media(min-width:1600px){
  main{
    padding-top:12px
  }
  .drop-zone{
    margin:38px
  }
}
@media(max-width:1000px){
  .masthead{
    padding:0 25px
  }
  main{
    padding:0 25px
  }
  .workbench{
    grid-template-columns:minmax(0,1fr) 240px;
    gap:15px
  }
  .tools{
    padding:18px 15px
  }
  .drop-zone{
    margin:18px
  }
  .canvas-heading{
    padding:12px
  }
  .canvas-heading>span{
    display:none
  }
  .tabs button{
    font-size:10px;
    padding:8px
  }
  .site-footer{
    margin:45px 25px 0
  }
  .action-bar{
    padding:18px
  }
  .header-note{
    display:none
  }
}
@media(max-width:740px){
  main{
    padding:0 16px
  }
  .masthead{
    height:85px;
    padding:0 16px
  }
  .brand{
    font-size:17px
  }
  .intro{
    padding:40px 0 30px
  }
  .intro:after{
    font-size:150px;
    right:0;
    top:50px
  }
  .workbench{
    grid-template-columns:1fr
  }
  .tools{
    padding:20px
  }
  .drop-hint>span:last-child{
    font-size:9px
  }
  .canvas-heading{
    justify-content:center
  }
  .canvas-footer{
    font-size:8px;
    padding:0 18px 16px
  }
  .editor-heading{
    gap:10px
  }
  .save-state{
    font-size:9px;
    padding:7px
  }
  #project-name{
    font-size:24px;
    width:62vw
  }
  .editor-heading small{
    font-size:8px
  }
  .action-bar{
    align-items:flex-start;
    flex-direction:column
  }
  .action-buttons{
    width:100%;
    flex-wrap:wrap
  }
  .action-buttons button{
    flex:1
  }
  .links-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    grid-auto-flow:row
  }
  .site-footer{
    margin:40px 16px 0;
    gap:20px;
    font-size:8px
  }
  .site-footer span:last-child{
    text-align:right;
    font-size:10px
  }
  .section-heading .primary{
    padding:12px
  }
  .section-heading h2{
    font-size:21px
  }
}
body.editor-open{
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden
}
.editor-open .masthead{
  height:62px;
  padding:0 20px
}
.editor-open main{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:0 20px
}
.editor-open #status{
  flex-shrink:0;
  margin:6px 0 0;
  padding:7px 12px;
  max-height:64px;
  overflow:auto
}
.editor-open #editor{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0
}
.editor-open .editor-heading{
  flex-shrink:0;
  margin:10px 0
}
.editor-open .editor-heading .text-button{
  margin-bottom:5px
}
.editor-open #project-name{
  font-size:24px
}
.editor-open .workbench{
  flex:1;
  min-height:0;
  grid-template-rows:minmax(0,1fr)
}
.editor-open .canvas-panel{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  min-width:0
}
.editor-open .canvas-heading{
  flex-shrink:0;
  padding:8px 12px
}
.sheet-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  min-height:0;
  min-width:0;
  overflow:hidden
}
.editor-open .drop-zone{
  flex-shrink:0;
  margin:0;
  aspect-ratio:297/210
}
.boundary-handle{
  position:absolute;
  z-index:2;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  background:transparent;
  transform:translateY(-50%);
  cursor:ns-resize;
  touch-action:none
}
.boundary-left{left:-28px}
.boundary-right{right:-28px}
.boundary-handle::before{
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent
}
.boundary-left::before{
  margin-left:10px;
  border-left:18px solid #234d3d
}
.boundary-right::before{border-right:18px solid #234d3d}
.boundary-top,.boundary-bottom{
  transform:translateX(-50%);
  cursor:ew-resize
}
.boundary-top{top:-28px}
.boundary-bottom{bottom:-28px}
.boundary-top::before,.boundary-bottom::before{
  border:0;
  margin-left:5px;
  border-left:9px solid transparent;
  border-right:9px solid transparent
}
.boundary-top::before{
  margin-top:10px;
  border-top:18px solid #234d3d
}
.boundary-bottom::before{border-bottom:18px solid #234d3d}
.boundary-handle:focus-visible{
  outline:2px solid #d19e38;
  outline-offset:1px
}
.editor-open .drop-hint{
  flex-shrink:0;
  padding:0 10px 6px
}
.editor-open .drop-hint strong{
  display:none
}
.editor-open .canvas-footer{
  flex-shrink:0;
  padding:4px 12px 8px
}
.editor-open .tools{
  height:100%;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain
}
.editor-open .action-bar{
  flex-shrink:0;
  margin:8px 0;
  padding:10px 14px
}
.editor-open .downloads{
  flex-shrink:0;
  max-height:80px;
  overflow:auto;
  margin:0 0 8px;
  padding:8px 12px;
  gap:8px 16px
}
.editor-open .print-note,.editor-open>.site-footer{
  display:none
}
@media(max-width:740px){
  .editor-open .masthead{
    height:52px;
    padding:0 12px
  }
  .editor-open main{
    padding:0 10px
  }
  .editor-open .editor-heading{
    margin:6px 0
  }
  .editor-open #project-name{
    font-size:20px
  }
  .editor-open .workbench{
    grid-template-rows:minmax(0,1.3fr) minmax(0,1fr);
    gap:8px
  }
  .editor-open .tools{
    padding:12px
  }
  .editor-open .action-bar{
    padding:8px;
    gap:0
  }
  .editor-open .action-bar>div:first-child{
    display:none
  }
  .editor-open .action-buttons button{
    padding:10px 8px;
    font-size:11px
  }
}
@media(max-height:600px){
  .editor-open .masthead{
    height:38px
  }
  .editor-open .brand-mark{
    width:28px;
    height:30px;
    font-size:20px
  }
  .editor-open .brand small,.editor-open #project-uuid,
  .editor-open .canvas-footer,.editor-open .drop-hint,
  .editor-open .action-bar>div:first-child{
    display:none
  }
  .editor-open .editor-heading{
    margin:4px 0
  }
  .editor-open .editor-heading>div{
    display:flex;
    align-items:center;
    gap:14px
  }
  .editor-open .editor-heading .text-button{
    margin:0;
    white-space:nowrap
  }
  .editor-open #project-name{
    width:min(45vw,500px);
    font-size:18px
  }
  .editor-open .action-bar{
    padding:6px;
    margin:4px 0
  }
}