.wf,.wf-dialog{--wf-amber:#ffad65;--wf-line:#805035;--wf-muted:#c3b4ac;--wf-text:#fff4e9;color:var(--wf-text)}
.wf h1,.wf h2,.wf p,.wf ul{margin:0}
.wf h1{font-size:clamp(39px,6vw,76px);line-height:1.04;letter-spacing:-.065em}
.wf h2{font-size:21px;letter-spacing:-.035em}
.wf-mono{color:#ffc099;font:600 11px/1.5 "IBM Plex Mono",Consolas,monospace;letter-spacing:.09em;text-transform:uppercase}
.wf-title,.wf-heading,.wf-tools{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wf-title{margin-bottom:18px;align-items:end}
.wf-featured,.wf-workspace{display:grid;gap:12px;margin-bottom:12px}
.wf-featured{grid-template-columns:1.5fr 1fr}
.wf-workspace{grid-template-columns:1fr 1fr .84fr}
.wf-board,.wf-hero{position:relative;min-width:0;padding:16px;border:1px solid var(--wf-line);border-radius:7px;background:#19171a}
.wf-board::before,.wf-hero::before{content:"";position:absolute;inset:5px;pointer-events:none;background:linear-gradient(var(--wf-amber),var(--wf-amber)) top left/13px 1px,linear-gradient(var(--wf-amber),var(--wf-amber)) top left/1px 13px,linear-gradient(var(--wf-amber),var(--wf-amber)) bottom right/13px 1px,linear-gradient(var(--wf-amber),var(--wf-amber)) bottom right/1px 13px;background-repeat:no-repeat}
.wf-hero{isolation:isolate;overflow:hidden;display:grid;align-items:end;min-height:280px;padding:24px;background:radial-gradient(ellipse at 80% 0,#ff934e,#972923 38%,transparent 72%),linear-gradient(130deg,#28101d,#561827)}
.wf-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#190c19bd,transparent 87%),linear-gradient(0deg,#12090de9,transparent 89%),repeating-linear-gradient(90deg,transparent 0 30px,#ffc28b14 31px 32px)}
.wf-hero-copy p:not(.wf-mono){margin:5px 0 16px}
.wf-clock{font-size:clamp(62px,8vw,98px);line-height:1.06;font-weight:850;letter-spacing:-.08em}
.wf-hex{position:absolute;right:-35px;top:22px;width:300px;opacity:.66;transform:rotate(-12deg);mask-image:linear-gradient(120deg,transparent,#000 40%,#000 80%,transparent);z-index:-1}
.wf-hex div{display:flex;gap:5px;margin-top:-5px}
.wf-hex div:nth-child(even){padding-left:27px}
.wf-hex i,.wf-hex i::after{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.wf-hex i{flex:0 0 48px;height:41px;background:#ffd397;position:relative}
.wf-hex i::after{content:"";position:absolute;inset:1px;background:#a53022}
.wf-hex i:nth-child(3n)::after{background:#e74b2d}.wf-hex div:nth-child(even) i:nth-child(2)::after{background:#291719}
.wf-council{background:repeating-linear-gradient(0deg,#fda06008 0 1px,transparent 1px 5px),#191414}
.wf-council>.wf-mono,.wf-council .wf-heading{padding-block:3px;border-bottom:1px solid #80503580}
.wf-council .wf-heading{border:0;border-top:1px solid #80503580}
.wf-diagram{position:relative;isolation:isolate;width:min(100%,330px);height:174px;margin:7px auto;background:repeating-linear-gradient(0deg,#f29a5b16 0 1px,transparent 1px 16px),repeating-linear-gradient(90deg,#f29a5b16 0 1px,transparent 1px 16px)}
.wf-bus{position:absolute;inset:0;z-index:-1}
.wf-bus i{position:absolute;top:42px;width:29%;height:45px;border-bottom:2px solid #ff934d}
.wf-bus i:first-child{left:23%;border-left:2px solid #ff934d}
.wf-bus i:nth-child(2){right:23%;border-right:2px solid #ff934d}
.wf-bus i:last-child{left:calc(50% - 1px);width:2px;height:34px;top:86px;background:#ff934d}
.wf-core{position:absolute;top:10px;display:grid;align-content:center;justify-items:center;width:46%;height:58px;clip-path:polygon(9% 0,88% 0,100% 23%,100% 78%,88% 100%,0 100%,0 22%);font:800 clamp(11px,1.5vw,16px)/1.2 Consolas,monospace;color:#102027;border-block:3px solid #15202b55}
.wf-core small{font-size:10px;margin-top:3px}
.wf-mel{left:1%;background:linear-gradient(135deg,#a6e9ff,#65aec7)}
.wf-bal{right:1%;background:linear-gradient(135deg,#b1efd3,#6ebca7)}
.wf-cas{left:27%;top:auto;bottom:5px;background:linear-gradient(135deg,#ff916e,#ec584a);color:#2b0e0c}
.wf-diagram b{position:absolute;top:74px;left:50%;transform:translateX(-50%);padding:4px 9px;background:#ffa253;color:#271005;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%);font:800 14px Consolas,monospace}
.wf-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:5px 10px;border-radius:7px;border:1px solid #b083655c;background:#ffffff0b;color:var(--wf-text);font:inherit;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;text-decoration:none}
.wf-button:hover{border-color:var(--wf-amber)}.wf-button:disabled{opacity:.45}
.wf-title .wf-button,.wf-hero .wf-button,.wf-save{background:var(--wf-amber);color:#211005}
.wf-modules{display:grid;gap:8px}
.wf-modules button{text-align:left;color:inherit;cursor:pointer;background:linear-gradient(125deg,#30262f,#181719 75%)}
.wf-modules button:nth-child(2){background:linear-gradient(125deg,#422820,#181719 75%)}
.wf-modules button:nth-child(3){background:linear-gradient(125deg,#232f35,#181719 75%)}
.wf ul{padding:0;list-style:none}
.wf li{display:flex;align-items:center;gap:10px;border-bottom:1px solid #b9856335;padding:8px 0;overflow-wrap:anywhere}
.wf li:last-child{border:0}
.wf li time{color:#ffceaa;white-space:nowrap;font:600 12px Consolas,monospace}
.wf small{display:block;color:var(--wf-muted)}
.wf-total{padding-top:8px}
.wf-total strong{font-size:26px}
.wf-total span{color:var(--wf-muted)}
.wf progress{width:100%;height:7px;border:0;background:#3b3034;appearance:none;border-radius:2px;overflow:hidden}
.wf progress::-webkit-progress-bar{background:#3b3034}
.wf progress::-webkit-progress-value{background:repeating-linear-gradient(90deg,transparent 0 8px,#19191d 8px 10px),linear-gradient(90deg,#f07148,#ffc685)}
.wf progress::-moz-progress-bar{background:linear-gradient(90deg,#f07148,#ffc685)}
.wf-tools{justify-content:flex-start;flex-wrap:wrap;padding-bottom:12px}
.wf input,.wf select{min-height:43px;border:1px solid #865435;border-radius:6px;padding:6px;background:#181518;color:inherit;font-size:16px;color-scheme:dark}
.wf-entries li>div{flex:1}
.wf-tasks{margin:12px 0}
.wf-dialog{width:min(475px,calc(100% - 28px));border:1px solid #b7764b;background:#21191a;border-radius:9px;padding:18px}
.wf-dialog::backdrop{background:#060407cf}
.wf-dialog label{display:grid;gap:5px;margin:10px 0}
.wf-dialog [role=alert]{color:#ffa899;margin-bottom:8px}
#magi-app .wf-shell .as-layout{display:block}
#magi-app .wf-shell .as-sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;padding:5px 14px;border:0;border-bottom:1px solid #71452d}
.wf-more{position:relative;margin-left:auto}
.wf-more summary{cursor:pointer;padding:10px;list-style:none}
.wf-more>div{position:absolute;right:0;top:100%;z-index:3;display:grid;background:#201a1e;border:1px solid #8a5939;padding:5px;max-height:60vh;overflow:auto}
@media(max-width:950px){.wf-workspace{grid-template-columns:1fr 1fr}.wf-modules{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}}
@media(max-width:690px){
 .wf-featured,.wf-workspace,.wf-modules{grid-template-columns:1fr}
 .wf-hero{min-height:226px;padding:19px}
 .wf-core{font-size:15px}
 .wf-board{padding:13px}
 .wf-hex{right:-116px}
 #magi-app .wf-shell .as-main{padding:16px 11px 60px}
 #magi-app .wf-shell .as-sidebar{position:fixed;z-index:4;bottom:0;left:0;right:0;background:#1a171bf8;border-top:1px solid #875436;justify-content:space-around;flex-wrap:nowrap;padding:3px 5px calc(3px + env(safe-area-inset-bottom))}
 #magi-app .wf-shell .as-nav{padding-inline:6px;font-size:13px}
 .wf-more{margin-left:0}
 .wf-more>div{bottom:100%;top:auto}
 .wf-title h1{font-size:clamp(29px,8vw,43px)}
}

/* The workbench theme also styles all controls under #magi-app. */
#magi-app .wf h1{color:var(--wf-text);text-transform:none;font-size:clamp(39px,6vw,76px);letter-spacing:-.065em}
#magi-app .wf h2{color:var(--wf-text)}
#magi-app .wf .wf-button{font-weight:700}
#magi-app .wf .wf-title .wf-button,#magi-app .wf .wf-hero .wf-button{color:#211005}
#magi-app .wf .wf-core small{color:inherit}
@media(max-width:690px){#magi-app .wf h1{font-size:clamp(29px,8vw,43px)}}

/* Console graphics for the calendar signal and journal scale. */
#magi-app .wf .wf-signal{
 display:grid;grid-template-columns:18px minmax(0,1fr) 18px auto;align-items:center;gap:10px;
 margin:0 0 12px;padding:9px 11px;color:#281803;text-decoration:none;
 border:1px solid #f5bd54;outline:1px solid #987035;outline-offset:3px;
 background:repeating-linear-gradient(135deg,#4529001c 0 8px,transparent 8px 16px),
 linear-gradient(100deg,#aa7024,#ffc555 22%,#f1ae3b 65%,#a76e25);
 box-shadow:inset 0 0 10px #563000a6;
}
.wf-signal strong{
 font:900 clamp(15px,2.3vw,24px)/1.08 "Archivo Narrow","Arial Narrow","Segoe UI",sans-serif;
 text-align:center;text-transform:uppercase;letter-spacing:.075em;text-wrap:balance;
}
.wf-signal-edge{
 display:block;height:15px;background:#4f3109;
 clip-path:polygon(0 0,100% 50%,0 100%,28% 50%);
}
.wf-signal-edge:nth-child(3){transform:rotate(180deg)}
.wf-signal-detail{
 font:700 12px/1.2 Consolas,monospace;color:#ffe3a5;background:#332007;
 padding:7px 8px;border:1px solid #6c4613;text-align:center;
}
#magi-app .wf .wf-signal:hover{filter:brightness(1.1)}
.wf-hero-copy{position:relative}
.wf-target{
 position:absolute;right:20px;bottom:28px;width:clamp(100px,18vw,210px);aspect-ratio:1;
 border:1px dashed #ffbc737a;border-radius:50%;opacity:.78;pointer-events:none;
 background:linear-gradient(90deg,transparent calc(50% - .5px),#ffc27c80 50%,transparent calc(50% + .5px)),
 linear-gradient(0deg,transparent calc(50% - .5px),#ffc27c80 50%,transparent calc(50% + .5px)),
 repeating-radial-gradient(circle,transparent 0 17%,#ffb5627a 17.5% 18%,transparent 18.5% 22%);
 mask-image:linear-gradient(110deg,transparent,#000 35%);
}
.wf-target i{position:absolute;inset:42%;border:1px solid #ffb967;transform:rotate(45deg)}
.wf-clock,.wf-hero h2,.wf-hero-copy>p,.wf-hero a{position:relative}
.wf-instrument{display:flex;align-items:center;gap:12px}
.wf-instrument span{
 flex:1;height:6px;min-width:16px;
 background:repeating-linear-gradient(135deg,#e4a65a88 0 2px,transparent 2px 7px);
 mask-image:linear-gradient(90deg,transparent,#000 80%);
}
.wf-scale{
 display:flex;justify-content:space-between;color:#dcb38e;
 font:600 10px Consolas,monospace;margin:2px 0 7px;
}
.wf-scale span::before{content:"";display:block;width:1px;height:4px;background:#ad6f3c;margin-bottom:2px}
@media(max-width:690px){
 #magi-app .wf .wf-signal{gap:5px;padding:7px 5px;grid-template-columns:10px minmax(0,1fr) 10px auto}
 .wf-signal-edge{height:10px}.wf-signal-detail{max-width:112px;font-size:11px;padding:5px}
 .wf-target{right:-16px;bottom:42px;opacity:.56}
}

/* Section consoles share the same controls, with graphics specific to each area. */
.wf-area-personal{--wf-area-ink:#82d3ba;--wf-area-hot:#426f63;--wf-area-base:#132826}
.wf-area-work{--wf-area-ink:#ffbd62;--wf-area-hot:#ad5b26;--wf-area-base:#402117}
.wf-area-projects{--wf-area-ink:#93d9f2;--wf-area-hot:#396c8e;--wf-area-base:#1c263e}
.wf-area-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-bottom:18px}
.wf-area-hero{
 border-color:var(--wf-area-ink);
 background:radial-gradient(ellipse at 88% 5%,var(--wf-area-hot),transparent 68%),
 repeating-linear-gradient(0deg,transparent 0 21px,#d7e7ed17 21px 22px),
 repeating-linear-gradient(90deg,transparent 0 21px,#d7e7ed17 21px 22px),var(--wf-area-base);
}
.wf-area-topics{display:flex;flex-wrap:wrap;gap:6px}
.wf-area-topics span{
 background:#141517ed;color:var(--wf-area-ink);border:1px solid currentColor;padding:6px 16px;
 clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
 font:800 clamp(15px,2vw,22px)/1.25 "Archivo Narrow",Consolas,monospace;letter-spacing:.055em;text-transform:uppercase;
}
.wf-area-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#magi-app .wf .wf-area-links .wf-button{background:#151719e0;color:#fff4e9}
.wf-area-art{
 position:absolute;z-index:-1;width:min(54%,380px);height:78%;right:12px;top:14px;color:var(--wf-area-ink);
 opacity:.86;pointer-events:none;display:grid;align-items:center;justify-items:center;
}
.wf-area-art i{display:block;position:absolute}
.wf-area-personal .wf-area-art{
 background:repeating-linear-gradient(90deg,transparent 0 15%,#b0ead749 15% calc(15% + 1px)),
 repeating-linear-gradient(0deg,transparent 0 21%,#b0ead749 21% calc(21% + 1px));
 mask-image:linear-gradient(110deg,transparent 1%,#000 34%,#000 85%,transparent);
}
.wf-area-personal .wf-area-art i{
 inset:24% 0 20%;
 clip-path:polygon(0 58%,17% 58%,24% 39%,31% 78%,41% 7%,49% 86%,57% 52%,67% 52%,75% 35%,83% 58%,100% 58%,100% 61%,82% 61%,75% 40%,68% 55%,58% 55%,49% 92%,41% 18%,32% 83%,24% 44%,18% 61%,0 61%);
 background:currentColor;
}
.wf-area-personal .wf-area-art i:not(:first-child){display:none}
.wf-area-work .wf-area-art i{
 inset:13% 8% 55%;border:1px solid currentColor;
 clip-path:polygon(7% 0,100% 0,100% 75%,93% 100%,0 100%,0 25%);
 background:repeating-linear-gradient(135deg,#17121155 0 5px,transparent 5px 10px),linear-gradient(90deg,#432815,#bf792e9c);
}
.wf-area-work .wf-area-art i:nth-child(2){transform:translate(-9%,115%);opacity:.8}
.wf-area-work .wf-area-art i:nth-child(3){transform:translate(-18%,230%);opacity:.6}
.wf-area-projects .wf-area-art::before{
 content:"";position:absolute;inset:20% 18%;border:1px solid currentColor;transform:skewX(-24deg);
 background:repeating-linear-gradient(90deg,transparent 0 20%,#a4dcff35 20% calc(20% + 1px));
}
.wf-area-projects .wf-area-art i{
 width:31%;height:34%;left:12%;top:12%;background:currentColor;
 clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}
.wf-area-projects .wf-area-art i::after{content:"";position:absolute;inset:2px;clip-path:inherit;background:#233b4f}
.wf-area-projects .wf-area-art i:nth-child(2){left:53%;top:19%}
.wf-area-projects .wf-area-art i:nth-child(3){left:30%;top:53%}
.wf-area-next{align-self:stretch}
.wf-project-tools{display:flex;gap:10px;align-items:end;margin:14px 0}
.wf-project-tools label{display:grid;gap:4px;max-width:350px;flex:1;min-width:0}
.wf-project-tools input{width:100%;min-width:0}
.wf-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:15px}
.wf-project{border-color:color-mix(in srgb,var(--wf-area-ink) 43%,#232124)}
.wf-project h2,.wf-project p,.wf-area-next .as-task-title{overflow-wrap:anywhere}
.wf-project .as-caption{margin:4px 0 8px}
.wf-project .wf-button{margin:7px 0}
.wf-project-state{color:var(--wf-area-ink);font:700 11px/1.6 Consolas,monospace;text-transform:uppercase}
@media(max-width:690px){
 .wf-area-grid,.wf-project-grid{grid-template-columns:1fr}
 .wf-area-hero{min-height:190px}
 .wf-area-art{top:4px;height:70%;width:57%}
 #magi-app .wf-shell .as-sidebar{gap:0;padding-inline:2px}
 #magi-app .wf-shell .as-nav,.wf-more summary{padding-inline:4px;font-size:clamp(11px,3.2vw,13px)}
}