/* Mac + ToolKITZ panel mockup. Shared by the website and the Remotion walkthrough video.
   Everything inside .mac is sized in cqw so the whole screen scales with its width. */
.mac-wrap { container-type: inline-size; width: 100%; }
.mac {
  position: relative; width: 100cqw; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 2.2cqw; background: #0b0c1e; isolation: isolate;
  box-shadow: 0 0 0 .5cqw #1a1a1c, 0 0 0 .65cqw #3a3a3e, 0 4cqw 8cqw -2cqw rgba(20,20,10,.45);
  font-family: "Inter", -apple-system, system-ui, sans-serif; color: #fff; text-align: left; line-height: 1.3;
}
.mac .wall { position: absolute; inset: 0; background: url(img/mist-valley.webp) center / cover; transition: opacity .6s; }
.mac .wall.light { opacity: 0; background-image: url(img/wall-light.svg); }
.mac[data-wall="light"] .wall.light { opacity: 1; }

.menubar {
  position: absolute; inset: 0 0 auto; height: 2.7cqw; z-index: 5; display: flex; align-items: center; gap: 1.6cqw;
  padding: 0 1.8cqw; font-size: 1.05cqw; font-weight: 500; background: rgba(10,10,20,.25); backdrop-filter: blur(1cqw);
}
.mac[data-wall="light"] .menubar { color: #111; background: rgba(255,255,255,.35); }
.menubar b { font-weight: 700; }
.menubar .r { margin-left: auto; display: flex; gap: 1.4cqw; align-items: center; }
.menubar svg { width: 1.2cqw; height: 1.2cqw; fill: currentColor; }
.notch { position: absolute; left: 50%; top: 0; width: 15cqw; height: 2.7cqw; translate: -50% 0; background: #000; border-radius: 0 0 1.2cqw 1.2cqw; z-index: 7; }

/* The drop-down panel */
.panel {
  --base: #1C1C1E; --tile: #2A2A2D; --ink: #fff; --sub: rgba(255,255,255,.55);
  position: absolute; z-index: 6; left: 1.4cqw; right: 1.4cqw; top: 3.3cqw; height: 24cqw;
  display: grid; grid-template-columns: 1fr 1.15fr 1fr 1fr; gap: .9cqw; padding: .9cqw;
  background: var(--base); border-radius: 1.8cqw; color: var(--ink);
  box-shadow: 0 2cqw 5cqw rgba(0,0,0,.45), inset 0 0 0 .08cqw rgba(255,255,255,.08);
  transform-origin: top center;
}
.panel[data-style="black"] { --base: #000; --tile: #151517; }
.panel[data-style="glass"] { --base: rgba(40,40,55,.28); --tile: rgba(255,255,255,.1); backdrop-filter: blur(2.2cqw) saturate(1.6); }
.panel[data-layout="full"] { left: 0; right: 0; top: 2.7cqw; border-radius: 0 0 1.8cqw 1.8cqw; }
.panel[data-layout="notch"] { left: 22cqw; right: 22cqw; top: 0; padding-top: 3.4cqw; grid-template-columns: 1fr 1.15fr 1fr; border-radius: 0 0 2.4cqw 2.4cqw; background: #000; --tile: #161618; }
.panel[data-layout="notch"] .slot:nth-child(4) { display: none; }
/* A real render of the panel (img/ui/*.webp) in place of the HTML slots */
.panel.shot { display: block; height: auto; padding: 0; background: none; box-shadow: none; border-radius: 0; left: 1.2cqw; right: 1.2cqw; top: 3cqw; filter: drop-shadow(0 1.5cqw 2.5cqw rgba(0,0,0,.4)); }
.panel.shot img { width: 100%; display: block; }
.panel.shot[data-layout="notch"] { left: 18cqw; right: 18cqw; top: 0; background: none; padding: 0; }
.mac[data-wall="light"] .panel[data-style="glass"] { --base: rgba(255,255,255,.38); --tile: rgba(255,255,255,.55); --ink: #111; --sub: rgba(0,0,0,.5); }

.slot { background: var(--tile); border-radius: 1.2cqw; padding: 1cqw; overflow: hidden; position: relative; display: flex; flex-direction: column; gap: .7cqw; min-width: 0; }
.slot-h { display: flex; align-items: center; gap: .55cqw; font-size: .95cqw; font-weight: 600; color: var(--sub); }
.slot-h .ico { width: 1.5cqw; height: 1.5cqw; border-radius: .4cqw; }
.ico { display: inline-grid; place-items: center; flex: none; color: #fff; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.ico svg { width: 62%; height: 62%; fill: currentColor; }

/* File Shelf */
.files { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.file { display: grid; justify-items: center; gap: .3cqw; font-size: .75cqw; color: var(--sub); min-width: 0; }
.file i { width: 3.6cqw; height: 4.4cqw; border-radius: .45cqw; position: relative; display: block; background: #f2f2f2; box-shadow: 0 .2cqw .5cqw rgba(0,0,0,.3); }
.file i::after { content: attr(data-x); position: absolute; inset: auto 0 .5cqw; text-align: center; font: 700 .7cqw/1 Inter, sans-serif; font-style: normal; color: var(--fc, #555); }
.file i.img { background: linear-gradient(135deg, #ffb340, #ff5e57 60%, #7d3cf0); }
.file i.dir { width: 4.4cqw; height: 3.4cqw; margin-top: 1cqw; background: linear-gradient(#8cd3ff, #3a9bf0); border-radius: .35cqw .35cqw .5cqw .5cqw; }
.file span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropzone { margin-top: auto; border: .14cqw dashed #ff8a00; color: #ff9f2e; border-radius: .9cqw; padding: .6cqw; font-size: .8cqw; text-align: center; }

/* Clipboard */
.clips { display: flex; flex-direction: column; gap: .5cqw; }
.clip { display: flex; align-items: center; gap: .6cqw; background: rgba(255,255,255,.06); border-radius: .7cqw; padding: .55cqw .7cqw; font-size: .85cqw; white-space: nowrap; overflow: hidden; }
.clip em { font-style: normal; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.clip small { color: var(--sub); font-size: .7cqw; }
.clip .sw { width: 1.2cqw; height: 1.2cqw; border-radius: .3cqw; flex: none; }
.clip .th { width: 2.4cqw; height: 1.5cqw; border-radius: .25cqw; flex: none; background: linear-gradient(135deg, #64d2ff, #5e5ce6); }

/* Notes */
.note { font-size: .95cqw; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.note .caret { display: inline-block; width: .1cqw; height: 1.1cqw; background: #ffb340; vertical-align: -.15cqw; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Stats + timer */
.ring { width: 8cqw; height: 8cqw; margin: .2cqw auto 0; position: relative; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; rotate: -90deg; }
.ring b { font-size: 1.7cqw; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: .5cqw; font-size: .75cqw; color: var(--sub); }
.bars div { display: grid; grid-template-columns: 3cqw 1fr; align-items: center; gap: .5cqw; }
.bars u { height: .5cqw; border-radius: 1cqw; background: rgba(255,255,255,.1); position: relative; overflow: hidden; text-decoration: none; display: block; }
.bars u::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--c, #66d4cf); border-radius: inherit; transition: width .8s; }

/* Dock */
.dock { position: absolute; bottom: 1cqw; left: 50%; translate: -50% 0; z-index: 4; display: flex; gap: .7cqw; padding: .6cqw; border-radius: 1.6cqw; background: rgba(255,255,255,.18); backdrop-filter: blur(1.4cqw); box-shadow: inset 0 0 0 .08cqw rgba(255,255,255,.25); }
.dock i { width: 3.4cqw; height: 3.4cqw; border-radius: .9cqw; background: linear-gradient(160deg, var(--c1), var(--c2)); display: block; }

/* Desktop file + cursor */
.dfile { position: absolute; z-index: 8; display: grid; justify-items: center; gap: .3cqw; font-size: .8cqw; text-shadow: 0 .1cqw .3cqw #000; }
.dfile i { width: 3.8cqw; height: 4.6cqw; border-radius: .45cqw; background: #f4f4f4; display: block; position: relative; box-shadow: 0 .3cqw 1cqw rgba(0,0,0,.4); }
.dfile i::after { content: "PDF"; position: absolute; inset: auto 0 .6cqw; text-align: center; font: 700 .75cqw/1 Inter, sans-serif; color: #e5484d; }
.cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 2.2cqw; height: 2.2cqw; pointer-events: none; filter: drop-shadow(0 .15cqw .3cqw rgba(0,0,0,.5)); }
.cursor svg { width: 100%; height: 100%; }
.hint { position: absolute; z-index: 21; display: flex; align-items: center; gap: .5cqw; padding: .5cqw .9cqw; border-radius: 3cqw; background: rgba(255,255,255,.92); color: #111; font-size: 1cqw; font-weight: 600; white-space: nowrap; box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.3); }
.kbd { display: inline-grid; place-items: center; min-width: 1.9cqw; height: 1.9cqw; padding: 0 .4cqw; border-radius: .45cqw; background: #fff; color: #111; font-size: 1cqw; font-weight: 600; box-shadow: 0 .18cqw 0 #bdbdc2, 0 .3cqw .8cqw rgba(0,0,0,.25); transition: transform .15s, box-shadow .15s, background .15s; }
.kbd.on { transform: translateY(.15cqw); box-shadow: 0 .03cqw 0 #bdbdc2; background: #ffe2bf; }