/* A compact Moko workspace around the hero artwork. */
.workspace-hero { --moko-side:196px; --moko-rail:34px; --moko-top:83px; --moko-bottom:23px; min-height:740px; border:1px solid #3a4147; background:#242628; }
.workspace-hero .hero-image { inset:var(--moko-top) var(--moko-side) var(--moko-bottom) var(--moko-rail); }
.workspace-hero .hero-image img { object-position:61% 48%; }
.workspace-hero:before { inset:var(--moko-top) var(--moko-side) var(--moko-bottom) var(--moko-rail); z-index:-1; background:linear-gradient(90deg,#111922f2 0%,#111922de 19%,#11192291 39%,#11192212 67%),linear-gradient(0deg,#11192240,transparent 28%); }
.workspace-hero .hero-content { position:relative; padding-top:168px; padding-bottom:116px; padding-left:max(78px,calc((100% - 1264px)/2)); }
.workspace-hero h1 { font-size:clamp(56px,5.2vw,76px); letter-spacing:-3.9px; }
.workspace-hero .hero-description { max-width:380px; font-size:16px; }
.workspace-hero .hero-credit { right:calc(var(--moko-side) + 20px); bottom:calc(var(--moko-bottom) + 18px); }
.workspace-chrome { position:absolute; inset:0; z-index:-1; color:#c3c6c8; pointer-events:none; user-select:none; font:10px/1.3 'Segoe UI',Arial,sans-serif; }
.workspace-chrome svg { display:block; width:16px; height:16px; flex:none; }
.workspace-chrome .is-current { background:#3d4a50; color:#c8eef0; border-radius:3px; }
.moko-menu { display:flex; align-items:center; gap:19px; height:27px; padding:0 10px; background:#1d1f20; border-bottom:1px solid #111; }
.moko-menu>img { width:17px; height:17px; margin-right:4px; }
.moko-menu>svg { width:13px; height:13px; margin-left:10px; }
.moko-workspace-name { margin-left:auto; font-size:9px; color:#98a2a8; }
.moko-workspace-name span { padding-left:9px; }
.moko-options { height:34px; display:flex; align-items:center; gap:13px; background:#2a2c2e; border-bottom:1px solid #191b1c; padding:0 8px; }
.moko-current-tool { width:26px; border-right:1px solid #414345; }
.moko-brush-name { display:flex; align-items:center; gap:7px; border:1px solid #484b4e; padding:4px 7px; width:130px; background:#353739; border-radius:3px; color:#eee; }
.moko-brush-name>span { margin-left:auto; }
.moko-option { display:flex; align-items:center; gap:6px; color:#99a3ab; }
.moko-option b { display:block; min-width:59px; padding:4px 6px; border:1px solid #484b4e; border-radius:3px; background:#232527; color:#ddd; font-weight:400; }
.moko-option i { font-style:normal; float:right; color:#9fa6ac; padding-left:10px; }
.moko-document { height:22px; background:#1e2021; padding-left:var(--moko-rail); }
.moko-document>span { display:inline-flex; height:22px; align-items:center; gap:32px; padding:0 12px; background:#2e3235; border-bottom:2px solid #a3d7dc; font-size:9px; }
.moko-document i { color:#b9c0c5; font-style:normal; }
.moko-tools { position:absolute; top:var(--moko-top); bottom:var(--moko-bottom); left:0; width:var(--moko-rail); padding:7px 4px; display:flex; align-items:center; flex-direction:column; gap:3px; background:#2c2e30; border-right:1px solid #161819; }
.moko-tools>span { width:26px; height:28px; display:grid; place-items:center; color:#aab0b3; }
.moko-fg-bg { position:relative; height:32px; width:25px; margin-top:9px; }
.moko-fg-bg i { position:absolute; width:18px; height:18px; border:1px solid #b5bbc0; border-radius:3px; background:#84cee0; z-index:1; }
.moko-fg-bg i+i { background:#edf1ee; top:7px; left:7px; z-index:0; }
.moko-panels { position:absolute; top:61px; right:0; bottom:var(--moko-bottom); width:var(--moko-side); background:#292b2d; border-left:3px solid #191b1d; display:flex; flex-direction:column; }
.moko-panel { border-bottom:3px solid #1b1d1f; }
.moko-panel-tabs { display:flex; gap:13px; height:25px; align-items:center; padding:0 8px; background:#202224; font-size:9px; white-space:nowrap; }
.moko-panel-tabs b { font-weight:500; align-self:stretch; display:flex; align-items:center; border-bottom:2px solid #a6cbd1; color:#f0f2f3; }
.moko-panel-tabs>i { margin-left:auto; font-style:normal; color:#999; }
.moko-color { padding:7px 8px 9px; }
.moko-color-modes { display:flex; justify-content:space-between; gap:4px; margin-bottom:6px; font-size:8px; }
.moko-color-modes>* { padding:4px 5px; border:1px solid #44484a; border-radius:2px; flex:1; text-align:center; white-space:nowrap; font-weight:400; }
.moko-color-modes b { color:#f2f5f6; background:#3d4144; }
.moko-color-square { height:88px; position:relative; border-radius:3px; background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,white,#00bee8); }
.moko-color-square i { position:absolute; left:40%; top:15%; width:7px; height:7px; border-radius:50%; border:1px solid white; box-shadow:0 0 0 1px #222; }
.moko-hue { height:11px; border-radius:2px; margin:6px 0; background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red); position:relative; }
.moko-hue i { position:absolute; left:48%; top:-1px; bottom:-1px; width:4px; border:1px solid #fff; box-shadow:0 0 0 1px #333; }
.moko-color-values { display:flex; gap:7px; align-items:center; font-size:8px; margin:8px 0; }
.moko-color-values>i { background:#84cee0; height:17px; width:17px; border:1px solid #bbc3c7; border-radius:2px; }
.moko-color-values>b { margin-left:auto; font-weight:400; padding:3px 7px; border:1px solid #44484a; border-radius:2px; }
.moko-swatches { display:flex; gap:4px; }
.moko-swatches i { flex:1; height:13px; border-radius:2px; border:1px solid #ffffff14; }
.moko-brush-library { padding:8px; }
.moko-library-actions { display:flex; gap:5px; font-size:8px; }
.moko-library-actions>span { flex:1; text-align:center; border:1px solid #46494b; padding:5px 1px; border-radius:3px; background:#353739; }
.moko-search { font-size:9px; background:#1f2122; border:1px solid #43474a; padding:5px 7px; margin:7px 0; border-radius:3px; color:#91999f; }
.moko-category { display:flex; padding:6px; margin-top:2px; background:#313436; font-size:9px; border-radius:2px; }
.moko-category>span { margin-left:auto; color:#87969e; }
.moko-brush-row { display:flex; align-items:center; gap:8px; padding:5px 9px; font-size:9px; }
.moko-brush-row svg { width:13px; height:13px; }
.moko-brush-row>i { margin-left:auto; font-style:normal; color:#a6bdc3; }
.moko-layers { flex:1; display:flex; flex-direction:column; border-bottom:0; min-height:130px; }
.moko-layer-options { display:flex; align-items:center; gap:9px; padding:7px; font-size:9px; }
.moko-layer-options>span:first-child { border:1px solid #42474a; padding:4px 6px; flex:1; border-radius:2px; }
.moko-layer-options i { float:right; font-style:normal; }
.moko-layer-row { display:flex; align-items:center; gap:8px; margin:0 6px; padding:5px; font-size:9px; min-height:35px; }
.moko-layer-row svg { width:13px; height:13px; }
.moko-layer-thumb { width:27px; height:25px; border:1px solid #656d71; border-radius:2px; background:repeating-conic-gradient(#61666a 0% 25%,#3e4448 0% 50%) 0 0/8px 8px; }
.moko-thumb-art { background:url('assets/art/calla-720.webp') 68% 40%/cover; border-color:#a3d7dc; }
.moko-thumb-background { background:#304352; }
.moko-layer-footer { margin-top:auto; padding:7px 10px; display:flex; justify-content:space-between; color:#aab2b8; }
.moko-layer-footer svg { width:13px; height:13px; }
.moko-status { position:absolute; bottom:0; left:0; right:0; height:var(--moko-bottom); display:flex; align-items:center; gap:14px; padding:0 10px; border-top:1px solid #191b1d; background:#202224; font-size:8px; color:#9ca6ad; }
.moko-status>span:first-child { color:#d2e4e8; }
.moko-status-end { margin-left:auto; padding-right:calc(var(--moko-side) + 2px); }
@media(min-width:1101px) {
  .workspace-hero .hero-content { max-width:none; padding-left:clamp(88px,8vw,128px); }
  .workspace-hero:before { background:linear-gradient(90deg,#111922f7 0%,#111922ef 20%,#111922d9 34%,#1119228c 46%,#11192224 62%,#11192200 78%),linear-gradient(0deg,#11192240,transparent 28%); }
}
@media(max-width:1100px) {
  .workspace-hero { --moko-side:176px; min-height:725px; }
  .workspace-hero .hero-content { padding-left:66px; padding-top:159px; }
  .workspace-hero h1 { font-size:61px; }
  .workspace-hero .hero-description { max-width:340px; }
  .workspace-hero .hero-actions { flex-direction:column; align-items:flex-start; gap:15px; }
  .moko-panel-tabs { gap:9px; padding:0 6px; font-size:8px; }
}
@media(max-width:760px) {
  .workspace-hero { --moko-side:144px; --moko-rail:28px; --moko-top:75px; --moko-bottom:20px; display:block; min-height:0; border:0; padding-bottom:355px; background:#101923; }
  .workspace-hero .hero-content { padding:44px 24px 32px; }
  .workspace-hero h1 { font-size:clamp(46px,9.7vw,70px); letter-spacing:-2.8px; }
  .workspace-hero .hero-description { max-width:460px; }
  .workspace-hero .hero-actions { flex-direction:row; align-items:center; }
  .workspace-hero .hero-note { margin-bottom:20px; }
  .workspace-chrome { top:auto; height:340px; bottom:0; left:16px; right:16px; border:1px solid #3a4147; border-radius:5px; overflow:hidden; }
  .workspace-hero .hero-image { top:auto; left:44px; right:160px; bottom:21px; height:243px; }
  .workspace-hero .hero-image img { object-position:64% center; }
  .workspace-hero:before { display:none; }
  .workspace-hero .hero-credit { bottom:31px; right:170px; font-size:8px; }
  .moko-menu { height:25px; gap:11px; font-size:8px; }
  .moko-menu>img { width:14px; height:14px; }
  .moko-menu>span:nth-of-type(n+6),.moko-menu>svg,.moko-workspace-name { display:none; }
  .moko-options { height:30px; gap:7px; }
  .moko-options .moko-option { font-size:8px; }
  .moko-option b { min-width:40px; }
  .moko-options .moko-option:nth-of-type(n+4) { display:none; }
  .moko-brush-name { width:92px; font-size:8px; padding:3px 4px; }
  .moko-current-tool { width:21px; }
  .moko-document,.moko-document>span { height:20px; font-size:8px; }
  .moko-tools { gap:3px; padding:3px; overflow:hidden; }
  .moko-tools>span { min-height:21px; width:21px; }
  .moko-tools svg { width:13px; height:13px; }
  .moko-tools>span:nth-child(n+10),.moko-fg-bg { display:none; }
  .moko-panels { top:55px; border-left-width:2px; }
  .moko-panel-tabs { height:22px; font-size:8px; gap:9px; }
  .moko-panel-tabs>span:nth-of-type(2),.moko-panel-tabs>i,.moko-color-modes,.moko-swatches { display:none; }
  .moko-color { padding:6px; }
  .moko-color-square { height:51px; }
  .moko-hue { height:8px; }
  .moko-color-values { margin:5px 0 0; font-size:7px; gap:5px; }
  .moko-color-values>b { padding:2px 3px; }
  .moko-brush-panel { display:none; }
  .moko-layer-options { padding:5px; }
  .moko-layer-row { min-height:27px; padding:3px; font-size:8px; gap:6px; }
  .moko-layer-thumb { width:23px; height:20px; }
  .moko-layer-footer { padding:5px 9px; }
  .moko-status { font-size:7px; gap:9px; }
  .moko-status-end { display:none; }
}
@media(max-width:480px) {
  .workspace-hero { --moko-side:104px; }
  .workspace-hero .hero-image { right:120px; }
  .workspace-hero .hero-credit { right:127px; font-size:7px; }
  .workspace-hero .hero-actions { flex-direction:column; align-items:flex-start; }
  .moko-panel-tabs { gap:9px; padding:0 5px; }
  .moko-panel-tabs>span { display:none; }
  .moko-color-values>b { display:none; }
  .moko-layer-options { gap:5px; font-size:7px; }
  .moko-layer-row { margin:0 3px; gap:4px; font-size:7px; }
  .moko-layer-row svg { width:10px; height:10px; }
  .moko-layer-thumb { width:19px; height:19px; }
}

/* Rotate Moko's two starter workspaces while keeping the artwork and copy. */
.workspace-hero { --moko-left-panel:156px; --moko-copy-left:clamp(88px,8vw,128px); }
.workspace-chrome[data-preset] { transition:opacity .8s ease; }
.workspace-chrome[data-preset="csp"] { opacity:0; }
.workspace-hero[data-workspace="csp"] .workspace-chrome[data-preset="csp"] { opacity:1; }
.workspace-hero[data-workspace="csp"] .workspace-chrome[data-preset="photoshop"] { opacity:0; }
.workspace-hero .hero-image,.workspace-hero:before { transition:left .8s ease; }
.workspace-hero .hero-content { transition:padding-left .8s ease; }
.workspace-hero[data-workspace="csp"] .hero-image,.workspace-hero[data-workspace="csp"]:before { left:calc(var(--moko-rail) + var(--moko-left-panel)); }
.workspace-hero[data-workspace="csp"] .hero-content { padding-left:calc(var(--moko-copy-left) + var(--moko-left-panel) - 24px); }
.workspace-csp .moko-document { padding-left:calc(var(--moko-rail) + var(--moko-left-panel)); }
.moko-panels-left { width:var(--moko-left-panel); top:var(--moko-top); left:var(--moko-rail); right:auto; border-left:0; border-right:3px solid #191b1d; }
.moko-panels-left .moko-panel-tabs { gap:10px; font-size:8px; }
.moko-panels-left .moko-brush-panel { flex:1; }
.moko-tool-settings { flex:1.2; }
.moko-settings-body { padding:10px; }
.moko-settings-brush { display:flex; align-items:center; gap:8px; padding:4px 0 12px; color:#e0e5e7; }
.moko-setting { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px; margin:0 0 17px; font-size:9px; }
.moko-setting>b { font-weight:400; background:#1f2224; border:1px solid #44494c; padding:3px 6px; border-radius:2px; min-width:43px; text-align:right; }
.moko-setting>i { position:relative; height:3px; flex-basis:100%; background:linear-gradient(90deg,#a4cbd2 var(--setting),#464c50 var(--setting)); border-radius:4px; }
.moko-setting>i:after { content:''; width:6px; height:6px; border-radius:50%; background:#c8d7dc; border:1px solid #282d30; position:absolute; top:-2px; left:clamp(0px,calc(var(--setting) - 3px),calc(100% - 6px)); }
.moko-navigator-body { padding:10px; }
.moko-navigator-art { position:relative; margin:8px 0 14px; }
.moko-navigator-art img { width:100%; height:100px; object-fit:contain; background:#1f2224; }
.moko-navigator-art>i { position:absolute; inset:15% 9%; border:1px solid #bad8e0; box-shadow:0 0 0 1px #0007; }
.moko-navigator-zoom { display:flex; align-items:center; gap:10px; color:#a9b4bb; font-size:9px; }
.moko-navigator-zoom>i { height:3px; background:#71878f; flex:1; border-radius:4px; }
.workspace-csp .moko-layers { margin-top:0; }
.moko-preset-controls { position:absolute; left:var(--moko-copy-left); bottom:39px; display:flex; align-items:center; gap:13px; transition:left .8s ease; }
.workspace-hero[data-workspace="csp"] .moko-preset-controls { left:calc(var(--moko-copy-left) + var(--moko-left-panel) - 24px); }
.moko-preset-label { font-size:11px; font-weight:600; color:#dfcef8; white-space:nowrap; }
.moko-preset-switch { display:flex; gap:3px; background:#4c386b; padding:4px; border:1px solid #ab8cdb; border-radius:7px; box-shadow:0 5px 22px #10092055; }
.moko-preset-switch button { min-height:32px; border:0; border-radius:4px; background:transparent; padding:5px 10px; color:#f4eaff; font:500 12px/1.4 var(--font); transition:background .2s,color .2s; }
.moko-preset-switch button:hover { background:#654b8b; color:#fff; }
.moko-preset-switch button[aria-pressed="true"] { background:#e6d5ff; color:#372050; }
.moko-preset-switch button:focus-visible { outline-color:#f1dcff; }
.moko-preset-switch .moko-rotation { width:32px; padding:5px; margin-left:3px; border-left:1px solid #b398d966; border-radius:0 4px 4px 0; font-size:13px; }
.workspace-hero:not(.hero-preset-ready) :is(.workspace-chrome,.hero-image,.hero-content,.moko-preset-controls,.moko-preset-switch button),.workspace-hero:not(.hero-preset-ready):before { transition:none; }
@media(min-width:761px) and (max-width:1100px) {
  .workspace-hero { --moko-copy-left:66px; --moko-left-panel:130px; }
  .moko-preset-controls { gap:9px; }
  .moko-preset-label { font-size:10px; }
  .moko-preset-switch button { font-size:11px; padding:5px 8px; }
}
@media(max-width:760px) {
  .workspace-hero { --moko-left-panel:var(--moko-side); }
  .workspace-hero[data-workspace="csp"] .hero-content { padding-left:24px; }
  .workspace-hero[data-workspace="csp"] .hero-image { left:calc(44px + var(--moko-left-panel)); right:16px; }
  .workspace-csp>.moko-panels:not(.moko-panels-left) { display:none; }
  .workspace-csp .moko-panels-left { top:var(--moko-top); }
  .workspace-csp .moko-brush-panel { display:block; flex:0; }
  .workspace-csp .moko-library-actions,.workspace-csp .moko-search,.workspace-csp .moko-category { display:none; }
  .workspace-csp .moko-brush-library { padding:5px; }
  .workspace-csp .moko-brush-row { font-size:8px; padding:5px 2px; gap:5px; }
  .workspace-csp .moko-brush-row>i { display:none; }
  .workspace-csp .moko-settings-body { padding:7px; }
  .workspace-csp .moko-settings-brush { display:none; }
  .workspace-csp .moko-setting { margin-bottom:10px; gap:6px; font-size:8px; }
  .workspace-csp .moko-setting>b { padding:2px 4px; min-width:33px; }
  .workspace-csp .moko-setting:nth-last-child(-n+2) { display:none; }
  .moko-preset-controls { position:static; margin-top:24px; align-items:flex-start; flex-direction:column; gap:8px; }
  .moko-preset-label { font-size:11px; }
  .moko-preset-switch button { min-height:36px; }
  .workspace-hero[data-workspace="csp"] .hero-credit { right:27px; }
}
@media(prefers-reduced-motion:reduce) {
  .workspace-hero .hero-image,.workspace-hero:before,.workspace-hero .hero-content,.workspace-chrome[data-preset],.moko-preset-controls { transition:none; }
}