/* One real map, given room to change. Its lettering explains each style. */
.editor-demo{position:relative;display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,min(1200px,calc((100svh - 172px)*594/420)));column-gap:clamp(28px,3vw,58px);padding-block:42px 30px;scroll-margin-top:28px;color:var(--ink,#2d302c)}
.editor-demo__title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.editor-demo__copy{grid-area:1/1;display:flex;flex-direction:column;align-items:center;align-self:center;gap:clamp(28px,3vw,44px);min-width:0}
.editor-demo__note{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18em;align-self:center;justify-self:stretch;min-width:0;margin:0;padding-block:0;color:var(--map-accent,#b53612);font:clamp(38px,4.1vw,76px)/1.18 Worktable Hand,cursive;letter-spacing:0;text-align:center}
.editor-demo__note-line{display:block;white-space:nowrap;transform:rotate(-5deg)}
.editor-demo__note-lead{transform:rotate(-3deg)}
.editor-demo__note-detail{position:relative;display:inline-block;padding-bottom:.25em;font-size:1.7em;line-height:1.1;white-space:nowrap;transform:rotate(-6deg)}
.editor-demo__note-detail::after{content:'';position:absolute;left:-8%;bottom:0;width:116%;height:.32em;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 30'%3E%3Cpath d='M4 12Q55 3 120 9T236 6M7 25Q70 15 139 21T231 17' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.editor-demo__sheet{grid-area:1/2;width:100%;max-width:1200px;margin-inline:auto}
.editor-demo__stage{position:relative;width:100%}
.editor-demo__canvas{width:100%;aspect-ratio:594/420;padding:clamp(9px,1.15vw,17px);background:#fffaf0;border:1px solid #bdb6a180;box-shadow:1px 2px 3px #4b40251a,6px 12px 22px #4b402520}
.editor-demo__art{width:100%;height:100%;overflow:hidden;background:#fffaf0}
.editor-demo__art>svg,.editor-demo__art>img,.editor-demo__art>picture,.editor-demo__art>picture>img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.editor-demo__toggle{position:absolute;top:clamp(18px,2vw,30px);right:clamp(18px,2vw,30px);z-index:2;display:grid;place-items:center;width:32px;height:32px;padding:8px;border:1px solid #b8af9666;border-radius:50%;background:#fffaf0e8;color:var(--map-accent,#b53612);cursor:pointer;transition:background .18s,border-color .18s}
.editor-demo__toggle:hover{background:#fffaf0;border-color:var(--map-accent,#b53612)}
.editor-demo__toggle:disabled{opacity:.45;cursor:progress}
.editor-demo__toggle svg{display:block;width:14px;height:14px;fill:currentColor;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.editor-demo__toggle .editor-demo__pause-icon{fill:none}
.editor-demo__toggle .editor-demo__play-icon{display:none}
.editor-demo[data-demo-playing=false] .editor-demo__toggle .editor-demo__play-icon{display:block}
.editor-demo[data-demo-playing=false] .editor-demo__toggle .editor-demo__pause-icon{display:none}
.editor-demo__toggle>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.editor-demo__toggle:focus-visible{outline:2px solid var(--map-accent,#b53612);outline-offset:4px}
.editor-demo__footer{display:flex;justify-content:center;width:100%;margin:0;padding:0}
.editor-demo .editor-demo__cta{--map-arrow-light:#fffbea;--map-arrow-dark:#e8c0ae;display:inline-flex;align-items:center;justify-content:center;min-height:52px;max-width:100%;padding:14px 22px;gap:20px;border:1px solid var(--map-accent,#b53612);border-radius:3px;background:var(--map-accent,#b53612);color:#fffaf0;font-size:16px;font-weight:700;line-height:1.4;text-decoration:none;box-shadow:0 3px 0 #75260e24;transition:background .18s,border-color .18s,translate .18s}
.editor-demo .editor-demo__cta svg{flex-shrink:0}
.editor-demo .editor-demo__cta:hover{background:#942c10;border-color:#942c10;color:#fffaf0;translate:0 -2px}
.editor-demo .editor-demo__cta:focus-visible{outline:2px solid var(--map-accent,#b53612);outline-offset:4px}
@media(min-width:1101px){body.leporelo-site .editor-demo,.editor-demo{padding-inline:5% 2.5%}}
@media(max-width:1100px){
  .editor-demo{grid-template-columns:minmax(0,1fr)}
  .editor-demo__copy{display:contents}
  .editor-demo__sheet,.editor-demo__footer{grid-column:1;max-width:min(1200px,calc((100svh - 196px)*594/420))}
  .editor-demo__footer{grid-area:2/1;margin-inline:auto;padding-top:24px}
  .editor-demo__note{position:absolute;display:block;top:clamp(25px,3vw,40px);left:max(25px,calc((100% - min(1200px,(100svh - 196px)*594/420))/2 + 25px));z-index:1;max-width:none;padding:8px 14px 10px;background:#fffaf0e8;font-size:24px;transform:rotate(-4deg)}
  .editor-demo__note-line,.editor-demo__note-detail{transform:none}
  .editor-demo__note-lead{margin-top:.8em}
  .editor-demo__note-detail{margin-top:.04em}
}
@media(max-width:760px){
  body.leporelo-site .editor-demo,.editor-demo{padding:30px 5% 25px}
  .editor-demo__sheet,.editor-demo__footer{max-width:480px}
  .editor-demo__note{top:48px;left:max(calc(5% + 18px),calc((100% - 480px)/2 + 18px));padding:7px 11px 9px;font-size:clamp(19px,4.9vw,24px)}
  .editor-demo__note-lead{margin-top:.6em}
  .editor-demo__canvas{aspect-ratio:420/594;padding:9px;box-shadow:1px 2px 3px #4b40251a,4px 8px 15px #4b40251f}
  .editor-demo__toggle{top:19px;right:19px}
  .editor-demo__footer{padding-top:24px}
  .editor-demo .editor-demo__cta{font-size:15px;gap:20px}
}
body.leporelo-site .leporelo-unit .editor-demo{padding-block:0}
@media(max-width:1100px){body.leporelo-site .leporelo-unit .editor-demo__note{top:25px}}
@media(max-width:760px){body.leporelo-site .leporelo-unit .editor-demo__note{top:20px}}
@media(prefers-reduced-motion:reduce){.editor-demo__toggle,.editor-demo .editor-demo__cta{transition:none}}
@media print{
  .editor-demo__toggle{display:none}
  .editor-demo__canvas{box-shadow:none}
  .editor-demo__sheet{break-inside:avoid}
}