.workshop-body { background: #07101a; color: #eff7ff; }.workshop-header { border-bottom-color: rgba(189, 223, 249, .14); background: rgba(5, 12, 20, .88); }.nav-links .is-active { color: #f2fbff; }.header-actions { display: flex; align-items: center; gap: 9px; }.icon-command { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #83c6ee; border-radius: 50%; background: transparent; color: #dff5ff; font-size: 23px; line-height: 1; cursor: pointer; }.icon-command:hover { background: #e9f9ff; color: #0a1824; }
.workshop-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .9fr); min-height: 680px; padding: 142px max(24px, calc((100vw - 1240px) / 2)) 76px; overflow: hidden; background: radial-gradient(ellipse at 73% 45%, #193d55 0, #0b1b29 33%, #07101a 67%); }.workshop-hero .hero-copy { align-self: center; max-width: 655px; }.workshop-hero h1 { margin: 11px 0 22px; font-size: clamp(48px, 6.1vw, 86px); line-height: .99; letter-spacing: 0; }.workshop-hero p:not(.eyebrow) { max-width: 480px; margin: 0; color: #a9bdce; font-size: 17px; line-height: 1.7; }.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }.workshop-orbit { position: relative; min-height: 460px; }.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(185, 228, 255, .26); border-radius: 50%; transform: translate(-50%, -50%) rotateX(66deg) rotateZ(-22deg); }.ring-one { width: min(37vw, 480px); height: min(37vw, 480px); box-shadow: 0 0 85px rgba(99, 204, 255, .12); }.ring-two { width: min(28vw, 360px); height: min(28vw, 360px); border-color: rgba(251, 129, 117, .42); transform: translate(-50%, -50%) rotateX(66deg) rotateZ(42deg); }.orbit-core { position: absolute; top: 50%; left: 50%; display: grid; width: 168px; height: 168px; place-content: center; transform: translate(-50%, -50%) rotateY(-18deg); border: 1px solid #afddf8; background: linear-gradient(145deg, #315a71, #0d1e2c 62%); box-shadow: -28px 36px 80px rgba(0,0,0,.36), inset 0 0 50px rgba(159, 222, 255, .12); text-align: center; }.orbit-core span { color: #ecfbff; font-family: ui-monospace, monospace; font-size: 42px; font-weight: 800; }.orbit-core small { margin-top: 7px; color: #9cc9dc; font-family: ui-monospace, monospace; font-size: 8px; letter-spacing: .16em; line-height: 1.5; }.orbit-tag { position: absolute; padding: 7px 10px; border: 1px solid rgba(211, 242, 255, .45); background: rgba(14, 34, 49, .8); color: #d9f4ff; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .12em; }.tag-one { top: 19%; left: 16%; }.tag-two { right: 7%; bottom: 22%; }.tag-three { top: 39%; right: 0; color: #ffb0c7; border-color: rgba(255, 176, 199, .5); }
.workshop-feed { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 105px 0 128px; }.feed-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }.feed-toolbar h2 { margin: 8px 0 0; font-size: clamp(35px, 4vw, 58px); }.feed-controls { display: flex; align-items: center; gap: 9px; }.search-control { display: flex; align-items: center; width: 240px; height: 39px; border: 1px solid #2d4b64; background: #0b1926; color: #91b4cf; }.search-control span { padding-left: 11px; font-size: 19px; }.search-control input { height: 100%; border: 0; background: transparent; padding-left: 8px; }.feed-controls select { width: 118px; }.workshop-status { min-height: 22px; margin: 0 0 16px; color: #88a7bd; font-size: 12px; }.workshop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.workshop-card { overflow: hidden; border: 1px solid #28455d; background: #0b1723; }.workshop-card-media { position: relative; display: grid; min-height: 258px; place-items: center; overflow: hidden; background: linear-gradient(135deg, #132b40, #0d1723); }.workshop-card-media img { width: 100%; height: 258px; object-fit: contain; filter: drop-shadow(0 24px 20px rgba(0,0,0,.35)); transition: transform .35s ease; }.workshop-card:hover .workshop-card-media img { transform: scale(1.04); }.style-label { position: absolute; top: 12px; left: 12px; padding: 5px 7px; border: 1px solid rgba(218,242,255,.44); background: rgba(7,16,26,.76); color: #d7effe; font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .1em; }.workshop-card-main { padding: 17px; }.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #7f9ab1; font-size: 11px; }.card-meta strong { color: #b9d7e8; font-weight: 600; }.workshop-card h3 { margin: 11px 0 8px; font-size: 20px; }.workshop-card p { min-height: 40px; margin: 0; color: #9db2c4; font-size: 12px; line-height: 1.6; }.card-actions { display: grid; grid-template-columns: 1fr 36px; gap: 8px; margin-top: 17px; }.card-use { min-height: 36px; border: 1px solid #bce9ff; background: #dff5ff; color: #0b1c2a; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }.card-follow { display: grid; place-items: center; border: 1px solid #365872; background: transparent; color: #b7d7eb; font-size: 16px; cursor: pointer; }.card-follow:hover { border-color: #e999aa; color: #ffa8b9; }.workshop-empty { max-width: 540px; padding: 62px 0; border-top: 1px solid #2a465e; }.workshop-empty > span { color: #f79485; font-family: ui-monospace, monospace; font-size: 12px; }.workshop-empty h3 { margin: 14px 0 8px; font-size: 32px; }.workshop-empty p { max-width: 410px; color: #93aabe; line-height: 1.7; }.workshop-empty .button { margin-top: 14px; }
.workshop-dialog { width: min(460px, calc(100% - 32px)); padding: 0; border: 1px solid #537893; background: #0b1723; color: #ebf6ff; box-shadow: 0 28px 100px rgba(0,0,0,.58); }.workshop-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }.workshop-dialog form { display: grid; gap: 15px; padding: 25px; }.dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.dialog-heading h2 { margin: 7px 0 8px; font-size: 27px; }.dialog-close { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #3d5970; border-radius: 50%; background: transparent; color: #c7dbea; font-size: 19px; cursor: pointer; }.workshop-dialog label { display: grid; gap: 7px; color: #a9bed0; font-size: 12px; }.workshop-dialog textarea { width: 100%; resize: vertical; border: 1px solid #2e4359; background: #0d1926; color: #edf6ff; padding: 10px; font: inherit; }.text-command { justify-self: start; border: 0; background: transparent; color: #9ed5f6; font: inherit; font-size: 12px; cursor: pointer; }.dialog-status { min-height: 18px; margin: 0; color: #f5a29b; font-size: 12px; }.publish-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.publish-foot p { margin: 0; color: #7f97ac; font-size: 11px; line-height: 1.5; }.publish-foot .button { white-space: nowrap; }
@media (max-width: 840px) { .workshop-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 118px; }.workshop-orbit { min-height: 360px; margin-top: 28px; }.ring-one { width: 330px; height: 330px; }.ring-two { width: 250px; height: 250px; }.workshop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.feed-toolbar { align-items: start; flex-direction: column; }.feed-controls { width: 100%; }.search-control { flex: 1; } }
@media (max-width: 560px) { .workshop-header .nav-links { display: none; }.workshop-hero { padding: 108px 20px 30px; }.workshop-hero h1 { font-size: 48px; }.workshop-orbit { min-height: 300px; }.orbit-core { width: 132px; height: 132px; }.ring-one { width: 270px; height: 270px; }.ring-two { width: 205px; height: 205px; }.tag-one { left: 3%; }.tag-three { right: 1%; }.workshop-feed { width: calc(100% - 32px); padding: 66px 0 90px; }.workshop-grid { grid-template-columns: 1fr; }.feed-controls { align-items: stretch; flex-direction: column; }.search-control, .feed-controls select { width: 100%; }.publish-foot { align-items: stretch; flex-direction: column; }.publish-foot .button { width: 100%; } }
.workshop-body .card-actions { grid-template-columns: 1fr 1fr; }.workshop-body .card-use { display: grid; place-items: center; padding: 10px; text-align: center; text-decoration: none; }.workshop-body .card-configure { background: transparent; color: #c5e6e3; }.workshop-body .workshop-highlight { border-color: #a1dfc6; box-shadow: 0 0 0 2px #a1dfc633; }#workshop-more { margin-top: 24px; }#workshop-more[hidden] { display: none; }
.workshop-image-status { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: #a9bdce; font-size: 13px; text-align: center; pointer-events: none; }.workshop-image-status[hidden], .workshop-card-media img[hidden] { display: none; }
.workshop-categories { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:26px 0 10px; color:#a9bdce; font-size:13px; }
.workshop-categories select { padding:10px 32px 10px 14px; border:1px solid #71bba8; border-radius:8px; background:#102b31; color:#d5f7ed; font:inherit; }
.workshop-categories select:focus-visible { outline:2px solid #9be4c9; outline-offset:3px; }
.workshop-kind { position:absolute; bottom:12px; left:12px; padding:5px 9px; border-radius:5px; background:#07101ae8; color:#c9e9df; font-size:11px; }
.workshop-motion { display:block; width:min(82%,240px); height:auto; max-height:85%; object-fit:contain; margin:auto; }
.workshop-motion[hidden] { display:none; }
.workshop-play { position:absolute; top:12px; right:12px; border:1px solid #6bb9a4; border-radius:6px; padding:7px 10px; color:#d3f4e9; background:#10262ee8; cursor:pointer; font:inherit; font-size:12px; }
.workshop-play:focus-visible { outline:2px solid #a4e7d4; outline-offset:3px; }