/* piso 4 · Zazie: um piso em obra. Paredes em traço de planta (como os pisos
   por desenhar do teste 01), andaime, caixas de livros, a mesa de desenho com
   o logótipo a ser afinado entre duas versões, e a porta com o logótipo. */

.f-zazie {
  --wallc: #DCE6DF; --accent: var(--mint);
  --wire: rgb(31 28 44 / .42); --numc: var(--wire);
}
.f-zazie .slab {
  --top:
    linear-gradient(rgb(31 28 44 / .07) 1px, transparent 1px) 0 0 / calc(20 * var(--u)) calc(20 * var(--u)),
    linear-gradient(90deg, rgb(31 28 44 / .07) 1px, transparent 1px) 0 0 / calc(20 * var(--u)) calc(20 * var(--u)),
    rgb(255 255 255 / .35);
}
.f-zazie :is(.slab, .wall-l, .wall-r) { --c: rgb(255 255 255 / .3); --c1: rgb(255 255 255 / .2); --c2: rgb(255 255 255 / .1); }
.f-zazie :is(.wall-l, .wall-r) { --top: rgb(255 255 255 / .4); }
.f-zazie :is(.slab, .wall-l, .wall-r),
.f-zazie :is(.slab, .wall-l, .wall-r)::before,
.f-zazie :is(.slab, .wall-l, .wall-r)::after { outline: 1px solid var(--wire); outline-offset: -.5px; }
.f-zazie .wl-num { -webkit-text-stroke: calc(1.2 * var(--u)) var(--wire); }

/* a planta no chão */
.f-zazie .zz-plan { border: calc(1.4 * var(--u)) dashed var(--wire); background: rgb(255 255 255 / .55); }
.f-zazie .zz-plan i { position: absolute; border: calc(1.2 * var(--u)) solid rgb(61 111 182 / .6); }
.f-zazie .zz-p1 { left: 7%; top: 10%; width: 9%; height: 66%; }
.f-zazie .zz-p2 { left: 30%; top: 24%; width: 38%; height: 14%; }
.f-zazie .zz-p3 { left: 30%; top: 50%; width: 38%; height: 14%; }
.f-zazie .zz-door {
  right: 8%; bottom: 0; width: 20%; aspect-ratio: 1;
  border-width: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 0; border-style: dashed; border-radius: 0 100% 0 0;
}
.f-zazie .zz-plan b {
  position: absolute; left: 7%; bottom: 8%;
  font: 600 calc(7 * var(--u))/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cobalt);
}

/* caixas */
.f-zazie .zz-box { --c: #C99B66; --top: linear-gradient(90deg, transparent 44%, #E6C79B 0 56%, transparent 0) #D2A774; }
.f-zazie .zz-open {
  --top: repeating-linear-gradient(90deg,
    var(--coral) 0 calc(5 * var(--u)), var(--page-1) 0 calc(9 * var(--u)), var(--cobalt) 0 calc(14 * var(--u)),
    var(--sun) 0 calc(18 * var(--u)), #2B3A67 0 calc(22 * var(--u)), var(--mint) 0 calc(27 * var(--u)));
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #B8885A;
}
.f-zazie .zz-tag {
  display: grid; place-items: center; background: var(--page-1); color: var(--ink);
  font: 700 calc(7 * var(--u))/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}

/* andaime */
.f-zazie .zz-scaf { --c: transparent; --c1: transparent; --c2: transparent; }
.f-zazie .zz-pole { --c: #8E97A6; }
.f-zazie .zz-plank { --c: #C9A57C; --top: repeating-linear-gradient(90deg, #D9B891 0 calc(23 * var(--u)), #B8936A 0 calc(24.5 * var(--u))); }
.f-zazie .zz-brace {
  background:
    linear-gradient(to top right, transparent calc(50% - 1.3px), #8E97A6 0 calc(50% + 1.3px), transparent 0),
    linear-gradient(to top left, transparent calc(50% - 1.3px), #8E97A6 0 calc(50% + 1.3px), transparent 0);
}
.f-zazie .zz-ladder {
  background:
    linear-gradient(90deg, #B5874E 0 calc(3 * var(--u)), transparent 0 calc(100% - 3 * var(--u)), #B5874E 0),
    repeating-linear-gradient(0deg, transparent 0 calc(11 * var(--u)), #C99B66 0 calc(13.5 * var(--u)));
}
.f-zazie .zz-bucket { --c: #F1EEE7; --top: radial-gradient(circle, var(--mint) 0 58%, #F1EEE7 60%); }

/* mesa de desenho */
.f-zazie .zz-horse { --c: #B8936A; }
.f-zazie .zz-table { --c: #E9E4DA; --c2: #CFC8BB; }
.f-zazie .zz-ruler { background: repeating-linear-gradient(90deg, rgb(31 28 44 / .5) 0 1px, transparent 0 calc(4 * var(--u))) 0 0 / 100% 40% no-repeat var(--sun); }
.f-zazie .zz-pencil { --c: var(--coral); }

/* a porta */
.f-zazie .zz-door-front {
  padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(5 * var(--u));
  background: var(--ink); border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0;
}
.f-zazie .zz-glass {
  display: grid; place-items: center; height: 100%;
  background: linear-gradient(135deg, #F1F6F3 0 40%, #DCE9E1 0 48%, #EEF4F0 0);
}
.f-zazie .zz-glass img { width: 88%; }
.f-zazie .zz-handle {
  position: absolute; right: calc(14 * var(--u)); top: 58%;
  width: calc(3 * var(--u)); height: calc(20 * var(--u)); border-radius: 99px; background: #C9CED6;
}

/* candeeiro de obra */
.f-zazie .zz-foot, .f-zazie .zz-tripod { --c: #3A3645; }
.f-zazie .zz-lamp { --c: #E0A92E; --c2: #FFF4C8; }
.f-zazie .zz-lamp::before { box-shadow: 0 0 calc(22 * var(--u)) calc(7 * var(--u)) rgb(242 193 78 / .55); }


/* o Studio Display (da biblioteca) mostra a experiência favorita, pixelizada */
.f-zazie .sd-vidro {
  background: #15131C url(img/ecra-pixel-56.png) center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

/* o protótipo a funcionar, na janela de 480 px; as três experiências na legenda */
.ovo-zazie-vivo iframe { display: block; width: min(480px, calc(100vw - 52px)); aspect-ratio: 4 / 3; height: auto; border: 0; border-radius: 2px; background: #F3EEE6; }
.ovo-zazie-vivo span a { color: var(--ink); text-decoration-line: underline; text-decoration-color: var(--mint); text-decoration-thickness: 2px; text-underline-offset: 3px; }