/* kit/tasks.css · VENDORED from the Universes kit's task-template-examples.html stylesheet (captured 18 Sept 2026 through the CSSOM; media wrappers kept). This is the Connections tab's task look, the canon for what a task looks like (D-021). Every selector is scoped under #workshop; :root tokens become #workshop tokens; page-level layout is dropped; the kit's font-faces are replaced by the site's own (fonts/fonts.css and workshop.css: Chalk, EmbossT1, PixelGamer with Gaposiss digits, Avenir). Load AFTER workshop.css so the card look wins over the JC layout sheet. Do not hand-edit: regenerate with cowork/brain-buddies/builderhood-blvd/sources/visual-baseline/jc-site/build-tasks-css.mjs. */ :is(#workshop, .blvd-tasks) * { box-sizing: border-box; } :is(#workshop, .blvd-tasks) header { display: flex; justify-content: space-between; gap: 20px; align-items: center; } :is(#workshop, .blvd-tasks) .back { font: 12px Chalk; color: rgb(86, 117, 121); text-decoration: none; } :is(#workshop, .blvd-tasks) .edition, :is(#workshop, .blvd-tasks) .eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.15em; color: rgb(119, 125, 125); } :is(#workshop, .blvd-tasks) .hero { display: grid; grid-template-columns: 1fr 220px; gap: 38px; align-items: center; padding: 48px 0px 26px; } :is(#workshop, .blvd-tasks) .foam { display: inline-block; font: 33px / 1 "Apple Color Emoji", "Segoe UI Emoji", sans-serif; filter: url("#studio-foam-smooth"); text-shadow: none; vertical-align: middle; margin: 0px 8px; flex-shrink: 0; } :is(#workshop, .blvd-tasks) .tape { display: inline-block; font: 14px / 1.5 EmbossT1, monospace; padding: 10px 18px; color: white; letter-spacing: 0.025em; white-space: nowrap; position: relative; isolation: isolate; } :is(#workshop, .blvd-tasks) .note { background: rgb(226, 239, 235); padding: 22px 20px; transform: rotate(3deg); box-shadow: rgba(69, 77, 73, 0.137) 2px 7px 10px; font: 13px / 1.9 Chalk; border-radius: 1px 2px 7px; } :is(#workshop, .blvd-tasks) .note .foam { display: block; margin: 0px 0px 14px; } :is(#workshop, .blvd-tasks) .note b { font-size: 17px; color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .note small { font: 11px Avenir; color: rgb(86, 109, 102); } :is(#workshop, .blvd-tasks) .line { height: 3px; border-radius: 70% 30% 50% 20%; background: rgba(119, 134, 133, 0.396); transform: rotate(-0.25deg); } :is(#workshop, .blvd-tasks) .pulse { display: flex; justify-content: space-between; align-items: center; padding: 22px 0px 6px; gap: 15px; } :is(#workshop, .blvd-tasks) .pulse h2 { font-size: 23px; margin: 3px 0px; } :is(#workshop, .blvd-tasks) .pulse p { margin: 0px; } :is(#workshop, .blvd-tasks) .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 24px 0px 32px; } :is(#workshop, .blvd-tasks) .stats > div { padding: 15px; background: rgba(238, 241, 236, 0.92); border: 1px solid rgb(216, 222, 216); border-radius: 8px; } :is(#workshop, .blvd-tasks) .stats small, :is(#workshop, .blvd-tasks) .stats span { display: block; font-size: 11px; } :is(#workshop, .blvd-tasks) .stats strong { display: block; font-size: 24px; color: rgb(66, 103, 97); line-height: 1.5; } :is(#workshop, .blvd-tasks) .card { position: relative; margin: 28px 0px; padding: 25px 28px 20px 34px; border: 1px solid rgb(210, 214, 210); border-radius: 12px; background: rgba(255, 254, 251, 0.925); box-shadow: rgba(69, 77, 73, 0.063) 1px 4px 8px; transform: rotate(-0.2deg); overflow: visible; } :is(#workshop, .blvd-tasks) .card:nth-of-type(2n) { transform: rotate(0.2deg); } :is(#workshop, .blvd-tasks) .section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; } :is(#workshop, .blvd-tasks) .card h2 { font-size: 23px; line-height: 1.35; margin: 0px 0px 12px; } :is(#workshop, .blvd-tasks) .card p { margin: 8px 0px 14px; } :is(#workshop, .blvd-tasks) .hand { font: 14px / 1.8 Chalk; color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .card li { margin: 9px 0px; } :is(#workshop, .blvd-tasks) .card ol { padding-left: 23px; } :is(#workshop, .blvd-tasks) details[open] { padding-bottom: 12px; } :is(#workshop, .blvd-tasks) .finding { border-bottom: 1px solid rgb(224, 228, 223); padding: 16px 0px; } :is(#workshop, .blvd-tasks) .finding:last-child { border: 0px; } :is(#workshop, .blvd-tasks) .finding h3 { font-size: 19px; line-height: 1.4; margin: 0px; color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .finding p { margin: 8px 0px; } :is(#workshop, .blvd-tasks) .finding small { font-size: 11px; color: rgb(109, 119, 113); } :is(#workshop, .blvd-tasks) .sources a { display: block; } :is(#workshop, .blvd-tasks) .source { display: flex; gap: 18px; justify-content: space-between; padding: 12px 0px; border-bottom: 1px solid rgb(224, 228, 223); } :is(#workshop, .blvd-tasks) .source a { font-size: 14px; } :is(#workshop, .blvd-tasks) .source small { font-size: 11px; flex-shrink: 0; } :is(#workshop, .blvd-tasks) .future { padding: 20px 0px; } :is(#workshop, .blvd-tasks) .future h2 { font-size: 23px; } :is(#workshop, .blvd-tasks) .future > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } :is(#workshop, .blvd-tasks) .future p { font-size: 14px; } :is(#workshop, .blvd-tasks) .future b { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) footer { font-size: 11px; color: rgb(114, 124, 120); border-top: 1px solid rgb(191, 201, 194); padding-top: 16px; } :is(#workshop, .blvd-tasks) #history { font-size: 13px; overflow-wrap: anywhere; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .hero { grid-template-columns: 1fr; padding-top: 34px; gap: 15px; } :is(#workshop, .blvd-tasks) .note { max-width: 300px; justify-self: center; margin: 8px 0px 18px; } :is(#workshop, .blvd-tasks) .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } :is(#workshop, .blvd-tasks) .card { padding: 20px 18px 16px 26px; } :is(#workshop, .blvd-tasks) .tape { font-size: 11px; padding: 9px 12px; } :is(#workshop, .blvd-tasks) .section-head { gap: 8px; } :is(#workshop, .blvd-tasks) .section-head .foam { font-size: 29px; margin: 0px 2px; } :is(#workshop, .blvd-tasks) .future > div { grid-template-columns: 1fr; gap: 0px; } :is(#workshop, .blvd-tasks) .source { display: block; } :is(#workshop, .blvd-tasks) .source small { display: block; } :is(#workshop, .blvd-tasks) .edition { font-size: 8px; } :is(#workshop, .blvd-tasks) .card h2 { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) * { scroll-behavior: auto !important; } } :is(#workshop, .blvd-tasks) .finding small { display: block; overflow-wrap: anywhere; } :is(#workshop, .blvd-tasks) .bf-card { position: relative; border: 1.5px solid rgb(85, 85, 85); border-radius: 12px; padding: 13px; box-shadow: rgba(58, 58, 58, 0.18) 0px 4px 10px; overflow: hidden; background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.043), rgba(58, 58, 58, 0.043) 1px, transparent 1px, transparent 3.5px), repeating-linear-gradient(90deg, rgba(58, 58, 58, 0.043), rgba(58, 58, 58, 0.043) 1px, transparent 1px, transparent 3.5px); } :is(#workshop, .blvd-tasks) .bf-card .bf-inner { background-color: var(--card); border-radius: 8px; padding: 1rem; position: relative; z-index: 1; background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.016), rgba(58, 58, 58, 0.016) 1px, transparent 1px, transparent 3.5px), repeating-linear-gradient(90deg, rgba(58, 58, 58, 0.016), rgba(58, 58, 58, 0.016) 1px, transparent 1px, transparent 3.5px); } :is(#workshop, .blvd-tasks) .bf-card .edge-l { top: 20px; bottom: 18px; left: 0px; width: 13px; background: repeating-linear-gradient(180deg,var(--gold) 0 24px,var(--card) 24px 26px,var(--red) 26px 70px,var(--card) 70px 72px,var(--teal) 72px 94px,var(--card) 94px 96px,var(--gold) 96px 134px,var(--card) 134px 136px,var(--red) 136px 158px,var(--card) 158px 160px,var(--teal) 160px 208px,var(--card) 208px 210px); } :is(#workshop, .blvd-tasks) .card .edge { --teal: var(--accent); --red: color-mix(in srgb,var(--accent) 73%,#3a3a3a); --gold: color-mix(in srgb,var(--accent) 52%,#fafaf5); } :is(#workshop, .blvd-tasks) .bf-card .edge { position: absolute; z-index: 0; overflow: hidden; } :is(#workshop, .blvd-tasks) .card.bf-card { --card: #FAFAF5; padding: 0px 0px 0px 10px; border-radius: 11px; border-color: rgb(170, 168, 162); overflow: hidden; } :is(#workshop, .blvd-tasks) .card.bf-card > .edge-l { top: 0px; bottom: 0px; left: 0px; width: 10px; border-radius: 0px; } :is(#workshop, .blvd-tasks) .card.bf-card > .bf-inner { border-radius: 6px; padding: 25px 28px 20px 24px; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .card.bf-card > .bf-inner { padding: 20px 18px 16px 16px; } } :is(#workshop, .blvd-tasks) .stats { gap: 22px; margin: 30px 0px 36px; align-items: stretch; } :is(#workshop, .blvd-tasks) .stats > .mini-note { font: 12px / 1.9 Chalk; padding: 12px 15px; background: rgb(242, 228, 172); box-shadow: rgba(68, 68, 68, 0.133) 2px 4px 6px; transform: rotate(3deg); border: 0px; border-radius: 0px; } :is(#workshop, .blvd-tasks) .stats > .mini-note .foam { font-size: 24px; float: right; margin: 0px 0px 8px 8px; } :is(#workshop, .blvd-tasks) .stats > .mini-note small { font: 11px / 1.9 Chalk; color: rgb(90, 88, 85); min-height: 42px; } :is(#workshop, .blvd-tasks) .stats > .mini-note strong { font: 800 24px / 1.5 Avenir; color: var(--metric-ink); clear: both; } :is(#workshop, .blvd-tasks) .stats > .mini-note > span:not(.foam) { font: 11px / 1.7 Avenir; color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .stats > .metric-worker { background: rgb(212, 236, 241); --metric-ink: #307878; transform: rotate(-1.2deg); } :is(#workshop, .blvd-tasks) .stats > .metric-sources { background: rgb(242, 228, 172); --metric-ink: #9B6943; transform: rotate(1.3deg); } :is(#workshop, .blvd-tasks) .stats > .metric-time { background: linear-gradient(125deg, rgb(237, 244, 248), rgb(216, 231, 238)); --metric-ink: #406592; transform: rotate(-0.8deg); } :is(#workshop, .blvd-tasks) .stats > .metric-tokens { background: rgb(244, 226, 225); --metric-ink: #B53535; transform: rotate(1.1deg); } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .stats { gap: 18px; } :is(#workshop, .blvd-tasks) .stats > .mini-note { padding: 12px; } :is(#workshop, .blvd-tasks) .stats > .mini-note strong { font-size: 22px; } :is(#workshop, .blvd-tasks) .stats > .mini-note small { font-size: 10px; } } :is(#workshop, .blvd-tasks) .unfold > summary { list-style: none; font: 10px / 1.7 Chalk; min-height: 43px; display: flex; align-items: center; gap: 8px; cursor: pointer; color: rgb(109, 100, 87); padding: 9px 0px; } :is(#workshop, .blvd-tasks) .unfold > summary::-webkit-details-marker { display: none; } :is(#workshop, .blvd-tasks) .unfold > summary > .foam { font-size: 21px; margin-right: 8px; vertical-align: middle; } :is(#workshop, .blvd-tasks) .finding .unfold { margin: 0px; padding: 0px; border: 0px; } :is(#workshop, .blvd-tasks) .finding .unfold small { padding: 0px 0px 12px; } :is(#workshop, .blvd-tasks) .unfold > summary:hover { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .unfold > summary:hover > .foam { transform: rotate(4deg); } :is(#workshop, .blvd-tasks) .unfold > summary > .foam { transition: transform 0.18s; } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .unfold > summary > .foam { transition: none; } } :is(#workshop, .blvd-tasks) .work-note { display: flex; align-items: center; gap: 12px; margin: 4px 0px 24px; padding: 12px 15px; background: rgb(242, 228, 172); box-shadow: rgba(68, 68, 68, 0.133) 2px 4px 6px; transform: rotate(-0.4deg); } :is(#workshop, .blvd-tasks) .work-note b { font: 13px / 1.7 Chalk; color: rgb(109, 80, 66); } :is(#workshop, .blvd-tasks) .work-note p { margin: 3px 0px; font: 14px / 1.6 Avenir; } :is(#workshop, .blvd-tasks) .work-note small { font: 10px / 1.5 Avenir; color: rgb(109, 100, 87); } :is(#workshop, .blvd-tasks) .work-note > .foam { font-size: 26px; } :is(#workshop, .blvd-tasks) .finding h3 .foam { font-size: 25px; margin: 0px 12px 0px 0px; } :is(#workshop, .blvd-tasks) .finding .phrase { font-weight: 800; color: var(--phrase-ink,#307878); } :is(#workshop, .blvd-tasks) .work-note { display: block; } :is(#workshop, .blvd-tasks) .work-note > summary { display: inline-flex; list-style: none; } :is(#workshop, .blvd-tasks) .work-note > summary::-webkit-details-marker { display: none; } :is(#workshop, .blvd-tasks) .work-note .update-content { padding: 12px 4px 0px; } :is(#workshop, .blvd-tasks) .work-note:not([open]) { background: none; box-shadow: none; padding: 0px; transform: none; margin: 4px 0px 24px; border: 0px; } :is(#workshop, .blvd-tasks) .back { margin-left: 12px !important; } :is(#workshop, .blvd-tasks) .back-arrow { display: inline-block; width: 0px; height: 0px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 7px solid; flex-shrink: 0; } :is(#workshop, .blvd-tasks) .back:hover .back-arrow, :is(#workshop, .blvd-tasks) .back:focus-visible .back-arrow { animation: 0.65s ease-in-out 0s infinite normal none running back-cue; } @keyframes back-cue { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(-3px); } } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .back:hover .back-arrow, :is(#workshop, .blvd-tasks) .back:focus-visible .back-arrow { animation: auto ease 0s 1 normal none running none; } } :is(#workshop, .blvd-tasks) .ink-teal { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .ink-blue { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .ink-brown { color: rgb(109, 80, 66); } :is(#workshop, .blvd-tasks) .ink-gray { color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .future .foam { font-size: 23px; margin: 0px 10px 8px 0px; } :is(#workshop, .blvd-tasks) .future b { display: inline; } :is(#workshop, .blvd-tasks) .source a { font-weight: 800; color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .task-line { list-style: none; display: flex; gap: 12px; align-items: flex-start; } :is(#workshop, .blvd-tasks) .task-line > .foam { font-size: 21px; margin: 4px 0px; flex-shrink: 0; } :is(#workshop, .blvd-tasks) #next, :is(#workshop, .blvd-tasks) #gaps { padding-left: 0px; } :is(#workshop, .blvd-tasks) .task-line strong { color: var(--accent,#307878); } :is(#workshop, .blvd-tasks) #design-checklist { font-size: 14px; padding-left: 20px; } :is(#workshop, .blvd-tasks) #design-checklist li { margin: 6px 0px; } :is(#workshop, .blvd-tasks) .keep-together { white-space: nowrap; } :is(#workshop, .blvd-tasks) .future h2 { display: flex; align-items: center; gap: 10px; } :is(#workshop, .blvd-tasks) .future h2 > .foam { margin: 0px; flex-shrink: 0; } :is(#workshop, .blvd-tasks) .tracker-section { margin: 34px 0px; } :is(#workshop, .blvd-tasks) .tracker-section > h2 { font-size: 26px; line-height: 1.35; } :is(#workshop, .blvd-tasks) .tracker-overview { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 20px; margin: 28px 0px; } :is(#workshop, .blvd-tasks) .tracker-note { color: var(--ink); transform: rotate(-1deg); box-shadow: rgba(69, 77, 73, 0.137) 2px 6px 9px; background: var(--note) !important; padding: 20px 18px 16px !important; } :is(#workshop, .blvd-tasks) .tracker-note:nth-child(2) { transform: rotate(1.1deg); } :is(#workshop, .blvd-tasks) .tracker-note:nth-child(3) { transform: rotate(-0.6deg); } :is(#workshop, .blvd-tasks) .tracker-note .foam { font-size: 25px; float: right; margin: 0px 0px 10px 8px; } :is(#workshop, .blvd-tasks) .tracker-note > b { display: block; font: 14px / 1.6 Chalk; margin-bottom: 10px; } :is(#workshop, .blvd-tasks) .tracker-note > strong { display: block; font-size: 18px; line-height: 1.4; clear: both; } :is(#workshop, .blvd-tasks) .tracker-note > small { display: block; font-size: 12px; line-height: 1.5; margin-top: 9px; } :is(#workshop, .blvd-tasks) .prep-total { display: grid; grid-template-columns: 1fr 250px; gap: 8px 20px; align-items: center; margin: 24px 0px; } :is(#workshop, .blvd-tasks) .prep-total > small { grid-column: 1 / -1; font-size: 12px; } :is(#workshop, .blvd-tasks) .task-meter { min-width: 0px; display: block; } :is(#workshop, .blvd-tasks) .task-meter > span { display: block; font: 12px / 1.5 Avenir; color: rgb(101, 107, 104); } :is(#workshop, .blvd-tasks) .task-meter > svg { display: block; width: 100%; height: 22px; overflow: visible; } :is(#workshop, .blvd-tasks) .tracker-task.bf-card { --card: #FAFAF5; position: relative; border: 1px solid rgb(199, 203, 199); border-radius: 11px; margin: 15px 0px; padding: 0px 0px 0px 10px; box-shadow: rgba(69, 77, 73, 0.09) 1px 4px 8px; transform: rotate(-0.15deg); overflow: hidden; } :is(#workshop, .blvd-tasks) .tracker-task:nth-child(2n) { transform: rotate(0.15deg); } :is(#workshop, .blvd-tasks) .tracker-task .edge-l { position: absolute; top: 0px; bottom: 0px; left: 0px; width: 10px; --teal: var(--accent); --red: color-mix(in srgb,var(--accent) 73%,#3a3a3a); --gold: color-mix(in srgb,var(--accent) 52%,#fafaf5); --card: #FAFAF5; background: repeating-linear-gradient(180deg,var(--gold) 0 24px,var(--card) 24px 26px,var(--red) 26px 70px,var(--card) 70px 72px,var(--teal) 72px 94px,var(--card) 94px 96px,var(--gold) 96px 134px,var(--card) 134px 136px,var(--red) 136px 158px,var(--card) 158px 160px,var(--teal) 160px 208px,var(--card) 208px 210px); } :is(#workshop, .blvd-tasks) .tracker-task > summary { list-style: none; display: grid; grid-template-columns: minmax(0px, 1fr) 215px; gap: 14px 26px; padding: 22px 24px 15px; background: rgb(250, 250, 245); color: rgb(82, 85, 84); font: 16px / 1.5 Avenir; position: relative; z-index: 1; border-radius: 6px; } :is(#workshop, .blvd-tasks) .tracker-task > summary::-webkit-details-marker { display: none; } :is(#workshop, .blvd-tasks) .task-title { display: flex; align-items: center; gap: 13px; font-size: 19px; font-weight: 800; line-height: 1.35; color: var(--accent); } :is(#workshop, .blvd-tasks) .task-title .foam { font-size: 26px; margin: 0px; } :is(#workshop, .blvd-tasks) .task-state { place-self: center end; max-width: 100%; } :is(#workshop, .blvd-tasks) .task-state .tape { font-size: 9px; padding: 5px 11px; white-space: normal; line-height: 1.6; text-align: center; } :is(#workshop, .blvd-tasks) .task-next { font-size: 14px; align-self: center; } :is(#workshop, .blvd-tasks) .task-next > b { color: var(--accent); } :is(#workshop, .blvd-tasks) .task-open { font: 12px / 1.5 Chalk; color: var(--accent); grid-column: 1 / -1; } :is(#workshop, .blvd-tasks) .task-open > span { font: 18px Avenir; margin-left: 8px; } :is(#workshop, .blvd-tasks) .tracker-task[open] .task-open > span { display: inline-block; transform: rotate(45deg); } :is(#workshop, .blvd-tasks) .tracker-task[open] { padding-bottom: 0px; } :is(#workshop, .blvd-tasks) .tracker-task > summary:focus-visible { outline: rgb(64, 101, 146) dashed 2px; outline-offset: -7px; } :is(#workshop, .blvd-tasks) .task-body { padding: 0px 24px 22px; background: rgb(250, 250, 245); position: relative; z-index: 1; font-size: 16px; line-height: 1.6; } :is(#workshop, .blvd-tasks) .task-body > p { margin: 4px 0px 18px; } :is(#workshop, .blvd-tasks) .check-steps { list-style: none; padding: 0px; margin: 16px 0px; display: grid; gap: 10px; } :is(#workshop, .blvd-tasks) .check-step { display: flex; gap: 12px; align-items: flex-start; } :is(#workshop, .blvd-tasks) .check-step > span:first-child { font-size: 22px; line-height: 1.2; color: rgb(133, 135, 130); } :is(#workshop, .blvd-tasks) .check-step.checked > span:first-child { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .task-facts { border-top: 1px solid rgb(215, 221, 215); padding-top: 10px; } :is(#workshop, .blvd-tasks) .task-facts > p { display: grid; grid-template-columns: 25px 140px minmax(0px, 1fr); gap: 10px; font-size: 13px; line-height: 1.6; margin: 10px 0px; } :is(#workshop, .blvd-tasks) .task-facts .foam { font-size: 20px; margin: 0px; } :is(#workshop, .blvd-tasks) .task-facts b { color: var(--accent); } :is(#workshop, .blvd-tasks) .task-source { font-size: 13px; } :is(#workshop, .blvd-tasks) .task-body > small { font-size: 11px; color: rgb(119, 125, 125); } :is(#workshop, .blvd-tasks) .tracker-label { max-width: 100%; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .tracker-overview { grid-template-columns: 1fr; gap: 15px; } :is(#workshop, .blvd-tasks) .tracker-note { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; } :is(#workshop, .blvd-tasks) .tracker-note .foam { grid-area: 1 / 2 / 3; float: none; } :is(#workshop, .blvd-tasks) .tracker-note > b { margin: 0px; } :is(#workshop, .blvd-tasks) .tracker-note > strong { font-size: 17px; } :is(#workshop, .blvd-tasks) .tracker-note > small { grid-column: 1 / -1; margin-top: 5px; } :is(#workshop, .blvd-tasks) .prep-total { grid-template-columns: 1fr; } :is(#workshop, .blvd-tasks) .prep-total .task-meter { max-width: 100%; } :is(#workshop, .blvd-tasks) .tracker-task > summary { grid-template-columns: minmax(0px, 1fr); gap: 12px; padding: 20px 17px 15px; } :is(#workshop, .blvd-tasks) .task-title { font-size: 18px; gap: 10px; } :is(#workshop, .blvd-tasks) .task-title .foam { font-size: 25px; } :is(#workshop, .blvd-tasks) .task-state { justify-self: start; } :is(#workshop, .blvd-tasks) .task-next { font-size: 14px; } :is(#workshop, .blvd-tasks) .task-meter { width: 100%; } :is(#workshop, .blvd-tasks) .task-body { padding: 0px 17px 18px; } :is(#workshop, .blvd-tasks) .task-facts > p { grid-template-columns: 24px minmax(0px, 1fr); } :is(#workshop, .blvd-tasks) .task-facts > p > span:last-child { grid-column: 2; } :is(#workshop, .blvd-tasks) .tracker-section .section-head > .foam { font-size: 26px; } :is(#workshop, .blvd-tasks) .tracker-section > h2 { font-size: 23px; } } :is(#workshop, .blvd-tasks) .task-meter > .tracker-seek-art { height: 24px; filter: url("#tracker-pencil"); overflow: visible; pointer-events: none; } :is(#workshop, .blvd-tasks) .tracker-seek-outline { fill: rgba(58, 58, 58, 0.035); stroke: rgba(58, 58, 58, 0.24); stroke-width: 1.5; vector-effect: non-scaling-stroke; } :is(#workshop, .blvd-tasks) .tracker-seek-ink { clip-path: inset(0 calc(100% - var(--audio-pct)) 0 0); } :is(#workshop, .blvd-tasks) .tracker-task > summary > .edge-l { left: -10px; width: 10px; border-radius: 0px; pointer-events: none; } :is(#workshop, .blvd-tasks) .tracker-task.bf-card { --teal: var(--accent); --red: color-mix(in srgb,var(--accent) 73%,#3a3a3a); --gold: color-mix(in srgb,var(--accent) 52%,#fafaf5); background-color: rgb(250, 250, 245); background-image: repeating-linear-gradient(180deg,var(--gold) 0 24px,var(--card) 24px 26px,var(--red) 26px 70px,var(--card) 70px 72px,var(--teal) 72px 94px,var(--card) 94px 96px,var(--gold) 96px 134px,var(--card) 134px 136px,var(--red) 136px 158px,var(--card) 158px 160px,var(--teal) 160px 208px,var(--card) 208px 210px); background-size: 10px 100%; background-repeat: no-repeat; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .edge-l { display: none; } :is(#workshop, .blvd-tasks) .status-window { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: max-content; max-width: 100%; padding: 9px 11px; border: 1px solid color-mix(in srgb,var(--status-ink) 38%,#a9aaa3); border-radius: 3px; background: linear-gradient(180deg,color-mix(in srgb,var(--status-paper) 84%,var(--status-ink)),var(--status-paper) 44%,color-mix(in srgb,var(--status-paper) 94%,white)); box-shadow: rgba(56, 60, 57, 0.23) 0px 2px 3px inset, rgba(56, 60, 57, 0.133) 1px 0px 2px inset, rgba(255, 255, 255, 0.85) 0px 1px 0px; color: var(--status-ink); text-shadow: rgba(255, 255, 255, 0.44) 0px 1px 0px; vertical-align: middle; cursor: inherit; transition: none; animation: auto ease 0s 1 normal none running none; transform: none; isolation: isolate; } :is(#workshop, .blvd-tasks) .status-text { font: 400 13px / 1.4 PixelGamer, monospace; text-transform: uppercase; letter-spacing: 0.01em; overflow-wrap: normal; min-width: 0px; } :is(#workshop, .blvd-tasks) .status-window .status-icon { font-size: 18px; line-height: 1; margin: 0px; transform: rotate(-4deg); transition: none; animation: auto ease 0s 1 normal none running none; } :is(#workshop, .blvd-tasks) .task-state { max-width: 100%; justify-self: end; } :is(#workshop, .blvd-tasks) .status-library { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 19px 25px; padding: 15px 3px; } :is(#workshop, .blvd-tasks) .status-library p { font-size: 13px; line-height: 1.5; margin: 8px 0px; } :is(#workshop, .blvd-tasks) .status-library .status-window { cursor: default; } :is(#workshop, .blvd-tasks) .tracker-task .task-open { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; width: max-content; max-width: 100%; } :is(#workshop, .blvd-tasks) .tracker-task .task-open > span { margin: 0px; transform: none; } :is(#workshop, .blvd-tasks) .tracker-task .task-open > .plus-sticker { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; font: 900 24px / 1 Avenir, sans-serif; color: var(--accent,#307878); filter: url("#studio-foam-smooth"); transform: rotate(-7deg); transition: transform 0.18s; } :is(#workshop, .blvd-tasks) .tracker-task .task-open:hover .plus-sticker, :is(#workshop, .blvd-tasks) .tracker-task .task-open:focus-visible .plus-sticker { transform: rotate(4deg) scale(1.18); } :is(#workshop, .blvd-tasks) .tracker-task[open] > summary .plus-sticker { transform: rotate(45deg); } :is(#workshop, .blvd-tasks) .tracker-task .task-open > .closed-cue, :is(#workshop, .blvd-tasks) .tracker-task .task-open > .open-cue { font: inherit; transform: none; } :is(#workshop, .blvd-tasks) .tracker-task .open-cue { display: none; } :is(#workshop, .blvd-tasks) .tracker-task[open] .task-open > .closed-cue { display: none; } :is(#workshop, .blvd-tasks) .tracker-task[open] .task-open > .open-cue { display: inline; transform: none; } :is(#workshop, .blvd-tasks) .task-symbol { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 38px; flex-shrink: 0; } :is(#workshop, .blvd-tasks) .task-symbol .foam { margin: 0px; } :is(#workshop, .blvd-tasks) .step-number { font: 800 10px / 1.2 Avenir, sans-serif; color: var(--accent); white-space: nowrap; letter-spacing: 0.015em; } :is(#workshop, .blvd-tasks) .task-title { align-items: center; } :is(#workshop, .blvd-tasks) .task-title > .task-symbol + span { min-width: 0px; } :is(#workshop, .blvd-tasks) .tracker-task > summary { grid-template-columns: minmax(0px, 1fr) 240px; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .tracker-task > summary { grid-template-columns: minmax(0px, 1fr); } :is(#workshop, .blvd-tasks) .task-state { justify-self: start; margin-left: 48px; max-width: calc(100% - 48px); } :is(#workshop, .blvd-tasks) .status-text { font-size: 12px; } :is(#workshop, .blvd-tasks) .status-window { gap: 8px; padding: 8px 10px; } :is(#workshop, .blvd-tasks) .status-library { grid-template-columns: 1fr; } :is(#workshop, .blvd-tasks) .task-symbol { min-width: 38px; } } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .tracker-task .task-open > .plus-sticker { transition: none; } :is(#workshop, .blvd-tasks) .tracker-task .task-open:hover .plus-sticker, :is(#workshop, .blvd-tasks) .tracker-task .task-open:focus-visible .plus-sticker { transform: rotate(-7deg); } :is(#workshop, .blvd-tasks) .tracker-task[open] > summary .plus-sticker { transform: rotate(45deg); } } :is(#workshop, .blvd-tasks) .tracker-task .status-window, :is(#workshop, .blvd-tasks) .status-library .status-window { position: relative; padding: 4px 7px 4px 12px; margin-left: 10px; gap: 0px; border-radius: 2px; box-shadow: rgba(56, 60, 57, 0.2) 0px 1px 2px inset, rgba(56, 60, 57, 0.094) 1px 0px 1px inset, rgba(255, 255, 255, 0.69) 0px 1px 0px; cursor: default; } :is(#workshop, .blvd-tasks) .status-window .status-text { font-size: 11px; line-height: 1.3; } :is(#workshop, .blvd-tasks) .status-window .status-icon { position: absolute; left: -13px; top: 50%; font-size: 17px; transform: translateY(-50%) rotate(-8deg); pointer-events: none; } :is(#workshop, .blvd-tasks) .task-state { padding-left: 3px; } :is(#workshop, .blvd-tasks) .status-window .status-icon { font-size: 14px; left: -10px; top: 50%; line-height: 1; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; } :is(#workshop, .blvd-tasks) .status-window .status-icon { filter: url("#studio-status-foam"); text-shadow: none; } :is(#workshop, .blvd-tasks) .check-step .check-paper { position: relative; display: inline-block; width: 24px; height: 26px; flex: 0 0 24px; } :is(#workshop, .blvd-tasks) .check-ring { position: absolute; left: 3px; top: 3px; font: 20px / 1 Avenir, sans-serif; color: rgb(150, 154, 148); } :is(#workshop, .blvd-tasks) .check-step .check-sticker { position: absolute; left: 0px; top: 0px; font: 900 24px / 1 Avenir, sans-serif; color: rgb(48, 120, 120); filter: url("#studio-foam-smooth"); transform: rotate(var(--check-tilt,-6deg)); margin: 0px; } :is(#workshop, .blvd-tasks) .sr-check { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border: 0px; } :is(#workshop, .blvd-tasks) .tracker-task > summary { cursor: default; } :is(#workshop, .blvd-tasks) .tracker-task .task-open { appearance: none; background: transparent; border: 0px; box-shadow: none; padding: 0px; color: inherit; font: inherit; cursor: pointer; } :is(#workshop, .blvd-tasks) .tracker-task .task-open:focus-visible { outline: rgb(146, 149, 143) dashed 2px; outline-offset: 4px; } :is(#workshop, .blvd-tasks) .priority-group { border-top: 0px; padding-top: 0px; margin-top: 24px; } :is(#workshop, .blvd-tasks) .priority-group > summary { padding: 10px 2px; gap: 12px; } :is(#workshop, .blvd-tasks) .priority-group > summary .tracker-label { font-size: 12px; padding: 8px 15px; line-height: 1.5; } :is(#workshop, .blvd-tasks) .priority-group > summary .priority-count { display: flex; align-items: center; gap: 7px; white-space: nowrap; } :is(#workshop, .blvd-tasks) .priority-count > span { font: 14px / 1.2 Gaposiss, monospace; color: rgb(114, 124, 120); } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .priority-group > summary { gap: 8px; flex-wrap: wrap; } :is(#workshop, .blvd-tasks) .priority-group > summary .tracker-label { font-size: 10px; padding: 7px 11px; } :is(#workshop, .blvd-tasks) .priority-group > summary .priority-count { font-size: 10px; } :is(#workshop, .blvd-tasks) .priority-count > span { font-size: 12px; } } :is(#workshop, .blvd-tasks) .task-conversations { margin: 8px 0px 24px; } :is(#workshop, .blvd-tasks) .answer-convo { margin: 14px 0px; background-color: var(--card); border-radius: 11px; padding: 10px 10px 10px 19px; } :is(#workshop, .blvd-tasks) .answer-cue { cursor: pointer; padding: 12px 6px; font: 16px / 1.5 Chalkduster, sans-serif; color: rgb(64, 101, 146); list-style: revert; } :is(#workshop, .blvd-tasks) .answer-cue .foam { margin-right: 10px; } :is(#workshop, .blvd-tasks) .answer-convo > .bf-inner { border-radius: 6px; padding: 16px; } :is(#workshop, .blvd-tasks) .answer-convo .bf-inner > p { font: 16px / 1.6 Avenir, sans-serif; color: rgb(71, 71, 71); } :is(#workshop, .blvd-tasks) .answer-postit { background: rgb(246, 236, 203); padding: 16px; margin: 18px 3px; box-shadow: rgba(0, 0, 0, 0.133) 0px 3px 6px; transform: rotate(-0.5deg); font: 14px / 1.7 Chalkduster, sans-serif; color: rgb(109, 100, 87); } :is(#workshop, .blvd-tasks) .answer-convo small { display: block; overflow-wrap: anywhere; color: rgb(102, 102, 102); } :is(#workshop, .blvd-tasks) .answer-convo summary:focus-visible { outline: rgb(64, 101, 146) solid 2px; outline-offset: 3px; } :is(#workshop, .blvd-tasks) .answer-reply { margin-top: 20px; border-top: 1px solid rgb(170, 168, 162); padding-top: 14px; } :is(#workshop, .blvd-tasks) .answer-reply label { display: block; font: 14px Chalkduster, sans-serif; color: rgb(64, 101, 146); margin-bottom: 10px; } :is(#workshop, .blvd-tasks) .answer-reply textarea { display: block; box-sizing: border-box; width: 100%; resize: vertical; min-height: 86px; border: 1px solid rgb(170, 168, 162); border-radius: 6px; background: rgb(255, 254, 248); color: rgb(71, 71, 71); font: 16px / 1.5 Avenir, sans-serif; padding: 12px; } :is(#workshop, .blvd-tasks) .answer-reply textarea:focus-visible { outline: rgb(64, 101, 146) solid 2px; } :is(#workshop, .blvd-tasks) .answer-reply button { margin: 12px 0px; max-width: 100%; white-space: normal; } :is(#workshop, .blvd-tasks) .reply-state { font-size: 14px !important; } :is(#workshop, .blvd-tasks) .reply-history p { padding: 10px; background: rgb(231, 237, 244); border-radius: 4px; white-space: pre-wrap; overflow-wrap: anywhere; } :is(#workshop, .blvd-tasks) .answer-audio audio { max-width: 100%; display: block; margin: 8px 0px; } :is(#workshop, .blvd-tasks) .answer-convo.bf-card { padding: 10px; border-color: rgb(170, 168, 162); border-radius: 11px; --frame-0: #C13B2A; --frame-1: #D47A3A; --frame-2: #C49538; --frame-3: #559C40; --frame-4: #307878; --frame-5: #7A4380; overflow: hidden; } :is(#workshop, .blvd-tasks) .answer-convo > .edge { --edge-angle: 90deg; background-image: repeating-linear-gradient(var(--edge-angle),var(--frame-0) 0 25px,#fafaf5 25px 27px,var(--frame-1) 27px 60px,#fafaf5 60px 62px,var(--frame-2) 62px 87px,#fafaf5 87px 89px,var(--frame-3) 89px 128px,#fafaf5 128px 130px,var(--frame-4) 130px 153px,#fafaf5 153px 155px,var(--frame-5) 155px 189px,#fafaf5 189px 191px); } :is(#workshop, .blvd-tasks) .answer-convo > .edge-t { top: 0px; left: 0px; right: 0px; height: 10px; } :is(#workshop, .blvd-tasks) .answer-convo > .edge-b { bottom: 0px; left: 0px; right: 0px; height: 10px; } :is(#workshop, .blvd-tasks) .answer-convo > .edge-l { left: 0px; top: 10px; bottom: 10px; width: 10px; --edge-angle: 180deg; } :is(#workshop, .blvd-tasks) .answer-convo > .edge-r { right: 0px; top: 10px; bottom: 10px; width: 10px; --edge-angle: 180deg; } :is(#workshop, .blvd-tasks) .answer-convo .answer-cue { position: relative; z-index: 1; background: rgb(250, 250, 245); border-radius: 6px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 12px; list-style: none; } :is(#workshop, .blvd-tasks) .answer-cue::-webkit-details-marker { display: none; } :is(#workshop, .blvd-tasks) .answer-cue .tracker-label { grid-column: 1; justify-self: start; font-size: 11px; } :is(#workshop, .blvd-tasks) .answer-cue > .foam { grid-area: 1 / 2; font-size: 27px; } :is(#workshop, .blvd-tasks) .answer-title { grid-column: 1; font: 800 19px / 1.4 Avenir, sans-serif; color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .answer-disclosure { grid-column: 2; align-self: center; font: 24px Chalkduster; color: rgb(136, 136, 136); } :is(#workshop, .blvd-tasks) .answer-convo[open] .answer-disclosure { transform: rotate(180deg); } :is(#workshop, .blvd-tasks) .answer-convo > .bf-inner { padding: 4px 18px 20px; background-color: rgb(250, 250, 245); color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .answer-convo .bf-inner > p { color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .answer-convo .answer-postit { margin: 16px 0px; } :is(#workshop, .blvd-tasks) .answer-convo .note-small { font: 12px / 1.5 Avenir, sans-serif !important; color: rgb(119, 119, 119) !important; } :is(#workshop, .blvd-tasks) .answer-reply button { font-size: 12px; } :is(#workshop, .blvd-tasks) .answer-reply small { font: 12px / 1.5 Avenir, sans-serif; } :is(#workshop, .blvd-tasks) .answer-audio { margin: 8px 0px; } :is(#workshop, .blvd-tasks) .foam[data-hand-placed] { rotate: var(--placed-angle,0deg); } :is(#workshop, .blvd-tasks) .answer-cue .tape.tracker-label { padding: 3px 12px; line-height: 1.2; min-height: 0px; align-self: start; } :is(#workshop, .blvd-tasks) .answer-convo .answer-cue { gap: 8px 12px; padding-top: 12px; padding-bottom: 12px; } :is(#workshop, .blvd-tasks) .answer-convo .ink-blue { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .answer-convo .ink-gold { color: rgb(146, 103, 24); } :is(#workshop, .blvd-tasks) .answer-convo .ink-green { color: rgb(70, 124, 54); } :is(#workshop, .blvd-tasks) .answer-convo .ink-teal { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .answer-convo .ink-purple { color: rgb(122, 67, 128); } :is(#workshop, .blvd-tasks) .answer-convo .answer-ink { font-weight: 800; } :is(#workshop, .blvd-tasks) .answer-convo .answer-main > .foam, :is(#workshop, .blvd-tasks) .answer-convo .answer-postit > .foam, :is(#workshop, .blvd-tasks) .answer-convo .answer-question > .foam { font-size: 21px; margin: 0px 10px 3px 0px; vertical-align: middle; } :is(#workshop, .blvd-tasks) .answer-convo .bf-inner > .answer-question { font: 14px / 1.8 Chalk, sans-serif; color: rgb(64, 101, 146); margin-top: 20px; } :is(#workshop, .blvd-tasks) .answer-convo .answer-postit { color: rgb(117, 97, 38); } :is(#workshop, .blvd-tasks) .tape, :is(#workshop, .blvd-tasks) .bubble-chip { --tape-color: #406592; --tape-tilt: -1deg; --tape-cuts: polygon(1% 0,99% 0,100% 100%,0 100%); position: relative; isolation: isolate; background: none; box-shadow: none; border: 0px; border-radius: 0px; clip-path: none; transform: rotate(var(--tape-tilt)); text-shadow: rgba(23, 33, 42, 0.8) 0px -1px 0px, rgba(255, 255, 255, 0.46) 0px 1px 0px; white-space: normal; } :is(#workshop, .blvd-tasks) .tape::before, :is(#workshop, .blvd-tasks) .bubble-chip::before { content: ""; position: absolute; inset: 0px; z-index: -1; clip-path: var(--tape-cuts); background: linear-gradient(var(--curl-angle,180deg),#ffffff22 0%,transparent 40%,#00000020 100%),linear-gradient(90deg,#0000001c 0%,transparent 12%,#ffffff13 48%,transparent 86%,#0000001c 100%),var(--tape-color); border-radius: var(--curl-radius,0 0 40% 25% / 0 0 5% 4%); box-shadow: rgba(255, 255, 255, 0.145) 0px 1px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 0px inset; } :is(#workshop, .blvd-tasks) .tape::after, :is(#workshop, .blvd-tasks) .bubble-chip::after { content: ""; position: absolute; z-index: -2; left: 2%; right: 2%; top: 45%; bottom: var(--curl-depth,-3px); border-radius: var(--shadow-radius,15% 15% 48% 42%); background: rgba(57, 56, 50, 0.333); filter: blur(2.3px); transform: rotate(var(--shadow-tilt,.3deg)); pointer-events: none; } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"]::before { clip-path: polygon(0px 0px, 100% 0px, 99.3% 25%, 99% 50%, 99.3% 75%, 100% 100%, 0px 100%, 0.7% 75%, 1% 50%, 0.7% 25%); border-radius: 0px; background: linear-gradient(180deg,#ffffff26 0%,#ffffff0a 28%,transparent 45%,#00000020 100%),var(--tape-color) !important; } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::before { clip-path: polygon(1.4% 0px, 98.6% 0px, 99.6% 25%, 100% 50%, 99.6% 75%, 98.6% 100%, 1.4% 100%, 0.4% 75%, 0px 50%, 0.4% 25%); border-radius: 0px; background: linear-gradient(180deg,#ffffff27 0%,#ffffff0b 28%,transparent 48%,#00000025 100%),var(--tape-color) !important; } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl="ends"]::after { inset: 1px 1.5% -6px; clip-path: none; border-radius: 0px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 2H99L99 39Q73 30 50 31Q27 30 1 39Z' fill='%23343332' fill-opacity='.32'/%3E%3C/svg%3E") center center / 100% 100% no-repeat transparent; filter: blur(1.6px); transform: none; } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl="middle"]::after { inset: 1px 1.5% -6px; clip-path: none; border-radius: 0px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 2H99L99 31Q74 40 50 40Q26 40 1 31Z' fill='%23343332' fill-opacity='.32'/%3E%3C/svg%3E") center center / 100% 100% no-repeat transparent; filter: blur(1.6px); transform: none; } :is(#workshop, .blvd-tasks) .tape[data-curl]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl]::after { opacity: 0.68; filter: blur(2.5px); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"]::before { filter: drop-shadow(rgba(52, 51, 50, 0.333) 0px 1px 0.45px); } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::before { filter: drop-shadow(rgba(52, 51, 50, 0.333) 0px 0.7px 0.4px); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"] { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.44) 0%, rgba(52, 51, 50, 0.157) 48%, transparent 76%) center bottom / 64% 3px no-repeat !important; } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"] { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.396) 0%, rgba(52, 51, 50, 0.145) 48%, transparent 78%) left bottom / 15% 3px no-repeat, radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.396) 0%, rgba(52, 51, 50, 0.145) 48%, transparent 78%) right bottom / 15% 3px no-repeat !important; } :is(#workshop, .blvd-tasks) .tape[data-curl] { background: none !important; } :is(#workshop, .blvd-tasks) .tape[data-curl]::before { filter: none; } :is(#workshop, .blvd-tasks) .tape-contact { position: absolute; bottom: -1.5px; height: 3px; pointer-events: none; z-index: -1; filter: blur(0.5px); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"] > .tape-contact { left: 22%; right: 22%; background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, transparent 75%); } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"] > .tape-contact { left: 1%; right: 1%; background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, transparent 75%) left center / 17% 100% no-repeat, radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, transparent 75%) right center / 17% 100% no-repeat; } :is(#workshop, .blvd-tasks) .tape[data-curl]::before { z-index: -1; } :is(#workshop, .blvd-tasks) .tape[data-curl] > .tape-contact { z-index: -2; } :is(#workshop, .blvd-tasks) .tape[data-curl]::after { z-index: -3; } :is(#workshop, .blvd-tasks) .tape[data-curl]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl]::after { opacity: 0.88; filter: blur(3.3px); bottom: -7px; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="attention"] { --signal: #6b9fc8; --signal-glow: #6b9fc8aa; } :is(#workshop, .blvd-tasks) .task-kit { margin: 22px 0px 15px; border-top: 1px solid rgb(215, 221, 215); padding-top: 16px; } :is(#workshop, .blvd-tasks) .stage-trail { list-style: none; display: flex; gap: 18px; flex-wrap: wrap; margin: 0px; padding: 0px; } :is(#workshop, .blvd-tasks) .stage-trail li { position: relative; display: flex; gap: 7px; align-items: center; font: 11px / 1.6 Chalk; color: rgb(119, 123, 118); opacity: 0.65; } :is(#workshop, .blvd-tasks) .stage-trail li:not(:last-child)::after { content: "›"; position: absolute; right: -13px; color: rgb(155, 161, 154); } :is(#workshop, .blvd-tasks) .stage-trail .foam { font-size: 17px; margin: 0px; } :is(#workshop, .blvd-tasks) .stage-trail li.current { color: var(--accent); opacity: 1; } :is(#workshop, .blvd-tasks) .stage-trail li.current > span:last-child { border-bottom: 2px solid color-mix(in srgb,var(--accent) 50%,transparent); border-radius: 40% 20% 35%; } :is(#workshop, .blvd-tasks) .stage-caption { font-size: 11px; color: rgb(114, 120, 114); margin: 8px 0px 18px; } :is(#workshop, .blvd-tasks) .task-note-row { display: flex; flex-wrap: wrap; gap: 16px 25px; align-items: center; } :is(#workshop, .blvd-tasks) .task-note-trigger { appearance: none; background: none; border: 0px; box-shadow: none; padding: 5px 4px; display: flex; flex-direction: column; gap: 8px; align-items: center; color: var(--note-ink); font: 11px / 1.5 Chalk; cursor: pointer; min-width: 61px; } :is(#workshop, .blvd-tasks) .task-note-trigger > .foam { font-size: 26px; margin: 0px; transition: transform 0.18s; } :is(#workshop, .blvd-tasks) .task-note-trigger:hover > .foam { transform: rotate(4deg) translateY(-2px); } :is(#workshop, .blvd-tasks) .task-note-trigger[aria-expanded="true"] > span:last-child { border-bottom: 1.5px solid; } :is(#workshop, .blvd-tasks) .task-note-trigger:focus-visible { outline: rgb(133, 140, 133) dashed 2px; outline-offset: 3px; border-radius: 4px; } :is(#workshop, .blvd-tasks) .task-floating-note { position: fixed; inset: auto; margin: 0px; width: min(360px, -32px + 100vw); max-height: calc(-32px + 100vh); box-sizing: border-box; border: 0px; background: var(--note-paper,#e2efeb); box-shadow: rgba(59, 68, 66, 0.18) 4px 8px 16px; padding: 16px 18px; color: rgb(90, 88, 85); font: 12px / 1.8 Chalk; overflow: auto; z-index: 1000; transform: rotate(var(--note-tilt,-1deg)); isolation: isolate; } :is(#workshop, .blvd-tasks) .task-floating-note::backdrop { background: transparent; pointer-events: none; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.technical) { background: rgb(250, 250, 245); border: 1px solid rgb(210, 214, 206); border-radius: 5px; font: 14px / 1.65 Avenir; } :is(#workshop, .blvd-tasks) .task-note-content h3 { font: 14px / 1.6 Chalk; color: var(--note-ink); margin: 0px 0px 12px; display: flex; align-items: center; gap: 12px; } :is(#workshop, .blvd-tasks) .task-note-content h3 > .foam { font-size: 23px; margin: 0px; } :is(#workshop, .blvd-tasks) .task-note-content p { margin: 10px 0px; } :is(#workshop, .blvd-tasks) .task-note-content ul, :is(#workshop, .blvd-tasks) .task-note-content ol { padding-left: 21px; margin: 12px 0px; } :is(#workshop, .blvd-tasks) .task-note-content li { margin: 8px 0px; } :is(#workshop, .blvd-tasks) .task-note-content strong, :is(#workshop, .blvd-tasks) .task-note-content a { color: var(--note-ink); } :is(#workshop, .blvd-tasks) .task-note-content .note-small { font: 11px / 1.6 Avenir; color: rgb(111, 116, 110); } :is(#workshop, .blvd-tasks) .task-note-content .note-kicker { font: 11px / 1.5 Chalk; color: var(--note-ink); } :is(#workshop, .blvd-tasks) .result-paper { padding: 13px; background: rgb(255, 254, 249); box-shadow: rgba(69, 77, 73, 0.114) 1px 3px 6px; transform: rotate(0.5deg); border: 1px solid rgb(229, 230, 222); } :is(#workshop, .blvd-tasks) .work-signature { color: rgb(48, 120, 120); font: 12px / 1.8 Chalk !important; } :is(#workshop, .blvd-tasks) .dependency-chain { border-left: 2px solid rgb(161, 174, 164); border-radius: 30% 0px 0px 20%; padding: 2px 0px 2px 13px; margin: 14px 0px; } :is(#workshop, .blvd-tasks) .dependency-chain p { font: 12px / 1.5 Avenir; } :is(#workshop, .blvd-tasks) .task-note-content { overflow-wrap: anywhere; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .task-note-row { gap: 15px 12px; justify-content: flex-start; } :is(#workshop, .blvd-tasks) .task-note-trigger { min-width: 65px; } :is(#workshop, .blvd-tasks) .stage-trail { gap: 17px; } :is(#workshop, .blvd-tasks) .stage-trail li { font-size: 10px; } :is(#workshop, .blvd-tasks) .stage-trail .foam { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .task-note-trigger > .foam { transition: none; } } :is(#workshop, .blvd-tasks) .dependency-jump { appearance: none; border: 0px; background: none; color: var(--note-ink); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; padding: 3px 0px; text-align: left; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-meter, :is(#workshop, .blvd-tasks) .task-stage, :is(#workshop, .blvd-tasks) .task-actions { grid-column: 1 / -1; } :is(#workshop, .blvd-tasks) .task-stage { margin-top: -8px; } :is(#workshop, .blvd-tasks) .task-stage .stage-caption { margin: 6px 0px 0px; } :is(#workshop, .blvd-tasks) .task-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid rgb(215, 221, 215); padding-top: 10px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-row { gap: 10px 15px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { min-width: 50px; font-size: 10px; gap: 5px; padding: 4px 2px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger > .foam { font-size: 22px; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-sources), :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-specs) { padding-top: 23px; background-image: repeating-linear-gradient(90deg,var(--edge-gold,#bfc1bd) 0 24px,#FAFAF5 24px 26px,var(--edge-red,#666965) 26px 70px,#FAFAF5 70px 72px,var(--edge-teal,#90938f) 72px 94px,#FAFAF5 94px 96px,var(--edge-gold,#bfc1bd) 96px 134px,#FAFAF5 134px 136px,var(--edge-red,#666965) 136px 158px,#FAFAF5 158px 160px,var(--edge-teal,#90938f) 160px 208px,#FAFAF5 208px 210px); background-size: 100% 10px; background-repeat: no-repeat; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .task-actions { gap: 10px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-row { gap: 10px 8px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { min-width: 54px; } :is(#workshop, .blvd-tasks) .stage-trail { gap: 14px; } :is(#workshop, .blvd-tasks) .stage-trail li:not(:last-child)::after { right: -10px; } } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-specs) { --edge-gold: #C49538; --edge-red: #B53535; --edge-teal: #307878; } :is(#workshop, .blvd-tasks) .task-floating-note { scrollbar-width: thin; scrollbar-color: rgba(104, 111, 108, 0.46) transparent; scrollbar-gutter: stable; overscroll-behavior: contain; } :is(#workshop, .blvd-tasks) .task-floating-note::-webkit-scrollbar { width: 7px; height: 7px; } :is(#workshop, .blvd-tasks) .task-floating-note::-webkit-scrollbar-track { background: transparent; } :is(#workshop, .blvd-tasks) .task-floating-note::-webkit-scrollbar-thumb { background: padding-box rgba(104, 111, 108, 0.46); border: 2px solid transparent; border-radius: 8px; } :is(#workshop, .blvd-tasks) .task-floating-note::-webkit-scrollbar-thumb:hover { background-color: rgba(104, 111, 108, 0.66); } :is(#workshop, .blvd-tasks) .tracker-task > summary { grid-template-columns: minmax(0px, 1fr) 330px; gap: 8px 28px; padding-top: 15px; padding-right: 18px; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-title { grid-area: 1 / 1; align-self: start; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-state { grid-area: 1 / 2; align-self: start; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-next { grid-area: 2 / 1 / 4; align-self: start; padding-top: 7px; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-meter { grid-area: 2 / 2; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-stage { grid-area: 3 / 2; margin: 0px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail { gap: 7px; justify-content: space-between; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li { gap: 4px; font-size: 9px; opacity: 1; padding: 3px 4px; border-radius: 3px 5px 3px 4px; color: rgb(140, 145, 140); background: rgba(230, 232, 225, 0.32); transform: rotate(-0.6deg); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li:nth-child(2n) { transform: rotate(0.6deg); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li.current { color: var(--accent); background: color-mix(in srgb,var(--accent) 13%,#fafaf5); box-shadow: 0 2px 0 color-mix(in srgb,var(--accent) 23%,transparent); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li:not(:last-child)::after { content: none; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li.current > span:last-child { border: 0px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail .foam { font-size: 14px; } :is(#workshop, .blvd-tasks) .task-stage .stage-caption { display: block; width: max-content; max-width: 100%; margin: 9px 0px 2px auto; padding: 3px 6px; color: rgb(128, 134, 129); background: rgba(230, 232, 226, 0.376); box-shadow: rgba(89, 99, 92, 0.16) 0px 1px 2px inset; border-radius: 2px; font: 9px / 1.4 PixelGamer, Avenir, sans-serif; } :is(#workshop, .blvd-tasks) .task-actions { justify-content: space-between; gap: 15px; margin-top: 6px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-row { margin-left: auto; justify-content: flex-end; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-design) { padding-top: 23px; background-image: repeating-linear-gradient(90deg, #C13B2A 0px 44px, var(--pc-sep) 44px 46px, #D47A3A 46px 72px, var(--pc-sep) 72px 74px, #C49538 74px 112px, var(--pc-sep) 112px 114px, #559C40 114px 134px, var(--pc-sep) 134px 136px, #307878 136px 186px, var(--pc-sep) 186px 188px, #7A4380 188px 218px, var(--pc-sep) 218px 220px, #C13B2A 220px 240px, var(--pc-sep) 240px 242px, #D47A3A 242px 276px, var(--pc-sep) 276px 278px, #C49538 278px 294px, var(--pc-sep) 294px 296px, #559C40 296px 338px, var(--pc-sep) 338px 340px, #307878 340px 362px, var(--pc-sep) 362px 364px, #7A4380 364px 392px, var(--pc-sep) 392px 394px, #C13B2A 394px 426px, var(--pc-sep) 426px 428px, #D47A3A 428px 446px, var(--pc-sep) 446px 448px, #C49538 448px 494px, var(--pc-sep) 494px 496px, #559C40 496px 520px, var(--pc-sep) 520px 522px, #307878 522px 558px, var(--pc-sep) 558px 560px, #7A4380 560px 600px, var(--pc-sep) 600px 602px); background-size: 100% 10px; background-repeat: no-repeat; } @media (max-width: 800px) { :is(#workshop, .blvd-tasks) .tracker-task > summary { grid-template-columns: minmax(0px, 1fr); gap: 12px; padding: 16px 16px 14px; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-title, :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-state, :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-next, :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-meter, :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-stage { grid-area: auto / 1; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-state { justify-self: end; margin: 0px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail { justify-content: flex-end; gap: 8px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-row { gap: 10px 7px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { min-width: 48px; } :is(#workshop, .blvd-tasks) .task-next { padding-top: 0px !important; } } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .task-actions .task-note-row { display: grid; grid-template-columns: repeat(3, 50px); gap: 9px 7px; margin-left: auto; } :is(#workshop, .blvd-tasks) .task-actions { gap: 10px; align-items: center; } :is(#workshop, .blvd-tasks) .tracker-task .task-open { font-size: 10px; gap: 4px; } :is(#workshop, .blvd-tasks) .tracker-task .task-open > .plus-sticker { width: 24px; height: 24px; font-size: 22px; } } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-design) { --pc-sep: #FAFAF5; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.technical) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical { min-height: 0px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(104, 111, 108, 0.46) transparent; scrollbar-gutter: stable; padding-right: 4px; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical::-webkit-scrollbar { width: 7px; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical::-webkit-scrollbar-track { background: transparent; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical::-webkit-scrollbar-thumb { background: padding-box rgba(104, 111, 108, 0.46); border: 2px solid transparent; border-radius: 8px; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical:focus-visible { outline: rgb(154, 162, 155) dashed 1px; outline-offset: 3px; border-radius: 2px; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical { mask-image: linear-gradient(to bottom,rgba(0,0,0,var(--reading-top,1)) 0,#000 14px,#000 calc(100% - 14px),rgba(0,0,0,var(--reading-bottom,1)) 100%); } :is(#workshop, .blvd-tasks) .task-floating-note:has(.technical) { padding-right: 8px; } :is(#workshop, .blvd-tasks) .task-floating-note > .technical { padding-right: 14px; } :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-progress-group { grid-area: 1 / 2 / 4; align-self: start; min-width: 0px; } :is(#workshop, .blvd-tasks) .task-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; } :is(#workshop, .blvd-tasks) .task-count { font: 11px / 1.5 Avenir; color: rgb(101, 107, 104); white-space: nowrap; } :is(#workshop, .blvd-tasks) .task-progress-head .task-state { margin: 0px; max-width: 60%; } :is(#workshop, .blvd-tasks) .task-progress-head .status-window { font-size: 9px; } :is(#workshop, .blvd-tasks) .task-progress-group > .task-meter { margin: 2px 0px 1px; } :is(#workshop, .blvd-tasks) .task-progress-group > .task-meter > span { display: none; } :is(#workshop, .blvd-tasks) .task-progress-group .task-stage { margin: 0px; } :is(#workshop, .blvd-tasks) .task-progress-group .stage-caption { margin-top: 7px; } :is(#workshop, .blvd-tasks) .task-actions { border-top: 0px; position: relative; padding-top: 13px; margin-top: 2px; } :is(#workshop, .blvd-tasks) .task-divider { position: absolute; left: 0px; top: 0px; width: 100%; height: 5px; overflow: visible; pointer-events: none; filter: url("#tracker-pencil"); } :is(#workshop, .blvd-tasks) .task-divider path { fill: none; stroke: rgb(170, 179, 170); stroke-width: 1.25; stroke-linecap: round; opacity: 0.62; vector-effect: non-scaling-stroke; } @media (max-width: 800px) { :is(#workshop, .blvd-tasks) .tracker-task > summary > .task-progress-group { grid-area: auto / 1; } :is(#workshop, .blvd-tasks) .task-progress-head .task-state { max-width: 60%; } :is(#workshop, .blvd-tasks) .task-count { font-size: 10px; } :is(#workshop, .blvd-tasks) .task-progress-head { gap: 10px; } } :is(#workshop, .blvd-tasks) .task-count { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } :is(#workshop, .blvd-tasks) .task-counter { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-variant: tabular-nums; font-size-adjust: none; font-language-override: normal; font-kerning: auto; font-optical-sizing: auto; font-feature-settings: normal; font-variation-settings: normal; font-weight: normal; font-stretch: normal; font-size: 11px; line-height: 1.35; font-family: Gaposiss, monospace; color: rgb(108, 119, 113); background: rgba(227, 232, 225, 0.376); padding: 3px 6px 2px; border-radius: 2px; box-shadow: rgba(82, 96, 82, 0.173) 0px 1px 2px inset, rgba(255, 255, 255, 0.65) 0px -1px 0px inset; } :is(#workshop, .blvd-tasks) .counter-slash { color: rgb(161, 167, 161); } :is(#workshop, .blvd-tasks) .counter-caption { font: 10px / 1.4 Chalk; color: rgb(115, 125, 118); } :is(#workshop, .blvd-tasks) .tracker-task > summary { padding-bottom: 8px; } :is(#workshop, .blvd-tasks) .task-actions { padding-top: 10px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { padding-bottom: 1px; } :is(#workshop, .blvd-tasks) .note-label { white-space: nowrap; } :is(#workshop, .blvd-tasks) .note-label > span { font: inherit; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-results) { background: rgb(250, 251, 247); padding-top: 16px; } :is(#workshop, .blvd-tasks) .note-results { background: repeating-linear-gradient(transparent 0px, transparent 27px, rgba(90, 144, 192, 0.22) 27px, rgba(90, 144, 192, 0.22) 28px) 0px 7px; } :is(#workshop, .blvd-tasks) .note-results > .note-kicker, :is(#workshop, .blvd-tasks) .note-results > .result-context, :is(#workshop, .blvd-tasks) .note-results > .work-signature { margin: 7px 0px 0px; color: rgb(64, 101, 146); font: 11px / 28px Chalk !important; } :is(#workshop, .blvd-tasks) .note-results > .note-small { background: rgba(250, 251, 247, 0.91); padding: 4px 0px; } :is(#workshop, .blvd-tasks) .result-stack { display: grid; gap: 14px; padding: 8px 5px 8px 2px; } :is(#workshop, .blvd-tasks) .result-entry { --result-dark: color-mix(in srgb,var(--result-color) 73%,#3a3a3a); --result-light: color-mix(in srgb,var(--result-color) 52%,#fafaf5); --result-angle: 90deg; position: relative; isolation: isolate; border: 1px solid rgb(185, 189, 184); border-radius: 8px; background-color: rgb(250, 250, 245); background-image: repeating-linear-gradient(var(--result-angle),var(--result-light) 0 24px,#FAFAF5 24px 26px,var(--result-dark) 26px 70px,#FAFAF5 70px 72px,var(--result-color) 72px 94px,#FAFAF5 94px 96px,var(--result-light) 96px 134px,#FAFAF5 134px 136px,var(--result-dark) 136px 158px,#FAFAF5 158px 160px,var(--result-color) 160px 208px,#FAFAF5 208px 210px); background-repeat: no-repeat; background-size: 100% 10px; padding: 10px 0px 0px; box-shadow: rgba(69, 77, 73, 0.114) 1px 3px 6px; transform: rotate(var(--result-tilt)); overflow: hidden; } :is(#workshop, .blvd-tasks) .result-edge-left { --result-angle: 180deg; background-size: 10px 100%; padding: 0px 0px 0px 10px; } :is(#workshop, .blvd-tasks) .result-entry-paper { background: rgb(255, 254, 249); padding: 10px 12px 11px; border-radius: 5px; } :is(#workshop, .blvd-tasks) .result-date { font: 10px / 1.5 Avenir; color: rgb(116, 123, 117); display: block; } :is(#workshop, .blvd-tasks) .result-entry h4 { font: 11px / 1.6 Chalk; color: var(--result-color); margin: 6px 0px; } :is(#workshop, .blvd-tasks) .result-entry p { font: 13px / 1.65 Avenir; margin: 5px 0px 0px; color: rgb(83, 93, 86); } @media (max-width: 800px) { :is(#workshop, .blvd-tasks) .tracker-task > summary { padding-bottom: 8px; } } :is(#workshop, .blvd-tasks) .result-record > .result-date { font: 10px / 28px Chalk; color: rgb(64, 101, 146); margin: 0px 0px 5px; padding-left: 3px; background: transparent; } :is(#workshop, .blvd-tasks) .result-entry h4 { font: 800 13px / 1.5 Avenir; color: var(--result-color); margin: 0px 0px 5px; } :is(#workshop, .blvd-tasks) .result-stack { gap: 10px; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-notes) { background: rgb(247, 239, 208); padding: 12px 8px 10px; width: min(420px, -40px + 100vw); } :is(#workshop, .blvd-tasks) .note-notes { --pad-margin: 96px; background: linear-gradient(to right,transparent calc(var(--pad-margin) - 1px),#bc6b6866 calc(var(--pad-margin) - 1px),#bc6b6866 var(--pad-margin),transparent var(--pad-margin)),repeating-linear-gradient(to bottom,transparent 0,transparent 27px,#5a90c035 27px,#5a90c035 28px); padding: 0px 0px 14px; min-height: 196px; } :is(#workshop, .blvd-tasks) .note-notes > h3 { height: 56px; margin: 0px; padding-left: calc(var(--pad-margin) + 13px); font-size: 12px; align-items: center; } :is(#workshop, .blvd-tasks) .note-notes > h3 > .foam { font-size: 23px; } :is(#workshop, .blvd-tasks) .notepad-entry { display: grid; grid-template-columns: var(--pad-margin) minmax(0,1fr); margin: 0px; padding: 0px 0px 28px; } :is(#workshop, .blvd-tasks) .notepad-meta { padding: 0px 9px 0px 4px; font: 9px / 28px Chalk; color: rgb(128, 100, 53); min-width: 0px; } :is(#workshop, .blvd-tasks) .notepad-meta strong, :is(#workshop, .blvd-tasks) .notepad-meta time { display: block; font: inherit; } :is(#workshop, .blvd-tasks) .notepad-meta strong { font-weight: 400; } :is(#workshop, .blvd-tasks) .notepad-copy { padding: 0px 9px 0px 13px; font: 11px / 28px Chalk; color: var(--entry-ink,#525854); min-width: 0px; overflow-wrap: anywhere; } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .task-actions .task-note-row { grid-template-columns: repeat(4, 42px); gap: 9px 5px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { min-width: 42px; font-size: 9px; } :is(#workshop, .blvd-tasks) .note-notes { --pad-margin: 83px; } :is(#workshop, .blvd-tasks) .notepad-meta { font-size: 8px; padding-right: 7px; } :is(#workshop, .blvd-tasks) .notepad-copy { font-size: 10px; padding-left: 10px; } } :is(#workshop, .blvd-tasks) .note-notes > h3 { position: relative; padding-left: calc(var(--pad-margin) + 21px); } :is(#workshop, .blvd-tasks) .note-notes > h3 > .foam { position: absolute; left: var(--pad-margin); top: 50%; transform: translate(-50%, -50%); margin: 0px; } :is(#workshop, .blvd-tasks) .notepad-meta { font-size: 10px; text-transform: uppercase; } :is(#workshop, .blvd-tasks) .notepad-meta strong, :is(#workshop, .blvd-tasks) .notepad-meta time { line-height: 28px; } :is(#workshop, .blvd-tasks) .note-lead { color: rgb(64, 101, 146); } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .notepad-meta { font-size: 9px; } } :is(#workshop, .blvd-tasks) .note-specs strong.spec-target { color: rgb(181, 53, 53); } :is(#workshop, .blvd-tasks) .note-specs strong.spec-boundary { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .note-specs strong.spec-handoff { color: rgb(196, 149, 56); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+1) > strong { color: rgb(233, 136, 23); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+2) > strong { color: rgb(226, 201, 15); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+3) > strong { color: rgb(136, 195, 57); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+4) > strong { color: rgb(80, 157, 167); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+5) > strong { color: rgb(71, 136, 221); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n) > strong { color: rgb(64, 128, 176); } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-skills), :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-research) { padding-top: 23px; background-repeat: no-repeat; background-size: 100% 10px; background-image: repeating-linear-gradient(90deg,var(--frame-0) 0 25px,#fafaf5 25px 27px,var(--frame-1) 27px 60px,#fafaf5 60px 62px,var(--frame-2) 62px 87px,#fafaf5 87px 89px,var(--frame-3) 89px 128px,#fafaf5 128px 130px,var(--frame-4) 130px 153px,#fafaf5 153px 155px,var(--frame-5) 155px 189px,#fafaf5 189px 191px); } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-skills) { --frame-0: #E98817; --frame-1: #E2C90F; --frame-2: #88C339; --frame-3: #509DA7; --frame-4: #4788DD; --frame-5: #4080B0; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-research) { --frame-0: #876347; --frame-1: #b49576; --frame-2: #70513e; --frame-3: #c8b39a; --frame-4: #987656; --frame-5: #aa8b6a; } :is(#workshop, .blvd-tasks) .note-crosslink { font: inherit; color: var(--note-ink,#406592); background: transparent; border-width: 0px 0px 1px; border-style: none none dashed; border-color: currentcolor; border-image: none; padding: 3px 0px; cursor: pointer; } :is(#workshop, .blvd-tasks) .note-crosslink:focus-visible { outline: currentcolor dashed 2px; outline-offset: 3px; } @media (min-width: 801px) { :is(#workshop, .blvd-tasks) .task-actions .task-note-row { gap: 10px 12px; } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { min-width: 46px; } } @media (max-width: 650px) { :is(#workshop, .blvd-tasks) .task-actions .task-note-row { grid-template-columns: repeat(3, 55px); } :is(#workshop, .blvd-tasks) .task-actions .task-note-trigger { min-width: 0px; } :is(#workshop, .blvd-tasks) .task-note-trigger .note-label { text-align: center; } } :is(#workshop, .blvd-tasks) .note-design .design-heading-1 { color: rgb(193, 59, 42); } :is(#workshop, .blvd-tasks) .note-design .design-heading-2 { color: rgb(212, 122, 58); } :is(#workshop, .blvd-tasks) .note-design .design-heading-3 { color: rgb(196, 149, 56); } :is(#workshop, .blvd-tasks) .note-design p a:nth-of-type(1) { color: rgb(85, 156, 64); } :is(#workshop, .blvd-tasks) .note-design p a:nth-of-type(2) { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .note-design p a:nth-of-type(3) { color: rgb(122, 67, 128); } :is(#workshop, .blvd-tasks) .task-note-trigger[data-task-note$="-design"][aria-expanded="true"] > .note-label { border-bottom-color: rgb(146, 149, 143); } :is(#workshop, .blvd-tasks) .note-skills .skill-group h4 { font: 12px / 1.6 Chalk; margin: 18px 0px 10px; color: rgb(233, 136, 23); } :is(#workshop, .blvd-tasks) .note-skills .skill-group:nth-of-type(2) h4 { color: rgb(136, 195, 57); } :is(#workshop, .blvd-tasks) .note-skills .skill-group:nth-of-type(3) h4 { color: rgb(71, 136, 221); } :is(#workshop, .blvd-tasks) .skill-group h4 .foam { font-size: 18px; margin-right: 5px; } :is(#workshop, .blvd-tasks) .note-skills .skill-group:nth-of-type(1) h4 { color: rgb(135, 99, 71); } :is(#workshop, .blvd-tasks) .note-skills .skill-group:nth-of-type(3) h4 { color: rgb(119, 123, 124); } :is(#workshop, .blvd-tasks) .note-entry-form { padding: 14px 10px 10px var(--pad-margin); font: 11px / 1.6 Chalk; } :is(#workshop, .blvd-tasks) .note-entry-form textarea { display: block; box-sizing: border-box; width: 100%; margin: 8px 0px; padding: 7px; border: 1px solid rgb(171, 168, 148); border-radius: 4px; background: rgba(255, 255, 255, 0.6); color: rgb(82, 88, 84); font: 12px / 1.8 Chalk; } :is(#workshop, .blvd-tasks) .note-entry-form button { font: 11px / 1.5 PixelGamer; background: rgb(229, 233, 229); color: rgb(88, 102, 95); border: 1px solid rgb(160, 170, 162); border-radius: 3px; padding: 6px 10px; cursor: pointer; } :is(#workshop, .blvd-tasks) .note-entry-form p { font: 10px / 1.6 Avenir; } :is(#workshop, .blvd-tasks) .task-stage .stage-caption { position: relative; padding-right: 24px; min-height: 13px; --signal: #969c98; --signal-glow: transparent; } :is(#workshop, .blvd-tasks) .stage-caption::after { content: ""; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(99, 109, 103, 0.35); background-color: var(--signal,#969c98); background-image: radial-gradient(at 35% 22%, rgba(255, 255, 255, 0.88) 0px, rgba(255, 255, 255, 0.333) 18%, transparent 48%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(90deg, rgba(25, 37, 28, 0.03) 0px, rgba(25, 37, 28, 0.03) 1px, transparent 1px, transparent 2px); box-shadow: 0 1px 0 #ffffffc0,inset 0 1px 2px #18352360,inset 0 -1px 1px #ffffff38,0 0 5px var(--signal-glow,transparent); transition: background-color 0.45s, box-shadow 0.45s; pointer-events: none; } :is(#workshop, .blvd-tasks) .stage-caption::after { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="started"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="progress"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="returned"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="reviewed"] { --signal: #60b989; --signal-glow: #60b98945; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="queued"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="paused"] { --signal: #d0b454; --signal-glow: #d0b45438; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="failed"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="stopped"] { --signal: #cd7774; --signal-glow: #cd777440; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="held"] { --signal: #6c9fc8; --signal-glow: #6c9fc83b; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="documented"] { --signal: #a48cbe; --signal-glow: #a48cbe38; } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .stage-caption::after { transition: none; } } :is(#workshop, .blvd-tasks) .stage-caption::after { box-shadow: 0 1px 0 #fff,inset 0 1px 2px #18352350,inset 0 -1px 1px #ffffff55,0 0 5px var(--signal),0 0 10px var(--signal-glow); } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="unknown"]::after { box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(24, 53, 35, 0.314) 0px 1px 2px inset; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="complete"]::after { animation: 3.6s ease-in-out 0s infinite alternate none running completion-lens; } @keyframes completion-lens { 0% { background-color: rgb(101, 197, 142); box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(24, 53, 35, 0.25) 0px 1px 2px inset, rgba(101, 197, 142, 0.667) 0px 0px 6px, rgba(101, 197, 142, 0.333) 0px 0px 12px; } 100% { background-color: rgb(239, 218, 152); box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(24, 53, 35, 0.25) 0px 1px 2px inset, rgba(239, 218, 152, 0.733) 0px 0px 6px, rgba(239, 218, 152, 0.44) 0px 0px 12px; } } :is(#workshop, .blvd-tasks) .task-stage .stage-trail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li { display: flex; flex-direction: column; justify-content: end; gap: 4px; background: none; box-shadow: none; padding: 2px; transform: none; min-height: 38px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li.current { background: none; box-shadow: none; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail .foam { font-size: 19px; opacity: 0; transform: scale(0.7); transition: opacity 0.25s, transform 0.3s; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li.current .foam { opacity: 1; transform: scale(1); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li[data-stage="Complete"].current { color: rgb(50, 129, 90); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li[data-stage="Complete"] .foam { color: rgb(50, 129, 90); } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .stage-caption[data-activity="complete"]::after { animation: auto ease 0s 1 normal none running none; background-color: rgb(101, 197, 142); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail .foam { transition: none; } } :is(#workshop, .blvd-tasks) .stage-distinction { font: 8px / 1.5 Chalk; color: rgb(119, 127, 120); margin: 3px 0px 4px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail { display: flex; justify-content: space-between; gap: 5px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li { flex-direction: row; min-height: 0px; padding: 3px 4px; gap: 4px; background: rgba(230, 232, 225, 0.32); transform: rotate(-0.6deg); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li.current { background: color-mix(in srgb,var(--accent) 13%,#fafaf5); box-shadow: 0 2px 0 color-mix(in srgb,var(--accent) 23%,transparent); } :is(#workshop, .blvd-tasks) .task-stage .stage-trail .foam { opacity: 0.55; transform: none; font-size: 14px; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li.current .foam { opacity: 1; transform: none; } :is(#workshop, .blvd-tasks) .task-stage .stage-trail li[data-stage="Complete"].current { background: rgb(228, 239, 229); color: rgb(50, 129, 90); } :is(#workshop, .blvd-tasks) .formula-method { margin-top: 14px; } :is(#workshop, .blvd-tasks) .formula-method > summary { font: 11px / 1.6 Chalk; color: rgb(128, 100, 53); cursor: pointer; } :is(#workshop, .blvd-tasks) .formula-postcard { position: relative; margin: 16px 0px 20px; padding: 24px 14px 13px; background-color: rgb(250, 250, 245); border-radius: 3px; box-shadow: rgba(105, 86, 43, 0.125) 0px 2px 5px; transform: rotate(-0.35deg); font: 12px / 1.55 Avenir, sans-serif; color: rgb(83, 89, 83); background-image: repeating-linear-gradient(90deg, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 0px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 44px, rgb(250, 250, 245) 44px, rgb(250, 250, 245) 46px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 46px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 72px, rgb(250, 250, 245) 72px, rgb(250, 250, 245) 74px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 74px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 112px, rgb(250, 250, 245) 112px, rgb(250, 250, 245) 114px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 114px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 134px, rgb(250, 250, 245) 134px, rgb(250, 250, 245) 136px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 136px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 186px, rgb(250, 250, 245) 186px, rgb(250, 250, 245) 188px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 188px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 218px, rgb(250, 250, 245) 218px, rgb(250, 250, 245) 220px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 220px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 240px, rgb(250, 250, 245) 240px, rgb(250, 250, 245) 242px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 242px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 276px, rgb(250, 250, 245) 276px, rgb(250, 250, 245) 278px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 278px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 294px, rgb(250, 250, 245) 294px, rgb(250, 250, 245) 296px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 296px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 338px, rgb(250, 250, 245) 338px, rgb(250, 250, 245) 340px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 340px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 362px, rgb(250, 250, 245) 362px, rgb(250, 250, 245) 364px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 364px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 392px, rgb(250, 250, 245) 392px, rgb(250, 250, 245) 394px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 394px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 426px, rgb(250, 250, 245) 426px, rgb(250, 250, 245) 428px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 428px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 446px, rgb(250, 250, 245) 446px, rgb(250, 250, 245) 448px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 448px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 494px, rgb(250, 250, 245) 494px, rgb(250, 250, 245) 496px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 496px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 520px, rgb(250, 250, 245) 520px, rgb(250, 250, 245) 522px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 522px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 558px, rgb(250, 250, 245) 558px, rgb(250, 250, 245) 560px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 560px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 600px, rgb(250, 250, 245) 600px, rgb(250, 250, 245) 602px); background-size: 100% 10px; background-repeat: no-repeat; } :is(#workshop, .blvd-tasks) .formula-postcard h4 { font: 700 15px / 1.4 Avenir, sans-serif; color: rgb(83, 89, 83); margin: 0px 0px 4px; } :is(#workshop, .blvd-tasks) .formula-postcard .formula-intro, :is(#workshop, .blvd-tasks) .formula-postcard .formula-foot { font: 11px / 1.5 Avenir, sans-serif; color: rgb(112, 118, 111); margin: 4px 0px 12px; } :is(#workshop, .blvd-tasks) .formula-foundation-row { margin: 10px 0px; } :is(#workshop, .blvd-tasks) .formula-foundation-row > strong { display: inline-block; padding: 2px 7px; border-radius: 3px; background: color-mix(in srgb,var(--formula-ink) 22%,#fafaf5); color: color-mix(in srgb,var(--formula-ink) 75%,#444); font: 700 11px / 1.5 Avenir, sans-serif; } :is(#workshop, .blvd-tasks) .formula-foundation-row > p { font: 12px / 1.55 Avenir, sans-serif; margin: 4px 0px; color: rgb(83, 89, 83); } :is(#workshop, .blvd-tasks) .formula-application { font: 12px / 1.7 Chalk; color: var(--formula-ink); margin: 14px 0px; } :is(#workshop, .blvd-tasks) .formula-application > strong { color: var(--formula-ink); } :is(#workshop, .blvd-tasks) .formula-use-title { font: 13px / 1.5 Chalk; color: rgb(128, 100, 53); } :is(#workshop, .blvd-tasks) .formula-postcard { padding-bottom: 25px; } :is(#workshop, .blvd-tasks) .formula-postcard::after { content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 10px; border-radius: 0px 0px 3px 3px; pointer-events: none; background-image: repeating-linear-gradient(90deg, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 0px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 44px, rgb(250, 250, 245) 44px, rgb(250, 250, 245) 46px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 46px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 72px, rgb(250, 250, 245) 72px, rgb(250, 250, 245) 74px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 74px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 112px, rgb(250, 250, 245) 112px, rgb(250, 250, 245) 114px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 114px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 134px, rgb(250, 250, 245) 134px, rgb(250, 250, 245) 136px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 136px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 186px, rgb(250, 250, 245) 186px, rgb(250, 250, 245) 188px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 188px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 218px, rgb(250, 250, 245) 218px, rgb(250, 250, 245) 220px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 220px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 240px, rgb(250, 250, 245) 240px, rgb(250, 250, 245) 242px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 242px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 276px, rgb(250, 250, 245) 276px, rgb(250, 250, 245) 278px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 278px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 294px, rgb(250, 250, 245) 294px, rgb(250, 250, 245) 296px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 296px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 338px, rgb(250, 250, 245) 338px, rgb(250, 250, 245) 340px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 340px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 362px, rgb(250, 250, 245) 362px, rgb(250, 250, 245) 364px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 364px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 392px, rgb(250, 250, 245) 392px, rgb(250, 250, 245) 394px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 394px, color-mix(in srgb, rgb(193, 59, 42) 43%, rgb(250, 250, 245)) 426px, rgb(250, 250, 245) 426px, rgb(250, 250, 245) 428px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 428px, color-mix(in srgb, rgb(212, 122, 58) 43%, rgb(250, 250, 245)) 446px, rgb(250, 250, 245) 446px, rgb(250, 250, 245) 448px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 448px, color-mix(in srgb, rgb(196, 149, 56) 43%, rgb(250, 250, 245)) 494px, rgb(250, 250, 245) 494px, rgb(250, 250, 245) 496px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 496px, color-mix(in srgb, rgb(85, 156, 64) 43%, rgb(250, 250, 245)) 520px, rgb(250, 250, 245) 520px, rgb(250, 250, 245) 522px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 522px, color-mix(in srgb, rgb(48, 120, 120) 43%, rgb(250, 250, 245)) 558px, rgb(250, 250, 245) 558px, rgb(250, 250, 245) 560px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 560px, color-mix(in srgb, rgb(122, 67, 128) 43%, rgb(250, 250, 245)) 600px, rgb(250, 250, 245) 600px, rgb(250, 250, 245) 602px); background-size: 100% 10px; background-repeat: no-repeat; } :is(#workshop, .blvd-tasks) .formula-method > summary { display: flex; align-items: center; gap: 9px; padding: 9px 0px; list-style: none; cursor: pointer; } :is(#workshop, .blvd-tasks) .formula-method > summary::-webkit-details-marker { display: none; } :is(#workshop, .blvd-tasks) .formula-toggle-arrow { width: 17px; height: 21px; flex: 0 0 17px; overflow: visible; transition: transform 0.2s; } :is(#workshop, .blvd-tasks) .formula-toggle-arrow path { fill: none; stroke: rgb(125, 130, 123); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: url("#tracker-pencil"); } :is(#workshop, .blvd-tasks) .formula-method[open] > summary .formula-toggle-arrow { transform: rotate(90deg); } :is(#workshop, .blvd-tasks) .formula-method > summary:hover .formula-toggle-arrow { stroke: rgb(100, 108, 101); } :is(#workshop, .blvd-tasks) .formula-toggle-copy { display: flex; flex-direction: column; gap: 5px; } :is(#workshop, .blvd-tasks) .formula-brand { font: 14px / 1.65 Chalk; } :is(#workshop, .blvd-tasks) .formula-brand-rest { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .formula-toggle-copy > small { font: 9px / 1.5 Chalk; color: rgb(124, 121, 106); } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .formula-toggle-arrow { transition: none; } } :is(#workshop, .blvd-tasks) .task-stage .stage-caption { background: rgb(220, 225, 217); box-shadow: rgba(55, 72, 60, 0.27) 0px 2px 3px inset, rgba(55, 72, 60, 0.133) 1px 0px 2px inset, rgba(255, 255, 255, 0.6) 0px 1px 0px; border-top: 1px solid rgba(127, 141, 128, 0.314); } :is(#workshop, .blvd-tasks) .stage-caption::after { width: 11px; height: 11px; border-color: rgba(76, 96, 89, 0.44); box-shadow: 0 1px 0 #fff,inset 0 1px 2px #18352350,inset 0 -1px 1px #ffffff80,0 0 4px 1px var(--signal),0 0 11px 3px var(--signal-glow); } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="unknown"]::after { box-shadow: rgba(255, 255, 255, 0.69) 0px 1px 0px, rgba(24, 53, 35, 0.376) 0px 2px 3px inset; background-color: rgb(141, 150, 142); } @keyframes completion-lens { 0%, 15% { background-color: rgb(40, 219, 123); box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(23, 60, 41, 0.333) 0px 1px 2px inset, rgb(53, 230, 138) 0px 0px 4px 1px, rgba(53, 230, 138, 0.6) 0px 0px 10px 3px, rgba(53, 230, 138, 0.208) 0px 0px 18px 5px; } 85%, 100% { background-color: rgb(255, 228, 154); box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(114, 97, 33, 0.333) 0px 1px 2px inset, rgb(255, 228, 154) 0px 0px 4px 1px, rgba(255, 210, 96, 0.667) 0px 0px 10px 3px, rgba(255, 210, 96, 0.25) 0px 0px 18px 5px; } } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="started"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="progress"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="returned"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="reviewed"] { --signal: #70a653; --signal-glow: #70a653aa; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="queued"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="paused"] { --signal: #e2c365; --signal-glow: #e2c365aa; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="failed"], :is(#workshop, .blvd-tasks) .stage-caption[data-activity="stopped"] { --signal: #ce726a; --signal-glow: #ce726aaa; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="held"] { --signal: #6b9fc8; --signal-glow: #6b9fc8aa; } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="documented"] { --signal: #a28abb; --signal-glow: #a28abbaa; } :is(#workshop, .blvd-tasks) .stage-caption::after { box-shadow: 0 1px 0 #fff,inset 0 1px 2px #18352350,inset 0 -1px 1px #ffffff80,0 0 4px 1px var(--signal),0 0 10px 3px var(--signal-glow),0 0 17px 4px var(--signal-glow); } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="unknown"]::after { box-shadow: rgba(255, 255, 255, 0.69) 0px 1px 0px, rgba(24, 53, 35, 0.376) 0px 2px 3px inset; } @keyframes completion-lens { 0%, 15% { background-color: rgb(112, 166, 83); box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(23, 60, 41, 0.333) 0px 1px 2px inset, rgb(112, 166, 83) 0px 0px 4px 1px, rgba(112, 166, 83, 0.667) 0px 0px 10px 3px, rgba(112, 166, 83, 0.333) 0px 0px 18px 5px; } 85%, 100% { background-color: rgb(255, 228, 154); box-shadow: rgb(255, 255, 255) 0px 1px 0px, rgba(114, 97, 33, 0.333) 0px 1px 2px inset, rgb(255, 228, 154) 0px 0px 4px 1px, rgba(255, 210, 96, 0.667) 0px 0px 10px 3px, rgba(255, 210, 96, 0.333) 0px 0px 18px 5px; } } :is(#workshop, .blvd-tasks) .formula-postcard h4 .formula-brand { font: 700 15px / 1.65 Avenir, sans-serif; } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .stage-caption[data-activity="complete"]::after { background-color: rgb(112, 166, 83); } } :is(#workshop, .blvd-tasks) .tracker-task .task-symbol > .foam { transform: rotate(var(--task-tilt,-4deg)); } :is(#workshop, .blvd-tasks) .tracker-task .task-note-trigger > .foam { transform: rotate(var(--sticker-tilt,-4deg)); transition: transform 0.18s; } :is(#workshop, .blvd-tasks) .tracker-task .task-note-trigger:hover > .foam, :is(#workshop, .blvd-tasks) .tracker-task .task-note-trigger:focus-visible > .foam { transform: translateY(-2px) rotate(calc(var(--sticker-tilt,-4deg) + 5deg)) scale(1.12); } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) .tracker-task .task-note-trigger > .foam { transition: none; } } :is(#workshop, .blvd-tasks) :is(button, a, summary) > .foam, :is(#workshop, .blvd-tasks) :is(button, a, summary) .task-symbol > .foam { transition: transform 0.18s; } :is(#workshop, .blvd-tasks) :is(button, a, summary):hover > .foam, :is(#workshop, .blvd-tasks) :is(button, a, summary):focus-visible > .foam, :is(#workshop, .blvd-tasks) :is(button, a, summary):hover .task-symbol > .foam { transform: rotate(calc(var(--sticker-tilt, -2deg) + 4deg)) scale(1.08); } :is(#workshop, .blvd-tasks) .task-floating-note:popover-open { animation: 0.18s ease-out 0s 1 normal none running shared-note-arrive; } @keyframes shared-note-arrive { 0% { opacity: 0; scale: 0.94; } 100% { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: reduce) { :is(#workshop, .blvd-tasks) :is(button, a, summary) > .foam, :is(#workshop, .blvd-tasks) :is(button, a, summary) .task-symbol > .foam { transition: none; } :is(#workshop, .blvd-tasks) .task-floating-note:popover-open { animation: auto ease 0s 1 normal none running none; } } :is(#workshop, .blvd-tasks) .tape { display: inline-block; font: 13px / 1.4 EmbossT1, monospace; color: rgb(255, 255, 255); background: linear-gradient(rgb(101, 131, 164), rgb(64, 101, 146)); padding: 5px 9px; box-shadow: rgba(85, 85, 85, 0.333) 1px 3px 4px; transform: rotate(-1deg); } :is(#workshop, .blvd-tasks) .tape { font-size: 10px; } :is(#workshop, .blvd-tasks) .tape { font-family: EmbossT1; letter-spacing: 0.04em; text-shadow: rgba(22, 54, 87, 0.667) 0px -1px 0px, rgba(255, 255, 255, 0.467) 0px 1px 0px; box-shadow: rgba(85, 85, 85, 0.267) 1px 3px 4px; } :is(#workshop, .blvd-tasks) .tape, :is(#workshop, .blvd-tasks) .bubble-chip { --tape-color: #406592; --tape-tilt: -1deg; --tape-cuts: polygon(1% 0,99% 0,100% 100%,0 100%); position: relative; isolation: isolate; background: none; box-shadow: none; border: 0px; border-radius: 0px; clip-path: none; transform: rotate(var(--tape-tilt)); text-shadow: rgba(23, 33, 42, 0.8) 0px -1px 0px, rgba(255, 255, 255, 0.46) 0px 1px 0px; white-space: normal; } :is(#workshop, .blvd-tasks) .tape::before, :is(#workshop, .blvd-tasks) .bubble-chip::before { content: ""; position: absolute; inset: 0px; z-index: -1; clip-path: var(--tape-cuts); background: linear-gradient(var(--curl-angle,180deg),#ffffff22 0%,transparent 40%,#00000020 100%),linear-gradient(90deg,#0000001c 0%,transparent 12%,#ffffff13 48%,transparent 86%,#0000001c 100%),var(--tape-color); border-radius: var(--curl-radius,0 0 40% 25% / 0 0 5% 4%); box-shadow: rgba(255, 255, 255, 0.145) 0px 1px 0px inset, rgba(0, 0, 0, 0.16) 0px -1px 0px inset; } :is(#workshop, .blvd-tasks) .tape::after, :is(#workshop, .blvd-tasks) .bubble-chip::after { content: ""; position: absolute; z-index: -2; left: 2%; right: 2%; top: 45%; bottom: var(--curl-depth,-3px); border-radius: var(--shadow-radius,15% 15% 48% 42%); background: rgba(57, 56, 50, 0.333); filter: blur(2.3px); transform: rotate(var(--shadow-tilt,.3deg)); pointer-events: none; } :is(#workshop, .blvd-tasks) .tape, :is(#workshop, .blvd-tasks) .bubble-chip { text-shadow: rgba(23, 33, 42, 0.5) 0px -0.45px 0.3px, rgba(255, 255, 255, 0.5) 0px 0.65px 0.4px; letter-spacing: 0.025em; } :is(#workshop, .blvd-tasks) .tape::before, :is(#workshop, .blvd-tasks) .bubble-chip::before { background: linear-gradient(var(--curl-angle,180deg),#ffffff14,transparent 42%,#00000012),var(--tape-color); box-shadow: rgba(255, 255, 255, 0.125) 0px 0.7px 0.5px inset, rgba(0, 0, 0, 0.125) 0px -0.7px 0.5px inset; } :is(#workshop, .blvd-tasks) .tape::after, :is(#workshop, .blvd-tasks) .bubble-chip::after { background: rgba(57, 56, 50, 0.21); filter: blur(1.8px); bottom: var(--curl-depth,-2px); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl="ends"]::after { inset: 45% 2% -4px; background: rgba(57, 56, 50, 0.314); border-radius: 0px 0px 48% 48%; clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 80% 75%, 60% 48%, 40% 48%, 20% 75%, 0px 100%); filter: blur(1.4px); transform: rotate(0.25deg); } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl="middle"]::after { inset: 44% 2% -4px; background: rgba(57, 56, 50, 0.27); border-radius: 0px 0px 50% 50%; clip-path: none; filter: blur(1.8px); transform: rotate(-0.2deg); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"]::before { background: linear-gradient(90deg,#ffffff24,transparent 25%,#0000000d 50%,transparent 75%,#ffffff24),var(--tape-color); } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::before { background: linear-gradient(90deg,#00000013,transparent 20%,#ffffff20 50%,transparent 80%,#00000013),var(--tape-color); } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::before { clip-path: polygon(1.4% 0px, 98.6% 0px, 99.6% 25%, 100% 50%, 99.6% 75%, 98.6% 100%, 1.4% 100%, 0.4% 75%, 0px 50%, 0.4% 25%); border-radius: 0px; background: linear-gradient(180deg,#ffffff27 0%,#ffffff0b 28%,transparent 48%,#00000025 100%),var(--tape-color) !important; } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl="ends"]::after { inset: 1px 1.5% -6px; clip-path: none; border-radius: 0px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 2H99L99 39Q73 30 50 31Q27 30 1 39Z' fill='%23343332' fill-opacity='.32'/%3E%3C/svg%3E") center center / 100% 100% no-repeat transparent; filter: blur(1.6px); transform: none; } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::after, :is(#workshop, .blvd-tasks) .chapter-tape[data-curl="middle"]::after { inset: 1px 1.5% -6px; clip-path: none; border-radius: 0px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M1 2H99L99 31Q74 40 50 40Q26 40 1 31Z' fill='%23343332' fill-opacity='.32'/%3E%3C/svg%3E") center center / 100% 100% no-repeat transparent; filter: blur(1.6px); transform: none; } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"]::before { filter: drop-shadow(rgba(52, 51, 50, 0.333) 0px 0.7px 0.4px); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"] { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.44) 0%, rgba(52, 51, 50, 0.157) 48%, transparent 76%) center bottom / 64% 3px no-repeat !important; } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"] { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.396) 0%, rgba(52, 51, 50, 0.145) 48%, transparent 78%) left bottom / 15% 3px no-repeat, radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.396) 0%, rgba(52, 51, 50, 0.145) 48%, transparent 78%) right bottom / 15% 3px no-repeat !important; } :is(#workshop, .blvd-tasks) .tape[data-curl] { background: none !important; } :is(#workshop, .blvd-tasks) .tape[data-curl]::before { filter: none; } :is(#workshop, .blvd-tasks) .tape-contact { position: absolute; bottom: -1.5px; height: 3px; pointer-events: none; z-index: -1; filter: blur(0.5px); } :is(#workshop, .blvd-tasks) .tape[data-curl="ends"] > .tape-contact { left: 22%; right: 22%; background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, transparent 75%); } :is(#workshop, .blvd-tasks) .tape[data-curl="middle"] > .tape-contact { left: 1%; right: 1%; background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, transparent 75%) left center / 17% 100% no-repeat, radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, transparent 75%) right center / 17% 100% no-repeat; } :is(#workshop, .blvd-tasks) .tape[data-curl] > .tape-contact { z-index: -2; } :is(#workshop, .blvd-tasks) .tape[data-curl]::after { z-index: -3; } :is(#workshop, .blvd-tasks) .task-source { display: none; } :is(#workshop, .blvd-tasks) .note-specs h4:nth-of-type(3n+1) { color: rgb(181, 53, 53); } :is(#workshop, .blvd-tasks) .note-specs h4:nth-of-type(3n+2) { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .note-specs h4:nth-of-type(3n) { color: rgb(150, 123, 41); } :is(#workshop, .blvd-tasks) .note-design h4:nth-of-type(3n+1) { color: rgb(181, 53, 53); } :is(#workshop, .blvd-tasks) .note-design h4:nth-of-type(3n+2) { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .note-design h4:nth-of-type(3n) { color: rgb(83, 124, 80); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+1) { color: rgb(169, 103, 23); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+2) { color: rgb(150, 123, 41); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+3) { color: rgb(83, 124, 80); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+4) { color: rgb(48, 120, 120); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n+5) { color: rgb(64, 101, 146); } :is(#workshop, .blvd-tasks) .note-skills li:nth-child(6n) { color: rgb(64, 128, 176); } :is(#workshop, .blvd-tasks) .note-research h3, :is(#workshop, .blvd-tasks) .note-research h4 { color: rgb(135, 99, 71); } :is(#workshop, .blvd-tasks) .note-sources h3, :is(#workshop, .blvd-tasks) .note-sources h4 { color: rgb(90, 88, 85); } :is(#workshop, .blvd-tasks) .prepared-brief-detail { border-top: 1px solid rgb(214, 212, 202); margin-top: 16px; padding-top: 6px; } :is(#workshop, .blvd-tasks) .prepared-brief-detail h4 { font: 12px / 1.7 Chalk; margin: 14px 0px 6px; } :is(#workshop, .blvd-tasks) { --expression-paper-texture: repeating-linear-gradient(0deg,rgba(58,58,58,.016),rgba(58,58,58,.016) 1px,transparent 1px,transparent 3.5px),repeating-linear-gradient(90deg,rgba(58,58,58,.016),rgba(58,58,58,.016) 1px,transparent 1px,transparent 3.5px); --expression-postcard-shadow: 0 0 0 1px rgba(146,154,160,.19),0 2px 5px rgba(59,56,48,.09); } :is(#workshop, .blvd-tasks) .bf-card, :is(#workshop, .blvd-tasks) .task-floating-note:has(.technical:not(.note-results)), :is(#workshop, .blvd-tasks) .formula-postcard { box-shadow: var(--expression-postcard-shadow); } :is(#workshop, .blvd-tasks) .bf-card > .bf-inner { background-image: var(--expression-paper-texture); } :is(#workshop, .blvd-tasks) .task-floating-note:has(.technical:not(.note-results))::before, :is(#workshop, .blvd-tasks) .formula-postcard::before { content: ""; position: absolute; inset: 0px; border-radius: inherit; background-image: var(--expression-paper-texture); pointer-events: none; z-index: -1; } :is(#workshop, .blvd-tasks) .formula-postcard { isolation: isolate; } :is(#workshop, .blvd-tasks) .tracker-task.bf-card { box-shadow: var(--expression-postcard-shadow); } :is(#workshop, .blvd-tasks) .tracker-task > summary, :is(#workshop, .blvd-tasks) .tracker-task > .task-body { background-image: var(--expression-paper-texture); } :is(#workshop, .blvd-tasks) .bf-card:not(.tracker-task) { rotate: -0.18deg; } :is(#workshop, .blvd-tasks) .topic:nth-child(2n) > .bf-card:not(.tracker-task) { rotate: 0.18deg; } :is(#workshop, .blvd-tasks) .result-entry { box-shadow: var(--expression-postcard-shadow); } :is(#workshop, .blvd-tasks) .result-entry-paper { background-image: var(--expression-paper-texture); } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-results)::before { content: none; background-image: none; } :is(#workshop, .blvd-tasks) .task-floating-note:has(.note-sources) { --edge-gold: #bfc1bd; --edge-red: #666965; --edge-teal: #90938f; } :is(#workshop, .blvd-tasks) .task-note-trigger[aria-expanded="true"] > span:last-child { border-bottom: 0px; position: relative; } :is(#workshop, .blvd-tasks) .task-note-trigger[aria-expanded="true"] > span:last-child::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -5px; height: 4px; background: var(--selection-ink,currentColor); clip-path: polygon(0px 42%, 17% 28%, 35% 39%, 56% 13%, 78% 28%, 100% 12%, 99% 69%, 76% 83%, 55% 68%, 34% 90%, 15% 76%, 0px 94%); transform: rotate(-0.8deg); opacity: 0.85; } :is(#workshop, .blvd-tasks) .task-note-trigger[data-task-note$="-specs"], :is(#workshop, .blvd-tasks) .task-note-trigger[data-task-note$="-design"], :is(#workshop, .blvd-tasks) .task-note-trigger[data-task-note$="-skills"] { --selection-ink: #92958f; } :is(#workshop, .blvd-tasks) .tracker-task .task-actions { justify-content: flex-start; flex-wrap: nowrap; gap: 16px; overflow-x: auto; padding-bottom: 6px; } :is(#workshop, .blvd-tasks) .tracker-task .task-actions .task-open { font: 10px / 1.5 Chalk; flex: 0 0 auto; white-space: nowrap; } :is(#workshop, .blvd-tasks) .tracker-task .task-actions .task-note-row { margin-left: auto; justify-content: flex-end; flex-wrap: nowrap; gap: 9px; flex: 0 0 auto; } :is(#workshop, .blvd-tasks) .tracker-task .task-actions .task-note-trigger { flex: 0 0 auto; min-width: 38px; } :is(#workshop, .blvd-tasks) .tracker-task .task-actions .task-note-trigger > .foam { font-size: 25px; } :is(#workshop, .blvd-tasks) .tracker-task .task-actions .task-note-row { position: relative; top: 3px; } :is(#workshop, .blvd-tasks) .task-body .task-reading-heading { font: 15px / 1.6 Chalk, sans-serif; color: var(--accent,#307878); margin: 24px 0px 10px; } :is(#workshop, .blvd-tasks) .task-body .task-purpose { color: rgb(77, 80, 79); line-height: 1.85; margin: 0px 0px 18px; } :is(#workshop, .blvd-tasks) .task-body .task-reading-hint { color: rgb(116, 120, 116); font-size: 12px; line-height: 1.7; margin: 0px 0px 16px; } :is(#workshop, .blvd-tasks) .task-body .check-step { margin: 12px 0px; line-height: 1.8; } :is(#workshop, .blvd-tasks) .task-body .check-copy { color: rgb(85, 91, 88); } :is(#workshop, .blvd-tasks) .task-body .purpose-key { color: var(--accent,#307878); font-weight: 650; } :is(#workshop, .blvd-tasks) .task-body .step-action { color: var(--accent,#307878); font-weight: 700; } :is(#workshop, .blvd-tasks) .task-body .step-cue { font-size: 15px; margin-right: 4px; } :is(#workshop, .blvd-tasks) .task-body .task-facts b { color: var(--accent,#406592); } :is(#workshop, .blvd-tasks) .task-body .task-facts span { color: rgb(92, 98, 95); line-height: 1.75; } :is(#workshop, .blvd-tasks) .task-body > small { display: block; color: rgb(119, 123, 119); font-style: italic; line-height: 1.65; margin-top: 18px; } :is(#workshop, .blvd-tasks) .task-title { min-width: 0px; } :is(#workshop, .blvd-tasks) .task-title > .task-label-stack { min-width: 0px; flex: 1 1 0%; } :is(#workshop, .blvd-tasks) .task-label-stack { display: flex; flex-direction: column; align-items: flex-start; position: relative; isolation: isolate; max-width: 100%; gap: 0px; } :is(#workshop, .blvd-tasks) .task-label-stack .task-label-line { display: block; width: max-content; max-width: none; white-space: nowrap; font: 13px / 1.45 EmbossT1, monospace; letter-spacing: 0.025em; padding: 4px 9px; --tape-color: var(--accent,#406592); margin: 0px; transform: rotate(var(--tape-tilt)); color: rgb(255, 255, 255) !important; } :is(#workshop, .blvd-tasks) .task-label-line + .task-label-line { margin-top: -2px; } :is(#workshop, .blvd-tasks) .task-reading-heading { display: flex; align-items: center; gap: 9px; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-label-stack { flex: 0 1 auto; min-width: 0px; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-label-line { font-size: 11px; --tape-color: color-mix(in srgb,var(--accent,#406592) 68%,#656967); } :is(#workshop, .blvd-tasks) .label-measure { pointer-events: none; position: absolute !important; visibility: hidden !important; transform: none !important; } :is(#workshop, .blvd-tasks) .task-heading-emoji, :is(#workshop, .blvd-tasks) .step-cue { filter: drop-shadow(rgba(64, 61, 57, 0.23) 0px 1.5px 1px); } :is(#workshop, .blvd-tasks) .task-body .check-step { margin: 7px 0px; line-height: 1.65; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-label-stack { flex: 1 1 0px; min-width: 0px; width: 0px; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-heading-emoji { flex: 0 0 auto; } :is(#workshop, .blvd-tasks) .task-reading-heading { gap: 0px; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-heading-emoji { position: relative; z-index: 3; margin-right: -12px; transform: translateY(-3px) rotate(-4deg); } :is(#workshop, .blvd-tasks) .task-reading-heading .task-label-line:first-child { padding-left: 22px; } :is(#workshop, .blvd-tasks) .task-title .task-symbol { position: relative; z-index: 3; margin-right: -12px; } :is(#workshop, .blvd-tasks) .task-title > .task-label-stack .task-label-line:first-child { padding-left: 22px; } :is(#workshop, .blvd-tasks) .task-title { column-gap: 0px; } :is(#workshop, .blvd-tasks) .task-title .task-symbol { margin-right: -6px; z-index: 50; } :is(#workshop, .blvd-tasks) .task-title > .task-label-stack { z-index: 0; } :is(#workshop, .blvd-tasks) .task-title .step-number { position: relative; top: 12px; margin-bottom: 5px; white-space: nowrap; } :is(#workshop, .blvd-tasks) .task-date-line { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 8px 0px 5px; color: rgb(119, 124, 120); font: 10px / 1.5 Chalkduster, cursive; } :is(#workshop, .blvd-tasks) .task-date-line > span { white-space: nowrap; } :is(#workshop, .blvd-tasks) .task-date-line { font-family: Avenir, sans-serif; font-size: 10px; } :is(#workshop, .blvd-tasks) .task-date-line b { font-weight: 500; } :is(#workshop, .blvd-tasks) .task-date-line em { font: 10px / 1.5 Chalkduster, cursive; margin-left: 3px; } :is(#workshop, .blvd-tasks) .task-date-line { grid-area: 2 / 1; align-self: start; margin: 3px 0px; } :is(#workshop, .blvd-tasks) .task-date-line + .task-next { grid-area: 3 / 1; } :is(#workshop, .blvd-tasks) .task-date-line + .task-next { grid-row: 3 / 4 !important; } :is(#workshop, .blvd-tasks) .task-date-line { margin-top: -2px; transform: translateY(-3px); } :is(#workshop, .blvd-tasks) .task-date-line b { font: 9px / 1.5 Avenir, sans-serif; letter-spacing: 0.045em; text-transform: uppercase; color: rgb(119, 124, 120); } :is(#workshop, .blvd-tasks) .task-date-line em { font: 9px / 1.5 Chalkduster, cursive; color: var(--accent,#406592); } :is(#workshop, .blvd-tasks) .task-heading-group { grid-area: 1 / 1; min-width: 0px; align-self: start; display: block; } :is(#workshop, .blvd-tasks) .task-heading-group .task-title { display: flex; min-width: 0px; } :is(#workshop, .blvd-tasks) .task-heading-group .task-date-line { margin: 6px 0px 0px; transform: none; } :is(#workshop, .blvd-tasks) .task-heading-group + .task-next { grid-column: 1; grid-row: 2 / 4 !important; } :is(#workshop, .blvd-tasks) .task-title .task-symbol { align-self: flex-start; margin-right: -12px; transform: translate(var(--label-icon-offset,0px),-4px); } :is(#workshop, .blvd-tasks) .task-title > .task-label-stack .task-label-line:first-child, :is(#workshop, .blvd-tasks) .task-reading-heading .task-label-line:first-child { padding-left: 14px; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-heading-emoji { align-self: flex-start; transform: translate(var(--label-icon-offset,0px),-3px) rotate(-4deg); } :is(#workshop, .blvd-tasks) .task-title.has-stacked-label .task-symbol { transform: translate(var(--label-icon-offset,0px),-10px); } :is(#workshop, .blvd-tasks) .task-reading-heading.has-stacked-label .task-heading-emoji { transform: translate(var(--label-icon-offset,0px),-8px) rotate(-4deg); } :is(#workshop, .blvd-tasks) .task-title.has-stacked-label .task-symbol { transform: translate(0px, -7px); } :is(#workshop, .blvd-tasks) .task-reading-heading.has-stacked-label .task-heading-emoji { transform: translate(0px, -6px) rotate(-4deg); } :is(#workshop, .blvd-tasks) .task-heading-group .task-title { position: relative; left: -12px; } :is(#workshop, .blvd-tasks) .task-title.has-stacked-label .task-symbol { transform: translate(var(--label-icon-offset,0px),-7px); } :is(#workshop, .blvd-tasks) .task-reading-heading.has-stacked-label .task-heading-emoji { transform: translate(var(--label-icon-offset,0px),-6px) rotate(-4deg); } :is(#workshop, .blvd-tasks) .task-heading-group .task-title.has-stacked-label { left: -24px; } :is(#workshop, .blvd-tasks) .task-title .foam, :is(#workshop, .blvd-tasks) .task-title:hover .foam, :is(#workshop, .blvd-tasks) .task-reading-heading .foam, :is(#workshop, .blvd-tasks) .task-reading-heading:hover .foam { cursor: default; animation: auto ease 0s 1 normal none running none !important; transition: none !important; } :is(#workshop, .blvd-tasks) .task-title .task-symbol > .foam, :is(#workshop, .blvd-tasks) .task-title:hover .task-symbol > .foam { transform: none !important; } :is(#workshop, .blvd-tasks) .task-reading-heading .task-heading-emoji.foam { transform: translate(var(--label-icon-offset,0px),-3px) rotate(-4deg) !important; } :is(#workshop, .blvd-tasks) .task-reading-heading.has-stacked-label .task-heading-emoji.foam { transform: translate(var(--label-icon-offset,0px),-6px) rotate(-4deg) !important; } :is(#workshop, .blvd-tasks) .task-signal-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; flex-wrap: wrap; } :is(#workshop, .blvd-tasks) .task-stage .task-signal-row .stage-caption { margin: 0px 0px 0px auto; } :is(#workshop, .blvd-tasks) .priority-caption { display: inline-flex; align-items: center; gap: 5px; width: max-content; margin: 0px; padding: 3px 6px; color: rgb(101, 107, 104); background: rgba(230, 232, 226, 0.376); box-shadow: rgba(89, 99, 92, 0.16) 0px 1px 2px inset; border-radius: 2px; font: 9px / 1.4 PixelGamer, Avenir, sans-serif; white-space: nowrap; } :is(#workshop, .blvd-tasks) .priority-caption[data-priority="urgent"] { --priority-light: #ce726a; } :is(#workshop, .blvd-tasks) .priority-caption[data-priority="high"] { --priority-light: #d69a4c; } :is(#workshop, .blvd-tasks) .priority-caption[data-priority="normal"] { --priority-light: #6b9fc8; } :is(#workshop, .blvd-tasks) .priority-caption[data-priority="low"] { --priority-light: #9e92b2; } :is(#workshop, .blvd-tasks) .priority-caption[data-priority="unset"] { --priority-light: #969c98; } :is(#workshop, .blvd-tasks) .priority-lens { display: inline-block; width: 9px; height: 9px; flex: 0 0 9px; border: 1px solid rgba(76, 96, 89, 0.44); border-radius: 2px; background: radial-gradient(ellipse at 35% 22%,#ffffffe0,transparent 55%),var(--priority-light,#969c98); box-shadow: inset 0 1px 2px #18352350,0 0 3px var(--priority-light,#969c98); } :is(#workshop, .blvd-tasks) .task-reading-heading .task-heading-emoji.foam { font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 23px; line-height: 1; text-shadow: none; filter: url("#studio-foam-smooth"); } :is(#workshop, .blvd-tasks) .priority-lens { content: ""; width: 10px; height: 10px; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(99, 109, 103, 0.35); background-color: var(--priority-light,#969c98); background-image: radial-gradient(at 35% 22%, rgba(255, 255, 255, 0.88) 0px, rgba(255, 255, 255, 0.333) 18%, transparent 48%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 2px), repeating-linear-gradient(90deg, rgba(25, 37, 28, 0.03) 0px, rgba(25, 37, 28, 0.03) 1px, transparent 1px, transparent 2px); box-shadow: 0 1px 0 #ffffffc0,inset 0 1px 2px #18352360,inset 0 -1px 1px #ffffff38,0 0 5px var(--priority-glow,transparent); transition: background-color 0.45s, box-shadow 0.45s; pointer-events: none; } :is(#workshop, .blvd-tasks) .priority-lens { flex: 0 0 10px; --priority-glow: color-mix(in srgb,var(--priority-light) 28%,transparent); box-shadow: 0 1px 0 #fff,inset 0 1px 2px #18352350,inset 0 -1px 1px #ffffff55,0 0 5px var(--priority-light),0 0 10px var(--priority-glow); } :is(#workshop, .blvd-tasks) .stage-caption[data-activity="attention"] { --signal: #6b9fc8; --signal-glow: #6b9fc8aa; }