@charset "UTF-8";
:root {
  color-scheme:light;
  --paper:#ffffff;
  --surface:#ffffff;
  --ink:#111111;
  --muted:#666666;
  --line:#dddddd;
  --accent:#111111;
  --panel:#f7f7f7;
  --focus-outline:#111111;
  --tone-white:#ffffff;
  --tone-light:#f5f5f5;
  --tone-gray:#eaeaea;
  --tone-dark:#dddddd;
  --radius:24px;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
}
button,input,textarea {
  font:inherit;
}
button {
  cursor:pointer;
  color:inherit;
}
button:disabled {
  cursor:not-allowed;
  opacity:.55;
}
button,summary,a,input,textarea {
  -webkit-tap-highlight-color:transparent;
}
a {
  color:inherit;
}
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--focus-outline);
  outline-offset:4px;
}
input,textarea {
  border:1px solid #bcbcbc;
  border-radius:12px;
  background:var(--surface);
  color:var(--ink);
  padding:12px;
  max-width:100%;
}
textarea {
  resize:vertical;
  min-height:64px;
  line-height:1.5;
}
input[type=checkbox],input[type=radio] {
  accent-color:var(--accent);
}
[hidden] {
  display:none!important;
}
h1,h2,h3,p {
  margin:0;
}
svg {
  display:block;
}
button svg {
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
button {
  transition:background .15s,transform .15s,box-shadow .15s;
}
button:active:not(:disabled) {
  transform:translateY(1px);
}
.app-shell {
  max-width:1240px;
  margin:auto;
  padding:0 48px;
}
.app-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 0 20px;
  border-bottom:1px solid var(--line);
  margin-bottom:26px;
}
.brand {
  font-weight:740;
  letter-spacing:-1px;
  font-size:26px;
  text-decoration:none;
  display:flex;
  gap:11px;
  align-items:center;
  white-space:nowrap;
}
.brand-dot {
  color:var(--focus-outline);
}
.brand-mark {
  display:grid;
  grid-template-columns:repeat(2,8px);
  gap:3px;
  transform:none;
}
.brand-mark i {
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:1px;
}
.brand-mark i:last-child {
  background:var(--focus-outline);
}
.header-actions {
  display:flex;
  align-items:center;
  gap:14px;
}
.today-summary {
  color:var(--muted);
  font-size:13px;
  margin-right:10px;
}
.button {
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  font-weight:620;
  font-size:14px;
  text-decoration:none;
  line-height:1.3;
}
.button:hover:not(:disabled) {
  background:#ebebeb;
  border-color:#c7c7c7;
}
.button-primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#fdfdfd;
}
.button-primary:hover:not(:disabled) {
  background:#474747;
  border-color:#474747;
}
.button-quiet {
  background:transparent;
  border-color:transparent;
}
.button-quiet:hover:not(:disabled) {
  background:#e4e4e4;
  border-color:transparent;
}
.button-outline {
  background:transparent;
  border-color:#c2c2c2;
}
.button-small {
  font-size:13px;
  min-height:40px;
  padding:8px 13px;
}
.button-large {
  min-height:54px;
  padding:14px 24px;
  font-size:16px;
  border-radius:14px;
}
.button-danger {
  color:#4c4c4c;
  background:transparent;
  border-color:transparent;
}
.button-danger:hover:not(:disabled) {
  background:#e6e6e6;
  border-color:transparent;
}
.icon-button {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:44px;
  border:0;
  border-radius:11px;
  background:transparent;
  font-size:28px;
  font-weight:350;
  line-height:1;
}
.icon-button:hover:not(:disabled) {
  background:#e6e6e6;
}
.text-button {
  padding:8px 0;
  min-height:36px;
  background:none;
  border:0;
  color:var(--muted);
  font-size:12px;
  text-decoration:underline;
  text-decoration-color:#aaaaaa;
  text-underline-offset:4px;
}
.text-button:hover {
  color:var(--ink);
}
.workspace {
  display:grid;
  grid-template-columns:minmax(330px,400px) minmax(0,1fr);
  gap:48px;
  align-items:start;
}
.focus-column {
  min-width:0;
}
.timer-panel {
  border-radius:var(--radius);
  padding:24px 28px 20px;
  background:var(--panel);
  border:0;
  box-shadow:none;
  text-align:center;
  position:relative;
}
.panel-top {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow {
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.5;
}
.panel-top .button {
  padding:6px 8px;
  font-size:11px;
  min-height:36px;
  gap:5px;
}
.panel-top .button svg {
  width:15px;
  height:15px;
}
.timer-panel h1 {
  white-space:pre-line;
  font-family:inherit;
  font-weight:620;
  line-height:1.1;
  font-size:28px;
  letter-spacing:-.6px;
  overflow-wrap:anywhere;
}
.focus-context {
  color:#5d5d5d;
  font-size:13px;
  margin:8px auto 3px;
  max-width:290px;
  overflow-wrap:anywhere;
}
.timer-face {
  position:relative;
  width:216px;
  height:216px;
  margin:12px auto;
  display:grid;
  place-items:center;
}
.timer-ring {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  overflow:visible;
}
.timer-ring circle {
  fill:none;
  stroke-width:3.5;
}
.ring-track {
  stroke:#d4d4d4;
}
.ring-progress {
  stroke:var(--accent);
  stroke-linecap:round;
  stroke-dasharray:741.42;
  stroke-dashoffset:741.42;
  transition:stroke-dashoffset .4s linear;
}
.timer-digits {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin-top:5px;
  gap:5px;
}
.timer-digits>span:first-child {
  font-size:64px;
  letter-spacing:-3px;
  line-height:1.1;
  font-weight:380;
  font-variant-numeric:tabular-nums;
}
.timer-digits>span:last-child {
  font-size:12px;
  color:#626262;
}
.duration-options {
  display:flex;
  justify-content:center;
  gap:6px;
  margin-bottom:14px;
}
.duration-options button {
  min-width:56px;
  min-height:40px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  font-size:13px;
  color:#5c5c5c;
}
.duration-options button[aria-pressed=true] {
  background:var(--surface);
  border-color:#d4d4d4;
  color:var(--ink);
  box-shadow:0 2px 4px #4c4c4c08;
}
.duration-options button:hover:not(:disabled) {
  border-color:#c2c2c2;
}
.timer-actions {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.timer-actions>.button-large {
  width:100%;
}
.timer-actions>.button-quiet {
  font-size:12px;
  min-height:36px;
}
.start-help {
  font-size:12px;
  color:#626262;
  margin-top:18px;
}
.start-help summary {
  cursor:pointer;
  display:inline-block;
  padding:7px;
  min-height:34px;
  list-style:none;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:#989898;
}
.start-help summary::-webkit-details-marker {
  display:none;
}
.start-help>div {
  padding:8px 4px 4px;
}
.start-help p {
  max-width:265px;
  margin:0 auto 9px;
}
.session-result {
  padding:15px 0 0;
  font-size:13px;
  color:#4c4c4c;
}
.session-result p {
  margin-bottom:9px;
}
.chest-panel {
  display:flex;
  gap:14px;
  align-items:center;
  padding:21px 4px 0;
}
.chest-copy {
  flex:1;
  min-width:0;
}
.chest-copy h2 {
  font-size:13px;
  font-weight:650;
  margin-bottom:3px;
}
.chest-copy p {
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
}
.chest-copy progress {
  display:block;
  width:100%;
  height:4px;
  margin-top:8px;
  border:0;
  border-radius:3px;
  background:#dedede;
  overflow:hidden;
  appearance:none;
}
.chest-copy progress::-webkit-progress-bar {
  background:#dedede;
  border-radius:3px;
}
.chest-copy progress::-webkit-progress-value {
  background:#858585;
  border-radius:3px;
}
.chest-copy progress::-moz-progress-bar {
  background:#858585;
  border-radius:3px;
}
.board-section {
  padding-top:8px;
  min-width:0;
}
.board-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.board-heading h2 {
  font-family:inherit;
  font-size:28px;
  letter-spacing:-.6px;
  font-weight:620;
  margin-top:0;
  line-height:1.2;
}
.board-subheading {
  margin:15px 0 22px;
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  font-size:12px;
}
.board-subheading .text-button {
  min-height:24px;
  padding:0;
}
.task-board {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start;
}
.sticky {
  position:relative;
  border-radius:3px 15px 15px 15px;
  border:1px solid #0000000d;
  padding:17px 17px 13px;
  min-width:0;
  box-shadow:0 5px 10px #3c3c3c08,0 1px 1px #00000005;
  transition:box-shadow .2s,border-color .2s;
  min-height:176px;
  display:flex;
  flex-direction:column;
}
.sticky.yellow {
  background:var(--tone-white);
}
.sticky.pink {
  background:var(--tone-light);
}
.sticky.blue {
  background:var(--tone-gray);
}
.sticky.mint {
  background:var(--tone-dark);
}
.sticky.selected {
  box-shadow:0 0 0 2px var(--accent),0 6px 16px #3c3c3c10;
}
.sticky-top {
  height:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:-4px -5px 8px 0;
}
.sticky-badge {
  font-size:11px;
  letter-spacing:0;
  font-weight:600;
  text-transform:none;
  color:#4e4e4e;
  line-height:1.2;
  max-width:100%;
  overflow-wrap:anywhere;
}
.sticky-edit {
  min-width:32px;
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:#595959;
}
.sticky-edit:hover {
  background:#ffffff50;
}
.sticky-edit svg {
  width:15px;
  height:15px;
}
.sticky-title {
  font-weight:650;
  font-size:16px;
  line-height:1.4;
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.sticky-note {
  color:#555555;
  font-size:12px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:10px;
}
.sticky-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:17px;
  margin-top:auto;
}
.sticky-focus {
  font-size:12px;
  min-height:36px;
  padding:7px 11px;
  border:1px solid #00000012;
  border-radius:9px;
  background:#ffffff40;
  font-weight:600;
}
.sticky-focus:hover:not(:disabled) {
  background:#ffffff78;
}
.sticky.selected .sticky-focus {
  background:var(--accent);
  color:var(--surface);
  border-color:var(--accent);

  font-size:12px;
}
.sticky-toggle {
  min-width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid #00000035;
  background:transparent;
  font-size:16px;
}
.sticky-toggle:hover:not(:disabled) {
  background:#ffffff70;
}
.sticky.done {
  opacity:.83;
  min-height:140px;
}
.sticky.done .sticky-title {
  text-decoration:line-through;
  text-decoration-color:#7c7c7c;
}
.sticky.done .sticky-toggle {
  background:var(--accent);
  border-color:var(--accent);
  color:#ffffff;
}
.sticky-time {
  font-size:12px;
  color:#5d5d5d;
}
.empty-board {
  border:0;
  border-radius:20px;
  text-align:center;
  padding:35px 20px;
  color:var(--muted);
  margin-top:0;
  min-height:220px;
}
.empty-board h3 {
  font-size:15px;
  color:var(--ink);
  font-weight:600;
  margin:8px 0 10px;
}
.empty-board p {
  font-size:13px;
  line-height:1.6;
  margin-bottom:22px;
}
.done-section {
  margin-top:27px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.done-section>summary {
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
  min-height:38px;
  padding:6px 0;
}
.done-section>summary span {
  display:inline-block;
  margin-left:7px;
  background:#e2e2e2;
  border-radius:8px;
  padding:1px 6px;
  font-size:11px;
}
.done-board {
  margin-top:10px;
}
.app-footer {
  margin:40px 0 24px;
  padding-top:19px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:15px;
  color:#747474;
  font-size:11px;
}
.app-footer .text-button {
  font-size:11px;
}
.notice {
  padding:16px 20px;
  border-radius:14px;
  margin-bottom:26px;
  font-size:13px;
  border:1px solid #c6c6c6;
  background:#f1f1f1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}
.notice p {
  max-width:750px;
}
.notice-actions {
  display:flex;
  flex-shrink:0;
  gap:5px;
}
.dialog {
  border:1px solid #d8d8d8;
  border-radius:24px;
  background:var(--surface);
  color:var(--ink);
  padding:26px;
  width:min(440px,calc(100vw - 30px));
  max-height:calc(100dvh - 40px);
  box-shadow:0 24px 80px #2626262c;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.dialog::backdrop {
  background:#2f2f2f6b;
  backdrop-filter:blur(3px);
}
.dialog-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:-7px -7px 23px 0;
}
.dialog-heading h2 {
  font-family:inherit;
  font-size:24px;
  font-weight:620;
  line-height:1.2;
  letter-spacing:-.5px;
}
.dialog label:not(.check-label):not(.color-option) {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
}
.task-dialog textarea {
  display:block;
  width:100%;
  margin-bottom:18px;
}
.optional {
  font-size:11px;
  font-weight:400;
  color:var(--muted);
  display:inline-block;
  margin-left:4px;
}
.color-fieldset {
  margin:0 0 22px;
  padding:0;
  border:0;
}
.color-fieldset legend {
  font-size:12px;
  font-weight:600;
  margin-bottom:10px;
}
.color-options {
  display:flex;
  gap:10px;
}
.color-option {
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
}
.color-option input {
  position:absolute;
  opacity:0;
  width:40px;
  height:40px;
  margin:0;
  cursor:pointer;
}
.color-option>span {
  display:block;
  width:30px;
  height:30px;
  border-radius:50%;
  border:1px solid #00000020;
}
.color-option.yellow>span {
  background:var(--tone-white);
}
.color-option.pink>span {
  background:var(--tone-light);
}
.color-option.blue>span {
  background:var(--tone-gray);
}
.color-option.mint>span {
  background:var(--tone-dark);
}
.color-option input:checked+span {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.color-option input:focus-visible+span {
  outline:3px solid var(--focus-outline);
  outline-offset:4px;
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:22px;
}
.task-dialog .dialog-actions>#delete-task-button {
  margin-right:auto;
}
.dialog>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}
.form-error {
  font-size:12px!important;
  color:#4c4c4c!important;
  margin-top:12px!important;
}
.settings-fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.settings-fields input {
  width:100%;
  display:block;
  margin-top:8px;
}
.check-label {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  margin:20px 0;
}
.check-label input {
  width:18px;
  height:18px;
}
.settings-dialog form>.button {
  width:100%;
}
.local-data {
  margin-top:27px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.local-data h3 {
  font-size:14px;
  margin-bottom:9px;
}
.local-data p {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
}
.backup-actions {
  display:flex;
  gap:6px;
  margin-top:16px;
  flex-wrap:wrap;
}
.museum-dialog {
  width:min(920px,calc(100vw - 30px));
  padding:30px;
}
.museum-dialog .dialog-heading {
  margin-bottom:12px;
}
.museum-dialog h2 {
  font-size:28px;
  margin-top:0;

  font-weight:620;
}
.museum-summary {
  margin-bottom:27px!important;
  font-size:13px!important;
}
.museum-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px 15px;
}
.museum-item {
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:7px;
  border:0;
  background:none;
  padding:0;
  text-align:left;
}
.museum-item .museum-image {
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:12px;
  background:#ededed;
  border:1px solid #dedede;
}
.museum-item img {
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  padding:10px;
}
.museum-item .museum-name {
  font-size:10px;
  font-weight:550;
  line-height:1.45;
  overflow-wrap:anywhere;
}
.museum-item.locked {
  color:#7b7b7b;
}
.museum-item.locked .museum-image {
  background:#ededed;
  border-style:dashed;
}
.museum-lock {
  font-family:inherit;
  font-size:12px;
  color:var(--muted);
}
.museum-item:not(.locked):hover .museum-image {
  border-color:var(--accent);
  background:#eaeaea;
}
.museum-empty {
  grid-column:1/-1;
  text-align:center;
  padding:30px 0;
  color:var(--muted);
  font-size:14px;
}
.art-dialog {
  width:min(560px,calc(100vw - 30px));
  padding:26px;
}
.art-dialog .dialog-heading {
  margin-bottom:13px;
}
.art-picture {
  height:300px;
  background:#eeeeee;
  border:1px solid var(--line);
  border-radius:15px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.art-picture img {
  width:100%;
  height:100%;
  object-fit:contain;
  padding:16px;
  image-rendering:pixelated;
}
.art-picture.original img {
  image-rendering:auto;
  padding:8px;
}
.art-title-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:22px 0 17px;
}
.art-title-row>div {
  min-width:0;
}
.art-title-row h2 {
  font-family:inherit;
  font-size:23px;
  font-weight:620;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.art-title-row p {
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}
.art-title-row .button {
  flex-shrink:0;
}
.art-drop {
  font-size:14px!important;
  color:var(--ink)!important;
  line-height:1.6;
}
.art-story {
  font-size:13px;
  color:var(--muted);
  margin:17px 0 23px;
}
.art-story summary {
  cursor:pointer;
  padding:8px 0;
  min-height:36px;
  font-weight:550;
}
.art-story p {
  line-height:1.7;
  margin-top:8px;
}
.art-dialog>.button {
  width:100%;
}
.toast {
  position:fixed;
  z-index:20;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  border-radius:14px;
  padding:12px 13px 12px 20px;
  display:flex;
  align-items:center;
  gap:18px;
  max-width:calc(100vw - 30px);
  background:var(--ink);
  color:var(--surface);
  box-shadow:0 8px 30px #31313130;
  font-size:13px;
  white-space:normal;
}
.toast button {
  background:none;
  border:0;
  color:inherit;
  font-weight:600;
  min-height:36px;
  flex-shrink:0;
}
.toast button#undo-button {
  text-decoration:underline;
  text-underline-offset:4px;
}
.toast #toast-close {
  font-size:23px;
  min-width:32px;
  font-weight:400;
}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  transform:translateY(-200%);
  background:var(--surface);
  padding:12px;
  z-index:100;
  border-radius:8px;
}
.skip-link:focus {
  transform:translateY(0);
}
.focus-only .workspace {
  display:block;
  max-width:500px;
  margin:0 auto;
}
.focus-only .board-section,.focus-only .chest-panel,.focus-only .app-footer,.focus-only .today-summary,.focus-only #museum-button {
  display:none;
}
.focus-only .timer-panel {
  padding:22px 28px 20px;

  box-shadow:none;

  border:0;
}
.focus-only .timer-face {
  width:216px;
  height:216px;
  margin:12px auto;
}
.focus-only .timer-digits>span:first-child {
  font-size:64px;
}
.focus-only .app-header {
  margin-bottom:26px;

  padding:24px 0 20px;
}
.focus-only .timer-panel h1 {
  font-size:28px;

  font-weight:620;

  letter-spacing:-.6px;
}
.focus-only #start-help {
  display:none;
}
.focus-only .timer-actions {
  max-width:330px;
  margin:auto;
}
@media(min-width:1050px) {
  .sticky:nth-child(4n+2) {
    transform:none;
  }
  .sticky:nth-child(4n+3) {
    transform:none;
  }
}
@media(max-width:1050px) {
  .app-shell {
    padding:0 28px;
  }
  .workspace {
    gap:30px;
    grid-template-columns:minmax(310px,365px) minmax(0,1fr);
  }
  .timer-panel {
    padding:22px;
  
  box-shadow:none;

  border:0;
}
  .timer-panel h1 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;
}
  .task-board {
    gap:12px;
  }
  .sticky {
    padding:15px 14px 12px;
  }
  .today-summary {
    margin-right:0;
    font-size:12px;
  }
  .header-actions {
    gap:7px;
  }
  .board-heading h2 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;

  margin-top:0;
}
  .board-heading .button {
    padding:10px 12px;
  }
  .board-heading .eyebrow {
    font-size:12px;
    letter-spacing:0;
  
  font-weight:500;
}
  .notice {
    align-items:flex-start;
    flex-direction:column;
  }
  .museum-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media(max-width:820px) {
  .app-shell {
    max-width:670px;
    padding:0 24px;
  }
  .app-header {
    padding:24px 0 20px;
    margin-bottom:26px;
  }
  .today-summary {
    display:none;
  }
  .workspace {
    grid-template-columns:1fr;
    gap:34px;
  }
  .focus-column {
    display:grid;
    grid-template-columns:1fr;
    max-width:450px;
    margin:0 auto;
    width:100%;
  }
  .timer-panel {
    padding:23px 28px;
  
  box-shadow:none;

  border:0;
}
  .timer-panel h1 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;
}
  .timer-face {
    width:216px;
    height:216px;
    margin:12px auto;
  }
  .panel-top {
    margin-bottom:14px;
  
  justify-content:flex-end;
}
  .chest-panel {
    padding:20px 5px 0;
  }
  .board-section {
    padding-top:0;
  }
  .empty-board {
    min-height:220px;
    padding:35px 20px;
  
  border:0;
}
  .empty-board h3 {
    margin-top:16px;
  
  margin:8px 0 10px;
}
  .board-heading .eyebrow {
    font-size:12px;
    letter-spacing:0;
  
  font-weight:500;
}
  .board-heading h2 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;

  margin-top:0;
}
  .sticky {
    min-height:175px;
    padding:17px;
  }
  .app-footer {
    margin-top:31px;
  
  justify-content:flex-end;
}
  .museum-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px 12px;
  }
  .museum-dialog {
    padding:23px;
  }
  .focus-only .focus-column {
    max-width:500px;
  }
  .focus-only .timer-panel {
    padding:22px 28px 20px;
  
  box-shadow:none;

  border:0;
}
}
@media(max-width:440px) {
  .app-shell {
    padding:0 16px;
  }
  .app-header {
    gap:8px;
    padding:24px 0 20px;
    margin-bottom:26px;
  }
  .brand {
    font-size:23px;
    gap:9px;
  }
  .header-actions {
    gap:0;
  }
  .header-actions .button {
    padding:8px 9px;
    font-size:11px;
  }
  .header-actions .icon-button {
    min-width:36px;
    width:36px;
  }
  .timer-panel {
    padding:20px 21px 17px;
    border-radius:21px;
  
  box-shadow:none;

  border:0;
}
  .timer-panel h1 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;
}
  .panel-top {
    margin-bottom:14px;
    gap:6px;
  
  justify-content:flex-end;
}
  .panel-top .eyebrow {
    font-size:12px;
    letter-spacing:0;
  
  font-weight:500;
}
  .timer-face {
    width:216px;
    height:216px;
  
  margin:12px auto;
}
  .timer-digits>span:first-child {
    font-size:61px;
  }
  .focus-context {
    font-size:12px;
  
  margin:8px auto 3px;
}
  .duration-options {
    margin-bottom:14px;
  }
  .duration-options button {
    min-width:53px;
    padding:8px;
  }
  .chest-panel {
    gap:12px;
    padding:20px 2px 0;
  }
  .chest-copy h2 {
    font-size:13px;
  }
  .chest-copy p {
    font-size:12px;
  }
  .chest-panel .button {
    padding:8px 10px;
    font-size:12px;
  }
  .board-heading h2 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;

  margin-top:0;
}
  .board-heading .eyebrow {
    font-size:12px;
    letter-spacing:0;
  
  font-weight:500;
}
  .board-heading .button {
    font-size:12px;
    padding:9px 12px;
  }
  .board-subheading {
    font-size:11px;
    margin-bottom:19px;
  }
  .task-board {
    gap:11px;
  }
  .sticky {
    padding:14px 12px 11px;
    min-height:170px;
  }
  .sticky-title {
    font-size:14px;
  }
  .sticky-note {
    font-size:12px;
  }
  .sticky-focus {
    font-size:12px;
    padding:7px 9px;
  }
  .sticky-toggle {
    min-width:33px;
    width:33px;
    height:33px;
  }
  .sticky-footer {
    gap:4px;
  }
  .app-footer {
    align-items:flex-start;
    font-size:10px;
    gap:10px;
  
  justify-content:flex-end;
}
  .app-footer .text-button {
    padding:0;
    font-size:10px;
    min-height:24px;
  }
  .notice {
    padding:14px;
    font-size:12px;
  }
  .notice-actions {
    flex-wrap:wrap;
    flex-shrink:1;
  }
  .dialog {
    padding:23px;
  }
  .dialog-actions {
    gap:5px;
  }
  .dialog-actions .button {
    font-size:12px;
    padding:10px 13px;
  }
  .dialog-heading h2 {
    font-size:24px;
  
  font-weight:620;
}
  .museum-dialog h2 {
    font-size:28px;
  
  font-weight:620;

  margin-top:0;
}
  .museum-grid {
    gap:15px 10px;
  }
  .museum-item img {
    padding:6px;
  }
  .museum-item .museum-name {
    font-size:9px;
  }
  .art-picture {
    height:240px;
  }
  .art-title-row h2 {
    font-size:23px;
  
  font-weight:620;
}
  .art-title-row {
    gap:8px;
  }
  .art-title-row .button {
    font-size:11px;
    padding:8px 10px;
  }
  .art-dialog .eyebrow {
    font-size:12px;
    letter-spacing:0;
  
  font-weight:500;
}
  .focus-only .timer-face {
    width:216px;
    height:216px;
  
  margin:12px auto;
}
  .focus-only .timer-panel {
    padding:22px 28px 20px;
  
  box-shadow:none;

  border:0;
}
  .focus-only .timer-panel h1 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;
}
  .focus-only .timer-digits>span:first-child {
    font-size:64px;
  }
}
@media(max-width:360px) {
  .app-shell {
    padding:0 12px;
  }
  .brand {
    font-size:21px;
  }
  .brand-mark {
    grid-template-columns:repeat(2,7px);
    gap:2px;
  }
  .brand-mark i {
    width:7px;
    height:7px;
  }
  .header-actions .button {
    font-size:10px;
    padding:8px;
  }
  .timer-panel {
    padding:18px;
  
  box-shadow:none;

  border:0;
}
  .panel-top .button {
    font-size:10px;
  }
  .task-board {
    grid-template-columns:1fr;
  }
  .sticky {
    min-height:150px;
  }
  .timer-panel h1 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;
}
  .timer-face {
    width:216px;
    height:216px;
  
  margin:12px auto;
}
  .board-heading h2 {
    font-size:28px;
  
  font-weight:620;

  letter-spacing:-.6px;

  margin-top:0;
}
  .board-heading .eyebrow {
    font-size:12px;
  
  font-weight:500;

  letter-spacing:0;
}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
    scroll-behavior:auto!important;
  }
}
.panel-top {
  justify-content:space-between;
}
.help-dialog {
  width:min(580px,calc(100vw - 30px));
}
.help-dialog .dialog-heading {
  margin-bottom:14px;
}
.help-dialog label:not(.help-check) {
  display:block;
  font-size:13px;
  font-weight:600;
  margin-bottom:8px;
}
.help-context {
  font-size:12px!important;
  margin-bottom:20px!important;
  overflow-wrap:anywhere;
}
.help-description {
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:20px;
}
.help-options {
  display:grid;
  gap:10px;
}
.help-option {
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px 16px;
  gap:5px;
}
.help-option strong {
  font-size:15px;
  font-weight:650;
}
.help-option span {
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  font-weight:400;
}
.help-field {
  margin-bottom:17px;
}
.help-field input,.help-field textarea,.help-dialog select {
  width:100%;
}
.help-dialog select {
  font:inherit;
  color:var(--ink);
  background:var(--surface);
  border:1px solid #bcbcbc;
  border-radius:12px;
  padding:12px;
  margin-bottom:18px;
  min-height:44px;
}
.help-dialog select:focus-visible {
  outline:3px solid var(--focus-outline);
  outline-offset:4px;
}
.help-footnote {
  font-size:12px;
  color:var(--muted);
  margin:13px 0;
  line-height:1.6;
}
.help-quote,.help-candidate {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  border-left:2px solid var(--line);
  padding:10px 14px;
  margin-bottom:20px;
  font-size:15px;
  line-height:1.6;
}
.help-question {
  font-size:20px;
  line-height:1.4;
  margin:18px 0;
}
.help-actions,.help-starts,.help-answers {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:22px;
  flex-wrap:wrap;
}
.help-starts>.button,.help-answers>.button {
  flex:1;
}
.help-check {
  margin:0;
  display:flex;
  gap:11px;
  align-items:flex-start;
  min-height:44px;
  font-size:14px;
  padding:10px 0;
  cursor:pointer;
  line-height:1.6;
}
.help-check input {
  width:18px;
  height:18px;
  flex-shrink:0;
  margin-top:3px;
  accent-color:var(--accent);
}
.help-check span {
  overflow-wrap:anywhere;
  white-space:pre-wrap;
}
.help-check input:checked+span {
  color:var(--muted);
  text-decoration:line-through;
}
.help-plan-list {
  padding-left:21px;
  margin:0 0 22px;
  font-size:13px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.help-plan-list li {
  margin-bottom:8px;
}
.help-plan-list:has(.help-check) {
  padding-left:0;
  list-style:none;
}
.help-task-list {
  list-style:none;
  padding:0;
  margin:20px 0;
}
.help-task-list li {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.help-task-list li>span {
  overflow-wrap:anywhere;
  min-width:0;
}
.help-task-list .button {
  min-width:44px;
  flex-shrink:0;
  font-size:22px;
}
.help-dump-form {
  display:flex;
  align-items:flex-end;
  gap:10px;
}
.help-dump-form .help-field {
  flex:1;
  min-width:0;
  margin-bottom:0;
}
.help-custom-time {
  display:grid;
  grid-template-columns:minmax(0,1fr) 85px auto;
  gap:9px;
  align-items:center;
  margin:18px 0;
}
.help-custom-time label {
  margin-bottom:0!important;
  font-size:12px!important;
}
.help-custom-time input {
  width:100%;
}
.help-active-session {
  padding:13px 15px;
  background:var(--panel);
  border-radius:12px;
  font-size:13px;
}
.session-plan {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:9px;
  font-size:12px;
  text-align:left;
}
.session-plan>summary {
  cursor:pointer;
  padding:8px 0;
  min-height:36px;
}
.session-plan-goal {
  margin:9px 0 12px;
  font-size:12px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.session-plan .help-plan-list {
  margin-bottom:10px;
}
.session-plan .help-check {
  font-size:12px;
}
.session-step-form {
  display:flex;
  gap:8px;
}
.session-step-form input {
  min-width:0;
  width:100%;
  font-size:12px;
}
@media(max-width:440px) {
  .help-dialog {
    padding:21px;
  }
  .panel-top #help-button {
    font-size:11px;
    padding:6px 8px;
  }
  .help-custom-time {
    grid-template-columns:minmax(0,1fr) 65px auto;
    gap:6px;
  }
  .help-custom-time .button {
    padding:9px 12px;
    font-size:12px;
  }
}