/* studio.css – the live demos in the workshop: textile (t4), digital print (p5), large format (x6), web (w7)
   and the "try it live" controls under each craft. Controls: assets/js/studio.js, 3D: assets/js/studio3d.js.
   Sizes follow each scene (container units cqw / cqh), so the scenes look the same on a phone and a PC. */
.t4, .p5, .x6, .w7 { container-type: size; overflow: hidden; }

/* ---------------------------------------------------------------- 04 · 05 · 06: real 3D (studio3d.js) */
/* The renderer's canvas moves into the scene that is shown. Underneath: a dark studio backdrop, which is
   also what stays without WebGL. */
.t4, .p5, .x6 { background: radial-gradient(80% 70% at 50% 30%, #2a1d40, #07060b 75%); }
.s3d-host { position: absolute; inset: 0; }
.s3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.s3d-badge { position: absolute; right: 5cqw; bottom: 9cqh; z-index: 3; opacity: 0; transform: translateY(2cqh) scale(.9); transition: opacity .4s, transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.t4.p3 .s3d-badge { opacity: 1; transform: none; }
.s3d-badge b { display: block; padding: 1.1cqh 1.8cqw; border-radius: 99px; background: linear-gradient(90deg, #8f1fd6, #ff1f7a); font: 800 max(2.6cqh, 12px)/1 var(--sx-display); color: #fff; box-shadow: 0 1cqh 3cqh rgba(255, 31, 122, .45); }
.x6-label { position: absolute; left: 4cqw; top: 5cqh; z-index: 3; display: grid; gap: .8cqh; padding: 1.6cqh 2cqw; border-radius: 1.6cqh; color: #fff; background: rgba(10, 8, 18, .62); border: 1px solid rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.x6-label b { font: 800 max(5cqh, 16px)/1 var(--sx-display); letter-spacing: -.02em; color: transparent; background: linear-gradient(90deg, #fff, #ffb8e0); -webkit-background-clip: text; background-clip: text; }
.x6-label small { font: 600 max(1.6cqh, 9px)/1.2 "Inter", sans-serif; color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------- 07 · web */
.w7 { --w1: #8f1fd6; --w2: #ff1f7a; --w3: #2fd8ff; }
.w7 .scb-browser { left: 3%; top: 8%; width: 62%; height: 70%; }
.w7-brand { max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 800 max(1.7cqh, 9px)/1.1 var(--sx-display); letter-spacing: -.01em;
  color: transparent; background: linear-gradient(90deg, var(--w1), var(--w2)); -webkit-background-clip: text; background-clip: text; }
.scb-nav .w7-brand { opacity: 0; transition: opacity .4s; }
.w7.p1 .scb-nav .w7-brand { opacity: 1; }
.scb-phone-in .w7-brand { max-width: 100%; font-size: max(1.2cqh, 7px); }
.w7 .scb-hero-img { position: relative; overflow: hidden; }
.w7 .scb-hero-img i { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .28); opacity: 0; transition: opacity .6s .4s; animation: w7-float 5s ease-in-out infinite; }
.w7.p1 .scb-hero-img i { opacity: 1; }
.w7 .scb-hero-img i:nth-child(1) { width: 34%; aspect-ratio: 1; left: 12%; top: 18%; }
.w7 .scb-hero-img i:nth-child(2) { width: 18%; aspect-ratio: 1; right: 14%; top: 10%; animation-delay: -1.6s; }
.w7 .scb-hero-img i:nth-child(3) { width: 12%; aspect-ratio: 1; right: 26%; bottom: 14%; animation-delay: -3s; }
@keyframes w7-float { 50% { transform: translateY(-12%); } }
.w7 .scb-toast { right: auto; top: auto; left: 25%; bottom: 4%; z-index: 4; }
.w7 .scb-toast small { display: block; margin-top: 2px; font-size: .78em; font-weight: 600; color: #6b6680; }
.w7 .scb-toast.bump { animation: w7-bump .5s ease-out; }
@keyframes w7-bump { 30% { transform: scale(1.07); } }
.w7-serp { position: absolute; right: 3%; top: 5%; width: 34%; z-index: 3; padding: 1.6cqh 1.4cqw; border-radius: 1.6cqh; background: #fff; color: #1a1530;
  box-shadow: 0 3cqh 6cqh rgba(0, 0, 0, .55); transform: translateY(-4cqh) scale(.92); opacity: 0; transition: transform .6s cubic-bezier(.2, 1.3, .4, 1), opacity .4s; }
.w7.p3 .w7-serp { transform: none; opacity: 1; }
.w7-q { display: flex; align-items: center; gap: .8cqw; padding: .9cqh 1cqw; border: 1px solid #e3dfee; border-radius: 99px; font: 600 max(1.5cqh, 8px)/1 "Inter", sans-serif; color: #4a4560; }
.w7-q svg { width: max(1.8cqh, 10px); height: auto; color: #7a7590; flex: none; }
.w7-res { position: relative; margin: 1.2cqh 0 0; padding: 0; list-style: none; }
.w7-res li { height: 5.4cqh; display: flex; flex-direction: column; justify-content: center; gap: .5cqh; padding: 0 .8cqw; border-radius: .8cqh; transition: transform .9s cubic-bezier(.5, 0, .2, 1), background .4s; }
.w7-res li b { display: block; width: 70%; height: 1.1cqh; border-radius: 4px; background: #cfd8f5; }
.w7-res li small { display: block; width: 45%; height: .8cqh; border-radius: 4px; background: #e6e3ee; }
.w7-res li.me { flex-flow: row wrap; align-content: center; column-gap: .8cqw; row-gap: .4cqh; position: relative; z-index: 1; }
.w7-res li.me b { width: 100%; height: auto; max-width: none; background: none; font: 800 max(1.5cqh, 8px)/1 "Inter", sans-serif; color: #1a0dab; -webkit-background-clip: border-box; background-clip: border-box; }
.w7-res li.me small { width: auto; height: auto; background: none; font: 600 max(1.2cqh, 7px)/1 "Inter", sans-serif; color: #188038; }
.w7-res li.me i { font-style: normal; font-size: max(1.1cqh, 7px); letter-spacing: .1em; color: #f5a623; }
.w7-res li:not(.me) { transform: translateY(-100%); }
.w7-res li.me { transform: translateY(300%); }
.w7.rank .w7-res li { transform: none; }
.w7.rank .w7-res li.me { background: linear-gradient(90deg, rgba(143, 31, 214, .1), rgba(255, 31, 122, .1)); }
.w7-rank { display: inline-block; margin-top: 1.2cqh; padding: .8cqh 1.2cqw; border-radius: 99px; background: linear-gradient(90deg, var(--w1), var(--w2)); color: #fff; font: 800 max(1.4cqh, 8px)/1 "Inter", sans-serif;
  opacity: 0; transform: scale(.6); transition: opacity .4s .9s, transform .5s cubic-bezier(.2, 1.6, .4, 1) .9s; }
.w7.rank .w7-rank { opacity: 1; transform: none; }
.w7-speed { position: absolute; left: 2%; bottom: 5%; z-index: 3; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 1cqw; padding: 1.2cqh 1.4cqw; border-radius: 1.6cqh; color: #fff;
  background: rgba(12, 10, 20, .88); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 2cqh 5cqh rgba(0, 0, 0, .5); opacity: 0; transform: translateY(3cqh); transition: opacity .5s, transform .6s cubic-bezier(.2, 1.3, .4, 1); }
.w7.p4 .w7-speed { opacity: 1; transform: none; }
.w7-speed svg { grid-row: span 2; width: max(7cqh, 34px); height: auto; transform: rotate(-90deg); }
.w7-speed circle { fill: none; stroke-width: 4; }
.w7-speed .bg { stroke: rgba(255, 255, 255, .12); }
.w7-speed .fg { stroke: #22c55e; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.w7.p4 .w7-speed .fg { stroke-dashoffset: 0; }
.w7-speed b { font: 800 max(3cqh, 14px)/1 var(--sx-display); color: #22c55e; }
.w7-speed small { font: 700 max(1.2cqh, 7px)/1 "Inter", sans-serif; letter-spacing: .06em; color: rgba(255, 255, 255, .65); }
@container (max-width: 560px) {
  .w7 .scb-phone { display: none; }
  .w7 .scb-browser { width: 74%; }
  .w7-serp { width: 46%; top: 28%; }
  .w7 .scb-toast { left: 36%; }
}

/* ---------------------------------------------------------------- "try it live" controls */
.st-ctrl { display: grid; gap: 10px; margin: 2px 0 18px; }
.st-try { display: inline-flex; align-items: center; gap: 8px; font: 800 .7rem/1 var(--sx-display); letter-spacing: .2em; text-transform: uppercase; color: #ff4fa8; }
.st-try::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff4fa8; box-shadow: 0 0 10px #ff4fa8; animation: hx-blink 1.4s ease-in-out infinite; }
.st-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.st-sw button { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 2px solid var(--sx-line-strong); background: var(--c); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.st-sw button[aria-pressed="true"] { transform: scale(1.18); border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 79, 168, .4); }
.st-seg { display: inline-flex; flex-wrap: wrap; padding: 4px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: var(--sx-surface); }
.st-seg button { padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--sx-muted); font: 700 .82rem/1 "Inter", sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.st-seg button[aria-pressed="true"] { background: linear-gradient(90deg, #ff2d95, #b45cff); color: #fff; box-shadow: 0 0 14px rgba(255, 45, 149, .45); }
.st-input { flex: 1 1 200px; width: 100%; min-width: 0; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-text); font: 600 .92rem/1.2 "Inter", sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.st-input:focus { border-color: #ff2d95; box-shadow: 0 0 0 3px rgba(255, 45, 149, .2), 0 0 18px rgba(255, 45, 149, .25); }

@media (prefers-reduced-motion: reduce) {
  .w7 *, .st-try::before { animation: none !important; }
}