/* Ilo Type — layout and the parts that are new to this window */

.tp .topbar { position: relative; }
.tp-tabs { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.tp-tab { border: 0; background: transparent; padding: 4px 14px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.tp-tab:hover { color: var(--text); }
.tp-tab.on { background: var(--bg-3, #3a3a3a); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }

.tp-body { flex: 1; min-height: 0; position: relative; }
.tp-pane { position: absolute; inset: 0; display: none; grid-template-columns: 1fr 300px; min-height: 0; }
.tp-pane.on { display: grid; }
.tp-stage { background: var(--stage); min-width: 0; min-height: 0; overflow: auto; position: relative; }
.tp-side { border-left: 1px solid var(--line); overflow-y: auto; padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 10px; }

.tp-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-2); text-transform: uppercase; margin: 6px 0 0; }
.tp-p { font-size: 11.5px; line-height: 1.5; color: var(--text-2); margin: 0; }
.tp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tp-side .btn { width: 100%; justify-content: center; }
.tp-side .btn + .btn { margin-top: -2px; }
.tp-chk { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-2); cursor: pointer; }
.tp-new { font-size: 9px; letter-spacing: .06em; padding: 2px 6px; border-radius: 99px; background: linear-gradient(90deg, #ff48b0, #8ad8ff); color: #111; margin-left: 6px; vertical-align: 1px; }

/* preset gallery: each card is a CSS sketch of the look, the real result is pure vector in Illustrator */
.tp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 16px; }
.tp-card { position: relative; border: 0; border-radius: 14px; padding: 18px 12px 12px; cursor: pointer; text-align: left; background: #f4efe7; box-shadow: 0 0 0 1px rgba(0,0,0,.06); transition: transform .2s var(--ease), box-shadow .2s; }
.tp-card:hover { transform: translateY(-2px); }
.tp-card.on { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px rgba(0,0,0,.35); }
.tp-card .tp-word { display: block; font: 900 54px/1.05 "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.02em; text-align: center; padding: 6px 0 14px; }
.tp-card .tp-name { display: block; font-size: 11.5px; font-weight: 700; color: #2a2730; }
.tp-card .tp-sub { display: block; font-size: 10.5px; color: #6b6672; margin-top: 2px; }
.w-bubble { color: var(--c, #ff5fa2); text-shadow: 0 1px 0 var(--d1), 0 2px 0 var(--d1), 0 3px 0 var(--d2), 0 4px 0 var(--d2), 0 5px 0 var(--d3), 0 6px 0 var(--d3), 0 12px 14px rgba(30,10,40,.28); position: relative; }
.w-chrome, .w-gold, .w-holo { background: var(--g); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 #2a2f38) drop-shadow(0 3px 0 #59626f) drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.w-chrome { --g: linear-gradient(180deg, #fff 0%, #c9d5e6 30%, #5d6878 47%, #1b1f27 50%, #f2f5ff 53%, #96a3b6 76%, #e8edf4 100%); font-family: "Helvetica Neue", Arial, sans-serif !important; font-style: italic; }
.w-gold { --g: linear-gradient(180deg, #fff6d6 0%, #f5ca5e 30%, #9a6a1b 47%, #4a2d06 50%, #ffe9a6 53%, #c8902e 76%, #fff1c2 100%); font-family: "Helvetica Neue", Arial, sans-serif !important; filter: drop-shadow(0 1px 0 #5a3a08) drop-shadow(0 3px 0 #8a5c12) drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.w-holo { --g: linear-gradient(170deg, #ffd8f6, #b9f3ff 25%, #d8c8ff 45%, #fff3b6 62%, #ffc6e9 80%, #c0fff0); filter: drop-shadow(0 2px 0 #9a8bd6) drop-shadow(0 4px 0 #b9a8ef) drop-shadow(0 8px 10px rgba(80,60,140,.3)); }
.w-gummy { color: var(--c); opacity: .85; text-shadow: 0 2px 0 var(--d1), 0 4px 0 var(--d2), 0 10px 14px rgba(0,0,0,.2); }
.w-clay { color: var(--c); text-shadow: 0 2px 0 var(--d2), 0 4px 0 var(--d3), 0 6px 0 var(--d3), 0 12px 10px rgba(0,0,0,.2); }
.w-sticker { color: var(--c); -webkit-text-stroke: 7px #fff; paint-order: stroke fill; text-shadow: 0 0 0 #fff, 0 4px 0 var(--d3), 0 10px 12px rgba(0,0,0,.25); }

.tp-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-sw { width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.tp-sw.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.tp-color { width: 22px; height: 22px; border: 0; padding: 0; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }

/* kinetic */
.tp-motion { display: flex; flex-direction: column; overflow: hidden; }
.tp-canvas-wrap { flex: 1; min-height: 0; display: grid; place-items: center; padding: 20px; position: relative;
    background-color: #fff; background-image: linear-gradient(45deg, #eee 25%, transparent 25%), linear-gradient(-45deg, #eee 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eee 75%), linear-gradient(-45deg, transparent 75%, #eee 75%);
    background-size: 18px 18px; background-position: 0 0, 0 9px, 9px -9px, -9px 0; }
.tp-canvas-wrap canvas { max-width: 100%; max-height: 100%; }
.tp-empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #6b6672; font-size: 12px; gap: 6px; background: var(--stage); }
.tp-empty[hidden] { display: none; }
.tp-empty-word { font: 900 64px/1 "Arial Rounded MT Bold", Arial, sans-serif; color: var(--text-2); opacity: .35; animation: tp-bob 2.4s var(--ease) infinite; }
@keyframes tp-bob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.tp-transport { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg); }
.tp-scrub { flex: 1; height: 4px; border-radius: 4px; background: var(--track); overflow: hidden; cursor: pointer; }
.tp-scrub i { display: block; height: 100%; width: 0; background: var(--rainbow); }
.tp-time { font: 11px var(--mono); color: var(--text-2); min-width: 46px; text-align: right; }
.tp-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tp-preset { border: 0; border-radius: 7px; padding: 7px 6px; font-size: 11.5px; background: var(--field); color: var(--text-2); cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); }
.tp-preset:hover { color: var(--text); }
.tp-preset.on { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.tp-preset small { display: block; font-size: 9.5px; opacity: .6; }
.tp-exports { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tp-exports .btn { width: auto; }
.tp-progress { height: 3px; border-radius: 3px; background: var(--track); overflow: hidden; }
.tp-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.tp .footer { justify-content: flex-start; }
.tp .menu { position: absolute; right: 8px; top: 36px; z-index: 30; }