@layer reset{*,*:before,*:after{box-sizing:border-box}:where(body,h1,h2,h3,h4,h5,h6,p,blockquote,figure,pre,dl,dd,ul,ol,menu,hr,fieldset,dialog,[popover]){margin:0}:where(ul,ol,menu,fieldset,legend,input,textarea,td,th,dialog,[popover]){padding:0}:where(dialog,fieldset,[popover]){border:none}:where(dialog,[popover]){max-inline-size:none;max-block-size:none}:root{text-size-adjust:none}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit;color:inherit}h1,h2,h3,h4,h5,h6{margin:0;font-size:inherit;font-weight:inherit}button{all:unset;cursor:pointer;box-sizing:border-box;&:focus-visible{outline:revert}}a{color:inherit;text-decoration:none}ul,ol{list-style-type:none}}@layer base{:root{font:100% var(--font-family);height:100%;@media(prefers-reduced-motion:no-preference){scroll-behavior:smooth}}body{background-color:var(--color-background);color:var(--color-text);font-size:var(--font-size-base);display:flex;flex-direction:column;min-height:100%}}@layer base{:root{--focus-outline-color: var(--color-accent);--focus-outline-offset: .15rem;--focus-outline-style: solid;--focus-outline-width: .15rem}*:focus-visible{outline-color:var(--focus-outline-color);outline-offset:var(--focus-outline-offset);outline-style:var(--focus-outline-style);outline-width:var(--focus-outline-width)}}@layer base{main:has(iframe){position:fixed;inset:0}main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}}@layer base{.rich-text{line-height:1.4;text-wrap:pretty;>*:first-child{margin-block-start:0}>*:last-child{margin-block-end:0}}.rich-text a,.link{text-decoration:underline;text-decoration-thickness:.075em;text-underline-offset:.15em;text-decoration-color:color-mix(in srgb,currentColor,transparent 40%);word-break:break-word;cursor:pointer;border-radius:var(--border-radius-small);&:hover,&:focus-visible{text-decoration-color:currentColor}}.rich-text :is(h1,h2,h3,h4,h5,h6){font-weight:700;text-wrap:pretty;line-height:1.2;margin-block-start:1em;margin-block-end:var(--spacing-s);hyphens:auto;hyphenate-limit-chars:10 4 4;&:first-child{margin-block-start:0}&:last-child{margin-block-end:0}}.rich-text :where(h1){font-size:var(--font-size-l)}.rich-text :where(h2,h3,h4,h5,h6){font-size:var(--font-size-base)}.rich-text p{margin-block:var(--spacing-s)}.rich-text figure{margin-block:var(--spacing-l);figcaption{margin-block-start:var(--spacing-s);font-size:var(--font-size-s)}}.rich-text strong{font-weight:700}.rich-text em{font-style:italic}.rich-text :is(ul,ol){margin-block:var(--spacing-s)}.rich-text ul{list-style-type:disc;padding-inline-start:1em}.rich-text ol{list-style-type:decimal;padding-inline-start:1.5em}}@layer base{:root{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--font-family: system-ui, sans-serif;--font-size-s: .875rem;--font-size-base: 1rem;--font-size-l: 1.25rem}:is(h1,h2,h3,h4,h5,h6){font-size:var(--font-size-l);font-weight:700;line-height:1.2;text-wrap:pretty}.meta{font-size:var(--font-size-s);opacity:.6;overflow-wrap:anywhere}}@layer base{:root{--spacing-4xs: clamp(.25rem, .2321rem + .0893vw, .3125rem);--spacing-3xs: clamp(.5rem, .4643rem + .1786vw, .625rem);--spacing-2xs: clamp(.75rem, .6964rem + .2679vw, .9375rem);--spacing-xs: clamp(1rem, .9286rem + .3571vw, 1.25rem);--spacing-s: clamp(1.5rem, 1.3929rem + .5357vw, 1.875rem);--spacing-m: clamp(2rem, 1.8571rem + .7143vw, 2.5rem);--spacing-l: clamp(3rem, 2.7857rem + 1.0714vw, 3.75rem);--spacing-xl: clamp(4rem, 3.7143rem + 1.4286vw, 5rem);--spacing-2xl: clamp(6rem, 5.5714rem + 2.1429vw, 7.5rem);--spacing-3xl: clamp(8rem, 7.4286rem + 2.8571vw, 10rem);--spacing-4xl: clamp(12rem, 11.1429rem + 4.2857vw, 15rem);--spacing-5xl: clamp(16rem, 14.8571rem + 5.7143vw, 20rem);--spacing-4xs-3xs: clamp(.25rem, .1964rem + .2679vw, .4375rem);--spacing-3xs-2xs: clamp(.5rem, .4286rem + .3571vw, .75rem);--spacing-2xs-xs: clamp(.75rem, .6429rem + .5357vw, 1.125rem);--spacing-xs-s: clamp(1rem, .8571rem + .7143vw, 1.5rem);--spacing-s-m: clamp(1.5rem, 1.2857rem + 1.0714vw, 2.25rem);--spacing-m-l: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);--spacing-l-xl: clamp(3rem, 2.5714rem + 2.1429vw, 4.5rem);--spacing-xl-2xl: clamp(4rem, 3.4286rem + 2.8571vw, 6rem);--spacing-2xl-3xl: clamp(6rem, 5.1429rem + 4.2857vw, 9rem);--spacing-3xl-4xl: clamp(8rem, 6.8571rem + 5.7143vw, 12rem);--spacing-4xl-5xl: clamp(12rem, 10.2857rem + 8.5714vw, 18rem);--spacing-s-l: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem)}}@layer base{:root{--color-project: #f5a10e;--color-background: oklch( from var(--color-project) clamp(0, (.62 - l) * 1000, 1) 0 0 );--color-text: oklch( from var(--color-project) clamp(0, (l - .62) * 1000, 1) 0 0 );--color-accent: var(--color-project);--tint-faint: color-mix(in srgb, var(--color-text), transparent 95%);--tint-weak: color-mix(in srgb, var(--color-text), transparent 90%);--tint-line: color-mix(in srgb, var(--color-text), transparent 85%);--tint-strong: color-mix(in srgb, var(--color-text), transparent 75%);--color-surface: color-mix(in srgb, var(--color-background), transparent 15%);--color-border: var(--tint-line);--width-border: 1px;--border-radius-max: 50rem;--border-radius-large: .4rem;--border-radius: .25rem;--border-radius-small: .125rem;--border: var(--width-border) solid var(--color-border);--blur: blur(10px);--z-toolbar: 150;--z-pin-cursor: 160;--z-popover: 170;--z-drawer: 200;--z-toast: 300;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--ease-drawer: cubic-bezier(.32, .72, 0, 1);--ease-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);--duration-fast: .15s;--duration-base: .2s;--duration-drawer: .3s;--press-scale: .97}}@layer base;@layer components{.surface{background-color:var(--color-surface);color:var(--color-text);backdrop-filter:var(--blur)}}@layer components{.button{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;padding:.25rem .625rem;border:var(--border);border-radius:var(--border-radius-small);background-color:transparent;color:var(--color-text);font-size:var(--font-size-s);font-weight:600;cursor:pointer;& svg{width:1rem;height:1rem}&:hover:not(:disabled){background-color:var(--tint-faint)}&:disabled{opacity:.5;cursor:default}}.button--primary{border-color:transparent;background-color:var(--color-accent);color:var(--color-background);&:hover:not(:disabled){background-color:color-mix(in srgb,var(--color-accent),var(--color-text) 8%)}}.button--ghost{border-color:transparent;background-color:transparent}.button--icon{padding:.3rem;opacity:.6;&:hover,&:focus-visible{opacity:1}}.button--large{padding-block:.5rem;font-size:var(--font-size-base)}.button--block{width:100%}.button--compact{padding-inline:.375rem}}@layer components{.byline{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;.meta{flex-shrink:0}}}@layer components{.field{display:flex;flex-direction:column;gap:.25rem}.field__control,.composer{background-color:transparent;color:var(--color-text);border:var(--border);border-radius:var(--border-radius)}.field__control:focus-visible,.composer:has(.field__control:focus-visible){outline:none;border-color:var(--tint-strong)}.field__control{width:100%;padding:.5rem}.field__control--multiline{resize:none;min-block-size:calc(2lh + 1rem);field-sizing:content}}@layer components{.pin-icon{position:relative;display:inline-block}.pin-icon__svg{width:1.5rem;height:1.5rem;color:var(--color-accent)}.pin-icon__label{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);line-height:1;pointer-events:none;color:var(--color-background);font-size:.65rem;font-weight:600;& svg{width:.75rem;height:.75rem}}[data-status=resolved] .pin-icon__label{text-decoration:line-through}}@layer components{.pin{cursor:pointer;.pin-icon{transform-origin:bottom;transition:scale .5s var(--ease-spring)}&[data-active]{cursor:grab;.pin-icon{scale:1.15}}&[data-dragging]{cursor:grabbing}@media(prefers-reduced-motion:reduce){.pin-icon{transition:none}}}}@layer components{.pin-cursor{position:fixed;top:0;left:0;z-index:var(--z-pin-cursor);display:none;pointer-events:none;will-change:transform;transform:translate(var(--x, 0),var(--y, 0)) translate(-50%,-100%);body[data-comment-mode] &{display:block}}}@layer components{.icon-button{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;--focus-outline-offset: calc(var(--focus-outline-width) * -2);&:hover{background-color:var(--tint-faint)}}.icon-button__icon{width:1.5rem;height:1.5rem}.icon-button .pin-icon__svg{color:var(--color-text)}.icon-button .pin-icon{transform-origin:bottom;transition:scale .5s var(--ease-spring),opacity var(--duration-base) var(--ease-out)}body[data-pin-collected] #comment-mode .pin-icon{scale:.3;opacity:0;transition:none}@media(prefers-reduced-motion:reduce){.icon-button .pin-icon{transition:opacity var(--duration-base) var(--ease-out)}body[data-pin-collected] #comment-mode .pin-icon{scale:1}}}@layer components{.toolbar{position:fixed;z-index:var(--z-toolbar);cursor:grab;touch-action:none;margin:.25rem;border-radius:var(--border-radius-large);border:var(--border);overflow:clip;&[data-corner=tl]{top:0;left:0}&[data-corner=tr]{top:0;right:0}&[data-corner=bl]{bottom:0;left:0}&[data-corner=br]{bottom:0;right:0}&[data-dragging],&[data-dragging] *{cursor:grabbing}}.toolbar__list{display:flex}}@layer components{.drawer{position:fixed;inset-block:0;inset-inline-end:0;margin:.25rem;width:22rem;z-index:var(--z-drawer);display:flex;flex-direction:column;overflow:clip;border:var(--border);border-radius:var(--border-radius-large);transform:translate(0);transition:transform var(--duration-drawer) var(--ease-drawer),display var(--duration-drawer) allow-discrete;@starting-style{transform:translate(100%)}&[hidden]{display:none;transform:translate(100%);transition-duration:.25s}body:has(.toolbar[data-corner$=l]) &{inset-inline-end:auto;inset-inline-start:0;@starting-style{transform:translate(-100%)}&[hidden]{transform:translate(-100%)}}@media(prefers-reduced-motion:reduce){transition:none;transform:none;&[hidden]{transform:none}}}.drawer__header{display:flex;flex-direction:column;gap:.625rem;padding:.625rem .75rem}.drawer__tabs{position:relative;display:flex;gap:.375rem}.drawer__tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:var(--border-radius-max);color:var(--color-text);font-size:var(--font-size-s);font-weight:600;cursor:pointer;opacity:.6;&:after{content:attr(data-count);font-weight:400;opacity:.6}&:hover{opacity:.85}&[aria-selected=true]{opacity:1}}.drawer__tab-indicator{position:absolute;top:0;left:0;z-index:0;border:var(--border);border-color:var(--tint-strong);border-radius:var(--border-radius-max);background-color:var(--tint-weak);transition:transform var(--duration-base) var(--ease-out),width var(--duration-base) var(--ease-out);@media(prefers-reduced-motion:reduce){transition:none}}.drawer__list{flex:1;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:var(--tint-strong) transparent}.drawer__group-title{position:sticky;top:0;z-index:2;display:block;padding:.375rem .75rem;font-size:var(--font-size-s);font-weight:600;inline-size:100%;border-block:var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer__empty{flex:1;display:grid;place-items:center;text-align:center}.drawer__empty:not([data-empty])>*{display:none}.drawer__empty[data-empty]{padding:1rem .75rem;border-block-start:var(--border)}.drawer__item:not([hidden])~.drawer__item:not([hidden]){border-block-start:var(--border)}.drawer__item[data-ghost] .pin-icon{opacity:.35}.drawer__item[data-unread] .drawer__head:after{content:"";align-self:center;flex-shrink:0;inline-size:.5rem;block-size:.5rem;border-radius:50%;background-color:var(--color-accent)}#drawer-toggle{position:relative}#drawer-toggle[data-unread]:after{content:attr(data-unread);position:absolute;inset-block-start:.2rem;inset-inline-end:.2rem;display:flex;align-items:center;justify-content:center;min-inline-size:1rem;block-size:1rem;padding-inline:.25rem;border-radius:var(--border-radius-max);background-color:var(--color-accent);color:var(--color-background);font-size:.65rem;font-weight:600}.drawer__row{display:flex;gap:.625rem;align-items:flex-start;inline-size:100%;padding:.625rem .75rem;text-align:start;color:var(--color-text);cursor:pointer;min-inline-size:0;&:hover{background-color:var(--tint-faint)}.pin-icon{flex-shrink:0}}.drawer__content{flex:1;min-width:0;display:flex;flex-direction:column;gap:.125rem}.drawer__head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;.meta{flex-shrink:0}}.drawer__author{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drawer__snippet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@layer components{.composer{display:flex;flex-direction:column;.field__control{border:none;border-radius:0}}.composer__actions{display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .5rem}.composer__action-group{display:flex;align-items:center;gap:.375rem}.composer__attachments{display:flex;flex-wrap:wrap;gap:.5rem;padding:.5rem .5rem 0;&:empty{display:none}}.composer__chip{display:inline-flex;align-items:center;gap:.25rem;border:var(--border);border-radius:var(--border-radius);font-size:var(--font-size-s)}.composer__chip-thumb{width:1.5rem;height:1.5rem;object-fit:cover;margin-inline-end:.25rem}.composer__chip-thumb--file{display:inline-flex;align-items:center;justify-content:center;background-color:var(--tint-line);font-size:.5rem;font-weight:700}.composer__chip-name{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composer__chip-remove{display:inline-flex;opacity:.6;padding-inline:.25rem .5rem;&:hover{opacity:1}}}@layer components{.popover{position:fixed;z-index:var(--z-popover);margin:.5rem;width:min(24rem,90vw);max-height:calc(100vh - 1rem);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--tint-strong) transparent;display:flex;flex-direction:column;gap:1rem;padding:1rem;border:var(--border);border-radius:var(--border-radius-large);will-change:transform;scroll-padding-block:5rem;transition:opacity var(--duration-base) var(--ease-out),transform var(--duration-base) var(--ease-out);&[data-enter]{@starting-style{opacity:0;transform:scale(.95)}}&[data-closing]{opacity:0;transform:scale(.97);transition-duration:var(--duration-fast)}&[data-dragover]{outline:var(--focus-outline-width) dashed var(--color-text);outline-offset:calc(var(--focus-outline-width) * -2)}&[data-dock=in],&[data-dock=above]{transform-origin:top center}&[data-dock=below]{transform-origin:bottom center}&[data-dock=left]{transform-origin:center left}&[data-dock=right]{transform-origin:center right}&[data-dock=gone]{transform-origin:center}@media(prefers-reduced-motion:reduce){transition-property:opacity;&[data-enter],&[data-closing]{transform:none}}}.popover[data-side=below],.popover[data-dock=above]{box-shadow:0 -.15rem 0 0 var(--color-accent);border-start-start-radius:0;border-start-end-radius:0}.popover[data-side=above],.popover[data-dock=below]{box-shadow:0 .15rem 0 0 var(--color-accent);border-end-start-radius:0;border-end-end-radius:0}.popover[data-side=right],.popover[data-dock=left]{box-shadow:-.15rem 0 0 0 var(--color-accent);border-start-start-radius:0;border-end-start-radius:0}.popover[data-side=left],.popover[data-dock=right]{box-shadow:.15rem 0 0 0 var(--color-accent);border-start-end-radius:0;border-end-end-radius:0}.popover *{overflow-anchor:none}.popover__actions-bar,.composer__actions{overflow-anchor:auto}.popover__replies{display:flex;flex-direction:column;gap:1rem}.popover-reply{display:flex;flex-direction:column;gap:.5rem;&:not(:first-child){border-block-start:var(--border);padding-block-start:.75rem}}.popover-reply__text{font-size:var(--font-size-s)}.popover-reply__attachments{display:flex;flex-wrap:wrap;gap:.5rem}.popover-reply__attachment-link,.popover-reply__attachment-file{overflow:hidden;border-radius:var(--border-radius)}.popover-reply__attachment{width:4rem;height:4rem;object-fit:cover}.popover-reply__attachment-file{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .5rem;border:var(--border);font-size:var(--font-size-s);& svg{width:1rem;height:1rem}}.popover-reply__attachment-name{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.popover-event{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;border-block-start:var(--border);padding-block-start:.75rem}.popover-reply__status{font-size:var(--font-size-s)}.popover__form{display:flex;flex-direction:column;gap:1rem}.popover__identity{font-size:var(--font-size-s);display:flex;flex-direction:column;gap:.5rem}.popover__as{opacity:.6}.popover__actions-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}}@layer components{.toast{position:fixed;inset-block-end:1.5rem;inset-inline:0;margin-inline:auto;width:fit-content;max-width:min(24rem,90vw);z-index:var(--z-toast);padding:.625rem 1rem;border:var(--border);border-radius:var(--border-radius-large);font-size:var(--font-size-s);transition:opacity var(--duration-base) var(--ease-out),translate var(--duration-base) var(--ease-out);&[data-enter]{@starting-style{opacity:0;translate:0 .5rem}}&[data-closing]{opacity:0;translate:0 .5rem;transition-duration:var(--duration-fast)}@media(prefers-reduced-motion:reduce){transition:none}}}@layer components{.menu{position:fixed;inset:auto;position-area:block-end span-inline-start;position-try-fallbacks:flip-block;margin-block:.25rem;min-inline-size:12rem;flex-direction:column;padding:.25rem;border:var(--border);border-radius:var(--border-radius-large);&:popover-open{display:flex}}.menu__item{display:flex;align-items:center;justify-content:space-between;gap:1rem;inline-size:100%;min-block-size:2rem;padding-inline:.625rem;border-radius:var(--border-radius);color:var(--color-text);font-size:var(--font-size-s);font-weight:600;cursor:pointer;&:hover{background-color:var(--tint-faint)}}.menu[data-confirm] .menu__item--trigger{display:none}.menu:not([data-confirm]) .menu__item--confirm{display:none}}@layer components{.message{min-block-size:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:var(--spacing-m);text-align:center}.message__title{font-size:clamp(2.5rem,10vw,5rem);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--color-accent)}.message__body{font-size:var(--font-size-l);opacity:.6}}@layer components{.auth{min-block-size:100dvh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-m)}.auth__form{display:flex;flex-direction:column;gap:.75rem;inline-size:100%;max-inline-size:20rem;padding:1.25rem;border:var(--border);border-radius:var(--border-radius-large)}.auth__title{font-size:var(--font-size-l)}.auth__error{color:var(--color-accent)}.dashboard__bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem var(--spacing-m);border-block-end:var(--border)}.dashboard__brand{font-size:var(--font-size-l)}.dashboard{display:flex;flex-direction:column;gap:1rem;inline-size:100%;max-inline-size:48rem;margin-inline:auto;padding:var(--spacing-m)}.dashboard__add{display:flex;flex-wrap:wrap;align-items:end;gap:.75rem;padding:1rem;border:var(--border);border-radius:var(--border-radius-large);.field{flex:1 1 12rem}}.dashboard__error{flex-basis:100%;color:var(--color-accent)}.project-list{display:flex;flex-direction:column;gap:.5rem}.project-list__empty{padding:2rem 1rem;text-align:center;border:var(--border);border-style:dashed;border-radius:var(--border-radius-large)}.project{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem 1rem;padding:.75rem 1rem;border:var(--border);border-radius:var(--border-radius-large);>time{margin-inline-start:auto}}.project__main{flex:1 1 12rem;display:flex;flex-direction:column;gap:.125rem;min-inline-size:0}.project__sub{display:flex;align-items:baseline;gap:.625rem;min-inline-size:0}.project__activity{flex-shrink:0}.project__title{font-weight:600;color:var(--color-text);border-radius:var(--border-radius-small);&:hover{text-decoration:underline}}.project__url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project__edit{font:inherit}.project__color{inline-size:1.25rem;block-size:1.25rem;padding:0;border:var(--border);border-radius:var(--border-radius-small);background:none;cursor:pointer;&::-webkit-color-swatch-wrapper{padding:0}&::-webkit-color-swatch{border:none}&::-moz-color-swatch{border:none}}}@layer components{.button,.icon-button,.drawer__tab,.drawer__row,.drawer__group-title{transition:scale var(--duration-fast) var(--ease-out),background-color var(--duration-fast) var(--ease-out),opacity var(--duration-fast) var(--ease-out);&:active{scale:var(--press-scale)}@media(prefers-reduced-motion:reduce){transition-property:background-color,opacity;&:active{scale:1}}}.drawer__row,.drawer__group-title{--press-scale: .99}}@layer components;
