/* floorplanlama — cute & soothing, soft sky blue. Quicksand, rounded, gentle. */
:root{--bg:#eff5fb;--card:#fff;--ink:#33475f;--dim:#8497ad;--line:#dbe8f7;--accent:#6fa8dc;--accent-ink:#4a86c5;--soft:#e2eefb;--accent2:#b3d3f2;--shadow:0 6px 24px rgba(70,110,160,.10);--sans:"Quicksand",ui-rounded,system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{background:var(--bg)}body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;font-weight:500}
a{color:var(--accent-ink)}a:hover{color:var(--ink)}h1,h2,h3,.mark{font-weight:700;letter-spacing:-.01em}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:900px;margin:0 auto;padding:22px 20px 14px}
.top .mark{font-size:1.35rem;color:var(--ink);text-decoration:none;font-weight:700}.top .mark b{color:var(--accent)}.top .tag{font-size:.8rem;color:var(--dim)}
.top nav{margin-left:auto;display:flex;gap:16px;font-size:.88rem}.top nav a{color:var(--dim);text-decoration:none}.top nav a:hover{color:var(--accent)}.top nav a.here{color:var(--ink)}
.pad-t{padding-top:16px}.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:16px}
input[type=text],select{font:500 1rem var(--sans);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fbfdff;color:var(--ink)}
.toolbar{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tb{appearance:none;cursor:pointer;font:700 .8rem var(--sans);border:1.5px solid var(--line);background:var(--soft);color:var(--accent-ink);border-radius:999px;padding:8px 14px}.tb:hover{border-color:var(--accent)}.tb.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tb.act{background:var(--accent-ink);color:#fff;border-color:var(--accent-ink)}
.tb:disabled{opacity:.4;cursor:default}.tb:disabled:hover{border-color:var(--line)}
.furn{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin:0 0 10px}.furn button{appearance:none;cursor:pointer;font:600 .76rem var(--sans);border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:6px 10px}.furn button:hover{border-color:var(--accent);background:var(--soft)}.furn .fsep{font:600 .68rem var(--sans);color:var(--muted,#7d94b8);text-transform:uppercase;letter-spacing:.04em;padding-left:6px;margin-left:2px;border-left:1.5px solid var(--line)}
#stage{position:relative;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1.5px var(--line)}
#plan{display:block;width:100%;touch-action:none;cursor:crosshair}
.chip{font:700 .72rem var(--sans);color:var(--accent-ink);background:var(--soft);border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;white-space:nowrap}
#dimIn{position:absolute;width:96px;font:700 .8rem var(--sans);border:1.5px solid var(--accent);border-radius:10px;padding:5px 9px;background:#fff;color:var(--ink);box-shadow:var(--shadow);z-index:3}
#dimIn:focus{outline:none;border-color:var(--accent-ink)}
.tplrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 10px}
.tplrow span{font:600 .68rem var(--sans);color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.tplrow button{appearance:none;cursor:pointer;font:600 .78rem var(--sans);border:1.5px dashed var(--accent2);background:#fbfdff;color:var(--accent-ink);border-radius:12px;padding:7px 13px}
.tplrow button:hover{border-color:var(--accent);background:var(--soft)}
.hint{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-size:.82rem;color:var(--accent-ink);background:var(--soft);border-radius:12px;padding:9px 14px;margin:0 0 10px}
.hint button{appearance:none;cursor:pointer;font:700 .74rem var(--sans);border:none;background:var(--accent);color:#fff;border-radius:999px;padding:6px 14px}
.hint button:hover{background:var(--accent-ink)}
#moretb{display:none}
@media(max-width:640px){
  #moretb{display:inline-block}
  .tb2{display:none}
  .tb2.show{display:flex}
  .tb,.tplrow button{padding:7px 10px;font-size:.74rem}
  .chip{padding:6px 9px}
}
.line{text-align:center;font-size:.82rem;color:var(--dim);margin:10px 0;min-height:1.2em}
.btn{appearance:none;cursor:pointer;font:700 .9rem var(--sans);color:#fff;background:var(--accent);border:none;border-radius:999px;padding:10px 22px;box-shadow:0 4px 14px rgba(111,168,220,.35)}.btn:hover{background:var(--accent-ink)}
.btn.soft{background:var(--soft);color:var(--accent-ink);box-shadow:none}
h2{font-size:1.4rem;margin:40px 0 10px}p{margin-bottom:12px}ol,ul{margin:0 0 12px 22px}li{margin-bottom:6px}.dimt{color:var(--dim)}
.card2{background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:18px 22px;margin:24px 0}.card2 .sig{text-align:right;color:var(--dim);font-size:.85rem;margin-top:8px}
.q{border-top:1.5px solid var(--line);padding:12px 0}.q h3{font-size:1rem;margin-bottom:4px}.q p{color:var(--dim);font-size:.9rem;margin:0}
.related{margin-top:40px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:620px){.cards{grid-template-columns:1fr}}
.cards a{display:block;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:16px;color:var(--ink);text-decoration:none}.cards a:hover{transform:translateY(-2px)}.cards b{display:block;margin-bottom:2px}.cards span{color:var(--dim);font-size:.82rem}
.posts a{display:block;background:var(--card);border-radius:16px;box-shadow:var(--shadow);padding:14px 18px;margin-bottom:10px;color:var(--ink);text-decoration:none}.posts a:hover{transform:translateY(-2px)}.posts b{display:block;font-size:1.02rem}.posts span{color:var(--dim);font-size:.85rem}.posts time{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:6px}
article.essay h1{font-size:1.7rem;margin:22px 0 4px}article.essay .meta{color:var(--dim);font-size:.8rem;margin-bottom:16px}article.essay h2{font-size:1.25rem;margin:24px 0 8px}article.essay figure{margin:20px 0;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}article.essay figure svg{display:block;width:100%;height:auto}article.essay figcaption{font-size:.78rem;color:var(--dim);padding:8px 14px;background:var(--card)}
footer{margin-top:44px;padding:22px 20px 34px;font-size:.82rem;color:var(--dim);text-align:center}footer .links{display:flex;gap:16px;justify-content:center;margin-bottom:8px;flex-wrap:wrap}footer a{color:var(--accent-ink);text-decoration:none}
[hidden]{display:none!important}@media(max-width:600px){.top nav{margin-left:0;width:100%;gap:14px}h2{font-size:1.2rem}}

/* palette thumbnails */
.furn button{display:inline-flex;align-items:center;gap:6px}
.furn canvas.thumb{display:block;flex:0 0 auto}

/* first-visit coach */
.coach{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:.84rem;
  color:var(--accent-ink,#2b5f8f);background:var(--soft,#eaf2fb);border-radius:12px;
  padding:9px 14px;margin:0 0 10px}
.coach b{font-size:.72rem;background:var(--accent,#6fa8dc);color:#fff;border-radius:999px;padding:3px 9px}
.coach button{appearance:none;cursor:pointer;font:600 .72rem var(--sans);margin-left:auto;
  border:1.5px solid var(--line,#d8e4f2);background:#fff;color:var(--dim,#5b7391);border-radius:999px;padding:5px 12px}
.coach button:hover{border-color:var(--accent,#6fa8dc)}

/* on-canvas zoom deck */
.zoomdeck{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:3}
.zoomdeck button{appearance:none;cursor:pointer;width:36px;height:36px;border-radius:10px;
  border:1.5px solid var(--line);background:rgba(255,255,255,.94);color:var(--accent-ink,#2b5f8f);
  font:700 1.1rem var(--sans);line-height:1;box-shadow:0 2px 8px rgba(60,90,130,.14)}
.zoomdeck button:hover{border-color:var(--accent)}

/* the furniture shelf toggle */
.furntoggle{appearance:none;cursor:pointer;display:block;width:100%;text-align:left;
  font:600 .84rem var(--sans);color:var(--accent-ink,#2b5f8f);background:var(--soft,#eaf2fb);
  border:1.5px solid var(--line,#d8e4f2);border-radius:12px;padding:9px 14px;margin:0 0 10px}
.furntoggle:hover{border-color:var(--accent,#6fa8dc)}
.furntoggle span{float:right;font-weight:700}

/* clear all reads as what it is */
.tb.danger{color:#b8382a;border-color:#e7b8b0;background:#fff6f4}
.tb.danger:hover{background:#ffe9e5;border-color:#c94b3b}

/* the editor card stays in the reading column — ⛶ fullscreen is the
   dedicated big-canvas mode, so the page itself keeps calm margins */

/* the drawing board, fullscreen */
#stage:fullscreen{background:#fff;border-radius:0}
#stage:-webkit-full-screen{background:#fff;border-radius:0}

/* pan pad, bottom-left of the board */
.pandeck{position:absolute;left:10px;bottom:10px;display:grid;z-index:3;
  grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:2px}
.pandeck button{appearance:none;cursor:pointer;border-radius:8px;
  border:1.5px solid var(--line);background:rgba(255,255,255,.94);color:var(--accent-ink,#2b5f8f);
  font:700 .72rem var(--sans);line-height:1;box-shadow:0 2px 8px rgba(60,90,130,.14)}
.pandeck button:hover{border-color:var(--accent)}
#pup{grid-area:1/2}#pleft{grid-area:2/1}#pright{grid-area:2/3}#pdown{grid-area:3/2}

/* the lama itself */
.top .mark{display:inline-flex;align-items:center}
.marksvg{display:block;flex:0 0 auto;margin-right:8px}