@font-face{font-family:Neulis;src:url(/fonts/neulis/Neulis-Light.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:Neulis;src:url(/fonts/neulis/Neulis-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Neulis;src:url(/fonts/neulis/Neulis-Italic.otf) format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Neulis;src:url(/fonts/neulis/Neulis-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:Neulis;src:url(/fonts/neulis/Neulis-SemiBold.otf) format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:Neulis;src:url(/fonts/neulis/Neulis-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:Jeffesta;src:url(/fonts/jeffesta/jeffesta-regular-webfont.woff2) format("woff2"),url(/fonts/jeffesta/jeffesta-regular-webfont.woff) format("woff");font-display:swap}

:root{
  --rosa:#F48591; --coral:#FA8D85; --pessego:#FEA283; --mel:#FFB872;
  --salvia:#8DA599; --lavanda:#8D96C1; --malva:#C18EA9;
  --cinza-claro:#D6D4CE; --cinza:#C8C4B9; --branco:#FFFBF3;
  --cor:var(--cinza);  /* a única cor do site */
  --gaveta:280px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--branco);color:var(--cor);font-family:Neulis,Figtree,system-ui,-apple-system,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
body{display:flex}

/* ---------- a gaveta: as pílulas, uma embaixo da outra ---------- */
#gaveta{position:relative;z-index:5;flex:0 0 var(--gaveta);height:100%;display:flex;flex-direction:column;padding:72px 28px 28px;background:var(--branco);border-right:1px solid var(--cor)}
.marca{margin:0;font:400 56px/.9 Jeffesta,Neulis,sans-serif;letter-spacing:0;text-transform:lowercase}
.marca span:nth-child(1){color:var(--cor)}.marca span:nth-child(2){color:var(--pessego)}.marca span:nth-child(3){color:var(--mel)}
.marca span:nth-child(4){color:var(--salvia)}.marca span:nth-child(5){color:var(--cor)}.marca span:nth-child(6){color:var(--malva)}
.sub{margin:18px 0 40px;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--cor)}
#alterna{position:fixed;left:20px;top:20px;z-index:8;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center}
#alterna{color:var(--cor);left:calc(var(--gaveta) - 48px);transition:transform .2s,left .45s cubic-bezier(.2,.8,.2,1)}
body.gaveta-fechada #alterna{left:20px}
#alterna:hover{transform:scale(1.15)}
#alterna svg{width:14px;height:14px}
#gaveta{transition:flex-basis .45s cubic-bezier(.2,.8,.2,1),padding .45s cubic-bezier(.2,.8,.2,1),border-color .45s;overflow:hidden}
body.gaveta-fechada #gaveta{flex-basis:0;padding-left:0;padding-right:0;border-right-color:transparent}
body.gaveta-fechada #gaveta>*{opacity:0;pointer-events:none}
#gaveta>*{transition:opacity .25s}
#lista{list-style:none;margin:0 -8px;padding:6px 8px 24px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;scrollbar-width:none}
#lista::-webkit-scrollbar{display:none}
.pilula{position:relative;display:flex;flex-direction:column;justify-content:center;height:44px;padding:0;border-radius:999px;background:var(--cor);color:var(--branco);cursor:grab;user-select:none;touch-action:none;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s,opacity .25s}
.pilula b{display:block;font-size:11px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pilula small{display:block;margin-top:5px;font-size:11px;letter-spacing:.08em;opacity:.85}
.pilula:hover{transform:translateX(4px)}
.pilula.aberta::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--branco)}
.pilula.vaga{opacity:.25}
.pilula.voando{position:fixed;z-index:50;pointer-events:none;cursor:grabbing;box-shadow:0 18px 40px -12px rgba(200,196,185,.5);transition:none}
.pilula.chegou{animation:chegou .7s cubic-bezier(.2,.8,.2,1)}
@keyframes chegou{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:none}}
#nova{display:flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:8px;width:22px;height:22px;border-radius:50%;color:var(--cor);transition:transform .2s}
#nova:hover{transform:scale(1.2)}
#nova svg{width:14px;height:14px}

/* ---------- o mundo: o canvas livre ---------- */
#mundo{position:relative;flex:1;height:100%;overflow:hidden;outline:none;touch-action:none;cursor:default;
  background-color:var(--branco);background-image:radial-gradient(var(--cor) 1.2px,transparent 1.3px);background-size:28px 28px}
#mundo.andando{cursor:grabbing}
#palco{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
#palco.fechando{transition:transform .8s cubic-bezier(.6,0,.3,1),opacity .8s ease-in}
#palco.abrindo{animation:abrindo .6s cubic-bezier(.2,.8,.2,1)}
@keyframes abrindo{from{opacity:0}to{opacity:1}}

#topo{position:absolute;left:64px;top:48px;right:64px;z-index:3;pointer-events:none}
#titulo{pointer-events:auto;width:min(720px,100%);padding:0;border:0;background:transparent;outline:none;font:300 44px/1.1 Neulis,sans-serif;text-transform:lowercase;letter-spacing:-.01em;color:var(--cor)}
#titulo::placeholder{color:var(--cor)}
#estado{margin:14px 0 0;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--cor);min-height:1em}

#vazio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;pointer-events:none;text-align:center;padding:0 32px;transition:opacity .4s}
#vazio p{margin:0;font-size:13px;letter-spacing:.06em;color:var(--cor)}
#vazio .grande{margin-bottom:18px;font:300 30px/1.2 Neulis,sans-serif;color:var(--cor)}
#vazio.some{opacity:0}

/* as coisas no canvas */
.peca{position:absolute;border-radius:22px;outline:2px solid transparent;outline-offset:10px;transition:outline-color .2s}
.peca.escolhida,.peca:hover{outline-color:color-mix(in srgb,var(--cor) 45%,transparent)}
.peca.escolhida{outline-color:var(--cor)}
.peca.texto{outline:none!important;border-radius:0}
.peca.texto .alca,.peca.texto .tira,.peca.texto .canto{display:none}
.peca.texto .miolo{min-width:2px;max-width:640px;min-height:1.6em;padding:0;caret-color:var(--cor);outline:none;font-size:20px;line-height:1.65;color:var(--cor);white-space:pre-wrap;overflow-wrap:break-word;cursor:text;width:max-content}
.peca.foto img,.peca.video video{display:block;width:100%;height:100%;object-fit:cover;border-radius:22px;background:var(--cor);user-select:none;-webkit-user-drag:none}
.peca.foto{cursor:grab}
.peca.enviando{animation:enviando 1.2s ease-in-out infinite}
@keyframes enviando{50%{opacity:.45}}
.alca,.tira,.canto{position:absolute;opacity:0;transition:opacity .2s;z-index:2}
.peca:hover .alca,.peca:hover .tira,.peca:hover .canto,.peca.escolhida .alca,.peca.escolhida .tira,.peca.escolhida .canto{opacity:1}
.alca{left:0;top:-42px;height:26px;padding:0 13px;gap:4px;border-radius:999px;background:var(--cor);display:flex;align-items:center;cursor:grab;touch-action:none}
.alca i{width:4px;height:4px;border-radius:50%;background:var(--branco)}
.tira{right:0;top:-42px;width:26px;height:26px;border-radius:50%;background:var(--branco);border:1.5px solid var(--cor);color:var(--cor);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
.tira:hover{border-color:var(--cor);color:var(--cor)}
.canto{right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:var(--branco);border:2px solid var(--cor);cursor:nwse-resize;touch-action:none}

/* a doca */
#doca{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:4px;padding:8px;border-radius:999px;background:var(--branco);border:1.5px solid var(--cor);box-shadow:0 20px 50px -24px rgba(200,196,185,.5);white-space:nowrap}
#doca button{display:flex;align-items:center;justify-content:center;width:52px;height:48px;border-radius:999px;color:var(--cor);transition:background .2s,color .2s}
#doca button:hover{background:color-mix(in srgb,var(--cor) 14%,var(--branco));color:var(--cor)}
#doca .risco{width:1.5px;height:22px;margin:0 6px;background:var(--cor)}
#doca #zoom{color:var(--cor)}
#doca .forte{width:72px;margin-left:4px;background:var(--cor);color:var(--branco)}
#doca .forte:hover{background:var(--cor);color:var(--branco);filter:saturate(1.15)}

#solta{position:absolute;inset:18px;z-index:6;display:none;align-items:center;justify-content:center;border:2px dashed var(--cor);border-radius:36px;background:color-mix(in srgb,var(--cor) 8%,transparent);pointer-events:none}
#mundo.soltando #solta{display:flex}

/* ---------- celular: as pílulas viram uma fileira em cima ---------- */
@media (max-width:760px){
  body{flex-direction:column}
  #alterna,body.gaveta-fechada #alterna{top:calc(env(safe-area-inset-top) + 16px);left:auto;right:10px}
  #gaveta{flex:0 0 auto;height:auto;flex-direction:row;align-items:center;gap:14px;padding:calc(env(safe-area-inset-top) + 18px) 44px 18px 16px;border-right:0;border-bottom:1px solid var(--cor)}
  body.gaveta-fechada #gaveta{flex-basis:auto;height:calc(env(safe-area-inset-top) + 74px);border-bottom-color:transparent}
  .sub{display:none}
  #lista{flex-direction:row;overflow-x:auto;overflow-y:hidden;margin:0;padding:6px 4px;gap:10px}
  .pilula{flex:0 0 auto;height:38px;width:84px}
  .pilula small{display:none}
  .pilula.aberta::after{display:none}
  .pilula:hover{transform:none}
  #nova{flex:0 0 auto;margin:0}
  #topo{left:16px;right:16px;top:28px}
  #titulo{font-size:30px}
  #doca{bottom:calc(env(safe-area-inset-bottom) + 18px);max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
  #doca button{width:48px;height:44px}
  #doca #zoom{display:none}
  #doca .risco{display:none}
}

/* ---------- typing: cada pílula é um projeto, e ele abre inteiro à direita ---------- */
.pilula{padding:0 16px}
.pilula b{font-size:10px;letter-spacing:.28em;line-height:22px;padding-right:12px}
#tela{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--branco)}
#tela.abrindo{animation:abrindo .6s cubic-bezier(.2,.8,.2,1)}
@media (max-width:760px){
  .pilula{width:auto;max-width:180px}
}