.workshop-page {
  --workshop-paper: #f4f0ea;
  --workshop-ink: #0b0b0d;
  --workshop-subtle: #aaa9b1;
  --workshop-line: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  background: #050506;
}

.workshop-page :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
.workshop-page h1, .workshop-page h2, .workshop-page h3 { background: none; -webkit-text-fill-color: currentColor; color: inherit; animation: none; }
.workshop-page h1 { font-family: Inter, sans-serif; font-size: clamp(3.4rem, 6.8vw, 7.25rem); font-weight: 800; letter-spacing: -0.075em; line-height: .93; }
.workshop-page h2 { font-size: clamp(2.3rem, 4.3vw, 4.75rem); letter-spacing: -0.06em; line-height: .98; }
.workshop-page h3 { font-size: clamp(1.75rem, 2.7vw, 2.8rem); letter-spacing: -0.045em; line-height: 1.03; }
.workshop-page p { color: inherit; }
.workshop-hero { position: relative; padding: clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 9vw, 10rem); background: radial-gradient(circle at 74% 23%, rgba(255, 27, 141, .24), transparent 25rem), radial-gradient(circle at 94% 58%, rgba(255, 221, 0, .12), transparent 28rem), #050506; }
.workshop-hero::after { content: ""; position: absolute; right: -7rem; bottom: -12rem; width: 37rem; height: 37rem; border: 1px solid rgba(255, 221, 0, .28); border-radius: 50%; pointer-events: none; }
.workshop-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(28rem, .92fr); align-items: center; gap: clamp(3rem, 5vw, 6rem); }
.workshop-hero__copy { max-width: 41rem; }
.workshop-brand-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .75rem; color: var(--workshop-paper); font-family: Inter, sans-serif; }.workshop-brand-line img { width: clamp(2.35rem, 3.3vw, 3.15rem); height: clamp(2.35rem, 3.3vw, 3.15rem); object-fit: contain; }.workshop-brand-line__name { font-size: clamp(2rem, 3.1vw, 3.2rem); font-weight: 800; letter-spacing: -.075em; line-height: .88; }.workshop-hero .workshop-brand-line .workshop-kicker { align-self: center; margin: 0 0 0 .35rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .28); }
.workshop-page .workshop-kicker, .workshop-page .workshop-tool__index { color: var(--color-yellow); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.workshop-hero h1 { margin-top: clamp(2.25rem, 4vw, 3.5rem); color: var(--workshop-paper); font-size: clamp(3.1rem, 5.35vw, 5.65rem); }
.workshop-hero__lede { max-width: 35rem; margin-top: 1.75rem; color: #c5c3c9; font-size: clamp(1.08rem, 1.55vw, 1.3rem); line-height: 1.55; }
.workshop-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.4rem; }
.workshop-download { display: grid; gap: .55rem; }
.workshop-download > p { color: #aaa7b0; font-size: .78rem; font-style: italic; line-height: 1.3; }
.workshop-apple-mark { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif; font-size: 1.28em; line-height: .8; }
.workshop-button { display: inline-flex; align-items: center; justify-content: center; gap: .7rem; min-height: 3.2rem; padding: .8rem 1.2rem; border: 0; border-radius: .55rem; color: #080709; font-weight: 800; text-decoration: none; }
.workshop-button::after, .workshop-text-link::after { display: none; }
.workshop-button--primary { background: var(--gradient-main); box-shadow: 0 12px 34px rgba(255, 27, 141, .2); }
.workshop-button--primary:hover { color: #050506; transform: translateY(-2px); filter: brightness(1.07); }
.workshop-button--primary:focus-visible { color: #050506; outline: 3px solid #ffffff; outline-offset: 4px; }
.workshop-github-link { color: #f4f0ea; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(244, 240, 234, .36); text-decoration-thickness: 1px; text-underline-offset: .25em; }
.workshop-github-link:hover, .workshop-github-link:focus-visible { color: var(--color-yellow); text-decoration-color: currentColor; }
.workshop-text-link { color: #f4f0ea; font-weight: 700; }
.workshop-text-link:hover, .workshop-text-link:focus-visible { color: var(--color-yellow); }
.workshop-tools-link { display: inline-flex; gap: .45rem; margin-top: 1.6rem; }

.workshop-window { overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 1rem; background: #0c0c0f; box-shadow: 0 28px 100px rgba(0, 0, 0, .62); }
.workshop-hero-shot { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 1rem; background: #0c0c0f; box-shadow: 0 28px 100px rgba(0, 0, 0, .62); transform: rotate(1.25deg); }.workshop-hero-shot img { width: 100%; }.workshop-hero-shot figcaption { position: absolute; right: 1rem; bottom: 1rem; max-width: 16rem; padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.22); border-radius: .45rem; background: rgba(0,0,0,.78); color: #eeebed; font-size: .68rem; line-height: 1.35; }
.workshop-window__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 2.65rem; padding: 0 .85rem; border-bottom: 1px solid rgba(255, 255, 255, .12); background: #e8e8ea; color: #494950; font-size: .72rem; font-weight: 800; text-align: center; }
.workshop-window__lights { display: flex; gap: .35rem; }
.workshop-window__lights i { width: .58rem; height: .58rem; border-radius: 50%; background: #fd5e57; }
.workshop-window__lights i:nth-child(2) { background: #fbbd2e; }.workshop-window__lights i:nth-child(3) { background: #28c840; }
.workshop-window__body { padding: clamp(1.2rem, 3vw, 2.2rem); color: #f3f1f3; }
.workshop-app-header { display: flex; align-items: center; gap: .8rem; }.workshop-mark { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .55rem; background: var(--gradient-main); color: #050506; font-weight: 900; }.workshop-app-header p { color: var(--color-yellow); font-family: var(--font-mono); font-size: .54rem; font-weight: 700; letter-spacing: .12em; }.workshop-app-header strong { font-size: 1.12rem; }.workshop-app-status { margin-left: auto; padding: .25rem .55rem; border: 1px solid rgba(255, 27, 141, .55); border-radius: 99rem; color: var(--color-pink); font-size: .65rem; font-weight: 700; }
.workshop-shelf-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-top: clamp(2.3rem, 5vw, 4.25rem); padding-bottom: 1rem; border-bottom: 1px solid var(--workshop-line); }.workshop-shelf-heading span { color: #a5a2ab; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; }.workshop-shelf-heading h2 { margin-top: .38rem; color: #f4f0ea; font-size: clamp(1.5rem, 2.3vw, 2.25rem); letter-spacing: -.055em; }.workshop-add { padding: .58rem .7rem; border: 1px solid var(--color-yellow); border-radius: .42rem; color: var(--color-yellow) !important; font-family: var(--font-sans) !important; font-size: .7rem !important; font-weight: 700; letter-spacing: 0 !important; white-space: nowrap; }
.workshop-shelf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1.1rem; }.workshop-app-card { display: flex; align-items: center; gap: .7rem; min-height: 5.7rem; padding: 1rem; border: 1px solid var(--workshop-line); border-radius: .7rem; background: #151519; }.workshop-app-card--slate { box-shadow: inset 3px 0 var(--color-pink); }.workshop-app-card--pulse { box-shadow: inset 3px 0 var(--color-yellow); }.workshop-app-icon { display: grid; place-items: center; width: 1.8rem; color: var(--color-pink); font-size: 1.35rem; }.workshop-app-card--pulse .workshop-app-icon { color: var(--color-yellow); }.workshop-app-card strong { display: block; font-size: .95rem; }.workshop-app-card small { color: #aaa8b0; font-size: .65rem; }.workshop-card-arrow { margin-left: auto; color: #9e9ca5; }.workshop-window__note { margin-top: 1.3rem; color: #8f8d96; font-size: .67rem; }

.workshop-problem { padding: clamp(4.5rem, 9vw, 9rem) 0; background: var(--workshop-paper); color: #111114; }.workshop-problem__grid { display: grid; grid-template-columns: minmax(12rem, .5fr) minmax(0, 1.5fr); gap: 2.5rem; }.workshop-problem .workshop-kicker { color: #3c0022; }.workshop-problem h2 { max-width: 55rem; }.workshop-problem p:last-child { max-width: 47rem; margin-top: 1.6rem; color: #4e4d53; font-size: 1.25rem; line-height: 1.6; }
.workshop-foundation { padding: clamp(5rem, 10vw, 9rem) 0; background: #09090b; color: var(--workshop-paper); }.workshop-foundation__heading { display: grid; grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr); gap: 2.5rem; }.workshop-foundation__heading h2 { max-width: 48rem; }.workshop-foundation__heading > p:last-child { grid-column: 2; max-width: 43rem; margin-top: -1.1rem; color: #b6b3bc; font-size: 1.15rem; line-height: 1.6; }.workshop-foundation__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: clamp(3rem, 6vw, 5rem); }.workshop-foundation__cards article { min-height: 13rem; padding: 1.35rem; border: 1px solid var(--workshop-line); border-radius: .75rem; background: #121215; }.workshop-foundation__cards span { color: var(--color-yellow); font-family: var(--font-mono); font-size: .68rem; font-weight: 800; }.workshop-foundation__cards h3 { margin-top: 2.2rem; font-size: 1.27rem; letter-spacing: -.035em; }.workshop-foundation__cards p { margin-top: .65rem; color: #afadb5; font-size: .94rem; line-height: 1.5; }.workshop-product-section { padding: clamp(5rem, 10vw, 10rem) 0; color: var(--workshop-paper); }.workshop-product-section--slate { background: #050506; }.workshop-product-section--pulse { background: #111013; }.workshop-product-heading { max-width: 53rem; }.workshop-product-heading h2 { margin-top: .95rem; }.workshop-product-heading--pulse { margin-left: auto; text-align: right; }.workshop-tool { display: grid; grid-template-columns: minmax(0, .78fr) minmax(25rem, 1.22fr); align-items: center; gap: clamp(2.5rem, 6vw, 7.5rem); margin-top: clamp(3.5rem, 7vw, 6.5rem); }.workshop-tool--pulse { grid-template-columns: minmax(28rem, 1.15fr) minmax(0, .85fr); }.workshop-tool__copy { max-width: 33rem; }.workshop-tool h3 { margin-top: 1rem; }.workshop-tool__copy > p:not(.workshop-tool__index) { margin-top: 1.35rem; color: #b9b6c0; font-size: 1.1rem; line-height: 1.62; }.workshop-feature-list { display: grid; gap: .75rem; margin-top: 1.8rem; padding: 0; list-style: none; }.workshop-feature-list li { position: relative; padding-left: 1.25rem; color: #e5e1e4; line-height: 1.45; }.workshop-feature-list li::before { position: absolute; left: 0; top: .55rem; width: .42rem; height: .42rem; border-radius: 50%; background: var(--color-pink); content: ""; }.workshop-tool--pulse .workshop-feature-list li::before { background: var(--color-yellow); }
.slate-preview { min-height: 23rem; padding: clamp(1rem, 2.4vw, 1.8rem); background: #020203; }.slate-preview__top { display: flex; align-items: center; gap: .7rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--workshop-line); }.slate-preview__mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--color-yellow); border-radius: .55rem; color: var(--color-pink); }.slate-preview__top span:not(.slate-preview__mark) { display: block; color: var(--color-yellow); font-family: var(--font-mono); font-size: .48rem; font-weight: 700; letter-spacing: .1em; }.slate-preview__top strong { display: block; font-size: 1.15rem; }.slate-preview__top button { margin-left: auto; padding: .45rem .55rem; border: 1px solid var(--color-yellow); border-radius: .35rem; background: transparent; color: var(--color-yellow); font-size: .6rem; font-weight: 700; }.slate-preview__content > p { margin-top: 1.25rem; color: var(--color-yellow); font-family: var(--font-mono); font-size: .55rem; font-weight: 700; letter-spacing: .13em; }.slate-preview__featured { display: flex; align-items: center; gap: .8rem; margin-top: .6rem; padding: .9rem; border: 1px solid #727079; border-radius: .55rem; background: #151518; box-shadow: inset 3px 0 var(--color-pink); }.slate-preview__featured > span { color: var(--color-pink); }.slate-preview__featured strong { display: block; font-size: .82rem; }.slate-preview__featured small { color: #b2afb8; font-size: .62rem; }.slate-preview__featured b { margin-left: auto; color: var(--color-yellow); }.slate-preview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-top: .6rem; }.slate-preview__grid span { padding: .72rem .75rem; border: 1px solid #4e4c54; border-radius: .45rem; color: #e8e5e8; font-size: .7rem; }
.workshop-pulse-gallery { display: grid; gap: 1.5rem; }.workshop-pulse-shot { overflow: hidden; margin: 0; border: 1px solid rgba(255, 221, 0, .45); border-radius: .9rem; background: #111; box-shadow: 16px 16px 0 rgba(255, 221, 0, .14); }.workshop-pulse-shot img { width: 100%; }.workshop-pulse-shot figcaption { padding: .55rem .75rem; color: #a9a7af; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; }.workshop-pulse-shot--detail { width: 78%; margin-left: auto; border-color: rgba(255, 27, 141, .48); box-shadow: -13px 13px 0 rgba(255, 27, 141, .12); }

.workshop-boundary { padding: clamp(5rem, 10vw, 10rem) 0; background: linear-gradient(135deg, #f00 0%, #ff1b8d 48%, #ffdd00 100%); color: #09090a; }.workshop-boundary .workshop-kicker { color: #3c0022; }.workshop-boundary h2 { margin-top: 1rem; max-width: 24rem; }.workshop-boundary__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(2.5rem, 7vw, 9rem); }.workshop-boundary__rules { border-top: 1px solid rgba(0,0,0,.42); }.workshop-boundary__rules article { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(0,0,0,.42); }.workshop-boundary__rules article > span { font-family: var(--font-mono); font-size: .75rem; font-weight: 800; }.workshop-boundary__rules h3 { font-size: 1.27rem; letter-spacing: -.035em; }.workshop-boundary__rules p { margin-top: .45rem; color: rgba(0,0,0,.76); font-size: .96rem; line-height: 1.5; }
.workshop-closing { padding: clamp(5rem, 10vw, 10rem) 0; background: var(--workshop-paper); color: #0b0b0d; }.workshop-closing__inner { max-width: 53rem; }.workshop-closing .workshop-kicker { color: #3c0022; }.workshop-closing h2 { margin-top: 1rem; }.workshop-closing__inner > p:not(.workshop-kicker) { max-width: 41rem; margin-top: 1.3rem; color: #5a585e; font-size: 1.15rem; }.workshop-closing__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2rem; }.workshop-closing .workshop-download > p { color: #5a585e; }.workshop-closing .workshop-github-link { color: #0b0b0d; text-decoration-color: rgba(11, 11, 13, .35); }.workshop-closing .workshop-github-link:hover, .workshop-closing .workshop-github-link:focus-visible { color: #3c0022; }

@media (max-width: 900px) { .workshop-hero__grid, .workshop-tool, .workshop-tool--pulse, .workshop-boundary__grid, .workshop-foundation__heading { grid-template-columns: 1fr; }.workshop-hero__grid { gap: 3.5rem; }.workshop-tool--pulse .workshop-tool__visual { grid-row: 2; }.workshop-problem__grid { grid-template-columns: 1fr; gap: 1.25rem; }.workshop-foundation__heading > p:last-child { grid-column: auto; margin-top: -1rem; }.workshop-pulse-shot { max-width: 44rem; }.workshop-boundary h2 { max-width: 38rem; } }
@media (max-width: 640px) { .workshop-hero { padding-top: 3.5rem; }.workshop-brand-line { grid-template-columns: auto 1fr; column-gap: .7rem; row-gap: .55rem; }.workshop-hero .workshop-brand-line .workshop-kicker { grid-column: 2; justify-self: start; margin-left: 0; padding-left: 0; border-left: 0; }.workshop-page h1 { font-size: clamp(3.15rem, 15vw, 5rem); }.workshop-page h2 { font-size: clamp(2.35rem, 12vw, 3.5rem); }.workshop-hero-shot { margin-inline: -.2rem; transform: none; }.workshop-shelf-heading { align-items: start; flex-direction: column; }.workshop-shelf-grid, .slate-preview__grid, .workshop-foundation__cards { grid-template-columns: 1fr; }.workshop-app-card { min-height: 4.6rem; }.workshop-foundation__cards article { min-height: auto; }.workshop-product-heading--pulse { text-align: left; }.workshop-boundary__rules article { grid-template-columns: 2rem 1fr; }.workshop-hero__actions, .workshop-closing__actions { align-items: stretch; flex-direction: column; }.workshop-download, .workshop-button { width: 100%; }.workshop-download > p { text-align: center; }.workshop-github-link, .workshop-text-link { align-self: center; }.slate-preview__top button { display: none; }.workshop-pulse-shot--detail { width: 90%; } }
@media (prefers-reduced-motion: reduce) { .workshop-page *, .workshop-page *::before, .workshop-page *::after { scroll-behavior: auto !important; transition: none !important; } }