/* workshop.css ยท VENDORED from https://jc.deesil.chatgpt.site/_next/static/css/index.CrEG4GG-.css (captured 18 Sept 2026 through the CSSOM; media wrappers kept). Every selector is scoped under #workshop so the JC tokens and generic rules never restyle the street. Only the LAYOUT families are kept (D-021): categories and the shelf, filters, folds, the request postcard, the inbox, person windows, post-its, the record sheet, play-packet and material-system tokens. The card look comes from kit/tasks.css (the Universes Connections tab). The JC fonts map onto this site's own files: Chalk = Chalkduster, Tape = EmbossT1, PixelGamer and PacketPixel with Gaposiss digits (the same watermark patch), Avenir. Do not hand-edit: regenerate with cowork/brain-buddies/builderhood-blvd/sources/visual-baseline/jc-site/build-workshop-css.mjs. */ @font-face { font-family: Chalk; src: local("Chalkduster"), url("fonts/Chalkduster.ttf"); font-display: swap; } @font-face { font-family: Tape; src: url("fonts/embosst1.ttf"); font-display: swap; } @font-face { font-family: PacketDigits; src: url("fonts/gaposiss.ttf"); font-display: swap; } @font-face { font-family: PacketPixel; src: url("fonts/PixelGamer-Regular.otf"); font-display: swap; } @font-face { font-family: PacketPixel; src: url("fonts/gaposiss.ttf"); unicode-range: U+30-39, U+2E, U+2C; font-display: swap; } /* JC base rule "h1, h2, h3 { font-family: Chalk, serif; font-weight: 400; line-height: 1.5 }", scoped to the workshop chrome (the cards keep the kit's own headings) */ #workshop .packet-heading h2, #workshop .packet-card-heading h3, #workshop .bf-inner > h3 { margin: 0 0 .55rem; font-family: Chalk, serif; font-weight: 400; line-height: 1.5; } #workshop.material-system .card-link .foam { margin-right: 9px; font-size: 22px; } #workshop .record-sheet.material-system { border-left: 9px solid var(--tone); --accent: var(--tone); background-color: rgb(250, 250, 245); background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.016) 0px, rgba(58, 58, 58, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px); display: block; padding: 34px 28px !important; } #workshop .record-sheet.material-system [data-slot="sheet-title"] { max-width: calc(100% - 20px); padding: 10px 5px 8px 0px; font-size: 17px; } #workshop .record-sheet.material-system [data-slot="sheet-description"] { color: rgb(113, 110, 98); border-bottom: 1px dashed rgb(187, 188, 176); padding-bottom: 15px; } #workshop .record-sheet.material-system > .actions { margin: 18px 0px; } #workshop .record-sheet.material-system .facts { background: rgb(243, 241, 231); border: 1px solid rgb(206, 203, 187); border-radius: 5px; gap: 0px; margin: 20px 0px; padding: 10px 16px; } #workshop .record-sheet.material-system .facts p { border-bottom: 1px dashed rgb(208, 206, 192); padding: 12px 8px; font-size: 14px; } #workshop .record-sheet.material-system .facts b { color: var(--tone); margin-bottom: 7px; font: 11px / 1.7 Chalk; } #workshop .record-sheet.material-system .facts .foam { margin-right: 7px; font-size: 19px; } #workshop .record-sheet.material-system > section { background: rgb(255, 253, 244); border: 1px solid rgb(204, 202, 188); border-radius: 5px; margin: 22px 0px; padding: 18px 20px; } #workshop .record-sheet.material-system > section:has(.note) { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 30px, rgba(115, 154, 183, 0.11) 30px, rgba(115, 154, 183, 0.11) 31px), rgb(255, 247, 217); border-left: 3px solid rgba(191, 120, 117, 0.45); } #workshop .record-sheet.material-system h3 { margin: 6px 0px 20px; } #workshop .record-sheet.material-system .note { background: 0px 0px; border-bottom: 1px dashed rgb(182, 183, 169); border-left: 0px; padding: 12px 0px; } #workshop .record-sheet.material-system .note p { line-height: 1.9; } #workshop .record-sheet.material-system .note small { color: rgb(128, 100, 53); font: 10px / 1.8 Chalk; } #workshop .record-sheet.material-system > details { border-top: 1px dashed rgb(189, 191, 174); margin-top: 25px; padding-top: 12px; } #workshop .record-sheet.material-system > details .foam { margin-right: 8px; font-size: 22px; } #workshop.material-system .calendar-paper { background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.016) 0px, rgba(58, 58, 58, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px); border-top: 8px solid rgb(64, 101, 146); position: relative; box-shadow: rgb(238, 237, 227) 2px 4px, rgb(199, 201, 190) 2px 4px 0px 1px; } #workshop.material-system .calendar-paper::before { content: ""; background: rgba(231, 215, 167, 0.48); width: 61px; height: 20px; position: absolute; top: -17px; left: 26px; transform: rotate(-6deg); box-shadow: rgba(80, 72, 45, 0.086) 0px 1px 1px; } #workshop.material-system .view-switch button { align-items: center; gap: 8px; display: flex; box-shadow: rgba(59, 68, 67, 0.2) 0px 2px; } #workshop.material-system .view-switch .foam { margin: 0px; font-size: 22px; } #workshop.material-system .house-calendar .rdp-weekday:nth-child(3n+1) { color: rgb(122, 67, 128); } #workshop.material-system .house-calendar .rdp-weekday:nth-child(3n+2) { color: rgb(48, 120, 120); } #workshop.material-system .house-calendar .rdp-weekday:nth-child(3n) { color: rgb(168, 122, 40); } #workshop.material-system .house-calendar .rdp-month_caption { color: rgb(64, 101, 146); font-size: 17px; } #workshop.material-system .selected-day h4 { font: 12px / 1.8 Chalk; } #workshop.material-system .selected-day h4 .foam { margin-right: 10px; font-size: 23px; } #workshop.play-packet .task-review-note { border-left: 3px solid var(--accent); background: rgb(246, 240, 222); margin-top: 15px; padding: 11px 13px; font-size: 12px; } @media (max-width: 650px) { #workshop .record-sheet.material-system { border-left-width: 6px; padding: 28px 16px !important; } #workshop .record-sheet.material-system > section { padding: 17px 13px; } #workshop .record-sheet.material-system .facts { padding: 4px 5px; } #workshop.material-system .view-switch button { gap: 5px; padding: 8px 10px; font-size: 12px; } #workshop.material-system .view-switch .foam { font-size: 19px; } } #workshop.material-system .masthead { grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 8px 24px; display: grid; position: relative; } #workshop.material-system .masthead > .account { grid-column: 1; align-items: flex-start; gap: 6px; margin-top: 0px; } #workshop.material-system .masthead > .account > .tape { display: none; } #workshop .refresh-postit { box-sizing: border-box; color: rgb(108, 98, 68); overflow-wrap: anywhere; max-width: calc(-32px + 100vw); transform: rotate(1.2deg); background: linear-gradient(125deg, rgb(255, 244, 189), rgb(244, 230, 168)) !important; border: 0px !important; border-radius: 0px !important; padding: 18px 20px !important; font: 11px / 1.9 Chalk, cursive !important; box-shadow: rgba(65, 68, 63, 0.145) 2px 6px 14px !important; } #workshop .refresh-postit::before { content: ""; background: rgba(237, 227, 187, 0.5); width: 70px; height: 18px; position: absolute; top: -8px; left: 36%; transform: rotate(-4deg); box-shadow: rgba(90, 80, 51, 0.07) 0px 1px 2px; } #workshop .refresh-postit strong { color: rgb(128, 100, 53); align-items: center; gap: 10px; margin-bottom: 12px; font: 12px / 1.7 Chalk, cursive; display: flex; } #workshop .refresh-postit .foam { filter: url("#studio-foam-smooth"); text-shadow: none; margin: 0px; font-size: 25px; } #workshop .refresh-postit p { margin: 0px 0px 9px; font: 11px / 1.9 Chalk, cursive; } #workshop .refresh-postit small { font: 10px / 1.8 Chalk, cursive; display: block; } #workshop .refresh-postit.refresh-popover { z-index: 90; width: 290px; max-height: calc(-36px + 100dvh); animation: 0.2s ease-out 0s 1 normal none running refresh-arrive; overflow: auto; } #workshop.play-packet .backlog-note p { max-width: 900px; } @keyframes refresh-arrive { 0% { opacity: 0; translate: 0px -5px; } 100% { opacity: 1; translate: 0px; } } @media (max-width: 1100px) { #workshop.material-system .masthead { grid-template-columns: minmax(0px, 1fr) auto; } #workshop.material-system .masthead > .account { grid-row: 2; } } @media (max-width: 650px) { #workshop.material-system .masthead { gap: 4px 10px; } #workshop.material-system .masthead h1 { gap: 2px; font-size: 25px; } #workshop.material-system .masthead h1 > .foam { display: none; } #workshop.material-system .masthead .magic-word { margin-left: 3px; } #workshop.material-system .masthead p { font-size: 11px; } #workshop.material-system .masthead .eyebrow { font-size: 8px; } } @media (prefers-reduced-motion: reduce) { #workshop .refresh-postit.refresh-popover { animation: auto ease 0s 1 normal none running none; } } #workshop.material-system .paper.home-next { border-left: 8px solid rgb(48, 120, 120); } #workshop.material-system .paper.home-visits { border-top: 8px solid rgb(168, 122, 40); } #workshop.material-system .paper.home-decisions { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(154, 130, 172, 0.075) 31px, rgba(154, 130, 172, 0.075) 32px), rgb(246, 240, 248); border-left: 8px solid rgb(122, 67, 128); } #workshop.material-system .paper.home-progress { background-color: rgb(240, 244, 232); border-top: 8px solid rgb(102, 131, 90); } #workshop.material-system .home-progress .taskrow { border-bottom: 1px dashed rgb(183, 197, 168); } #workshop.material-system .heart p, #workshop.material-system[data-view="Heart"] #content > .paper > p { padding: 8px 12px; font: 14px / 2.1 Chalk, cursive; } #workshop.material-system[data-view="Heart"] #content > .paper { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(105, 150, 186, 0.133) 31px, rgba(105, 150, 186, 0.133) 32px), rgb(255, 247, 219); border-left: 3px solid rgba(189, 115, 115, 0.43); max-width: 850px; margin: 10px auto 30px; } #workshop.material-system[data-view="Inventory"] .collection-card { background: repeating-linear-gradient(90deg, rgba(113, 145, 173, 0.03) 0px, rgba(113, 145, 173, 0.03) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 20px), repeating-linear-gradient(0deg, rgba(113, 145, 173, 0.03) 0px, rgba(113, 145, 173, 0.03) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 20px), rgb(245, 248, 248); border-width: 12px 1px 1px; border-style: solid; border-color: rgb(64, 101, 146) rgb(184, 197, 206) rgb(184, 197, 206); border-image: none; } #workshop.material-system[data-view="Inventory"] .collection-card h3::before { content: "๐Ÿ“ฆ "; filter: url("#studio-foam-smooth"); } #workshop.material-system[data-view="Resale"] .collection-card { clip-path: polygon(0px 0px, calc(100% - 16px) 0px, 100% 16px, 100% 100%, 0px 100%); background: rgb(255, 249, 245); border-width: 0px 1px 1px 9px; border-style: none solid solid; border-color: currentcolor rgb(204, 185, 203) rgb(204, 185, 203) rgb(122, 67, 128); border-image: none; padding-top: 25px; } #workshop.material-system[data-view="Resale"] .collection-card h3::before { content: "๐Ÿ‘• "; filter: url("#studio-foam-smooth"); } #workshop.material-system[data-view="Decisions"] .collection-card { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(181, 104, 104, 0.075) 31px, rgba(181, 104, 104, 0.075) 32px), rgb(255, 249, 238); border-width: 0px 1px 1px 7px; border-style: none solid solid; border-color: currentcolor rgb(203, 188, 188) rgb(203, 188, 188) rgb(181, 53, 53); border-image: none; } #workshop.material-system[data-view="Decisions"] .collection-card h3::before { content: "๐Ÿ’ญ "; filter: url("#studio-foam-smooth"); } #workshop.material-system[data-view="Settings"] #content > .grid > .paper { border-top: 7px solid rgb(64, 101, 146); } #workshop.material-system[data-view="History"] #content { background-image: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 35px, rgba(141, 139, 119, 0.125) 35px, rgba(141, 139, 119, 0.125) 36px); padding-bottom: 20px; } #workshop.material-system .progress-photos { flex-wrap: wrap; gap: 12px; margin-top: 15px; display: flex; } #workshop.material-system .progress-photos:empty { display: none; } #workshop.material-system .progress-photos a { background: rgb(255, 254, 250); width: calc(50% - 6px); padding: 6px 6px 10px; text-decoration: none; transform: rotate(-2deg); box-shadow: rgba(82, 73, 52, 0.165) 1px 3px 5px; } #workshop.material-system .progress-photos a:nth-child(2n) { transform: rotate(2deg); } #workshop.material-system .progress-photos img { object-fit: cover; width: 100%; height: 110px; } #workshop.material-system .progress-photos span { overflow-wrap: anywhere; color: rgb(108, 107, 84); padding-top: 6px; font: 9px / 1.7 Chalk; display: block; } #workshop.material-system[data-view="History"] .day > summary { overflow-wrap: anywhere; word-break: break-word; } #workshop.material-system[data-view="History"] .day > summary > .foam { margin-right: 9px; font-size: 23px; } #workshop.play-packet .bf-card { background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.043), rgba(58, 58, 58, 0.043) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px), repeating-linear-gradient(90deg, rgba(58, 58, 58, 0.043), rgba(58, 58, 58, 0.043) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px); border: 1.5px solid rgb(85, 85, 85); border-radius: 12px; padding: 13px; position: relative; overflow: hidden; box-shadow: rgba(58, 58, 58, 0.18) 0px 4px 10px; } #workshop.play-packet .bf-card .bf-inner { background-color: var(--card); z-index: 1; background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.016), rgba(58, 58, 58, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px), repeating-linear-gradient(90deg, rgba(58, 58, 58, 0.016), rgba(58, 58, 58, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px); border-radius: 8px; padding: 1rem; position: relative; } #workshop.play-packet .bf-card.cc-wrap .bf-inner { background-color: rgba(250, 250, 245, 0.92); background-image: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.01), rgba(58, 58, 58, 0.01) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px), repeating-linear-gradient(90deg, rgba(58, 58, 58, 0.01), rgba(58, 58, 58, 0.01) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px); border-radius: 6px; padding: 0.8rem; } #workshop.play-packet .bf-card .conv-card { box-shadow: none; background: 0px 0px; border-radius: 0px; margin: 0px; padding: 0.4rem 0px; } #workshop.play-packet .bf-std { background-color: var(--teal); } #workshop.play-packet .bf-card::after { content: ""; z-index: 0; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 2px, rgba(30, 30, 30, 0.016) 2px, rgba(30, 30, 30, 0.016) 3px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0) 3.5px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 2px, rgba(30, 30, 30, 0.016) 2px, rgba(30, 30, 30, 0.016) 3px, rgba(0, 0, 0, 0) 3px, rgba(0, 0, 0, 0) 3.5px); border-radius: 12px; position: absolute; inset: 0px; } #workshop.play-packet .bf-card .edge { z-index: 0; position: absolute; overflow: hidden; } #workshop.play-packet .bf-card .edge-t { background: repeating-linear-gradient(90deg,var(--red) 0 22px,var(--card) 22px 24px,var(--teal) 24px 72px,var(--card) 72px 74px,var(--gold) 74px 96px,var(--card) 96px 98px,var(--red) 98px 140px,var(--card) 140px 142px,var(--teal) 142px 164px,var(--card) 164px 166px,var(--gold) 166px 220px,var(--card) 220px 222px,var(--red) 222px 246px,var(--card) 246px 248px,var(--teal) 248px 284px,var(--card) 284px 286px); height: 13px; top: 0px; left: 18px; right: 22px; } #workshop.play-packet .bf-card .edge-b { background: repeating-linear-gradient(90deg,var(--teal) 0 36px,var(--card) 36px 38px,var(--gold) 38px 60px,var(--card) 60px 62px,var(--red) 62px 114px,var(--card) 114px 116px,var(--teal) 116px 138px,var(--card) 138px 140px,var(--gold) 140px 182px,var(--card) 182px 184px,var(--red) 184px 210px,var(--card) 210px 212px,var(--gold) 212px 248px,var(--card) 248px 250px); height: 13px; bottom: 0px; left: 22px; right: 18px; } #workshop.play-packet .bf-card .edge-l { 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); width: 13px; top: 20px; bottom: 18px; left: 0px; } #workshop.play-packet .bf-card .edge-r { background: repeating-linear-gradient(180deg,var(--teal) 0 28px,var(--card) 28px 30px,var(--gold) 30px 76px,var(--card) 76px 78px,var(--red) 78px 100px,var(--card) 100px 102px,var(--teal) 102px 142px,var(--card) 142px 144px,var(--gold) 144px 168px,var(--card) 168px 170px,var(--red) 170px 218px,var(--card) 218px 220px); width: 13px; top: 18px; bottom: 22px; right: 0px; } #workshop.play-packet .bf-card.bf-tb .edge-l, #workshop.play-packet .bf-card.bf-tb .edge-r { display: none; } #workshop.play-packet { --teal: #307878; --red: #b53535; --gold: #c49538; --card: #fafaf5; --ink: #3a3a3a; --packet-paper: repeating-linear-gradient(0deg,#3a3a3a04 0 1px,transparent 1px 3.5px),repeating-linear-gradient(90deg,#3a3a3a04 0 1px,transparent 1px 3.5px); border-top: 2px dashed rgb(170, 168, 159); scroll-margin-top: 20px; } #workshop .packet-toggle { color: rgb(48, 120, 120); align-items: center; gap: 15px; padding: 15px 6px; list-style: none; display: flex; } #workshop .packet-toggle > span:nth-child(2) { flex: 1 1 0%; } #workshop .packet-toggle strong { font: 17px / 1.6 Chalk; display: block; } #workshop .packet-toggle small { display: block; } #workshop .packet-toggle::after { content: "+"; font: 26px Avenir; } #workshop.play-packet[open] > .packet-toggle::after { content: "โˆ’"; } #workshop .packet-content { padding-top: 25px; } #workshop .packet-heading { text-align: center; max-width: 750px; margin: 8px auto 25px; } #workshop .packet-heading h2 { color: rgb(48, 120, 120); margin-top: 19px; font-size: 23px; } #workshop .packet-subtitle { font-size: 17px; } #workshop .packet-subtitle > span { color: rgb(122, 67, 128); font-weight: 900; } #workshop.play-packet .bf-card { border-color: rgb(170, 168, 162); border-radius: 11px; padding: 10px; box-shadow: rgba(146, 154, 160, 0.19) 0px 0px 0px 1px, rgba(59, 56, 48, 0.09) 0px 2px 5px; } #workshop.play-packet .bf-card .bf-inner { background-image: var(--packet-paper); border-radius: 6px; padding: 23px; } #workshop.play-packet .edge-t, #workshop.play-packet .edge-b { height: 10px; } #workshop.play-packet .edge-l, #workshop.play-packet .edge-r { width: 10px; } #workshop.play-packet .bf-card.left { padding: 0px 0px 0px 10px; } #workshop.play-packet .left > .edge:not(.edge-l) { display: none; } #workshop.play-packet .left > .edge-l { top: 0px; bottom: 0px; } #workshop.play-packet .bf-card.bands { padding: 10px 0px; } #workshop.play-packet .bands > .edge-l, #workshop.play-packet .bands > .edge-r { display: none; } #workshop.play-packet .bands > .edge-t, #workshop.play-packet .bands > .edge-b { left: 0px; right: 0px; } #workshop .packet-card-heading { align-items: center; gap: 14px; margin-bottom: 17px; display: flex; } #workshop .packet-card-heading > div { flex: 1 1 0%; min-width: 0px; } #workshop .packet-card-heading h3 { color: rgb(122, 67, 128); font-size: 19px; } #workshop .packet-kicker { letter-spacing: 0.11em; color: rgb(64, 101, 146); font-size: 11px; font-weight: 900; display: block; } #workshop .request-stamp { text-align: center; color: rgb(48, 120, 120); border: 2px dashed rgb(160, 181, 184); padding: 9px; font: 12px / 1.8 Chalk; transform: rotate(5deg); } #workshop.play-packet .request-fields { border: 0px; margin: 12px 0px; padding: 0px; } #workshop.play-packet .field > span { color: rgb(64, 101, 146); } #workshop.play-packet .field input, #workshop.play-packet .field textarea { background-color: rgb(255, 254, 249); background-image: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(109, 158, 191, 0.125) 31px, rgba(109, 158, 191, 0.125) 32px); border-color: rgb(180, 188, 183); padding: 3px 12px; line-height: 32px; } #workshop.play-packet .field textarea { min-height: 102px; } #workshop.play-packet .button { text-transform: uppercase; border-width: 2.5px; border-radius: 3px; font: 400 15px / 1.35 PacketPixel, monospace; box-shadow: rgba(0, 0, 0, 0.22) 0px 4px; } #workshop.play-packet .button.ghost { color: rgb(64, 101, 146); background: rgb(243, 241, 233); } #workshop.play-packet .button .foam { font-size: 25px; } #workshop .request-submit { justify-content: space-between; align-items: center; gap: 15px; margin: 20px 0px; display: flex; } #workshop .request-submit small { display: block; } #workshop .request-submit strong { color: rgb(122, 67, 128); } #workshop .request-footnote { color: rgb(104, 100, 94); border-top: 1px dashed rgb(196, 197, 188); margin: 18px 0px 0px; padding-top: 15px; font-size: 13px; } #workshop .request-saved { color: rgb(48, 120, 120); font-weight: 700; } #workshop .packet-fold { border-top: 1px solid rgb(203, 212, 206); margin: 25px 0px; padding-top: 8px; } #workshop .packet-fold > summary { color: rgb(82, 107, 102); align-items: center; gap: 14px; padding: 12px 4px; font-size: 18px; font-weight: 900; list-style: none; display: flex; } #workshop .packet-fold > summary .foam { font-size: 27px; } #workshop .fold-cue { white-space: nowrap; color: rgb(112, 121, 112); margin-left: auto; font: 11px Chalk; } #workshop .foundation-grid { grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0px; display: grid; } #workshop .foundation-grid h3 { color: rgb(64, 101, 146); align-items: center; gap: 5px; font-size: 15px; display: flex; } #workshop .foundation-grid p { margin-bottom: 0px; } #workshop .buddy-duties > div { border-top: 1px solid rgb(213, 207, 194); grid-template-columns: 190px 1fr; gap: 20px; padding: 12px 0px; display: grid; } #workshop .buddy-duties dt { color: rgb(48, 120, 120); font-weight: 900; } #workshop .buddy-duties dd { margin: 0px; } #workshop .backlog-note { background: rgba(245, 236, 208, 0.5); border-left: 4px solid rgb(196, 149, 56); margin: 10px 0px 20px; padding: 15px 19px; } #workshop .backlog-note strong { color: rgb(132, 90, 34); } #workshop .backlog-note p { margin: 5px 0px; } #workshop .packet-endnote { max-width: 850px; margin-top: 22px; display: block; } #workshop .inbox-toolbar { max-width: 230px; } #workshop .packet-empty { background: rgba(237, 241, 231, 0.5); align-items: center; gap: 18px; padding: 18px; display: flex; } #workshop .packet-empty p { margin: 0px; } #workshop .packet-empty small { display: block; } #workshop .saved-request { border-top: 1px dashed rgb(195, 196, 186); margin: 15px 0px; padding-top: 7px; } #workshop .saved-request > summary { align-items: center; gap: 12px; padding: 12px 0px; list-style: none; display: flex; } #workshop .saved-request > summary > span:nth-child(2) { flex: 1 1 0%; min-width: 0px; } #workshop .saved-request > summary strong { color: var(--accent); overflow-wrap: anywhere; } #workshop .saved-request > summary small { display: block; } #workshop .saved-request .bf-card { margin: 10px 0px; } #workshop .request-copy, #workshop .request-response { white-space: pre-wrap; overflow-wrap: anywhere; } #workshop .request-response { background: rgb(245, 236, 208); padding: 12px; } #workshop .request-discussion { border-top: 1px dashed rgb(187, 187, 187); margin-top: 18px; padding-top: 15px; } #workshop .request-discussion h4 { color: rgb(122, 67, 128); font-weight: 900; } @media (max-width: 800px) { #workshop .foundation-grid { grid-template-columns: 1fr; } #workshop .request-submit { flex-direction: column; align-items: flex-start; } #workshop .buddy-duties > div { grid-template-columns: 1fr; gap: 5px; } #workshop .fold-cue { font: 10px Avenir; } #workshop .packet-fold > summary { flex-wrap: wrap; font-size: 16px; } #workshop .packet-card-heading h3 { font-size: 16px; } #workshop .request-stamp { display: none; } #workshop.play-packet .bf-card .bf-inner { padding: 17px; } #workshop .packet-heading h2 { font-size: 19px; } #workshop .packet-toggle strong { font-size: 14px; } #workshop .packet-toggle small { font-size: 12px; } #workshop .saved-request > summary { flex-wrap: wrap; } #workshop.play-packet .form-grid { grid-template-columns: 1fr; } } #workshop .note-close { color: rgb(98, 95, 88); background: 0px 0px; border: 0px; min-width: 36px; min-height: 36px; font: 26px Avenir; } #workshop .tape { color: rgb(255, 255, 255); letter-spacing: 0.04em; text-shadow: rgba(23, 33, 42, 0.8) 0px -1px, rgba(255, 255, 255, 0.46) 0px 1px; --tape-color: #406592; --tape-tilt: -1deg; --tape-cuts: polygon(1% 0,99% 0,100% 100%,0 100%); isolation: isolate; box-shadow: none; clip-path: none; transform: rotate(var(--tape-tilt)); white-space: normal; background: 0px 0px; border: 0px; border-radius: 0px; padding: 5px 9px; font: 10px / 1.4 Tape; display: inline-block; position: relative; } #workshop .tape::before { content: ""; z-index: -1; clip-path: var(--tape-cuts); background: linear-gradient(var(--curl-angle,180deg),#fff2 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%); position: absolute; inset: 0px; box-shadow: rgba(255, 255, 255, 0.145) 0px 1px inset, rgba(0, 0, 0, 0.16) 0px -1px inset; } #workshop .tape::after { content: ""; z-index: -2; top: 45%; left: 2%; right: 2%; bottom: var(--curl-depth,-3px); border-radius: var(--shadow-radius,15% 15% 48% 42%); filter: blur(2.3px); transform: rotate(var(--shadow-tilt,.3deg)); pointer-events: none; background: rgba(57, 56, 50, 0.333); position: absolute; } #workshop .tape { 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; } #workshop .tape::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; } #workshop .tape::after { filter: blur(1.8px); bottom: var(--curl-depth,-2px); background: rgba(57, 56, 50, 0.21); } #workshop .tape[data-curl="ends"]::before { background: linear-gradient(90deg,#ffffff24,transparent 25%,#0000000d 50%,transparent 75%,#ffffff24),var(--tape-color); } #workshop .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; } #workshop .tape[data-curl="ends"]::after { clip-path: none; filter: blur(1.6px); 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") 50% center / 100% 100% no-repeat; border-radius: 0px; inset: 1px 1.5% -6px; transform: none; } #workshop .tape[data-curl="middle"]::after { clip-path: none; filter: blur(1.6px); 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") 50% center / 100% 100% no-repeat; border-radius: 0px; inset: 1px 1.5% -6px; transform: none; } #workshop .tape[data-curl="middle"]::before { filter: drop-shadow(rgba(52, 51, 50, 0.333) 0px 0.7px 0.4px); } #workshop .tape[data-curl="ends"] { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.44) 0%, rgba(52, 51, 50, 0.157) 48%, rgba(0, 0, 0, 0) 76%) center bottom / 64% 3px no-repeat !important; } #workshop .tape[data-curl="middle"] { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.396) 0%, rgba(52, 51, 50, 0.145) 48%, rgba(0, 0, 0, 0) 78%) 0px 100% / 15% 3px no-repeat, radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.396) 0%, rgba(52, 51, 50, 0.145) 48%, rgba(0, 0, 0, 0) 78%) 100% 100% / 15% 3px no-repeat !important; } #workshop .tape[data-curl] { background: 0px 0px !important; } #workshop .tape[data-curl]::before { filter: none; } #workshop .tape-contact { pointer-events: none; z-index: -1; filter: blur(0.5px); height: 3px; position: absolute; bottom: -1.5px; } #workshop .tape[data-curl="ends"] > .tape-contact { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, rgba(0, 0, 0, 0) 75%); left: 22%; right: 22%; } #workshop .tape[data-curl="middle"] > .tape-contact { background: radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, rgba(0, 0, 0, 0) 75%) 0px center / 17% 100% no-repeat, radial-gradient(at 50% 0px, rgba(52, 51, 50, 0.467) 0%, rgba(52, 51, 50, 0.22) 42%, rgba(0, 0, 0, 0) 75%) 100% center / 17% 100% no-repeat; left: 1%; right: 1%; } #workshop .tape[data-curl] > .tape-contact { z-index: -2; } #workshop .tape[data-curl]::after { z-index: -3; } #workshop .label-measure { pointer-events: none; visibility: hidden !important; position: absolute !important; transform: none !important; } #workshop .bf-card > .edge-t, #workshop .bf-card > .edge-b { height: 10px; } #workshop .bf-card > .edge-l, #workshop .bf-card > .edge-r { width: 10px; } #workshop .bf-card.left { background-color: rgb(250, 250, 245); background-image: none; border-radius: 11px; padding: 0px 0px 0px 10px; } #workshop .bf-card.left > .edge-l { border-radius: 0px; width: 10px; top: 0px; bottom: 0px; left: 0px; } #workshop .bf-card.left > .bf-inner { border-radius: 0px 6px 6px 0px; } #workshop .bf-card.bands { background-color: rgb(250, 250, 245); background-image: none; border-radius: 11px; padding: 10px 0px; } #workshop .bf-card.bands > .edge-t, #workshop .bf-card.bands > .edge-b { border-radius: 0px; height: 10px; left: 0px; right: 0px; } #workshop .bf-card.bands > .bf-inner { border-radius: 0px; } #workshop .foundation-grid .bf-card > .bf-inner { padding: 18px 20px 16px; } #workshop .foundation-grid h3 { min-width: 0px; margin: 0px 0px 16px; display: block; } #workshop .foundation-grid p { font-size: 15px; line-height: 1.65; } #workshop .bf-card.bands > .bf-inner { padding: 18px 22px 16px; } @media (max-width: 800px) { #workshop .foundation-grid .bf-card > .bf-inner { padding: 17px 16px 15px; } } #workshop.play-packet .tracker-seek-outline { fill: rgba(58, 58, 58, 0.035); stroke: rgba(58, 58, 58, 0.24); stroke-width: 1.5px; vector-effect: non-scaling-stroke; } #workshop.play-packet .tracker-seek-ink { clip-path: inset(0 calc(100% - var(--audio-pct)) 0 0); } #workshop.material-system { --tone: #307878; --accent: var(--tone); } #workshop.material-system .masthead { border-bottom: 1px solid rgb(198, 202, 190); padding: 6px 3px 18px; } #workshop.material-system .foam { filter: url("#studio-foam-smooth"); text-shadow: none; } #workshop.material-system .button { letter-spacing: 0.03em; border-radius: 3px; min-height: 44px; font: 16px / 1.35 PacketPixel, monospace; box-shadow: rgba(56, 60, 57, 0.25) 0px 3px; } #workshop.material-system .button.ghost { background: rgb(245, 244, 237); border: 1px solid rgb(174, 184, 176); box-shadow: rgba(56, 60, 57, 0.125) 0px 2px; } #workshop.material-system .text-button { color: var(--tone); font-size: 14px; } #workshop.material-system .heading { padding: 30px 0px 17px; } #workshop.material-system .heading > div:first-child { flex: 1 1 0%; min-width: 0px; } #workshop.material-system .heading h2 { width: 100%; max-width: 720px; } #workshop.material-system .heading p { margin: 12px 0px 0px; } #workshop.material-system .refresh { background: rgba(243, 244, 237, 0.533); font-size: 13px; } #workshop.material-system .refresh strong { color: rgb(150, 123, 41); font: 12px / 1.8 Chalk; } #workshop.material-system .refresh small { font-size: 12px; } #workshop.material-system .paper { background: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.016) 0px, rgba(58, 58, 58, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px) rgb(255, 254, 249); border: 1px solid rgb(191, 195, 184); border-radius: 7px; padding: 24px; position: relative; box-shadow: rgba(146, 154, 160, 0.125) 0px 0px 0px 1px, rgba(59, 56, 48, 0.09) 0px 2px 5px; } #workshop.material-system .paper.gold { background-color: rgb(252, 243, 215); } #workshop.material-system .paper > h2 { margin: 12px 0px 18px; } #workshop.material-system .paper > .tape { font-size: 12px; } #workshop.material-system .heart { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 30px, rgba(103, 140, 170, 0.125) 30px, rgba(103, 140, 170, 0.125) 31px), rgb(250, 243, 217); border-left: 3px solid rgba(189, 115, 111, 0.4); border-radius: 3px; padding: 16px 22px; } #workshop.material-system .heart summary { color: rgb(135, 99, 71); font: 14px / 1.8 Chalk; } #workshop .category-shelf { scrollbar-width: thin; gap: 10px; margin-bottom: 12px; padding: 12px 3px 16px; display: flex; overflow-x: auto; } #workshop .category-shelf button { min-width: 100px; max-width: 145px; color: var(--tone,#307878); background: rgb(244, 244, 236); border: 1px solid rgb(203, 209, 199); border-radius: 4px 8px 3px 7px; flex-direction: column; flex: 0 0 120px; align-items: center; gap: 10px; padding: 13px 10px; font: 12px / 1.6 Chalk; display: flex; box-shadow: rgba(133, 137, 116, 0.133) 0px 2px; } #workshop .category-shelf button.chosen { background: var(--tone,#307878); } @supports (color:color-mix(in lab, red, red)) { #workshop .category-shelf button.chosen { background: color-mix(in srgb,var(--tone,#307878) 12%,#fafaf5); } } #workshop .category-shelf button.chosen { border-color: var(--tone,#307878); } #workshop .category-shelf .foam { font-size: 27px; } #workshop .category-shelf b { color: rgb(115, 125, 118); font: 12px PacketDigits; } #workshop .task-filters { background: rgb(237, 241, 235); border: 1px solid rgb(203, 210, 201); grid-template-columns: 2fr repeat(4, minmax(0px, 1fr)); } #workshop .category-heading { border-bottom: 1px solid var(--tone); justify-content: space-between; align-items: center; gap: 18px; margin: 27px 0px 18px; padding-bottom: 10px; display: flex; } @supports (color:color-mix(in lab, red, red)) { #workshop .category-heading { border-bottom: 1px solid color-mix(in srgb,var(--tone) 35%,#fafaf5); } } #workshop .category-heading h3 { color: var(--tone); font: 16px / 1.7 Chalk; } #workshop .category-heading > span { color: rgb(104, 117, 108); font-size: 12px; } #workshop .category-caption { color: var(--tone); font: 11px / 1.7 Chalk; } #workshop .calendar-toolbar .field { max-width: 190px; margin: 0px 0px 0px auto; } #workshop .person-window { border-top: 1px solid rgba(191, 189, 163, 0.5); flex-direction: column; gap: 4px; margin: 14px 0px; padding: 12px 0px; font-size: 14px; display: flex; } #workshop .person-window strong { color: var(--tone); } #workshop .person-window small { font-size: 12px; display: block; } #workshop .section-caption { justify-content: space-between; align-items: center; gap: 15px; margin: 32px 0px 20px; display: flex; } #workshop .section-caption h3 { color: rgb(83, 124, 80); font: 16px / 1.8 Chalk; } #workshop .progress-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 22px; display: grid; } #workshop .progress-card { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(115, 155, 197, 0.1) 31px, rgba(115, 155, 197, 0.1) 32px), rgb(255, 249, 220); border: 1px solid rgb(212, 201, 159); border-radius: 3px; min-width: 0px; padding: 22px; box-shadow: rgba(81, 71, 42, 0.086) 2px 3px 5px; } #workshop .progress-card > .tape { margin: -8px 0px 20px; font-size: 12px; } #workshop .progress-top { align-items: center; gap: 12px; margin: 12px 0px; display: flex; } #workshop .progress-top strong { color: var(--tone); font-size: 22px; } #workshop .progress-top small { font-size: 12px; display: block; } #workshop .progress-card h3 { color: var(--tone); font-size: 14px; } #workshop .progress-entry { text-align: left; color: rgb(90, 98, 88); background: 0px 0px; border-width: 1px 0px 0px; border-style: dashed none none; border-color: rgb(211, 203, 169) currentcolor currentcolor; border-image: none; justify-content: space-between; align-items: start; gap: 12px; width: 100%; padding: 11px 0px; font-size: 13px; display: flex; } #workshop .progress-entry b { white-space: nowrap; color: var(--tone); } #workshop.material-system .agreement { background: rgb(251, 241, 202); border-width: 1px 1px 1px 8px; border-style: solid; border-color: rgb(202, 183, 132) rgb(202, 183, 132) rgb(202, 183, 132) rgb(196, 149, 56); border-image: none; box-shadow: rgba(130, 99, 36, 0.094) 1px 3px 5px; } #workshop.material-system .agreement h2 { color: rgb(135, 99, 71); } #workshop.material-system .subtabs { background: rgb(239, 237, 221); flex-wrap: wrap; justify-content: flex-start; gap: 6px; width: 100%; height: auto; padding: 7px; } #workshop.material-system .subtabs button { color: rgb(135, 99, 71); min-height: 40px; font: 14px PacketPixel; } #workshop.material-system .subtabs button[data-state="active"] { color: rgb(64, 101, 146); background: rgb(255, 254, 245); box-shadow: rgba(113, 105, 88, 0.17) 0px 2px 3px; } #workshop.material-system .day { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(109, 158, 191, 0.055) 31px, rgba(109, 158, 191, 0.055) 32px), rgb(255, 253, 243); border-width: 1px 1px 1px 7px; border-style: solid; border-color: rgb(201, 200, 183) rgb(201, 200, 183) rgb(201, 200, 183) rgb(196, 149, 56); border-image: none; border-radius: 5px; } #workshop.material-system .day > summary { color: rgb(128, 100, 53); } #workshop .more-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px; display: grid; } #workshop.material-system .more-link { text-align: left; border-left: 8px solid var(--tone); align-items: center; gap: 18px; min-height: 126px; padding: 22px; display: flex; } #workshop .more-link > .foam { font-size: 31px; } #workshop .more-link > span:nth-child(2) { flex: 1 1 0%; min-width: 0px; } #workshop .more-link strong { color: var(--tone); font: 15px / 1.8 Chalk; display: block; } #workshop .more-link small { color: rgb(106, 111, 101); margin-top: 7px; font-size: 13px; display: block; } #workshop.material-system .collection-card { border-top: 9px solid var(--tone); text-align: left; } #workshop.material-system .collection-card:nth-child(3n+2) { --tone: #7a4380; } #workshop.material-system .collection-card:nth-child(3n) { --tone: #c49538; } #workshop.material-system .collection-card h3 { color: var(--tone); font-size: 17px; } #workshop.material-system[data-view="Inventory"] { --tone: #406592; } #workshop.material-system[data-view="Resale"] { --tone: #7a4380; } #workshop.material-system[data-view="Decisions"], #workshop.material-system[data-view="Heart"] { --tone: #b53535; } #workshop.material-system[data-view="Settings"] { --tone: #406592; } #workshop.material-system[data-view="History"] { --tone: #876347; } #workshop.material-system[data-view="Daily Progress"] { --tone: #66835a; } #workshop.material-system[data-view="Abundance"] { --tone: #a87a28; } #workshop.material-system[data-view="Wins"] { --tone: #66835a; } @media (max-width: 1000px) { #workshop .task-filters { grid-template-columns: repeat(3, minmax(0px, 1fr)); } #workshop .progress-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } } @media (max-width: 650px) { #workshop.material-system .button { padding: 9px 12px; font-size: 14px; } #workshop.material-system .heading { padding-top: 24px; } #workshop .progress-grid, #workshop .more-grid { grid-template-columns: 1fr; } #workshop .task-filters { grid-template-columns: repeat(2, minmax(0px, 1fr)); padding: 14px 10px; } #workshop .task-filters > .field:first-child { grid-column: 1 / -1; } #workshop .category-heading { align-items: start; } #workshop .category-heading h3 { font-size: 14px; } #workshop .category-heading > span { font-size: 11px; } #workshop .calendar-toolbar .field { max-width: 150px; margin-left: 0px; } #workshop.material-system .paper { padding: 20px; } #workshop .section-caption { flex-direction: column; align-items: start; gap: 4px; } #workshop.material-system .more-link { min-height: 110px; } #workshop.material-system .subtabs button { font-size: 12px; } } #workshop.material-system .more-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); } #workshop.material-system .more-link small { font-weight: 400; } #workshop.material-system .task-filters { grid-template-columns: 2fr repeat(4, minmax(0px, 1fr)); } #workshop.material-system .subtabs button { white-space: normal; } @media (max-width: 1000px) { #workshop.material-system .task-filters { grid-template-columns: repeat(3, minmax(0px, 1fr)); } } @media (max-width: 650px) { #workshop.material-system .more-grid { grid-template-columns: 1fr; } #workshop.material-system .task-filters { grid-template-columns: repeat(2, minmax(0px, 1fr)); } #workshop.material-system .subtabs { grid-template-columns: 1fr 1fr; gap: 8px; display: grid; } #workshop.material-system .subtabs button { width: 100%; min-height: 46px; line-height: 1.6; } } #workshop.material-system .home-header-notes { justify-content: flex-end; align-items: center; gap: 24px; min-width: 0px; display: flex; } #workshop.material-system .home-header-notes .account { text-align: right; align-items: flex-end; gap: 12px; min-width: 0px; display: flex; } #workshop.material-system .home-header-notes .account .tape { white-space: normal; font-size: 12px; line-height: 1.7; display: inline-block !important; } #workshop.material-system .home-header-notes .account small { max-width: 150px; font-size: 11px; } #workshop.material-system .notebook-tools { justify-content: flex-end; margin: 8px 0px 0px; display: flex; } #workshop.material-system .category-scroll-tools { color: rgb(128, 100, 53); justify-content: space-between; align-items: center; gap: 10px; font: 11px / 1.7 Chalk; display: flex; } #workshop .category-scroll-tools button { color: rgb(48, 120, 120); background: rgb(250, 245, 228); border: 1px solid rgb(189, 181, 164); border-radius: 4px; width: 44px; height: 44px; font-size: 23px; box-shadow: rgb(199, 195, 180) 1px 2px; } #workshop .category-scroll-tools button:disabled { opacity: 0.35; } #workshop.material-system .category-shelf { scroll-snap-type: x; scrollbar-width: thin; scrollbar-color: rgb(168, 155, 126) rgb(233, 229, 218); gap: 16px; padding: 18px 5px 20px; } #workshop.material-system .category-shelf > button { white-space: normal; text-align: left; color: rgb(110, 100, 59); scroll-snap-align: start; background: rgb(255, 242, 185); border-width: 15px 0px 0px; border-style: solid none none; border-color: rgba(236, 219, 150, 0.5) currentcolor currentcolor; border-image: none; border-radius: 0px; flex: 0 0 154px; grid-template-columns: 1fr auto; align-items: center; min-height: 136px; padding: 12px 14px; display: grid; position: relative; transform: rotate(-1deg); box-shadow: rgba(81, 73, 49, 0.145) 2px 5px 6px; } #workshop.material-system .category-shelf > button:nth-child(3n+2) { background: rgb(229, 239, 207); border-top-color: rgba(184, 202, 165, 0.4); transform: rotate(1deg); } #workshop.material-system .category-shelf > button:nth-child(3n) { background: rgb(243, 220, 213); border-top-color: rgba(218, 182, 173, 0.4); } #workshop.material-system .category-shelf > button > .foam { grid-column: 1; margin: 0px; font-size: 25px; } #workshop.material-system .category-shelf > button > span:not(.foam) { grid-area: 2 / 1 / auto / -1; margin-top: 9px; font: 11px / 1.7 Chalk; } #workshop.material-system .category-shelf > button > b { color: var(--tone,#307878); grid-area: 1 / 2; font: 900 30px / 1 Avenir; } #workshop.material-system .task-category { margin: 26px 0px; } #workshop.material-system .task-category > summary { cursor: pointer; border-bottom: 2px dashed var(--tone); flex-wrap: wrap; align-items: center; gap: 14px; list-style: none; display: flex; } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .task-category > summary { border-bottom: 2px dashed color-mix(in srgb,var(--tone) 35%,transparent); } } #workshop.material-system .task-category > summary { min-height: 54px; padding: 12px 2px; } #workshop.material-system .task-category > summary::-webkit-details-marker { display: none; } #workshop.material-system .task-category > summary h3 { color: var(--tone); flex: 1 1 0%; align-items: center; gap: 8px; margin: 0px; font: 15px / 1.7 Chalk; display: flex; } #workshop.material-system .category-count { color: var(--tone); font: 700 13px / 1.6 Avenir; } #workshop.material-system .category-unfold { color: var(--tone); font: 10px / 1.6 Chalk; } #workshop .discard-draft .actions { gap: 12px; margin-top: 20px; } #workshop .record-sheet input, #workshop .record-sheet textarea { font-size: 16px !important; } #workshop .record-sheet.material-system { overscroll-behavior: contain; scroll-padding-top: 70px; overflow-y: auto; width: min(640px, 100vw) !important; max-width: 640px !important; height: 100dvh !important; padding-top: 0px !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; } #workshop .record-topbar { z-index: 5; background: rgba(250, 250, 245, 0.97); border-bottom: 1px dashed rgb(204, 201, 188); justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0px; display: flex; position: sticky; top: 0px; } #workshop .record-topbar > span { color: var(--tone); font: 9px / 1.6 Chalk; } #workshop .record-topbar button { background: var(--tone); color: rgb(255, 250, 242); border: 1px solid var(--tone); border-radius: 3px; min-height: 44px; padding: 7px 12px; font: 12px / 1.5 PixelGamer; box-shadow: rgba(68, 68, 68, 0.333) 0px 2px; } #workshop .record-sheet .record-actions { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 16px 0px; display: flex; } #workshop .record-sheet.material-system .button.primary { background: var(--tone); border-color: var(--tone); color: rgb(255, 250, 242); } #workshop .record-sheet.material-system .record-section { border-top: 1px solid rgb(207, 206, 189); border-right: 1px solid rgb(207, 206, 189); border-bottom: 1px solid rgb(207, 206, 189); border-image: none; border-left: 4px solid var(--tone); background: rgb(255, 253, 245); min-width: 0px; margin: 18px 0px; padding: 0px 14px 14px; } #workshop .record-section > summary { cursor: pointer; min-height: 60px; color: var(--tone); flex-wrap: wrap; align-items: center; gap: 10px; padding: 13px 0px; font: 12px / 1.7 Chalk; display: flex; } #workshop .record-section > summary::after { content: "+"; margin-left: auto; font-size: 22px; } #workshop .record-section[open] > summary::after { content: "โˆ’"; } #workshop .record-section > summary small { color: rgb(119, 117, 101); font: 12px / 1.6 Avenir; } #workshop .record-section > summary .foam { margin: 0px; font-size: 23px; } #workshop .record-sheet.material-system .record-notes { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 30px, rgba(115, 154, 183, 0.11) 30px, rgba(115, 154, 183, 0.11) 31px), rgb(255, 247, 217); } #workshop .record-sheet.material-system .facts { background: 0px 0px; border: 0px; margin: 0px; } #workshop.material-system .paper.home-next, #workshop.material-system .progress-card { border: 7px solid rgba(0, 0, 0, 0); border-radius: 1px; padding: 22px; box-shadow: rgba(98, 88, 62, 0.133) 2px 4px 6px; } #workshop.material-system .paper.home-visits { background: rgb(248, 237, 185); border: 0px; border-radius: 0px; padding: 24px; position: relative; box-shadow: rgba(86, 75, 51, 0.145) 3px 6px 10px; } #workshop.material-system .paper.home-visits::before { content: ""; background: rgba(238, 226, 184, 0.525); width: 65px; height: 20px; position: absolute; top: -8px; right: 28px; transform: rotate(5deg); } #workshop.material-system .paper.home-decisions { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 29px, rgba(170, 198, 223, 0.25) 29px, rgba(170, 198, 223, 0.25) 30px), rgb(255, 248, 217); border-width: 0px 0px 0px 2px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(201, 135, 135); border-image: none; } #workshop.material-system .paper.home-progress { background: rgb(250, 250, 245); border-width: 7px 0px; border-style: solid none; border-color: rgba(0, 0, 0, 0) currentcolor; border-image: none; } #workshop.material-system .wins-banner { background: rgb(255, 250, 240); border-top: 8px solid rgba(0, 0, 0, 0); border-bottom: 8px solid rgba(0, 0, 0, 0); } #workshop.material-system .abundance-overview > div { background: rgb(250, 240, 196); border-width: 14px 0px 0px; border-style: solid none none; border-color: rgba(225, 211, 150, 0.4) currentcolor currentcolor; border-image: none; border-radius: 0px; padding: 22px; box-shadow: rgba(88, 80, 53, 0.133) 2px 5px 7px; } #workshop.material-system .abundance-overview > div:nth-child(2) { background: rgb(231, 239, 215); border-top-color: rgba(169, 190, 147, 0.4); } #workshop.material-system .abundance-overview > div:nth-child(3) { background: rgb(240, 224, 239); border-top-color: rgba(193, 164, 192, 0.4); } #workshop.material-system .agreement { background: rgb(255, 247, 217); border-width: 6px 0px; border-style: solid none; border-color: rgba(0, 0, 0, 0) currentcolor; border-image: none; } #workshop.material-system .more-grid > .paper.more-link { border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 7px solid var(--tone); background: rgb(250, 247, 231); border-radius: 2px; box-shadow: rgba(59, 56, 37, 0.11) 2px 3px 5px; } #workshop.material-system .more-grid > .paper.more-link:nth-child(3n+2) { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 12px solid var(--tone); } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .more-grid > .paper.more-link:nth-child(3n+2) { border-top: 12px solid color-mix(in srgb,var(--tone) 20%,transparent); } } #workshop.material-system .more-grid > .paper.more-link:nth-child(3n+2) { background: rgb(247, 237, 197); } #workshop.material-system .more-grid > .paper.more-link:nth-child(3n) { background: rgb(250, 250, 245); border-width: 5px 0px; border-style: solid none; border-color: rgba(0, 0, 0, 0) currentcolor; border-image: none; } @media (max-width: 1100px) { #workshop.material-system .home-header-notes { align-items: center; gap: 14px; } #workshop.material-system .home-header-notes .account { max-width: 170px; } #workshop.material-system .home-header-notes .account small { display: none; } } @media (max-width: 650px) { #workshop.material-system .masthead { grid-template-columns: 1fr; } #workshop.material-system .home-header-notes { justify-content: space-between; margin: 4px 0px 5px; } #workshop.material-system .home-header-notes .account { text-align: left; align-items: flex-start; max-width: 220px; } #workshop.material-system .home-header-notes .account .tape { font-size: 10px; } #workshop.material-system .home-header-notes .refresh-note-trigger { flex-direction: row; max-width: none; } #workshop.material-system .home-header-notes .refresh-note-trigger span:last-child, #workshop.material-system .category-scroll-tools { font-size: 9px; } #workshop.material-system .category-shelf > button { flex-basis: 142px; min-height: 126px; } #workshop .record-sheet.material-system { border-left-width: 4px; padding: 0 14px max(24px,env(safe-area-inset-bottom)) !important; } #workshop .record-sheet.material-system [data-slot="sheet-title"] { max-width: 100%; font-size: 16px; } #workshop .record-section > summary { font-size: 11px; } #workshop .record-sheet.material-system .facts { grid-template-columns: 1fr; } #workshop .record-sheet.material-system .record-section { padding: 0px 11px 12px; } #workshop .linked-task-finder .form-grid { grid-template-columns: 1fr; } #workshop.material-system .paper.home-next, #workshop.material-system .progress-card { padding: 18px 14px; } #workshop.material-system .category-heading h3 { font-size: 13px !important; } #workshop .category-unfold { text-align: right; flex: 0 0 100%; } #workshop.material-system .notebook-tools { margin-top: 0px; } } #workshop .response-record { border-bottom: 1px dashed rgb(212, 206, 187); padding: 12px 0px; } #workshop .response-record > details { margin: 7px 0px; } #workshop .response-record > details > summary { cursor: pointer; color: rgb(89, 110, 101); min-height: 36px; font-size: 12px; } #workshop .response-record > details > small { margin-top: 6px; line-height: 1.8; } @media (max-width: 760px) { #workshop.material-system #content > .heading { display: block; } #workshop.material-system #content > .heading > div:first-child { width: 100%; min-width: 0px; } #workshop.material-system #content > .heading > .actions { margin-top: 22px; } } #workshop.material-system .home-identity { text-align: center; min-width: 0px; } #workshop.material-system .home-identity h1 { text-shadow: rgb(255, 255, 255) 0px 1px, rgba(73, 79, 73, 0.16) 0px -1px; background: linear-gradient(176deg, rgb(255, 254, 249), rgb(233, 232, 225) 48%, rgb(255, 254, 250)); border: 1px solid rgb(201, 200, 188); border-radius: 1px; justify-content: center; align-items: center; gap: 3px; width: fit-content; max-width: 100%; margin: 16px auto 12px; padding: 13px 17px 10px; font: clamp(22px, 3vw, 34px) / 1.5 Tape, monospace; display: flex; transform: rotate(-0.7deg); box-shadow: rgb(255, 255, 255) 0px 1px, rgb(255, 255, 255) 0px 1px 2px inset, rgba(85, 85, 85, 0.2) 0px 3px 3px; } #workshop.material-system .home-identity h1 .magic-word { color: rgb(64, 101, 146); margin-left: 9px; font-family: Tape; } #workshop.material-system .home-identity h1 > .foam { display: none; } #workshop.material-system .home-identity h1 i { color: rgb(138, 132, 119); font-style: normal; } #workshop.material-system .home-identity > p { margin-bottom: 8px; } #workshop .entry-scene .entry-privacy { line-height: 1.8; } @media (max-width: 650px) { #workshop.material-system .home-identity h1 { padding: 11px 12px 9px; font-size: clamp(20px, 5.8vw, 28px); } #workshop.material-system .home-identity .eyebrow { font-size: 8px; } #workshop.material-system .home-identity > p { font-size: 11px; } #workshop.material-system .home-header-notes { margin-top: 8px; } } #workshop .notebook-loading-card .button { font: 14px / 1.5 PixelGamer; } #workshop.material-system.notebook { box-shadow: rgba(21, 28, 27, 0.4) 0px 8px 24px; } #workshop .notebook.material-system { box-shadow: none; background: 0px 0px; border: 0px; border-radius: 0px; padding-top: 36px; } #workshop .notebook.material-system::before { clip-path: polygon(0.25% 0px, 28% 0.12%, 57% 0px, 99.6% 0.15%, 99.85% 26%, 99.6% 53%, 100% 78%, 99.7% 100%, 69% 99.9%, 40% 100%, 0.3% 99.9%, 0px 77%, 0.2% 48%, 0px 21%); background: linear-gradient(95deg, rgb(239, 232, 215), rgb(250, 247, 236) 9%, rgb(248, 243, 230) 90%, rgb(238, 231, 214)); border: 0px; border-radius: 0px; inset: 0px -3px -5px; transform: none; box-shadow: rgba(21, 28, 27, 0.333) 0px 8px 24px; } #workshop.material-system .masthead { border: 0px; grid-template-columns: minmax(0px, 1fr) auto; gap: 12px 28px; padding: 4px 0px 10px; } #workshop.material-system .home-identity { text-align: center; margin-left: -57px; padding-right: 10px; } #workshop.material-system .household-identity h1 { width: 100%; max-width: none; box-shadow: none; letter-spacing: 0px; background: 0px 0px; border: 0px; border-radius: 0px; margin: 0px 0px 13px; padding: 0px; display: block; transform: none; } #workshop .identity-j { color: rgb(48, 120, 120) !important; } #workshop .identity-c { color: rgb(181, 53, 53) !important; } #workshop .identity-d { color: rgb(196, 149, 56) !important; } #workshop .identity-magic { color: rgb(64, 101, 146) !important; } #workshop .identity-caption { color: rgb(124, 120, 105); letter-spacing: 0.06em; font: 10px / 1.8 Chalk; display: block; } #workshop .entry-card.material-system .household-identity { padding-top: 14px; } #workshop .pencil-divider { fill: none; width: 100%; height: 7px; stroke: var(--tone,#9eaa9e); stroke-width: 1.3px; stroke-linecap: round; pointer-events: none; display: block; overflow: visible; } #workshop .household-flag { color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 0.02em; background: var(--tone,#307878); text-wrap: balance; border-radius: 2px; align-items: center; max-width: 100%; margin: 7px 9px 7px 0px; padding: 8px 21px 8px 13px; font: 15px / 1.65 Chalk; display: inline-flex; position: relative; transform: rotate(-0.6deg); box-shadow: rgba(58, 58, 58, 0.19) 5px 3px 7px; } #workshop .household-flag > .foam { z-index: 2; position: absolute; top: -16px; right: -11px; margin: 0px !important; font-size: 28px !important; } #workshop.material-system .category-shelf { gap: 20px; padding: 18px 10px 22px; scroll-padding: 12px; } #workshop.material-system .category-shelf > button { --tone: #a87a28; background: linear-gradient(125deg,var(--tone),var(--tone)); flex-direction: column; flex: 0 0 156px; justify-content: center; align-items: center; gap: 6px; min-height: 148px; display: flex; } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .category-shelf > button { background: linear-gradient(125deg,color-mix(in srgb,var(--tone) 12%,#fff9de),color-mix(in srgb,var(--tone) 27%,#fff8d9)); } } #workshop.material-system .category-shelf > button { color: var(--tone); border: 0px; border-radius: 0px; padding: 14px 10px; font: 14px / 1.7 Chalk; transform: rotate(-2deg); box-shadow: rgba(65, 68, 63, 0.2) 2px 6px 14px; } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .category-shelf > button { color: color-mix(in srgb,var(--tone) 82%,#222); } } #workshop.material-system .category-shelf > button:nth-child(2n) { transform: rotate(2deg); } #workshop.material-system .category-shelf > button::before, #workshop.material-system .category-shelf > button::after { display: none; } #workshop.material-system .category-shelf > button > span:not(.foam) { font: 14px / 1.7 Chalk; } #workshop.material-system .category-shelf > button > b { font: 34px / 1.2 Gaposiss, monospace; } #workshop.material-system .category-shelf > button.chosen { outline: 2px dashed var(--tone); outline-offset: 4px; } #workshop .task-filter-paper { --tone: #406592; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(114, 154, 190, 0.082) 31px, rgba(114, 154, 190, 0.082) 32px), rgb(244, 239, 225); border-width: 0px 0px 0px 2px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgba(199, 143, 131, 0.267); border-image: none; margin: 6px 0px 12px; padding: 18px 22px 6px; transform: rotate(0.1deg); box-shadow: rgba(60, 67, 58, 0.1) 2px 4px 7px; } #workshop .filter-caption .household-flag { font-size: 12px; } #workshop .filter-fold > summary .category-plus { margin-left: auto; } #workshop .task-filter-paper .task-filters { background: 0px 0px; border: 0px; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; padding: 8px 0px; } #workshop .task-filter-paper .field > span { color: rgb(64, 101, 146); } #workshop .task-filter-paper input, #workshop .task-filter-paper .pick { background: rgb(255, 252, 241); border-color: rgb(189, 195, 183); } #workshop.material-system .task-category { box-shadow: none; background: 0px 0px; border: 0px; } #workshop.material-system .category-heading { background: 0px 0px; border: 0px; flex-wrap: wrap; align-items: center; gap: 15px; min-height: 95px; padding: 15px 6px 15px 0px; display: flex; position: relative; } #workshop.material-system .category-heading h3 { flex: 1 1 0%; min-width: 140px; margin: 0px; } #workshop.material-system .category-heading::before, #workshop.material-system .category-heading::after { display: none; } #workshop .category-heading > .pencil-divider { position: absolute; bottom: 0px; left: 0px; } #workshop.material-system .category-count { box-shadow: none; color: var(--tone); background: 0px 0px; border: 0px; align-items: center; gap: 8px; padding: 0px; font: 11px / 1.8 Chalk; display: flex; } #workshop .category-count > b { font: 34px / 1.2 Gaposiss, monospace; } #workshop .category-count > span { max-width: 90px; } #workshop .category-unfold { color: var(--tone); align-items: center; gap: 8px; font: 11px / 1.5 Chalk; display: flex; } #workshop .category-plus { color: var(--tone,#307878); min-width: 24px; font: 900 31px / 1 Avenir; display: inline-block; } #workshop .task-category[open] > .category-heading .category-plus { transform: rotate(45deg); } #workshop .household-postcard { --red: #b53535; --teal: #307878; --gold: #c49538; --card: #fafaf5; isolation: isolate; padding: 27px; position: relative; overflow: hidden; box-shadow: rgba(58, 58, 58, 0.14) 0px 4px 10px; background: rgb(48, 120, 120) !important; border: 1.5px solid rgb(136, 139, 128) !important; border-radius: 9px !important; } #workshop .household-postcard > .postcard-base { z-index: -1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(58, 58, 58, 0.016) 0px, rgba(58, 58, 58, 0.016) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3.5px), rgb(250, 250, 245); border-radius: 5px; position: absolute; inset: 11px; } #workshop .household-postcard > .postcard-edge { z-index: -1; pointer-events: none; position: absolute; overflow: hidden; } #workshop .household-postcard::before, #workshop .household-postcard::after { display: none !important; } #workshop .household-postcard > .edge-t { background: repeating-linear-gradient(90deg,var(--red) 0 22px,var(--card) 22px 24px,var(--teal) 24px 72px,var(--card) 72px 74px,var(--gold) 74px 96px,var(--card) 96px 98px,var(--red) 98px 140px,var(--card) 140px 142px,var(--teal) 142px 164px,var(--card) 164px 166px,var(--gold) 166px 220px,var(--card) 220px 222px,var(--red) 222px 246px,var(--card) 246px 248px,var(--teal) 248px 284px,var(--card) 284px 286px); height: 13px; top: 0px; left: 18px; right: 22px; } #workshop .household-postcard > .edge-b { background: repeating-linear-gradient(90deg,var(--teal) 0 36px,var(--card) 36px 38px,var(--gold) 38px 60px,var(--card) 60px 62px,var(--red) 62px 114px,var(--card) 114px 116px,var(--teal) 116px 138px,var(--card) 138px 140px,var(--gold) 140px 182px,var(--card) 182px 184px,var(--red) 184px 210px,var(--card) 210px 212px,var(--gold) 212px 248px,var(--card) 248px 250px); height: 13px; bottom: 0px; left: 22px; right: 18px; } #workshop .household-postcard > .edge-l { 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); width: 13px; top: 20px; bottom: 18px; left: 0px; } #workshop .household-postcard > .edge-r { background: repeating-linear-gradient(180deg,var(--teal) 0 28px,var(--card) 28px 30px,var(--gold) 30px 76px,var(--card) 76px 78px,var(--red) 78px 100px,var(--card) 100px 102px,var(--teal) 102px 142px,var(--card) 142px 144px,var(--gold) 144px 168px,var(--card) 168px 170px,var(--red) 170px 218px,var(--card) 218px 220px); width: 13px; top: 18px; bottom: 22px; right: 0px; } #workshop.material-system .calendar-layout { margin-top: 18px; padding: 29px; display: block; } #workshop .planner-heading .household-flag { font-size: 14px; } #workshop.material-system .calendar-paper { box-shadow: none; background: 0px 0px; border: 0px; border-radius: 0px; padding: 0px; } #workshop.material-system .selected-day { box-shadow: none; background: 0px 0px; border: 0px; margin: 15px 0px 0px; padding: 0px; transform: none; } #workshop .selected-day > .button { width: auto; min-height: 44px; padding: 8px 13px; display: inline-flex; } #workshop .shared-windows { padding: 14px 0px; } #workshop .shared-windows > summary { color: rgb(102, 131, 90); align-items: center; gap: 10px; min-height: 44px; font: 13px Chalk; display: flex; } #workshop.material-system .house-calendar .rdp-months { gap: 26px; display: flex; } #workshop.material-system .house-calendar .rdp-month { flex: 1 1 0%; min-width: 0px; } #workshop.material-system .house-calendar .rdp-day { height: 58px; } #workshop.material-system .house-calendar .rdp-day button { height: 56px; } #workshop .more-groups { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px; margin: 24px 0px; display: grid; } #workshop .more-section h3 { margin: 0px 0px 20px; padding-right: 10px; } #workshop .more-section .household-flag { font-size: 13px; } #workshop .more-destination { text-align: left; width: 100%; min-height: 80px; color: var(--tone,#307878); background: 0px 0px; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgb(198, 204, 189); border-image: none; align-items: center; gap: 15px; padding: 14px 0px; display: flex; } #workshop .more-destination:last-child { border: 0px; } #workshop .more-destination > .foam { font-size: 29px; } #workshop .more-destination > span:nth-child(2) { flex: 1 1 0%; min-width: 0px; } #workshop .more-destination strong { font: 15px / 1.7 Chalk; display: block; } #workshop .more-destination small { margin-top: 3px; font: 13px / 1.6 Avenir; display: block; } #workshop.material-system .progress-card { padding: 25px; } #workshop.material-system .abundance-overview > div { background: linear-gradient(125deg,var(--tone),var(--tone)); border: 0px; border-radius: 0px; box-shadow: rgba(65, 68, 63, 0.133) 2px 5px 12px; } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .abundance-overview > div { background: linear-gradient(125deg,color-mix(in srgb,var(--tone) 10%,#fff8e0),color-mix(in srgb,var(--tone) 22%,#fff8e0)); } } #workshop.material-system .abundance-overview > div { transform: rotate(-0.5deg); } #workshop.material-system .abundance-overview > div::before, #workshop.material-system .abundance-overview > div::after { display: none; } #workshop .notebook-loading-card.household-postcard { max-width: 460px; padding: 32px; } #workshop.material-system .progress-card::before { display: none; } #workshop.material-system .home-progress h3, #workshop.material-system .home-next h3 { color: rgb(64, 101, 146); } @media (max-width: 1000px) { #workshop.material-system .masthead { grid-template-columns: 1fr; } #workshop.material-system .home-identity { margin-left: -30px; margin-right: -15px; padding: 0px; } #workshop.material-system .home-header-notes { justify-content: space-between; } } @media (max-width: 650px) { #workshop .notebook.material-system { max-width: calc(100% - 24px); margin: 24px 12px 55px; padding: 20px 17px; } #workshop.material-system .home-identity { margin-left: -27px; margin-right: -23px; } #workshop .identity-caption { font-size: 8px; } #workshop.material-system .home-header-notes .account { max-width: 155px; } #workshop.material-system .home-header-notes .refresh-note-trigger > span:last-child { font-size: 9px; } #workshop .category-heading .household-flag { font-size: 13px; } #workshop.material-system .category-heading { gap: 10px; } #workshop .category-count > span { max-width: 60px; font-size: 9px; } #workshop.material-system .category-count > b { font-size: 29px; } #workshop .category-unfold { margin-left: auto; } #workshop .task-filter-paper { padding: 17px 14px 5px; } #workshop .task-filter-paper .task-filters { grid-template-columns: 1fr 1fr; gap: 0px 10px; } #workshop .filter-caption .household-flag { font-size: 11px; } #workshop.material-system .calendar-layout { padding: 23px 17px; } #workshop.material-system .house-calendar .rdp-day { height: 52px; } #workshop.material-system .house-calendar .rdp-day button { height: 50px; font-size: 13px; } #workshop.material-system .house-calendar .rdp-weekday { font-size: 9px; } #workshop .more-groups { grid-template-columns: 1fr; } #workshop .household-postcard { padding: 24px; } #workshop .more-destination { gap: 10px; } #workshop .more-destination strong { font-size: 13px; } #workshop .more-destination small { font-size: 12px; } #workshop .more-destination > .foam { font-size: 25px; } #workshop .notebook-loading-card.household-postcard { padding: 26px 19px; } } #workshop.material-system .household-identity .label-measure { align-self: flex-start; } #workshop.material-system .household-identity .identity-house { z-index: 4; filter: url("#studio-foam-smooth"); font-size: 35px; line-height: 1; position: absolute; top: -17px; left: 10px; transform: rotate(-7deg); margin: 0px !important; } #workshop .entry-card.material-system .household-identity .identity-house, #workshop .notebook-loading-card.material-system .household-identity .identity-house { font-size: 30px; top: -18px; left: 5px; } @media (max-width: 650px) { #workshop.material-system .household-identity .identity-house { font-size: 30px; top: -17px; left: 8px; } } #workshop .entry-privacy { border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22140%22%20height%3D%225%22%20viewBox%3D%220%200%20140%205%22%3E%3Cpath%20d%3D%22M0%202%20Q18%20.8%2038%202.2%20T79%202%20T115%202.5%20T140%201.8%22%20fill%3D%22none%22%20stroke%3D%22%239ca591%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%203%20Q43%202%2081%203%20T138%203%22%20fill%3D%22none%22%20stroke%3D%22%239ca591%22%20stroke-width%3D%22.35%22%20opacity%3D%22.4%22%2F%3E%3C%2Fsvg%3E") 2 / 1 / 0 repeat; } #workshop.material-system .house-calendar .rdp-day button { box-sizing: border-box; max-width: 100%; width: 100% !important; min-width: 0px !important; } #workshop.material-system .house-calendar .rdp-month_grid { table-layout: fixed; width: 100%; min-width: 0px; } #workshop.material-system .house-calendar .rdp-day, #workshop.material-system .house-calendar .rdp-weekday { width: 14.2857%; min-width: 0px; } #workshop.material-system .house-calendar { --cell-size: 30px; } #workshop.material-system .calendar-legend { border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='5'%3E%3Cpath d='M0 2 Q18 .8 38 2.2 T79 2 T115 2.5 T140 1.8' fill='none' stroke='%239ca591' stroke-width='.8'/%3E%3C/svg%3E") 2 / 1 / 0 repeat; } #workshop .chapter-navigation > .pencil-divider { opacity: 0.6; height: 4px; } #workshop .notebook.material-system { overflow-anchor: none; padding-top: 12px; } #workshop.material-system .notebook-shell .home-identity { width: max-content; max-width: calc(100% + 48px); margin: 0px 0px 0px -48px; padding: 0px; } #workshop .notebook-shell .identity-caption { margin: 7px 0px 0px; font-size: 9px; } #workshop.material-system .notebook-shell .household-identity .identity-house { font-size: 31px; top: -10px; left: -8px; transform: rotate(-10deg); } #workshop.material-system .home-header-notes { gap: 14px; } #workshop.material-system .header-magic-note { --tape-color: #737770; white-space: nowrap; padding: 6px 10px; font: 11px / 1.6 Tape; color: rgb(255, 255, 255) !important; } #workshop .notebook-shell .refresh-postit { max-width: 250px; padding: 12px 15px !important; } #workshop .notebook-shell .refresh-postit p { font-size: 12px; } #workshop .notebook-shell .refresh-postit small { font-size: 10px; } #workshop .notebook-shell.is-compact:not(.show-details) :is(.identity-caption, .household-names, .home-header-notes) { display: none; } #workshop .household-flag { isolation: isolate; box-shadow: none; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 0.5px 0.7px; background: 0px 0px; border: 0px; border-radius: 0px; padding: 8px 22px 8px 12px; font: 14px / 1.7 Chalk; position: relative; transform: rotate(-0.6deg); } #workshop .household-flag::before { content: ""; z-index: -1; clip-path: polygon(0px 0px, 100% 0px, 100% 91%, 72% 97%, 24% 100%, 0px 100%); background: linear-gradient(90deg,#00000012 0 20%,transparent 38%,#ffffff18),var(--tone,#307878); border-radius: 1px 2px 4px 1px; position: absolute; inset: 0px; } #workshop .household-flag::after { content: ""; z-index: -2; pointer-events: none; filter: blur(2.5px); transform-origin: 0px center; background: linear-gradient(90deg, rgba(55, 51, 47, 0.043) 0%, rgba(55, 51, 47, 0.086) 28%, rgba(55, 51, 47, 0.15) 69%, rgba(55, 51, 47, 0.125) 93%, rgba(55, 51, 47, 0.043) 100%); border-radius: 1px 3px 5px 1px; position: absolute; inset: 2px -1% -2px 19%; transform: skewY(1deg); } #workshop .household-flag > .foam { top: -14px; transform: rotate(8deg); } #workshop.material-system .category-shelf > button { text-align: center; justify-content: center; align-items: center; min-height: 158px; position: relative; } #workshop.material-system .category-shelf > button > span:not(.foam) { text-align: center; width: 100%; font: 15px / 1.7 Chalk; } #workshop.material-system .category-shelf > button > .foam { font-size: 43px; transform: rotate(-8deg); margin: 9px 0px 7px !important; } #workshop.material-system .category-shelf > button:nth-child(2n) > .foam { transform: rotate(7deg); } #workshop.material-system .category-shelf > button > b, #workshop.material-system .category-count > b { font: 34px / 1.2 PacketDigits, monospace; } #workshop.material-system .category-shelf > button.chosen { box-shadow: 1px 4px 8px #41443f35,0 1px 0 var(--tone); outline: 0px; transform: rotate(0deg); } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .category-shelf > button.chosen { box-shadow: 1px 4px 8px #41443f35,0 1px 0 color-mix(in srgb,var(--tone) 40%,transparent); } } #workshop.material-system .category-shelf > button.chosen::after { content: "โœ“"; color: var(--tone); font: 19px / 1 Chalk; display: block; position: absolute; top: 5px; right: 9px; } #workshop.material-system .category-shelf > button:focus-visible { outline-offset: 4px; outline: rgb(169, 185, 180) solid 2px; } #workshop .category-scroll-tools > div { gap: 14px; display: flex; } #workshop.material-system .category-scroll-tools .category-arrow { color: rgb(72, 77, 72); background: linear-gradient(rgb(211, 213, 207), rgb(183, 188, 181)); border: 2.5px solid rgb(133, 139, 130); border-radius: 3px; place-items: center; min-width: 46px; min-height: 38px; padding: 2px 9px; font: 25px / 1.1 PacketDigits, monospace; display: grid; box-shadow: rgba(0, 0, 0, 0.22) 0px 4px; } #workshop .category-heading .category-count { background: 0px 0px; } #workshop .category-heading .household-flag { margin-right: 10px; } #workshop .household-postcard { --pc-ink: var(--tone,#406592); --teal: var(--pc-ink); --red: var(--pc-ink); } @supports (color:color-mix(in lab, red, red)) { #workshop .household-postcard { --red: color-mix(in srgb,var(--pc-ink) 76%,#303534); } } #workshop .household-postcard { --gold: var(--pc-ink); } @supports (color:color-mix(in lab, red, red)) { #workshop .household-postcard { --gold: color-mix(in srgb,var(--pc-ink) 46%,#fafaf5); } } #workshop .household-postcard { --card: #fafaf5; overflow: visible; box-shadow: rgba(146, 154, 160, 0.19) 0px 0px 0px 1px, rgba(59, 56, 48, 0.09) 0px 2px 5px; background: rgb(250, 250, 245) !important; border: 1px solid rgb(184, 190, 183) !important; border-radius: 6px !important; } #workshop .household-postcard > .postcard-base { background-color: var(--pc-ink); border-radius: 3px; inset: 10px; } @supports (color:color-mix(in lab, red, red)) { #workshop .household-postcard > .postcard-base { background-color: color-mix(in srgb,var(--pc-ink) 3%,#fafaf5); } } #workshop .household-postcard > .edge-t, #workshop .household-postcard > .edge-b { height: 10px; } #workshop .household-postcard > .edge-l, #workshop .household-postcard > .edge-r { width: 10px; } #workshop .household-postcard > .postcard-corner { z-index: 2; pointer-events: none; border-radius: 2px; width: 12px; height: 12px; position: absolute; box-shadow: rgb(251, 250, 246) 0px 0px 0px 2px, rgba(58, 58, 58, 0.12) 0px 0px 0px 3px; } #workshop .agreement.household-postcard { --tone: #a87a28; } #workshop .home-next.household-postcard { --tone: #307878; } #workshop .notebook-loading-card.household-postcard { --tone: #66835a; } #workshop.material-system .calendar-paper::before { display: none !important; } #workshop.material-system .support-postcard { isolation: isolate; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(109, 158, 191, 0.043) 31px, rgba(109, 158, 191, 0.043) 32px), rgb(250, 250, 245); border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: rgb(200, 203, 197) rgb(200, 203, 197) rgb(200, 203, 197) currentcolor; border-image: none; border-radius: 3px; padding: 16px 18px 16px 25px; position: relative; box-shadow: rgba(59, 56, 48, 0.07) 0px 2px 5px; } #workshop.material-system .support-postcard::before { content: ""; z-index: 0; background: repeating-linear-gradient(rgb(191, 193, 189) 0px, rgb(191, 193, 189) 24px, rgb(250, 250, 245) 24px, rgb(250, 250, 245) 26px, rgb(102, 105, 101) 26px, rgb(102, 105, 101) 70px, rgb(250, 250, 245) 70px, rgb(250, 250, 245) 72px, rgb(144, 147, 143) 72px, rgb(144, 147, 143) 94px, rgb(250, 250, 245) 94px, rgb(250, 250, 245) 96px, rgb(191, 193, 189) 96px, rgb(191, 193, 189) 134px, rgb(250, 250, 245) 134px, rgb(250, 250, 245) 136px, rgb(102, 105, 101) 136px, rgb(102, 105, 101) 158px, rgb(250, 250, 245) 158px, rgb(250, 250, 245) 160px, rgb(144, 147, 143) 160px, rgb(144, 147, 143) 208px, rgb(250, 250, 245) 208px, rgb(250, 250, 245) 210px); border-radius: 3px 0px 0px 3px; width: 8px; position: absolute; top: 0px; bottom: 0px; left: 0px; } #workshop.material-system .button:has(> .foam) { margin-left: 12px; padding-left: 20px; position: relative; overflow: visible; } #workshop.material-system .button > .foam { pointer-events: none; font-size: 27px; position: absolute; top: -8px; left: -15px; transform: rotate(-9deg) scale(0.85); margin: 0px !important; } #workshop.material-system .button:nth-child(2n) > .foam { transform: rotate(7deg) scale(0.85); } #workshop.material-system .view-switch button { margin-left: 8px; padding-left: 23px; position: relative; } #workshop.material-system .view-switch button > .foam { margin: 0px; font-size: 24px; position: absolute; top: -7px; left: -10px; transform: rotate(-8deg); } @media (max-width: 1000px) { #workshop.material-system .notebook-shell .home-identity { max-width: calc(100% + 24px); margin-left: -24px; } } @media (max-width: 650px) { #workshop .notebook.material-system { padding-top: 9px; } #workshop.material-system .notebook-shell .home-identity { max-width: calc(100% + 8px); margin-left: -16px; } #workshop .notebook-shell .identity-caption { font-size: 8px; } #workshop.material-system .header-magic-note { white-space: normal; max-width: 160px; padding: 5px 7px; font-size: 9px; line-height: 1.6; } #workshop.material-system .category-shelf > button > .foam { font-size: 44px; } #workshop .category-heading .household-flag { max-width: 100%; font-size: 12px; } #workshop .household-postcard > .postcard-corner { width: 11px; height: 11px; } #workshop.material-system .support-postcard { padding: 14px 12px 14px 20px; } } @media (max-width: 350px) { #workshop.material-system .header-magic-note { max-width: 135px; font-size: 8px; } } #workshop.material-system .household-identity .identity-strip { white-space: nowrap; letter-spacing: 0.025em; width: max-content; max-width: 100%; display: inline-block; --tape-color: #f9f7ef !important; color: rgb(104, 115, 110) !important; text-shadow: rgba(23, 33, 42, 0.4) 0px -0.6px 0.4px, rgb(255, 255, 255) 0px 1px 0.5px !important; padding: 8px 15px 10px !important; font: 26px / 1.3 Tape !important; } #workshop.material-system .notebook-shell .home-identity { width: auto; } #workshop.material-system .notebook-shell.is-compact .identity-strip { font-size: 23px !important; } #workshop.material-system .task-category > summary { border-bottom: 0px; } #workshop.material-system .chapter-tab > .foam, #workshop.material-system .household-flag > .foam { position: absolute; } #workshop.material-system .category-shelf > button > .foam { position: relative; } @media (max-width: 650px) { #workshop.material-system .household-identity .identity-strip { padding: 7px 13px 9px !important; font-size: 23px !important; } #workshop.material-system .notebook-shell.is-compact .identity-strip { font-size: 21px !important; } } @media (max-width: 350px) { #workshop.material-system .household-identity .identity-strip { font-size: 20px !important; } #workshop.material-system .notebook-shell.is-compact .identity-strip { font-size: 18px !important; } } #workshop.material-system .identity-initials { letter-spacing: 0px; white-space: nowrap; font-size: 0.8em; } #workshop .identity-plus { margin: 0px 0.1em; display: inline-block; } #workshop .identity-strip > .identity-magic { letter-spacing: 0.01em; } #workshop.material-system .chapter-tab > .foam, #workshop.material-system .chapter-tab[data-expanded="true"] > .foam { top: 7px; left: 50%; transform: translate(-50%) rotate(-7deg); margin: 0px !important; } #workshop.material-system .chapter-tab:nth-child(2n) > .foam { transform: translate(-50%) rotate(6deg); } #workshop .chapter-navigation > .pencil-divider { display: none; } #workshop.material-system { --chapter-tone: #b53535; } #workshop.material-system[data-view="Home"] { --chapter-tone: #307878; } #workshop.material-system[data-view="Tasks"] { --chapter-tone: #406592; } #workshop.material-system[data-view="Calendar"] { --chapter-tone: #7a4380; } #workshop.material-system[data-view="Wins"] { --chapter-tone: #66835a; } #workshop.material-system[data-view="Abundance"] { --chapter-tone: #a87a28; } #workshop.material-system #content > :is(.chapter-intro, .heading) .button.primary { background: linear-gradient(var(--chapter-tone),var(--chapter-tone)); } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system #content > :is(.chapter-intro, .heading) .button.primary { background: linear-gradient(color-mix(in srgb,var(--chapter-tone) 78%,white),var(--chapter-tone)); } } #workshop.material-system #content > :is(.chapter-intro, .heading) .button.primary { border-color: var(--chapter-tone); } #workshop.material-system .notebook-tools { align-items: center; height: 39px; margin: 0px !important; padding: 0px !important; } #workshop .chapter-intro .actions { margin-top: 12px; } #workshop .calendar-layout.household-postcard { --tone: #7a4380; } #workshop .home-progress.household-postcard { --tone: #406592; } #workshop.material-system .chapter-intro ~ .calendar-toolbar { --tone: var(--chapter-tone); } #workshop .pencil-divider { stroke-width: 1.7px; stroke: var(--tone,#888878); } #workshop.material-system .progress-entry { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%227%22%20viewBox%3D%220%200%20240%207%22%3E%3Cpath%20d%3D%22M1%203.4%20Q36%201.4%2070%203.2%20T141%203%20T239%202.7%22%20fill%3D%22none%22%20stroke%3D%22%23888878%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%229%207%2013%206%208%207%2012%206%22/%3E%3Cpath%20d%3D%22M2%204.2%20Q41%202.8%2083%204%20T174%203.7%20T238%203.8%22%20fill%3D%22none%22%20stroke%3D%22%23888878%22%20stroke-width%3D%22.65%22%20opacity%3D%22.45%22%20stroke-dasharray%3D%228%209%2011%208%207%209%22/%3E%3C/svg%3E"); background-position: 0px 0px; background-repeat: repeat-x; background-size: 240px 7px; border-top: 0px; padding-top: 16px; } #workshop.material-system .more-destination:not(:last-child) { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%227%22%20viewBox%3D%220%200%20240%207%22%3E%3Cpath%20d%3D%22M1%203.4%20Q36%201.4%2070%203.2%20T141%203%20T239%202.7%22%20fill%3D%22none%22%20stroke%3D%22%23888878%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%229%207%2013%206%208%207%2012%206%22/%3E%3Cpath%20d%3D%22M2%204.2%20Q41%202.8%2083%204%20T174%203.7%20T238%203.8%22%20fill%3D%22none%22%20stroke%3D%22%23888878%22%20stroke-width%3D%22.65%22%20opacity%3D%22.45%22%20stroke-dasharray%3D%228%209%2011%208%207%209%22/%3E%3C/svg%3E"); background-position: 0px 100%; background-repeat: repeat-x; background-size: 240px 7px; border-bottom: 0px; padding-bottom: 18px; } #workshop.material-system .play-packet { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22240%22%20height%3D%227%22%20viewBox%3D%220%200%20240%207%22%3E%3Cpath%20d%3D%22M1%203.4%20Q36%201.4%2070%203.2%20T141%203%20T239%202.7%22%20fill%3D%22none%22%20stroke%3D%22%23888878%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%229%207%2013%206%208%207%2012%206%22/%3E%3Cpath%20d%3D%22M2%204.2%20Q41%202.8%2083%204%20T174%203.7%20T238%203.8%22%20fill%3D%22none%22%20stroke%3D%22%23888878%22%20stroke-width%3D%22.65%22%20opacity%3D%22.45%22%20stroke-dasharray%3D%228%209%2011%208%207%209%22/%3E%3C/svg%3E"); background-position: 0px 0px; background-repeat: repeat-x; background-size: 240px 7px; border-top: 0px; padding-top: 22px; } @media (max-width: 650px) { #workshop.material-system .chapter-tab > .foam { top: 7px; } #workshop.material-system .notebook-shell .home-identity { margin-left: -23px; } } #workshop.material-system .notebook-shell .household-identity .identity-house { top: -12px; left: 5px; } #workshop .notebook-shell .identity-caption { text-align: center; } #workshop.material-system .chapter-tab { outline-offset: 2px; } #workshop.material-system .notebook-shell .home-identity { text-align: left !important; } #workshop.material-system .wins-banner .win-total strong { font-family: PacketDigits, monospace; } @media (max-width: 650px) { #workshop.material-system .wins-banner { grid-template-columns: 1fr 1fr; gap: 15px; } #workshop.material-system .wins-banner > div:first-of-type { grid-column: 1 / -1; } #workshop.material-system .wins-banner .win-total { padding: 8px 0px; } #workshop.material-system .wins-banner .win-total strong { font-size: 30px; } } #workshop.material-system[data-view="Decisions"] { --tone: #406592; --chapter-tone: #406592; } #workshop.material-system[data-view="Decisions"] .collection-card { --tone: #406592; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(109, 158, 191, 0.043) 31px, rgba(109, 158, 191, 0.043) 32px), rgb(247, 249, 249); border-width: 1px 1px 1px 0px; border-style: solid solid solid none; border-color: rgb(194, 206, 215) rgb(194, 206, 215) rgb(194, 206, 215) currentcolor; border-image: none; border-radius: 3px; gap: 12px; padding: 20px 20px 20px 29px; position: relative; } #workshop.material-system[data-view="Decisions"] .collection-card:nth-child(3n+2) { --tone: #517893; } #workshop.material-system[data-view="Decisions"] .collection-card:nth-child(3n) { --tone: #38617b; } #workshop.material-system[data-view="Decisions"] .collection-card::before { content: ""; background: repeating-linear-gradient(rgb(173, 197, 216) 0px, rgb(173, 197, 216) 24px, rgb(250, 250, 245) 24px, rgb(250, 250, 245) 26px, rgb(53, 85, 116) 26px, rgb(53, 85, 116) 70px, rgb(250, 250, 245) 70px, rgb(250, 250, 245) 72px, rgb(102, 142, 175) 72px, rgb(102, 142, 175) 94px, rgb(250, 250, 245) 94px, rgb(250, 250, 245) 96px, rgb(173, 197, 216) 96px, rgb(173, 197, 216) 134px, rgb(250, 250, 245) 134px, rgb(250, 250, 245) 136px, rgb(53, 85, 116) 136px, rgb(53, 85, 116) 158px, rgb(250, 250, 245) 158px, rgb(250, 250, 245) 160px, rgb(102, 142, 175) 160px, rgb(102, 142, 175) 208px, rgb(250, 250, 245) 208px, rgb(250, 250, 245) 210px); border-radius: 3px 0px 0px 3px; width: 8px; position: absolute; inset: 0px auto 0px 0px; } #workshop.material-system[data-view="Decisions"] .collection-card h3 { color: var(--tone); font: 800 17px / 1.65 Avenir; } #workshop.material-system[data-view="Decisions"] .collection-card h3::before { display: none; } #workshop.material-system[data-view="Decisions"] .collection-card p { margin: 0px; font-size: 14px; line-height: 1.7; } #workshop.material-system .home-decisions { --accent: #406592 !important; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(109, 158, 191, 0.043) 31px, rgba(109, 158, 191, 0.043) 32px), rgb(247, 249, 249) !important; border-left-color: rgb(102, 142, 175) !important; } #workshop.material-system .notebook-shell .masthead { flex-direction: column; align-items: center; gap: 0px; display: flex; } #workshop.material-system .notebook-shell .home-identity { width: 100%; max-width: 100%; text-align: center !important; margin: -24px 0px 0px !important; } #workshop.material-system .notebook-shell .identity-strip { vertical-align: middle; align-items: center; gap: 6px; max-width: none; display: inline-flex; overflow: visible; padding: 10px 13px 13px !important; font-size: 34px !important; } #workshop.material-system .notebook-shell .identity-house { flex: 0 0 39px; display: inline-block; transform: rotate(-9deg); margin: 0px 3px 0px 0px !important; font-size: 39px !important; position: relative !important; top: auto !important; left: auto !important; } #workshop .identity-initials { align-items: center; gap: 0px; display: inline-flex; } #workshop .identity-refresh { align-self: stretch; margin-left: 4px; display: inline-flex; } #workshop .identity-star { cursor: pointer; background: 0px 0px; border: 0px; justify-content: center; align-items: center; width: 42px; min-height: 44px; padding: 0px; display: flex; position: relative; overflow: visible; } #workshop .identity-star > .foam { font-size: 30px; position: relative; transform: rotate(8deg); margin: 0px !important; } #workshop .identity-star .star-tap { color: rgb(117, 100, 75); white-space: nowrap; text-shadow: none; font: 8px / 1.4 Chalk; position: absolute; bottom: -9px; right: -2px; } #workshop .identity-star:focus-visible { outline-offset: 2px; border-radius: 5px; outline: rgb(133, 139, 130) solid 2px; } #workshop.material-system .home-header-notes { text-align: center; display: block; margin: 5px 0px 0px !important; } #workshop.material-system .header-magic-note { white-space: nowrap; max-width: none; padding: 5px 12px; font: 11px / 1.5 Tape; } #workshop.material-system .notebook-shell.is-compact .identity-strip { padding: 6px 10px 10px !important; font-size: 27px !important; } #workshop .notebook-shell.is-compact .identity-house { flex-basis: 32px !important; font-size: 32px !important; } #workshop .notebook-shell.is-compact .identity-star > .foam { font-size: 27px; } #workshop .notebook-shell.is-compact .identity-caption { display: none; } #workshop.material-system .chapter-tab[data-expanded="true"] { flex: 0 0 126px; width: 126px; } #workshop.material-system .chapter-tab > .foam { font-size: 26px; top: 4px; } #workshop.material-system .category-shelf > button.chosen::after { display: none; } #workshop.material-system .category-shelf > button > .category-selection { z-index: 2; pointer-events: none; opacity: 0; width: 35px; height: 35px; transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.4), opacity 0.12s; position: absolute; top: 4px; right: 6px; transform: scale(0.4) rotate(-15deg); } #workshop .category-selection > .foam { margin: 0px !important; font-size: 34px !important; } #workshop.material-system .category-shelf > button.chosen > .category-selection { opacity: 1; transform: scale(1) rotate(8deg); } #workshop .category-triangle { border-top: 8px solid rgba(0, 0, 0, 0); border-bottom: 8px solid rgba(0, 0, 0, 0); width: 0px; height: 0px; display: block; } #workshop .category-triangle.left { border-right: 12px solid; } #workshop .category-triangle.right { border-left: 12px solid; } #workshop .category-pencil { stroke-width: 1.25px; stroke-linecap: round; height: 14px; } #workshop.material-system .task-category > summary { padding-bottom: 24px; } #workshop .household-postcard { background: var(--pc-ink) !important; border-color: rgb(114, 120, 113) !important; border-radius: 11px !important; } #workshop .household-postcard > .postcard-base { z-index: 0; border-radius: 6px; inset: 9px; } #workshop .household-postcard > .postcard-edge { z-index: -1; } #workshop .household-postcard > .postcard-base ~ :not(.postcard-edge):not(.pc-corner) { z-index: 1; position: relative; } #workshop .household-postcard > .pc-corner { z-index: -1; pointer-events: none; position: absolute; overflow: hidden; } #workshop .pc-corner::after { content: ""; background: var(--card); pointer-events: none; position: absolute; } #workshop .pc-corner-tl-h, #workshop .pc-corner-tl-v { background: var(--gold); border-top-left-radius: 9.5px; top: 0px; left: 0px; } #workshop .pc-corner-tr-h, #workshop .pc-corner-tr-v { background: var(--red); border-top-right-radius: 9.5px; top: 0px; right: 0px; } #workshop .pc-corner-br-h, #workshop .pc-corner-br-v { background: var(--gold); border-bottom-right-radius: 9.5px; bottom: 0px; right: 0px; } #workshop .pc-corner-bl-h, #workshop .pc-corner-bl-v { background: var(--teal); border-bottom-left-radius: 9.5px; bottom: 0px; left: 0px; } #workshop .pc-corner-tl-h, #workshop .pc-corner-br-h { width: 18px; height: 13px; } #workshop .pc-corner-tr-h, #workshop .pc-corner-bl-h { width: 22px; height: 13px; } #workshop .pc-corner-tl-v { width: 13px; height: 20px; } #workshop .pc-corner-tr-v, #workshop .pc-corner-bl-v { width: 13px; height: 18px; } #workshop .pc-corner-br-v { width: 13px; height: 22px; } #workshop .pc-corner-tl-h::after, #workshop .pc-corner-bl-h::after { width: 2px; top: 0px; bottom: 0px; right: 0px; } #workshop .pc-corner-tr-h::after, #workshop .pc-corner-br-h::after { width: 2px; top: 0px; bottom: 0px; left: 0px; } #workshop .pc-corner-tl-v::after, #workshop .pc-corner-tr-v::after { height: 2px; bottom: 0px; left: 0px; right: 0px; } #workshop .pc-corner-br-v::after, #workshop .pc-corner-bl-v::after { height: 2px; top: 0px; left: 0px; right: 0px; } @media (max-width: 650px) { #workshop.material-system .notebook-shell .identity-strip { gap: 4px; padding: 8px 8px 12px !important; font-size: 26px !important; } #workshop.material-system .notebook-shell .identity-house { flex-basis: 33px; margin-right: 0px !important; font-size: 33px !important; } #workshop .identity-star { width: 33px; } #workshop .identity-star > .foam { font-size: 27px; } #workshop.material-system .header-magic-note { white-space: nowrap; max-width: none; font-size: 10px; } #workshop.material-system .chapter-tab[data-expanded="true"] { flex-basis: 99px; width: 99px; } #workshop.material-system .chapter-tab > .foam, #workshop.material-system .chapter-tab[data-expanded="true"] > .foam { font-size: 23px; top: 3px; } #workshop.material-system .notebook-shell.is-compact .identity-strip { font-size: 23px !important; } #workshop .notebook-shell.is-compact .identity-house { flex-basis: 29px !important; font-size: 29px !important; } #workshop .notebook-shell.is-compact .identity-star > .foam { font-size: 24px; } } @media (max-width: 350px) { #workshop.material-system .notebook-shell .identity-strip { gap: 3px; font-size: 23px !important; } #workshop.material-system .notebook-shell .identity-house { flex-basis: 29px; font-size: 29px !important; } #workshop .identity-star { width: 29px; } #workshop .identity-star > .foam { font-size: 25px; } #workshop.material-system .notebook-shell.is-compact .identity-strip { font-size: 21px !important; } #workshop.material-system .chapter-tab[data-expanded="true"] { flex-basis: 92px; width: 92px; } } @media (prefers-reduced-motion: reduce) { #workshop.material-system .category-shelf > button > .category-selection { transition: none; } } #workshop.material-system .category-shelf > button > .category-selection { top: 3px; right: 5px; width: 35px !important; } #workshop.material-system .category-shelf > button > .category-selection > .foam { width: 1em; font-size: 32px !important; } #workshop .wins-banner.household-postcard > .edge-t { background: repeating-linear-gradient(90deg, #e98817 0px 44px, var(--pc-sep) 44px 46px, #e2c90f 46px 72px, var(--pc-sep) 72px 74px, #88c339 74px 112px, var(--pc-sep) 112px 114px, #509da7 114px 134px, var(--pc-sep) 134px 136px, #4788dd 136px 186px, var(--pc-sep) 186px 188px, #4080b0 188px 218px, var(--pc-sep) 218px 220px, #e98817 220px 240px, var(--pc-sep) 240px 242px, #e2c90f 242px 276px, var(--pc-sep) 276px 278px, #88c339 278px 294px, var(--pc-sep) 294px 296px, #509da7 296px 338px, var(--pc-sep) 338px 340px, #4788dd 340px 362px, var(--pc-sep) 362px 364px, #4080b0 364px 392px, var(--pc-sep) 392px 394px, #e98817 394px 426px, var(--pc-sep) 426px 428px, #e2c90f 428px 446px, var(--pc-sep) 446px 448px, #88c339 448px 494px, var(--pc-sep) 494px 496px, #509da7 496px 520px, var(--pc-sep) 520px 522px, #4788dd 522px 558px, var(--pc-sep) 558px 560px, #4080b0 560px 600px, var(--pc-sep) 600px 602px); } #workshop .wins-banner.household-postcard > .edge-r { background: repeating-linear-gradient(180deg, #88c339 0px 44px, var(--pc-sep) 44px 46px, #509da7 46px 72px, var(--pc-sep) 72px 74px, #4788dd 74px 112px, var(--pc-sep) 112px 114px, #4080b0 114px 134px, var(--pc-sep) 134px 136px, #e98817 136px 186px, var(--pc-sep) 186px 188px, #e2c90f 188px 218px, var(--pc-sep) 218px 220px, #88c339 220px 240px, var(--pc-sep) 240px 242px, #509da7 242px 276px, var(--pc-sep) 276px 278px, #4788dd 278px 294px, var(--pc-sep) 294px 296px, #4080b0 296px 338px, var(--pc-sep) 338px 340px, #e98817 340px 362px, var(--pc-sep) 362px 364px, #e2c90f 364px 392px, var(--pc-sep) 392px 394px, #88c339 394px 426px, var(--pc-sep) 426px 428px, #509da7 428px 446px, var(--pc-sep) 446px 448px, #4788dd 448px 494px, var(--pc-sep) 494px 496px, #4080b0 496px 520px, var(--pc-sep) 520px 522px, #e98817 522px 558px, var(--pc-sep) 558px 560px, #e2c90f 560px 600px, var(--pc-sep) 600px 602px); } #workshop .wins-banner.household-postcard > .edge-b { background: repeating-linear-gradient(270deg, #509da7 0px 44px, var(--pc-sep) 44px 46px, #4788dd 46px 72px, var(--pc-sep) 72px 74px, #4080b0 74px 112px, var(--pc-sep) 112px 114px, #e98817 114px 134px, var(--pc-sep) 134px 136px, #e2c90f 136px 186px, var(--pc-sep) 186px 188px, #88c339 188px 218px, var(--pc-sep) 218px 220px, #509da7 220px 240px, var(--pc-sep) 240px 242px, #4788dd 242px 276px, var(--pc-sep) 276px 278px, #4080b0 278px 294px, var(--pc-sep) 294px 296px, #e98817 296px 338px, var(--pc-sep) 338px 340px, #e2c90f 340px 362px, var(--pc-sep) 362px 364px, #88c339 364px 392px, var(--pc-sep) 392px 394px, #509da7 394px 426px, var(--pc-sep) 426px 428px, #4788dd 428px 446px, var(--pc-sep) 446px 448px, #4080b0 448px 494px, var(--pc-sep) 494px 496px, #e98817 496px 520px, var(--pc-sep) 520px 522px, #e2c90f 522px 558px, var(--pc-sep) 558px 560px, #88c339 560px 600px, var(--pc-sep) 600px 602px); } #workshop .wins-banner.household-postcard > .edge-l { background: repeating-linear-gradient(180deg, #4080b0 0px 44px, var(--pc-sep) 44px 46px, #e98817 46px 72px, var(--pc-sep) 72px 74px, #e2c90f 74px 112px, var(--pc-sep) 112px 114px, #88c339 114px 134px, var(--pc-sep) 134px 136px, #509da7 136px 186px, var(--pc-sep) 186px 188px, #4788dd 188px 218px, var(--pc-sep) 218px 220px, #4080b0 220px 240px, var(--pc-sep) 240px 242px, #e98817 242px 276px, var(--pc-sep) 276px 278px, #e2c90f 278px 294px, var(--pc-sep) 294px 296px, #88c339 296px 338px, var(--pc-sep) 338px 340px, #509da7 340px 362px, var(--pc-sep) 362px 364px, #4788dd 364px 392px, var(--pc-sep) 392px 394px, #4080b0 394px 426px, var(--pc-sep) 426px 428px, #e98817 428px 446px, var(--pc-sep) 446px 448px, #e2c90f 448px 494px, var(--pc-sep) 494px 496px, #88c339 496px 520px, var(--pc-sep) 520px 522px, #509da7 522px 558px, var(--pc-sep) 558px 560px, #4788dd 560px 600px, var(--pc-sep) 600px 602px); } #workshop .wins-banner.household-postcard { --pc-sep: #fafaf5; --pc-ink: #509da7; --red: #e98817; --teal: #4788dd; --gold: #88c339; } #workshop.material-system .wins-banner .tally-postit { color: rgb(64, 101, 146); background: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0) 20%), rgb(221, 233, 248); justify-content: center; align-self: stretch; gap: 8px; min-height: 156px; padding: 20px 10px 15px; transform: rotate(-2deg); box-shadow: rgba(54, 58, 59, 0.19) 1px 5px 7px; } #workshop.material-system .wins-banner .tally-postit:last-child { color: rgb(139, 105, 30); background: linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0) 20%), rgb(251, 239, 183); transform: rotate(2deg); } #workshop .tally-postit > span:last-child { font: 12px / 1.6 Chalk; } #workshop.material-system .tally-postit strong { color: inherit; font-size: 36px; } #workshop .tally-postit > .foam { font-size: 31px; } #workshop.material-system .wins-banner { gap: 22px; } #workshop.material-system .wins-banner h3 { font-size: 16px; } #workshop.material-system .wins-banner p { margin-bottom: 8px; } #workshop .entry-card.household-postcard, #workshop .notebook-loading-card.household-postcard { --red: #b53535; --teal: #307878; --gold: #c49538; --pc-ink: #307878; --card: #fafaf5; } #workshop .entry-card.household-postcard { padding: 10px !important; } #workshop .entry-card.household-postcard > .entry-paper { background: rgb(250, 250, 245); border-radius: 6px; } #workshop .entry-card.material-system .identity-strip, #workshop .notebook-loading-card.material-system .identity-strip { align-items: center; gap: 4px; display: inline-flex; } #workshop .entry-card.material-system .identity-house, #workshop .notebook-loading-card.material-system .identity-house { flex: 0 0 31px; font-size: 31px; transform: rotate(-9deg); margin-right: 4px !important; position: relative !important; top: auto !important; left: auto !important; } @media (max-width: 650px) { #workshop.material-system .wins-banner { gap: 17px; } #workshop.material-system .wins-banner .tally-postit { min-height: 156px; padding: 17px 8px; } #workshop .entry-card.material-system .identity-strip, #workshop .notebook-loading-card.material-system .identity-strip { padding: 7px 8px 9px !important; font-size: 23px !important; } } @media (max-width: 350px) { #workshop .entry-card.material-system .identity-strip, #workshop .notebook-loading-card.material-system .identity-strip { font-size: 20px !important; } #workshop .entry-card.material-system .identity-house, #workshop .notebook-loading-card.material-system .identity-house { flex-basis: 27px; font-size: 27px; } } #workshop.material-system #content, #workshop.material-system > .play-packet { z-index: 0; isolation: isolate; position: relative; } #workshop.material-system .notebook-shell .home-identity { margin-top: -34px !important; } #workshop .identity-refresh { margin-left: 5px; margin-right: -17px; } #workshop .identity-star { transform: translate(4px, -10px); } #workshop .identity-star .star-tap { font-size: 8px; bottom: -19px; right: -11px; } #workshop .notebook-shell .identity-strip { margin-right: 8px; } #workshop .notebook-shell.is-compact .identity-star { transform: translate(4px, -6px); } @media (max-width: 650px) { #workshop.material-system .notebook-shell .home-identity { margin-top: -31px !important; } #workshop.material-system .notebook-shell.is-compact .home-identity { margin-top: -9px !important; } #workshop .identity-refresh { margin-left: 3px; margin-right: -12px; } #workshop .identity-star .star-tap { bottom: -19px; right: -7px; } #workshop .notebook-shell .identity-strip { margin-right: 7px; } } #workshop.material-system .category-selection > img { object-fit: contain; width: 54px; max-width: none; height: 54px; box-shadow: none; pointer-events: none; background: 0px 0px; border: 0px; border-radius: 0px; position: absolute; top: -9px; left: -9px; } #workshop.material-system .notebook-shell .identity-strip, #workshop.material-system .notebook-shell.is-compact .identity-strip { gap: 4px; margin-right: 0px; position: relative; padding: 4px 14px 5px 23px !important; } #workshop.material-system .notebook-shell .household-identity .identity-house, #workshop.material-system .notebook-shell.is-compact .household-identity .identity-house { flex: 0 0 auto; width: 43px; height: 43px; transform: translateY(-50%) rotate(-9deg); margin: 0px !important; font-size: 43px !important; position: absolute !important; top: 50% !important; left: -23px !important; } #workshop .notebook-shell .identity-refresh { width: 42px; height: 42px; margin: 0px; position: absolute; top: 50%; right: -24px; transform: translateY(-50%); } #workshop .notebook-shell .identity-star, #workshop .notebook-shell.is-compact .identity-star { width: 42px; height: 42px; min-height: 42px; transform: none; } #workshop .notebook-shell .identity-star > .foam, #workshop .notebook-shell.is-compact .identity-star > .foam { font-size: 36px; } @media (max-width: 650px) { #workshop.material-system .notebook-shell .identity-strip, #workshop.material-system .notebook-shell.is-compact .identity-strip { gap: 3px; padding: 3px 13px 4px 20px !important; } #workshop.material-system .notebook-shell .household-identity .identity-house, #workshop.material-system .notebook-shell.is-compact .household-identity .identity-house { width: 38px; height: 38px; font-size: 38px !important; left: -21px !important; } #workshop .notebook-shell .identity-refresh { width: 38px; height: 38px; right: -22px; } #workshop .notebook-shell .identity-star, #workshop .notebook-shell.is-compact .identity-star { width: 38px; height: 38px; min-height: 38px; } #workshop .notebook-shell .identity-star > .foam, #workshop .notebook-shell.is-compact .identity-star > .foam { font-size: 33px; } #workshop .notebook-shell .identity-star .star-tap { bottom: -10px; right: -18px; } } #workshop.material-system .chapter-tab-rail { margin-top: 8px; } #workshop.material-system .chapter-caption { font-size: 16px; bottom: 7px; } #workshop.material-system .chapter-tab:not([data-expanded="true"]) > .foam { font-size: 34px; top: 12px; } #workshop.material-system .chapter-tab[data-expanded="true"] > .foam { font-size: 25px; top: 0px; } #workshop.material-system .chapter-tab[data-expanded="true"] { flex-basis: 135px; width: 135px; } @media (max-width: 650px) { #workshop.material-system .chapter-tab-rail { margin-top: 8px; } #workshop.material-system .chapter-caption { font-size: 14px; bottom: 7px; } #workshop.material-system .chapter-tab:not([data-expanded="true"]) > .foam { font-size: 32px; top: 10px; } #workshop.material-system .chapter-tab[data-expanded="true"] > .foam { font-size: 23px; top: 0px; } #workshop.material-system .chapter-tab[data-expanded="true"] { flex-basis: 109px; width: 109px; } } @media (max-width: 350px) { #workshop.material-system .chapter-caption { font-size: 13px; } #workshop.material-system .chapter-tab:not([data-expanded="true"]) > .foam { font-size: 29px; top: 11px; } #workshop.material-system .chapter-tab[data-expanded="true"] { flex-basis: 101px; width: 101px; } } #workshop.material-system .category-shelf > button[style] { background: linear-gradient(135deg,var(--note-paper),var(--note-paper)); } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system .category-shelf > button[style] { background: linear-gradient(135deg,color-mix(in srgb,var(--note-paper) 82%,white),var(--note-paper)); } } #workshop.material-system .category-shelf > button[style], #workshop.material-system .category-shelf > button[style] > b { color: var(--tone); } #workshop.material-system[data-view="More"] { --tone: #505753; --chapter-tone: #505753; } #workshop.material-system .identity-strip > .identity-magic { margin-left: 8px; } #workshop.material-system .notebook-shell .identity-strip, #workshop.material-system .notebook-shell.is-compact .identity-strip { padding-left: 28px !important; padding-right: 23px !important; } #workshop.material-system .notebook-shell .household-identity .identity-house, #workshop.material-system .notebook-shell.is-compact .household-identity .identity-house { left: -27px !important; } #workshop .notebook-shell .identity-refresh { right: -29px; } #workshop .notebook-shell .identity-star .star-tap { color: rgb(104, 108, 105); bottom: -10px; right: -21px; } #workshop.material-system .notebook-shell.is-compact .home-identity { margin-top: -26px !important; } @media (max-width: 650px) { #workshop.material-system .identity-strip > .identity-magic { margin-left: 5px; } #workshop.material-system .notebook-shell .identity-strip, #workshop.material-system .notebook-shell.is-compact .identity-strip { padding-left: 24px !important; padding-right: 20px !important; } #workshop.material-system .notebook-shell .household-identity .identity-house, #workshop.material-system .notebook-shell.is-compact .household-identity .identity-house { left: -24px !important; } #workshop .notebook-shell .identity-refresh { right: -26px; } #workshop.material-system .notebook-shell.is-compact .home-identity { margin-top: -24px !important; } #workshop .notebook-shell .identity-star .star-tap { right: -17px; } } #workshop .personal-note-trigger { color: rgb(133, 104, 44); cursor: pointer; background: 0px 0px; border: 0px; align-items: center; gap: 12px; min-height: 48px; padding: 6px 4px; font: 15px / 1.7 Chalk; display: inline-flex; position: relative; } #workshop .personal-note-stickers { width: 54px; display: inline-flex; position: relative; } #workshop .personal-note-stickers > .foam:first-child { font-size: 34px; transform: rotate(-9deg); } #workshop .personal-note-stickers > .foam:last-child { font-size: 21px; position: absolute; top: -7px; right: 0px; transform: rotate(9deg); } #workshop .personal-note-trigger > svg { stroke: rgb(133, 104, 44); stroke-width: 1.5px; fill: none; stroke-linecap: round; stroke-linejoin: round; width: 34px; height: 22px; } #workshop .deesil-postit { color: rgb(105, 84, 36); max-height: calc(-50px + 100dvh); overflow: auto; z-index: 60 !important; background: linear-gradient(rgba(207, 168, 70, 0.082), rgba(0, 0, 0, 0) 35px), rgb(255, 241, 191) !important; border: 0px !important; border-radius: 0px !important; width: 370px !important; max-width: calc(-32px + 100vw) !important; padding: 24px 23px 18px !important; box-shadow: rgba(52, 59, 52, 0.22) 3px 7px 12px !important; } #workshop .deesil-note-title { align-items: center; gap: 8px; margin-bottom: 12px; padding-right: 18px; display: flex; } #workshop .deesil-note-title > .foam { font-size: 29px; transform: rotate(-8deg); } #workshop .deesil-note-title h3 { color: rgb(135, 99, 35); margin: 0px; font: 16px / 1.6 Chalk; } #workshop .deesil-note-copy { white-space: pre-wrap; margin: 0px !important; font: 15px / 1.9 Chalk !important; } #workshop .deesil-note-signature { color: rgb(148, 111, 36); justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; font: 19px / 1.8 Chalk; display: flex; } #workshop .deesil-note-signature > .foam { font-size: 27px; transform: rotate(10deg); } #workshop .note-close { z-index: 2; color: rgb(107, 101, 86); cursor: pointer; background: 0px 0px; border: 0px; width: 44px; height: 44px; font: 25px Chalk; position: absolute; top: 1px; right: 3px; } #workshop.material-system .home-visits .empty { color: rgb(132, 99, 41); font: 15px / 1.9 Chalk; } #workshop.material-system .home-plan-visit { margin: 12px 0px 3px 13px; position: relative; padding-left: 22px !important; } #workshop.material-system .paper.home-decisions { --tone: #406592; padding-left: 28px; position: relative; --accent: #406592 !important; border-left: 0px !important; } #workshop.material-system .home-decisions::before { content: ""; background: repeating-linear-gradient(rgb(173, 197, 216) 0px, rgb(173, 197, 216) 24px, rgb(250, 250, 245) 24px, rgb(250, 250, 245) 26px, rgb(53, 85, 116) 26px, rgb(53, 85, 116) 70px, rgb(250, 250, 245) 70px, rgb(250, 250, 245) 72px, rgb(102, 142, 175) 72px, rgb(102, 142, 175) 94px, rgb(250, 250, 245) 94px, rgb(250, 250, 245) 96px, rgb(173, 197, 216) 96px, rgb(173, 197, 216) 134px, rgb(250, 250, 245) 134px, rgb(250, 250, 245) 136px, rgb(53, 85, 116) 136px, rgb(53, 85, 116) 158px, rgb(250, 250, 245) 158px, rgb(250, 250, 245) 160px, rgb(102, 142, 175) 160px, rgb(102, 142, 175) 208px, rgb(250, 250, 245) 208px, rgb(250, 250, 245) 210px); width: 9px; position: absolute; top: 0px; bottom: 0px; left: 0px; } #workshop.material-system .home-decisions .taskrow { color: rgb(54, 92, 126); } #workshop.material-system .home-progress.household-postcard { --tone: #66835a; } #workshop.material-system .home-progress .taskrow { color: rgb(72, 98, 62); } #workshop.material-system .home-progress .taskrow small { color: rgb(96, 116, 85); } #workshop.material-system .home-next .empty { color: rgb(66, 109, 104); font: 15px / 1.8 Avenir; } #workshop.material-system .home-next .text-button { color: rgb(48, 120, 120); } #workshop.material-system .home-decisions .text-button { color: rgb(64, 101, 146); } #workshop.material-system .home-progress .text-button { color: rgb(82, 110, 70); } #workshop.material-system #content > .chapter-intro > p { color: var(--chapter-tone,var(--tone,#307878)); } @supports (color:color-mix(in lab, red, red)) { #workshop.material-system #content > .chapter-intro > p { color: color-mix(in srgb,var(--chapter-tone,var(--tone,#307878)) 72%,#343c39); } } @media (max-width: 350px) { #workshop .personal-note-trigger { gap: 8px; font-size: 13px; } #workshop .deesil-postit { padding: 24px 18px 18px !important; } #workshop .deesil-note-copy { font-size: 14px !important; } } #workshop .deesil-postit { overscroll-behavior: contain; max-height: min(70dvh,var(--radix-popover-content-available-height,70dvh)) !important; } #workshop .deesil-postit .note-close { float: right; background: rgb(255, 241, 191); margin: -20px -17px -24px 0px; position: sticky; top: -20px; right: auto; } #workshop.material-system .foam, #workshop .deesil-postit .foam { rotate: var(--sticker-tilt,-3deg); } #workshop.material-system .chapter-tab[data-expanded="true"] > .foam { top: 5px; } #workshop.material-system .abundance-overview > div { text-align: center; color: rgb(82, 109, 67); background: rgb(237, 243, 223); border: 0px; flex-direction: column; justify-content: center; align-items: center; gap: 9px; min-height: 176px; padding: 25px 16px 18px; display: flex; position: relative; } #workshop.material-system .abundance-overview > div:nth-child(2) { color: rgb(130, 96, 32); background: rgb(255, 240, 200); } #workshop.material-system .abundance-overview > div:nth-child(3) { color: rgb(116, 71, 125); background: rgb(240, 229, 243); } #workshop.material-system .abundance-overview .foam { font-size: 32px; position: absolute; top: -13px; left: 12px; } #workshop.material-system .abundance-overview small { color: inherit; font: 16px / 1.7 Chalk; } #workshop.material-system .abundance-overview strong { color: inherit; overflow-wrap: anywhere; max-width: 100%; font: 34px / 1.3 PacketDigits !important; } #workshop.material-system .abundance-overview span:last-child { color: inherit; max-width: 260px; font: 12px / 1.7 Chalk; } #workshop.material-system .abundance-overview { gap: 25px; margin-top: 36px; } @media (max-width: 650px) { #workshop.material-system .abundance-overview > div { min-height: 150px; padding: 23px 16px 16px; } #workshop.material-system .abundance-overview strong { font-size: 32px !important; } #workshop.material-system .chapter-tab[data-expanded="true"] > .foam { top: 5px; } } #workshop .packet-toggle .buddy-identity, #workshop .packet-heading .buddy-identity { color: rgb(48, 120, 120); display: inline; } #workshop .buddy-initials { white-space: nowrap; } #workshop .buddy-initials > i { color: rgb(117, 121, 116); padding: 0px 2px; font-style: normal; } #workshop .buddy-identity .buddy-role { color: rgb(48, 120, 120); } #workshop .workshop-words, #workshop .workshop-separator { color: rgb(107, 112, 107); } #workshop .workshop-words > span { white-space: nowrap; } #workshop .packet-toggle > span > strong { line-height: 1.8; } #workshop .home-decisions .taskrow strong { font-weight: 700; line-height: 1.7; } #workshop.material-system .site-footer .notebook-lock { text-transform: uppercase; border-radius: 2px; justify-content: center; align-items: center; max-width: 100%; min-height: 48px; margin: 12px 10px 4px 20px; display: inline-flex; position: relative; color: rgb(255, 255, 255) !important; background: rgb(115, 122, 117) !important; border-width: 2px !important; border-style: solid !important; border-image: none !important; border-color: rgb(203, 208, 201) rgb(82, 91, 85) rgb(82, 91, 85) rgb(203, 208, 201) !important; padding: 9px 19px 9px 23px !important; font: 13px / 1.6 PacketDigits !important; box-shadow: rgb(64, 73, 67) 0px 3px !important; } #workshop .task-filter-button > .foam { font-size: 24px; position: absolute; top: -9px; left: -13px; margin: 0px !important; } #workshop.material-system .task-filter-button { margin-left: 10px; position: relative; color: rgb(255, 255, 255) !important; background: rgb(92, 115, 144) !important; border-color: rgb(176, 189, 202) rgb(61, 86, 114) rgb(61, 86, 114) !important; padding-left: 22px !important; } #workshop .task-search-toolbar { grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 24px; display: grid; } #workshop .task-search-toolbar > .field { min-width: 0px; margin: 0px !important; } #workshop .task-search-toolbar > .field > span { color: rgb(64, 101, 146); font: 16px / 1.7 Chalk; } #workshop .task-search-toolbar input { background: rgb(255, 253, 245); min-height: 46px; font-size: 16px !important; } #workshop .task-search-toolbar .field > small { color: rgb(100, 114, 108); font: 12px / 1.6 Avenir; } #workshop .category-arrow-tools { border-left: 0px; flex-direction: column; align-items: center; gap: 4px; padding-left: 24px; display: flex; position: relative; } #workshop .category-arrow-tools::before { content: ""; clip-path: polygon(40% 0px, 80% 12%, 45% 32%, 90% 57%, 50% 76%, 75% 100%, 5% 100%, 20% 74%, 0px 55%, 15% 35%, 0px 14%); background: rgb(161, 167, 151); width: 3px; position: absolute; top: 8px; bottom: 8px; left: 0px; } #workshop .category-arrow-tools > span { color: rgb(107, 116, 108); font: 13px / 1.6 Chalk; } #workshop .category-arrow-tools > div { gap: 9px; display: flex; } #workshop .category-arrow-tools > small { color: rgb(107, 116, 108); font: 10px / 1.5 Chalk; } #workshop .task-category-focus { color: rgb(88, 101, 88); align-items: center; gap: 4px; font: 12px Chalk; display: inline-flex; } #workshop .task-category-focus button { min-width: 32px; min-height: 36px; color: inherit; background: 0px 0px; border: 0px; font: 20px Avenir; } #workshop .active-task-filters { flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0px; display: flex; } #workshop .active-task-filters > span { color: rgb(100, 112, 120); font: 12px Chalk; } #workshop .active-task-filters > button { color: rgb(64, 101, 146); background: rgb(237, 243, 246); border: 1px solid rgb(174, 192, 208); border-radius: 3px; min-height: 36px; padding: 6px 10px; font: 12px / 1.5 Avenir; } @keyframes task-results-appear { 0% { opacity: 0.65; } 100% { opacity: 1; } } #workshop .task-filter-dialog.material-system { --tone: #406592; max-height: calc(-40px + 100dvh); overflow-y: auto; gap: 14px !important; width: min(540px, -32px + 100vw) !important; max-width: 540px !important; padding: 26px 24px !important; } #workshop .task-filter-dialog [data-slot="dialog-close"] { z-index: 4 !important; } #workshop .task-filter-dialog [data-slot="dialog-description"] { color: rgb(88, 107, 123); font: 14px / 1.7 Avenir; } #workshop .task-filter-fields { grid-template-columns: 1fr 1fr; gap: 12px; display: grid; } #workshop .task-filter-fields .field { margin: 0px; } #workshop .task-filter-fields .field > span { color: rgb(64, 101, 146); font: 13px / 1.7 Chalk; } #workshop .task-filter-fields .pick { min-height: 44px; } #workshop .filter-dialog-actions > .text-button { margin-right: auto; } @media (max-width: 650px) { #workshop .task-search-toolbar { gap: 12px; } #workshop .category-arrow-tools { padding-left: 13px; } #workshop .category-arrow-tools > div { gap: 6px; } #workshop .category-arrow-tools > small { text-align: center; max-width: 100px; font: 10px / 1.6 Avenir; } #workshop .task-search-toolbar > .field > span { font-size: 14px; } #workshop .task-filter-dialog.material-system { padding: 25px 19px !important; } #workshop .task-filter-fields { grid-template-columns: 1fr; } #workshop .filter-dialog-actions > .text-button { text-align: left; flex-basis: 100%; } } #workshop .personal-note-trigger { gap: 9px; } #workshop .personal-note-rainbow { white-space: pre; font-size: 16px; } #workshop .personal-note-trigger > svg { stroke: rgb(119, 123, 118); flex-shrink: 0; width: 30px; } #workshop .personal-note-stickers { flex-shrink: 0; align-items: center; width: 66px; height: 56px; } #workshop .personal-note-stickers > .foam:first-child { font-size: 46px; } #workshop .personal-note-stickers > .foam:last-child { font-size: 27px; top: -2px; right: -1px; } #workshop .deesil-postit { padding: 28px 26px 23px !important; } #workshop .deesil-note-copy > p { white-space: pre-wrap; font: 15px / 2 Chalk; margin: 0px 0px 21px !important; } #workshop .deesil-note-copy > p:last-child { margin-bottom: 0px !important; } #workshop .deesil-note-title { margin-bottom: 20px; } #workshop .deesil-note-title > .foam { font-size: 34px; } #workshop .deesil-note-signature { margin-top: 23px; } #workshop .deesil-postit .note-close { margin-top: -24px; top: -24px; } @media (max-width: 350px) { #workshop .personal-note-rainbow { font-size: 14px; } #workshop .personal-note-trigger { gap: 5px; } #workshop .personal-note-stickers { width: 60px; } #workshop .personal-note-stickers > .foam:first-child { font-size: 43px; } #workshop .personal-note-trigger > svg { width: 25px; } #workshop .deesil-postit { padding: 27px 22px 22px !important; } #workshop .deesil-note-copy > p { font-size: 14px; line-height: 2; } } #workshop .task-filter-dialog [data-slot="dialog-close"] { top: 8px; right: 8px; position: absolute !important; } #workshop .home-feature .button.primary { position: relative; background: var(--tone) !important; border-color: var(--tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .home-feature .button.primary { border-color: color-mix(in srgb,var(--tone) 75%,#333) !important; } } #workshop .home-feature .button.primary { border-top-color: var(--tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .home-feature .button.primary { border-top-color: color-mix(in srgb,var(--tone) 40%,white) !important; } } #workshop .home-feature .button.primary { min-height: 44px; margin-left: 9px; color: rgb(255, 255, 255) !important; padding-left: 22px !important; } #workshop .home-feature .button > .foam { font-size: 25px; position: absolute; top: -10px; left: -14px; margin: 0px !important; } #workshop .home-feature .text-button { color: var(--tone); text-align: left; min-height: 40px; font: 13px / 1.7 Chalk; } #workshop .home-ready-preview .taskrow { font-size: 14px; } #workshop .home-ready-preview .taskrow small { font-size: 12px; } #workshop .home-feature .pencil-divider { color: var(--tone); margin: 15px 0px; } #workshop .home-feature-decisions .taskrow { color: rgb(64, 101, 146); font-size: 14px; } @media (max-width: 760px) { #workshop .home-feature .button.primary { font-size: 12px; } } @media (max-width: 350px) { #workshop .home-feature .button.primary { font-size: 11px; } } #workshop .task-filter-dialog { animation: auto ease 0s 1 normal none running none !important; } #workshop .task-filter-dialog.material-system.household-postcard { translate: -50% -50%; z-index: 70 !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: none !important; } #workshop .request-stamp { flex-direction: column; align-items: center; gap: 4px; color: rgb(113, 116, 108) !important; padding: 8px 10px !important; font: 12px / 1.8 Chalk !important; display: flex !important; } #workshop .stamp-initials { white-space: nowrap; font-size: 15px; } #workshop .stamp-initials i { color: rgb(120, 125, 120); padding: 0px 2px; font-style: normal; } #workshop .stamp-care { align-items: center; gap: 4px; font-size: 10px; display: flex; } #workshop .stamp-care svg { stroke: rgb(181, 53, 53); fill: none; stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; width: 21px; height: 23px; transform: rotate(-8deg); } #workshop .rainbow-person { white-space: pre; font-family: Chalk; } #workshop .request-submit .rainbow-person { font-size: 16px; } #workshop .tracked-task-count { white-space: nowrap; color: rgb(99, 114, 104); background: rgb(237, 240, 232); align-items: center; gap: 7px; padding: 4px 8px; display: inline-flex; transform: rotate(-1deg); } #workshop .tracked-task-count > b { font: 22px / 1.2 PacketDigits !important; } #workshop .tracked-task-count > span { font: 11px / 1.6 Chalk !important; } #workshop .request-postcard .packet-kicker { color: rgb(64, 101, 146); } #workshop .request-postcard .packet-card-heading h3 { color: rgb(48, 120, 120); } #workshop.material-system .chapter-art { mask-image: linear-gradient(rgb(0, 0, 0) 0%, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); } #workshop.material-system .notebook-shell .home-identity, #workshop.material-system .notebook-shell.is-compact .home-identity { margin-top: -30px !important; } #workshop .notebook-shell .identity-caption, #workshop .notebook-shell.is-compact:not(.show-details) .identity-caption { max-height: calc(25px * (1 - var(--shell-fold,0))); opacity: calc(1 - var(--shell-fold,0)); transform: translateY(calc(-12px * var(--shell-fold,0))); margin: 0px; overflow: hidden; font: 12px / 1.7 Chalk !important; display: block !important; } #workshop.material-system .notebook-shell .home-header-notes { max-height: calc(43px * (1 - var(--shell-fold,0))); opacity: calc(1 - var(--shell-fold,0)); transform: translateY(calc(-20px * var(--shell-fold,0))); pointer-events: none; padding-top: 3px; overflow: hidden; margin: 0px !important; display: block !important; } #workshop.material-system .header-magic-note { padding: 4px 10px !important; font-size: 14px !important; line-height: 1.6 !important; } #workshop.material-system .notebook-shell .chapter-tab-rail { margin-top: calc(7px - 5px * var(--shell-fold,0)) !important; } #workshop .notebook-shell .identity-star .star-tap { font-size: 8px; bottom: 3px; right: -20px; } #workshop .personal-note-cue { justify-content: flex-end; margin: 22px 0px 27px; display: flex; } #workshop .personal-note-trigger { text-align: center; gap: 12px; margin-left: auto; transform: rotate(-3deg); } #workshop .personal-note-rainbow { white-space: pre; flex-direction: column; line-height: 1.65; display: flex; } #workshop .personal-note-trigger > svg { stroke-width: 2.4px; width: 33px; } #workshop .personal-note-stickers { margin-right: 4px; } #workshop.material-system .cheer-label { white-space: normal; display: inline-block; line-height: 1.7 !important; } #workshop .home-feature .button.primary { box-shadow: 0 3px 0 var(--tone) !important; padding-top: 9px !important; padding-bottom: 9px !important; line-height: 1.5 !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .home-feature .button.primary { box-shadow: 0 3px 0 color-mix(in srgb,var(--tone) 68%,#252525) !important; } } #workshop .home-feature-wins > .button { margin-bottom: 0px !important; } #workshop.material-system .category-arrow-tools .category-arrow { border-radius: 2px; min-width: 44px; min-height: 44px; color: rgb(255, 255, 255) !important; background: rgb(115, 123, 119) !important; border-width: 2px !important; border-style: solid !important; border-image: none !important; border-color: rgb(199, 207, 202) rgb(80, 91, 84) rgb(80, 91, 84) rgb(199, 207, 202) !important; padding: 10px !important; box-shadow: rgb(65, 75, 68) 0px 3px !important; } #workshop .category-arrow:disabled { opacity: 0.45; } #workshop.material-system .task-filter-button { margin-left: auto !important; margin-right: 12px !important; padding: 10px 21px 10px 13px !important; box-shadow: rgb(52, 73, 100) 0px 3px !important; } #workshop .task-filter-button > .foam { top: -9px; left: auto; right: -14px; } #workshop .record-topbar > button { align-items: center; gap: 8px; display: flex; } #workshop .record-topbar .category-triangle { width: 0px; height: 0px; } #workshop .editor-dialog .field > span { color: var(--form-tone); font: 15px / 1.7 Chalk; } #workshop .editor-dialog .field small { color: rgb(104, 117, 104); font: 13px / 1.7 Avenir; display: block; } #workshop .editor-dialog .button { min-height: 44px; font: 12px / 1.6 PacketDigits; background: var(--form-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .editor-dialog .button { background: color-mix(in srgb,var(--form-tone) 15%,#fff) !important; } } #workshop .editor-dialog .button { color: var(--form-tone) !important; border: 2px solid var(--form-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .editor-dialog .button { border: 2px solid color-mix(in srgb,var(--form-tone) 42%,#fff) !important; } } #workshop .editor-dialog .button { border-top-color: var(--form-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .editor-dialog .button { border-top-color: color-mix(in srgb,var(--form-tone) 15%,#fff) !important; } } #workshop .editor-dialog .button { box-shadow: 0 3px 0 var(--form-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .editor-dialog .button { box-shadow: 0 3px 0 color-mix(in srgb,var(--form-tone) 60%,#7b8578) !important; } } #workshop .editor-dialog .button { border-radius: 2px; padding: 9px 13px !important; } #workshop .editor-dialog .button.primary, #workshop .editor-dialog .button[aria-pressed="true"] { background: var(--form-tone) !important; color: rgb(255, 255, 255) !important; border-bottom-color: var(--form-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .editor-dialog .button.primary, #workshop .editor-dialog .button[aria-pressed="true"] { border-bottom-color: color-mix(in srgb,var(--form-tone),#222 30%) !important; } } #workshop .editor-dialog .button[aria-pressed="true"] { box-shadow: rgba(38, 58, 58, 0.2) 0px 2px 2px inset !important; } #workshop .button-choices { border: 0px; margin: 20px 0px; padding: 0px; } #workshop .button-choices > div { flex-wrap: wrap; gap: 9px; margin: 10px 0px 13px; display: flex; } #workshop .time-custom > .field { margin: 0px !important; } #workshop.material-system .calendar-purple .button, #workshop.material-system .calendar-purple .view-switch > button { border-radius: 2px; min-height: 44px; padding: 8px 11px; font-family: PacketDigits; color: rgb(116, 72, 129) !important; background: rgb(233, 221, 239) !important; border-width: 2px !important; border-style: solid !important; border-color: rgb(243, 232, 248) rgb(183, 160, 193) rgb(183, 160, 193) !important; border-image: none !important; box-shadow: rgb(143, 113, 156) 0px 3px !important; } #workshop.material-system .calendar-purple .button.primary, #workshop.material-system .calendar-purple .view-switch > button[aria-pressed="true"] { color: rgb(255, 255, 255) !important; background: rgb(128, 81, 138) !important; border-color: rgb(200, 167, 210) rgb(97, 60, 106) rgb(97, 60, 106) !important; box-shadow: rgb(83, 51, 91) 0px 3px !important; } #workshop.material-system .calendar-purple .week-grid > button[aria-pressed="true"], #workshop.material-system .calendar-purple .house-calendar [data-selected-single="true"] { color: rgb(255, 255, 255) !important; background: rgb(128, 81, 138) !important; } #workshop .calendar-purple .week-heading .button { width: 44px; height: 44px; } @media (max-width: 650px) { #workshop .notebook-shell .identity-caption { font-size: 10px !important; } #workshop.material-system .header-magic-note { font-size: 12px !important; } #workshop.material-system .notebook-shell .home-identity, #workshop.material-system .notebook-shell.is-compact .home-identity { margin-top: -26px !important; } #workshop .notebook-shell .identity-star .star-tap { font-size: 7px; bottom: 1px; right: -12px; } #workshop .editor-dialog .linked-task-finder .form-grid { grid-template-columns: 1fr; } #workshop .button-choices > div .button { flex: 1 1 auto; } #workshop .personal-note-cue { margin: 19px 0px 23px; } } @media (prefers-reduced-motion: reduce) { #workshop .notebook-shell :is(.identity-caption, .household-names, .home-header-notes) { transform: none !important; } } #workshop .provider-choices > .button { text-align: left; align-items: center; gap: 12px; margin-left: 16px; display: flex; position: relative; color: rgb(116, 72, 129) !important; background: rgb(238, 228, 243) !important; border-width: 2px !important; border-style: solid !important; border-color: rgb(255, 244, 255) rgb(183, 154, 195) rgb(183, 154, 195) !important; border-image: none !important; padding: 13px 18px !important; box-shadow: rgb(141, 113, 152) 0px 3px !important; } #workshop .provider-choices > .button[aria-pressed="true"] { background: rgb(216, 194, 227) !important; } #workshop .provider-choices > .button > .foam { font-size: 30px; position: absolute; top: -8px; left: -19px; } #workshop .provider-choices > .button > span:not(.foam) { padding-left: 10px; font: 14px / 1.7 PacketDigits; } #workshop .record-sheet .response-record { background: var(--tone); } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .response-record { background: color-mix(in srgb,var(--tone) 8%,#fffdf4); } } #workshop .record-sheet .response-record { border-bottom: 2px solid var(--tone); } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .response-record { border-bottom: 2px solid color-mix(in srgb,var(--tone) 35%,#fff); } } #workshop .record-sheet .response-record { margin: 12px 0px; padding: 12px; } #workshop .record-sheet .facts small { color: rgb(100, 117, 104); font: 13px / 1.7 Avenir; } #workshop .editor-dialog .editor-top-actions .text-button { min-height: 44px; color: var(--form-tone); font: 13px / 1.8 PacketDigits; } #workshop .notebook[data-view="Calendar"] #content > .chapter-intro .button { color: rgb(116, 72, 129) !important; background: rgb(233, 221, 239) !important; border-color: rgb(243, 232, 248) rgb(183, 160, 193) rgb(183, 160, 193) !important; box-shadow: rgb(143, 113, 156) 0px 3px !important; } #workshop .notebook[data-view="Calendar"] #content > .chapter-intro .button.primary { color: rgb(255, 255, 255) !important; background: rgb(128, 81, 138) !important; border-color: rgb(200, 167, 210) rgb(97, 60, 106) rgb(97, 60, 106) !important; box-shadow: rgb(83, 51, 91) 0px 3px !important; } #workshop .notebook[data-view="Daily Progress"] .heading .button { background: rgb(80, 123, 100) !important; box-shadow: rgb(55, 88, 63) 0px 3px !important; } #workshop [data-slot="dialog-content"].popup-postcard.material-system.household-postcard { isolation: isolate; translate: -50% -50%; z-index: 70 !important; background: rgb(251, 247, 235) !important; border: 0px !important; border-radius: 8px !important; max-height: calc(-28px + 100dvh) !important; padding: 27px !important; animation: auto ease 0s 1 normal none running none !important; display: block !important; position: fixed !important; top: 50% !important; left: 50% !important; overflow: auto !important; transform: none !important; } #workshop .popup-postcard > .postcard-base, #workshop .popup-postcard > .postcard-edge, #workshop .popup-postcard > .pc-corner { pointer-events: none !important; } #workshop .popup-postcard > .postcard-base { z-index: -1 !important; } #workshop .popup-postcard > :not(.postcard-base):not(.postcard-edge):not(.pc-corner):not(.popup-close) { z-index: 1; position: relative; } #workshop .popup-postcard.editor-dialog { --tone: var(--form-tone,#406592); } #workshop .popup-postcard.calendar-sync-dialog { --tone: #7a4380; } #workshop .popup-postcard.refresh-postit { --tone: #8a916f; } #workshop .popup-postcard .popup-close, #workshop .popup-task-sheet .popup-close { float: right; cursor: pointer; isolation: isolate; border-radius: 50%; justify-content: center; align-items: center; min-width: 48px; min-height: 48px; display: flex; z-index: 15 !important; background: rgb(250, 246, 235) !important; border: 0px !important; width: 48px !important; height: 48px !important; margin: -15px -15px -32px 4px !important; padding: 6px !important; position: sticky !important; top: -17px !important; right: auto !important; box-shadow: rgba(57, 72, 59, 0.133) 0px 2px 6px !important; } #workshop .popup-close:focus-visible { outline: 2px solid var(--tone,#507b64); outline-offset: 2px; } #workshop .popup-postcard [data-slot="dialog-title"] { margin: 0px 0px 12px; padding-right: 38px; } #workshop .popup-postcard [data-slot="dialog-description"] { margin-bottom: 20px; } #workshop .popup-postcard .button { box-shadow: 0 3px 0 var(--tone,#507b64) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .popup-postcard .button { box-shadow: 0 3px 0 color-mix(in srgb,var(--tone,#507b64) 70%,#303a32) !important; } } #workshop .popup-postcard .button.primary { background: var(--tone,#507b64) !important; border-color: var(--tone,#507b64) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .popup-postcard .button.primary { border-color: color-mix(in srgb,var(--tone,#507b64) 70%,#333) !important; } } #workshop .popup-postcard .button.primary { border-top-color: var(--tone,#507b64) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .popup-postcard .button.primary { border-top-color: color-mix(in srgb,var(--tone,#507b64) 40%,#fff) !important; } } #workshop .popup-postcard .button.primary { color: rgb(255, 255, 255) !important; } #workshop .popup-postcard.deesil-postit { padding: 27px !important; } #workshop .popup-postcard.refresh-popover { max-height: min(75dvh,var(--radix-popover-content-available-height,75dvh)); overflow: auto; padding: 25px !important; } #workshop .popup-postcard.refresh-popover > strong { padding-right: 24px; display: flex; } #workshop .record-sheet.popup-task-sheet { isolation: isolate; background: rgb(251, 247, 235) !important; border: 0px !important; padding: 23px 25px 30px 32px !important; display: block !important; } #workshop .record-sheet.popup-task-sheet::before { content: ""; background: repeating-linear-gradient(180deg,var(--tone) 0 24px,#faf8ef 24px 26px,var(--tone) 26px 66px,#faf8ef 66px 68px,var(--tone) 68px 106px,#faf8ef 106px 108px); width: 10px; position: fixed; top: 0px; bottom: 0px; left: 0px; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet.popup-task-sheet::before { background: repeating-linear-gradient(180deg,color-mix(in srgb,var(--tone),#fff 65%) 0 24px,#faf8ef 24px 26px,var(--tone) 26px 66px,#faf8ef 66px 68px,color-mix(in srgb,var(--tone),#fff 30%) 68px 106px,#faf8ef 106px 108px); } } #workshop .record-sheet.popup-task-sheet::before { pointer-events: none; } #workshop .record-sheet .record-topbar { flex-wrap: wrap; gap: 10px; padding-right: 45px; } #workshop .record-sheet .record-topbar > button { min-height: 44px; } #workshop .record-sheet .record-section { position: relative; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 31px, rgba(113, 134, 124, 0.043) 31px, rgba(113, 134, 124, 0.043) 32px), rgb(247, 245, 233) !important; border: 0px !important; border-radius: 0px !important; margin: 19px 0px !important; padding: 15px 17px !important; box-shadow: rgba(53, 72, 60, 0.086) 1px 3px 5px !important; } #workshop .record-sheet .record-section::after { content: ""; background: var(--tone); height: 4px; position: absolute; bottom: -4px; left: 0px; right: 0px; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .record-section::after { background: color-mix(in srgb,var(--tone),transparent 62%); } } #workshop .record-sheet .record-section::after { clip-path: polygon(0px 20%, 13% 40%, 29% 5%, 42% 35%, 66% 10%, 84% 40%, 100% 15%, 100% 40%, 83% 73%, 66% 43%, 42% 72%, 29% 48%, 13% 82%, 0px 52%); } #workshop .record-sheet .record-section > summary { color: var(--tone); font: 15px / 1.8 Chalk; background: 0px 0px !important; border: 0px !important; padding: 0px !important; } #workshop .record-sheet .record-section > summary small { margin-left: 33px; font: 12px / 1.7 Avenir; display: block; } #workshop .record-sheet .record-section .facts { margin-top: 20px; } #workshop .record-sheet .record-section .facts p { border-bottom: 1px solid rgba(125, 148, 116, 0.13); padding: 11px 0px; } #workshop .record-sheet .record-section .button { background: var(--tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .record-section .button { background: color-mix(in srgb,var(--tone) 17%,#fff) !important; } } #workshop .record-sheet .record-section .button { color: var(--tone) !important; border-color: var(--tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .record-section .button { border-color: color-mix(in srgb,var(--tone),#fff 40%) !important; } } #workshop .record-sheet .record-section .button { box-shadow: 0 3px 0 var(--tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .record-section .button { box-shadow: 0 3px 0 color-mix(in srgb,var(--tone),#333 10%) !important; } } #workshop .popup-postcard .source-task-note { clear: both; } @media (max-width: 650px) { #workshop [data-slot="dialog-content"].popup-postcard.material-system.household-postcard { width: calc(-24px + 100vw) !important; max-height: calc(-24px + 100dvh) !important; padding: 25px 21px !important; } #workshop .record-sheet.popup-task-sheet { padding: 22px 22px 28px 27px !important; } #workshop .record-sheet .record-section { padding: 15px 13px !important; } #workshop .record-sheet .record-topbar { font-size: 11px; } #workshop .popup-postcard .popup-close, #workshop .popup-task-sheet .popup-close { margin-right: -10px !important; top: -15px !important; } #workshop .popup-postcard.deesil-postit { padding: 25px 22px !important; } } #workshop .household-postcard:not(.popup-postcard) { rotate: var(--paper-tilt,-.22deg); } #workshop .household-postcard:not(.popup-postcard):nth-child(3n+2) { --paper-tilt: .24deg; } #workshop .household-postcard:not(.popup-postcard):nth-child(3n) { --paper-tilt: -.14deg; } #workshop .popup-postcard { rotate: -0.12deg; } #workshop .popup-postcard.calendar-sync-dialog { rotate: 0.13deg; } #workshop.material-system .household-flag { rotate: var(--tag-tilt,-.45deg); } #workshop .task-category:nth-child(2n) .household-flag { --tag-tilt: .5deg; } #workshop.material-system .home-feature:nth-child(2n) .tape { --label-tilt: -.4deg; } #workshop .request-stamp .stamp-care svg { stroke-width: 1.65px; transform: rotate(-11deg); } #workshop .inbox-count > b { font: 22px / 1.2 PacketDigits !important; } #workshop .inbox-count > span { font: 12px / 1.7 Chalk !important; } #workshop .packet-fold > summary .inbox-count { margin-left: 5px; } #workshop .popup-postcard .form-footer { background: rgb(251, 247, 235) !important; box-shadow: rgb(251, 247, 235) 0px -7px 12px !important; } #workshop .ink-focus { color: var(--communication-focus,var(--tone,#406592)); } #workshop .ink-care { color: var(--communication-care,#36746d); } #workshop .ink-spark { color: var(--communication-spark,#824d83); } #workshop .deesil-note-copy { --communication-focus: #406592; --communication-care: #307878; --communication-spark: #7a4380; } #workshop .field-cue { margin-right: 0.2em; } #workshop .field > span > .communication-word { font-weight: 600; } #workshop .popup-postcard .field > span, #workshop .popup-postcard .choices > legend { color: rgb(100, 98, 93); } #workshop .popup-postcard .communication-word { color: var(--tone,#406592); } @supports (color:color-mix(in lab, red, red)) { #workshop .popup-postcard .communication-word { color: color-mix(in srgb,var(--tone,#406592) 90%,#34383b); } } #workshop .deesil-postit .communication-word.ink-focus { color: rgb(64, 101, 146); } #workshop .popup-postcard .form-footer { background: rgb(251, 248, 239) !important; } #workshop [data-slot="dialog-content"].popup-postcard.material-system.household-postcard, #workshop .popup-postcard.refresh-popover, #workshop .popup-postcard.deesil-postit { isolation: isolate; rotate: none; max-height: calc(-28px + 100dvh) !important; padding: 0px !important; display: block !important; overflow: hidden !important; } #workshop .popup-postcard > .popup-scroll { overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(164, 170, 160) transparent; border-radius: 8px; min-height: 0px; max-height: calc(-28px + 100dvh); padding: 30px 29px 28px; overflow: auto; z-index: 1 !important; position: relative !important; } #workshop .popup-postcard.household-postcard { --card: #fbf8ee; --pc-ink: var(--tone,#507b64); background: var(--pc-ink) !important; border-radius: 11px !important; } #workshop .popup-postcard > .postcard-base { z-index: 0 !important; background: rgb(251, 248, 238) !important; border-radius: 6px !important; inset: 9px !important; } #workshop .popup-postcard > .postcard-edge, #workshop .popup-postcard > .pc-corner { z-index: -1 !important; } #workshop .popup-postcard .popup-close, #workshop .popup-task-sheet .popup-close { float: none; box-shadow: none !important; z-index: 20 !important; background: 0px 0px !important; border-radius: 0px !important; width: 48px !important; height: 48px !important; margin: 0px !important; padding: 5px !important; position: absolute !important; top: 7px !important; right: 8px !important; } #workshop .popup-postcard .popup-scroll > [data-slot="dialog-title"], #workshop .popup-postcard .popup-scroll > .deesil-note-title { padding-right: 35px; } #workshop .popup-postcard .popup-scroll .form-footer { margin-top: 20px; padding-bottom: 0px; box-shadow: none !important; background: 0px 0px !important; position: static !important; bottom: auto !important; } #workshop .popup-postcard.plain-postit { background: rgb(255, 241, 191) !important; border: 0px !important; border-radius: 0px !important; box-shadow: rgba(52, 59, 52, 0.22) 3px 7px 12px !important; } #workshop .plain-postit > .popup-scroll { background: linear-gradient(rgba(207, 168, 70, 0.075), rgba(0, 0, 0, 0) 30px), rgb(255, 241, 191); border-radius: 0px; padding: 28px 24px 22px; } #workshop .popup-postcard.deesil-postit { --tone: #a67a22; } #workshop .popup-postcard.refresh-popover > .popup-scroll { max-height: min(75dvh,var(--radix-popover-content-available-height,75dvh)); padding: 28px 24px; } #workshop .record-sheet.popup-task-sheet { padding: 0px !important; overflow: hidden !important; } #workshop .record-sheet > .popup-scroll { overscroll-behavior: contain; scrollbar-width: thin; height: 100%; padding: 30px 30px 30px 34px; overflow: auto; } #workshop .record-sheet > .popup-scroll > [data-slot="sheet-title"] { padding-right: 35px; } #workshop .record-notes { rotate: -0.3deg; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 30px, rgba(140, 152, 117, 0.13) 30px, rgba(140, 152, 117, 0.13) 31px), rgb(255, 245, 201) !important; box-shadow: rgba(70, 83, 60, 0.17) 2px 5px 8px !important; } #workshop .record-section { box-shadow: rgba(53, 72, 60, 0.133) 2px 4px 7px !important; } #workshop .field :is(input, textarea, button):focus-visible { outline-offset: 2px; border-color: rgb(165, 173, 166) !important; outline: rgb(171, 177, 171) solid 2px !important; box-shadow: rgba(212, 215, 209, 0.3) 0px 0px 0px 2px !important; } #workshop.material-system .button, #workshop.material-system .card-link, #workshop .popup-postcard .button, #workshop .record-sheet .button { text-transform: uppercase; letter-spacing: 0.3px; font-family: PixelGamer, PacketDigits, monospace !important; } #workshop .popup-postcard .button { font-size: 13px !important; } #workshop.material-system .card-link { gap: 12px; min-height: 46px; padding: 10px 15px !important; font-size: 13px !important; } @media (max-width: 650px) { #workshop .popup-postcard > .popup-scroll { padding: 29px 22px 24px; } #workshop .record-sheet > .popup-scroll { padding: 30px 24px; } #workshop .popup-postcard.plain-postit > .popup-scroll { padding: 28px 22px 22px; } } #workshop .personal-note-trigger { gap: 5px !important; padding: 3px 0px !important; } #workshop .personal-note-trigger > svg { stroke-width: 2.2px !important; width: 28px !important; margin: 0px -2px !important; } #workshop .personal-note-stickers { gap: 0px !important; } #workshop .personal-note-cue { margin: 15px 0px 20px !important; } #workshop .notebook-shell .identity-star .star-tap { color: rgb(113, 117, 111) !important; font-size: 8px !important; bottom: -13px !important; right: 0px !important; } #workshop.material-system .cheer-label { font-size: 19px !important; line-height: 1.75 !important; } #workshop .task-category .household-flag { padding: 11px 19px !important; font-size: 17px !important; } #workshop .calendar-purple .button > .foam { flex-shrink: 0; margin-right: 8px !important; font-size: 24px !important; position: relative !important; top: auto !important; left: auto !important; } #workshop .calendar-purple .button { align-items: center; gap: 7px; display: inline-flex; } @media (max-width: 650px) { #workshop.material-system .cheer-label, #workshop .task-category .household-flag { font-size: 15px !important; } #workshop .notebook-shell .identity-star .star-tap { bottom: -12px !important; right: 0px !important; } #workshop .personal-note-rainbow { font-size: 13px !important; } } #workshop .wins-banner .tally-postit strong { font-size: 28px !important; } #workshop .wins-banner .tally-postit span { font: 14px / 1.65 Chalk !important; } @media (max-width: 650px) { #workshop .wins-banner .tally-postit { min-width: 0px !important; } #workshop .wins-banner .tally-postit strong { font-size: 24px !important; } } #workshop .communication-word { font-weight: 700; } #workshop .ink-warm { color: var(--communication-warm,#a26930); } #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-focus: var(--tone,#406592); } @supports (color:color-mix(in lab, red, red)) { #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-focus: color-mix(in srgb,var(--tone,#406592) 90%,#303b42); } } #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-care: var(--tone,#406592); } @supports (color:color-mix(in lab, red, red)) { #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-care: color-mix(in srgb,var(--tone,#406592) 74%,#54785b); } } #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-spark: var(--tone,#406592); } @supports (color:color-mix(in lab, red, red)) { #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-spark: color-mix(in srgb,var(--tone,#406592) 80%,#687585); } } #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-warm: var(--tone,#406592); } @supports (color:color-mix(in lab, red, red)) { #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-warm: color-mix(in srgb,var(--tone,#406592) 78%,#78634e); } } #workshop .communication-word.ink-care { color: var(--communication-care,#36746d); } #workshop .communication-word.ink-spark { color: var(--communication-spark,#824d83); } #workshop .communication-word.ink-focus { color: var(--communication-focus,#406592); } #workshop .communication-word.ink-warm { color: var(--communication-warm,#a26930); } #workshop .deesil-postit .popup-scroll { --communication-care: #477746; --communication-focus: #406592; --communication-spark: #8b4980; --communication-warm: #b16c2e; } #workshop .deesil-postit .communication-word.ink-care { color: rgb(71, 119, 70); } #workshop .deesil-postit .communication-word.ink-spark { color: rgb(139, 73, 128); } #workshop .deesil-postit .communication-word.ink-warm { color: rgb(177, 108, 46); } #workshop .popup-postcard .editor-top-actions { display: none !important; } #workshop .record-sheet .response-record { --person-tone: #406592; background: var(--person-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .response-record { background: color-mix(in srgb,var(--person-tone) 10%,#fff) !important; } } #workshop .record-sheet .response-record { border: 2px solid var(--person-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .response-record { border: 2px solid color-mix(in srgb,var(--person-tone) 40%,#fff) !important; } } #workshop .record-sheet .response-record { border-bottom-color: var(--person-tone) !important; box-shadow: 0 3px 0 var(--person-tone) !important; } @supports (color:color-mix(in lab, red, red)) { #workshop .record-sheet .response-record { box-shadow: 0 3px 0 color-mix(in srgb,var(--person-tone) 50%,#fff) !important; } } #workshop .record-sheet .response-record[data-person="person-c"] { --person-tone: #b53535; } #workshop .response-record > strong { text-transform: uppercase; color: var(--person-tone); align-items: center; gap: 8px; margin-bottom: 9px; font: 13px PixelGamer; display: inline-flex; } #workshop .response-record > strong > .foam { font-size: 25px; rotate: -8deg; } #workshop .popup-postcard.deesil-postit, #workshop .popup-postcard.deesil-postit > .popup-scroll { max-height: min(75dvh,var(--radix-popover-content-available-height,75dvh)) !important; } #workshop .popup-postcard.deesil-postit { position: relative !important; } #workshop .popup-postcard.deesil-postit > .popup-scroll { padding-top: 30px !important; } #workshop.material-system .calendar-purple .view-switch > button { text-transform: uppercase; color: rgb(105, 115, 109) !important; background: rgb(237, 240, 237) !important; border-color: rgb(255, 255, 255) rgb(168, 176, 169) rgb(168, 176, 169) !important; font: 13px / 1.6 PixelGamer !important; box-shadow: rgb(142, 154, 145) 0px 3px !important; } #workshop.material-system .calendar-purple .view-switch > button[aria-pressed="true"] { color: rgb(255, 255, 255) !important; background: rgb(99, 110, 102) !important; border-color: rgb(162, 171, 164) rgb(76, 87, 79) rgb(76, 87, 79) !important; box-shadow: rgb(66, 77, 69) 0px 3px !important; } #workshop.material-system .calendar-purple .calendar-today { color: rgb(116, 72, 129) !important; background: rgb(231, 216, 238) !important; border-color: rgb(183, 160, 193) !important; box-shadow: rgb(152, 120, 163) 0px 3px !important; } #workshop.material-system .calendar-purple .house-calendar [data-selected-single="true"], #workshop.material-system .calendar-purple .week-grid > button[aria-pressed="true"] { color: rgb(114, 72, 126) !important; background: rgb(234, 223, 240) !important; border-color: rgba(0, 0, 0, 0) !important; outline: none !important; box-shadow: rgb(214, 196, 223) 0px 0px 0px 1px inset !important; } #workshop .record-sheet .record-section.record-notes { background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 30px, rgba(140, 152, 117, 0.17) 30px, rgba(140, 152, 117, 0.17) 31px), rgb(255, 244, 200) !important; box-shadow: rgba(70, 83, 60, 0.17) 2px 5px 8px !important; } #workshop .wins-banner .tally-postit > .foam { rotate: -7deg; margin-bottom: 8px !important; font-size: 31px !important; } #workshop.material-system .notebook-shell .household-identity h1 { margin-bottom: 3px !important; padding-bottom: 0px !important; } #workshop .notebook-shell .identity-star .star-tap { rotate: -7deg; bottom: calc(2px - 5px * var(--shell-fold,0)) !important; right: calc(-19px + 2px * var(--shell-fold,0)) !important; font-size: 9px !important; } #workshop.material-system .header-magic-note { box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 1px inset, rgba(52, 56, 52, 0.333) 0px -1px 1px inset, rgba(56, 60, 57, 0.27) 1px 3px 3px !important; } @media (hover: hover) { #workshop .identity-star:hover > .foam { transform-origin: 100% center; transform: translate(-3px, -1px) rotate(-10deg) scale(1.06) !important; } } @media (prefers-reduced-motion: reduce) { #workshop .identity-star:hover > .foam { transform: rotate(8deg) !important; } } #workshop .progress-entry b, #workshop .day .button, #workshop .day .text-button { font-family: PixelGamer, monospace !important; } #workshop .hours-page .button.primary { color: rgb(255, 255, 255) !important; background: rgb(64, 101, 146) !important; border-color: rgb(114, 148, 185) !important; box-shadow: rgb(47, 77, 114) 0px 3px !important; } #workshop .calendar-purple .button:has(> .foam) { margin-left: 12px !important; padding-left: 25px !important; } #workshop .calendar-purple .button > .foam { rotate: -7deg; margin: 0px !important; font-size: 26px !important; position: absolute !important; top: -8px !important; left: -14px !important; } #workshop .progress-card, #workshop .record-section, #workshop .popup-scroll { --communication-care: #477b55; --communication-spark: #925083; --communication-warm: #ad6434; } #workshop .popup-postcard .communication-word.ink-care { color: var(--communication-care); } #workshop .popup-postcard .communication-word.ink-spark { color: var(--communication-spark); } #workshop .popup-postcard .communication-word.ink-warm { color: var(--communication-warm); } #workshop .deesil-note-copy .ink-focus { color: rgb(65, 105, 156) !important; } #workshop .deesil-note-copy .ink-care { color: rgb(70, 128, 90) !important; } #workshop .deesil-note-copy .ink-spark { color: rgb(161, 71, 134) !important; } #workshop .deesil-note-copy .ink-warm { color: rgb(181, 105, 45) !important; } @media (max-width: 650px) { #workshop.material-system .notebook-shell .household-identity h1 { margin-bottom: 3px !important; padding-bottom: 0px !important; } } #workshop .notebook-shell .identity-details { z-index: 1; max-height: calc(103px * (1 - var(--shell-fold,0))); transform: translateY(calc(-44px * var(--shell-fold,0))); opacity: calc(1 - var(--shell-fold,0)); pointer-events: none; position: relative; overflow: visible; } #workshop .notebook-shell .identity-details :is(.identity-caption, .household-names, .home-header-notes) { overflow: visible; opacity: 1 !important; max-height: none !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { #workshop .notebook-shell .identity-details { transform: none; } } #workshop .editor-dialog .choices:has(.check[data-person]) legend .communication-word { color: inherit !important; } #workshop.material-system .field, #workshop.material-system .form-grid > * { min-width: 0px; } #workshop.material-system .field > input, #workshop.material-system .field > textarea, #workshop.material-system .field > .pick { box-sizing: border-box; width: 100%; min-width: 0px; max-width: 100%; } #workshop.material-system .field > input:is([type="date"], [type="time"], [type="datetime-local"]) { appearance: none; inline-size: 100%; min-inline-size: 0px; max-inline-size: 100%; display: block; } #workshop.material-system .field > input::-webkit-date-and-time-value { text-align: left; min-width: 0px; } #workshop.material-system textarea::placeholder { color: rgb(115, 125, 119); opacity: 1; font-size: 15px; line-height: 1.6; } @media (max-width: 350px) { #workshop .notebook-shell .identity-star .star-tap { right: calc(-16px + 2px * var(--shell-fold,0)) !important; font-size: 8px !important; } } #workshop .notebook-shell .identity-details .home-header-notes { text-align: center; width: 100%; padding-bottom: 6px; } #workshop .notebook-shell .identity-details .home-header-notes .account { width: 100%; margin: 0px auto; justify-content: center !important; align-items: center !important; } #workshop .notebook-shell .identity-details .header-magic-note { align-self: center; max-width: 100%; overflow: visible; } #workshop .progress-entry b { align-items: baseline; gap: 2px; display: inline-flex; font-family: Avenir, sans-serif !important; } #workshop .progress-entry b small { font: 12px / 1.4 Avenir, sans-serif; } #workshop * { ; } #workshop .button { color: rgb(51, 79, 73); background: linear-gradient(rgb(244, 245, 237), rgb(224, 227, 216)); border: 2px solid rgb(130, 141, 128); border-radius: 4px; justify-content: center; align-items: center; gap: 7px; min-height: 44px; padding: 7px 16px; font-weight: 900; text-decoration: none; display: inline-flex; box-shadow: rgba(120, 128, 115, 0.44) 0px 3px; } #workshop .button:active { transform: translateY(2px); box-shadow: rgba(120, 128, 115, 0.44) 0px 1px; } #workshop .button.primary { color: rgb(255, 255, 255); background: linear-gradient(rgb(67, 142, 140), rgb(46, 114, 115)); border-color: rgb(34, 89, 93); box-shadow: rgb(29, 78, 82) 0px 3px; } #workshop .button.ghost { box-shadow: none; background: 0px 0px; border: 1px solid rgb(189, 183, 170); } #workshop .paper { background: rgb(255, 254, 249); border: 1px solid rgb(212, 207, 193); border-radius: 6px; padding: 25px; box-shadow: rgba(220, 215, 201, 0.5) 2px 3px; } #workshop .paper .tape { margin: -4px 0px 19px; } #workshop .paper.gold { background: rgb(251, 244, 221); } #workshop .taskrow { border-top: 1px solid rgb(221, 215, 201); justify-content: space-between; align-items: center; gap: 14px; min-height: 64px; padding: 15px 0px; display: flex; } #workshop .actions { flex-wrap: wrap; align-items: center; gap: 10px; display: flex; } @media (max-width: 760px) { #workshop .paper { padding: 20px; } } @media (prefers-reduced-motion: reduce) { #workshop * { scroll-behavior: auto !important; transition: none !important; animation: auto ease 0s 1 normal none running none !important; } } #workshop .text-button { color: rgb(36, 101, 103); text-align: left; text-underline-offset: 4px; background: 0px 0px; border: 0px; min-height: 44px; padding: 7px 3px; font-weight: 700; text-decoration: underline; } #workshop .taskrow > span:first-child { min-width: 0px; } #workshop .taskrow strong { font-weight: 700; } #workshop .taskrow small { display: block; } #workshop .field { flex-direction: column; gap: 5px; min-width: 0px; margin: 8px 0px 15px; font-size: 1rem; display: flex; } #workshop .field > span { font-size: 0.875rem; font-weight: 700; } #workshop .field input, #workshop .field textarea { color: rgb(48, 51, 52); background: rgb(255, 254, 251); border: 1px solid rgb(172, 169, 158); border-radius: 4px; width: 100%; min-height: 44px; padding: 8px 11px; box-shadow: rgba(72, 67, 44, 0.04) 0px 1px 2px inset; } #workshop .field textarea { resize: vertical; } #workshop .field input[type="file"] { font-size: 0.875rem; } #workshop .field input[type="file"]::file-selector-button { font: inherit; background: rgb(229, 234, 221); border: 1px solid rgb(169, 179, 164); border-radius: 4px; margin-right: 10px; padding: 8px; } #workshop .filterbar { background: rgb(241, 238, 229); border: 1px solid rgb(212, 206, 192); border-radius: 6px; grid-template-columns: 2fr 1.7fr 1.7fr; gap: 0px 14px; padding: 17px 18px 6px; display: grid; } #workshop .filterbar.compact { grid-template-columns: repeat(2, minmax(0px, 1fr)); max-width: 700px; } #workshop .category { background: rgb(255, 254, 249); border: 1px solid rgb(200, 195, 183); border-radius: 6px; margin-bottom: 12px; overflow: hidden; } #workshop .category > summary { cursor: pointer; background: rgb(240, 237, 227); justify-content: space-between; align-items: center; gap: 12px; min-height: 66px; padding: 13px 20px; font-weight: 900; list-style: none; display: flex; } #workshop .category > summary::before { content: "+"; color: rgb(48, 120, 120); font-size: 1.4rem; font-weight: 400; } #workshop .category[open] > summary::before { content: "โˆ’"; } #workshop .category > summary > span:first-of-type { flex: 1 1 0%; } #workshop .category > summary small { font-weight: 400; display: block; } #workshop .ledger-summary { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 14px; padding: 25px 0px; display: grid; } #workshop .ledger-summary > div { background: rgb(244, 245, 235); border-left: 3px solid rgb(183, 200, 173); padding: 16px; } #workshop .ledger-summary strong { font-size: 1.55rem; display: block; } #workshop .ledger-summary small { display: block; } #workshop .more-grid { grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; margin-top: 22px; display: grid; } #workshop .more-link { text-align: left; color: rgb(49, 94, 91); justify-content: space-between; align-items: center; gap: 15px; min-height: 90px; font-weight: 900; display: flex; } #workshop .form-grid { grid-template-columns: 1fr 1fr; gap: 14px; display: grid; } #workshop .record-sheet { background: rgb(250, 250, 245); overflow-y: auto; width: min(680px, 100vw) !important; max-width: 680px !important; padding: 32px !important; } #workshop .record-sheet [data-slot="sheet-title"] { max-width: 92%; font: 400 1.3rem / 1.6 Chalk; } #workshop .record-sheet [data-slot="sheet-description"] { font-size: 0.875rem; } #workshop .record-sheet > section { margin-top: 12px; } #workshop .record-sheet .facts { grid-template-columns: 1fr 1fr; gap: 12px; display: grid; } #workshop .record-sheet .paper { padding: 18px; } #workshop .record-sheet h3 { margin-top: 15px; } @media (max-width: 900px) { #workshop .ledger-summary, #workshop .more-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { #workshop .filterbar { grid-template-columns: 1fr 1fr; padding: 12px; } #workshop .filterbar > .field:first-child { grid-column: 1 / -1; } #workshop .filterbar.compact { grid-template-columns: 1fr 1fr; } #workshop .taskrow { align-items: flex-start; gap: 12px; } #workshop .taskrow > span { overflow-wrap: anywhere; } #workshop .category > summary { padding: 13px 14px; } #workshop .more-grid { grid-template-columns: 1fr; } #workshop .ledger-summary { gap: 9px; } #workshop .ledger-summary > div { padding: 12px; } #workshop .ledger-summary strong { font-size: 1.3rem; } #workshop .record-sheet { padding: 24px 18px !important; } #workshop .record-sheet .facts { grid-template-columns: 1fr 1fr; } #workshop .form-grid { grid-template-columns: 1fr; } #workshop .taskrow:has(.actions) { flex-wrap: wrap; } } @media (max-width: 380px) { #workshop .record-sheet .facts { grid-template-columns: 1fr; } } @media (forced-colors: active) { #workshop .button { color: buttontext; border: 2px solid buttontext; } } #workshop .paper.gold { border-radius: 3px 3px 3px 12px; } #workshop .paper .tape { max-width: 100%; font-size: 1rem; } #workshop :is(.collection-card:focus-visible, .more-link:focus-visible) { outline-offset: 4px; outline: rgb(122, 67, 128) solid 3px; } #workshop .entry-card .edge { z-index: 0; position: absolute; overflow: hidden; } #workshop .entry-card .edge-t { background: repeating-linear-gradient(90deg,#b53535 0 22px,#fafaf5 22px 24px,var(--teal) 24px 72px,#fafaf5 72px 74px,var(--gold) 74px 96px,#fafaf5 96px 98px,#b53535 98px 140px,#fafaf5 140px 142px,var(--teal) 142px 164px,#fafaf5 164px 166px,var(--gold) 166px 220px,#fafaf5 220px 222px,#b53535 222px 246px,#fafaf5 246px 248px,var(--teal) 248px 284px,#fafaf5 284px 286px); height: 13px; top: 0px; left: 18px; right: 22px; } #workshop .entry-card .edge-b { background: repeating-linear-gradient(90deg,var(--teal) 0 36px,#fafaf5 36px 38px,var(--gold) 38px 60px,#fafaf5 60px 62px,#b53535 62px 114px,#fafaf5 114px 116px,var(--teal) 116px 138px,#fafaf5 138px 140px,var(--gold) 140px 182px,#fafaf5 182px 184px,#b53535 184px 210px,#fafaf5 210px 212px,var(--gold) 212px 248px,#fafaf5 248px 250px); height: 13px; bottom: 0px; left: 22px; right: 18px; } #workshop .entry-card .edge-l { background: repeating-linear-gradient(180deg,var(--gold) 0 24px,#fafaf5 24px 26px,#b53535 26px 70px,#fafaf5 70px 72px,var(--teal) 72px 94px,#fafaf5 94px 96px,var(--gold) 96px 134px,#fafaf5 134px 136px,#b53535 136px 158px,#fafaf5 158px 160px,var(--teal) 160px 208px,#fafaf5 208px 210px); width: 13px; top: 20px; bottom: 18px; left: 0px; } #workshop .entry-card .edge-r { background: repeating-linear-gradient(180deg,var(--teal) 0 28px,#fafaf5 28px 30px,var(--gold) 30px 76px,#fafaf5 76px 78px,#b53535 78px 100px,#fafaf5 100px 102px,var(--teal) 102px 142px,#fafaf5 142px 144px,var(--gold) 144px 168px,#fafaf5 168px 170px,#b53535 170px 218px,#fafaf5 218px 220px); width: 13px; top: 18px; bottom: 22px; right: 0px; } #workshop .entry-privacy { color: rgb(103, 110, 103); border-top: 1px dashed rgb(184, 186, 177); margin: 27px 0px 0px; padding-top: 16px; font-size: 12px; } #workshop .entry-privacy strong { color: rgb(68, 107, 97); margin-bottom: 4px; display: block; } @media (forced-colors: active) { #workshop .entry-card .edge { display: none; } } @keyframes spin { 100% { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: 0.5; } } @keyframes enter { 0% { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); } } @keyframes exit { 100% { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); } } @keyframes accordion-down { 0% { height: 0px; } 100% { height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto)); } } @keyframes accordion-up { 0% { height: var(--radix-accordion-content-height,var(--accordion-panel-height,auto)); } 100% { height: 0px; } } @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } @keyframes scroll-fade-reveal-b { 0% { --scroll-fade-b: var(--_scroll-fade-size-b,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } 100% { --scroll-fade-b: 0px; } } @keyframes scroll-fade-reveal-s { 0% { --scroll-fade-s: 0px; } 100% { --scroll-fade-s: var(--_scroll-fade-size-s,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } } @keyframes scroll-fade-reveal-e { 0% { --scroll-fade-e: var(--_scroll-fade-size-e,var(--scroll-fade-size,min(12%, calc(var(--spacing) * 10)))); } 100% { --scroll-fade-e: 0px; } } @keyframes tw-shimmer { 0% { background-position: 100% 0px; } 100% { background-position: 0px 0px; } }