/* Design tokens: source URL was unavailable. These values are an original, replaceable interpretation. No font files are distributed. */
:root {
  --paper:#f7f7f2;
  --surface:#fffefa;
  --ink:#24382f;
  --muted:#72786b;
  --line:#dde0d3;
  --green:#516548;
  --green-dark:#304935;
  --sage:#edf0e5;
  --olive:#a4ad78;
  --sand:#eee6d6;
  --clay:#bd8e78;
  --radius:20px;
  --font:"KoPubWorldDotum","KoPubDotum","Pretendard","Apple SD Gothic Neo","Noto Sans CJK KR","Noto Sans KR","Malgun Gothic",sans-serif;
  --shadow:0 10px 35px #27362908}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.65;
  word-break:keep-all}
button,input,select,textarea {
  font:inherit}
button {
  cursor:pointer;
  border:0}
button:disabled {
  cursor:not-allowed;
  opacity:.5}
a {
  color:inherit}
input,textarea,select {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:var(--ink);
  max-width:100%}
input:focus,textarea:focus,select:focus {
  outline:2px solid #869572;
  outline-offset:2px}
button:focus-visible,a:focus-visible {
  outline:3px solid #91a26d;
  outline-offset:3px}
textarea {
  resize:vertical;
  min-height:94px;
  width:100%}
h1,h2,h3,p {
  margin:0}
h1 {
  font-size:37px;
  font-weight:650;
  line-height:1.3;
  letter-spacing:-1.6px}
h2 {
  font-size:22px;
  font-weight:650;
  letter-spacing:-.6px}
h3 {
  font-size:16px;
  font-weight:650}
small,.small {
  font-size:12px}
.muted {
  color:var(--muted)}
.preline {
  white-space:pre-line}
.num {
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px}
.empty {
  padding:32px 18px;
  text-align:center;
  color:var(--muted)}
.empty strong {
  display:block;
  color:var(--ink);
  margin-bottom:5px}
.loading {
  padding:15vh 10vw;
  font-size:24px}
.shell {
  max-width:1440px;
  margin:auto;
  padding:0 48px}
.topbar {
  height:96px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  border-bottom:1px solid var(--line)}
.identity {
  display:flex;
  align-items:center;
  gap:13px}
.mark {
  width:37px;
  height:37px;
  border:1.5px solid var(--green);
  border-radius:50%;
  position:relative}
.mark:after {
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  border:1.5px solid var(--green);
  border-radius:50%;
  top:9px;
  left:13px;
  background:var(--paper)}
.brand {
  font-size:21px;
  font-weight:700;
  letter-spacing:-.8px}
.brand-sub {
  font-size:11px;
  letter-spacing:1.5px;
  color:var(--muted)}
.top-actions,.row,.actions {
  display:flex;
  align-items:center;
  gap:10px}
.row.between {
  justify-content:space-between}
.row.wrap,.actions {
  flex-wrap:wrap}
.actions {
  justify-content:flex-end}
.btn {
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 16px;
  background:var(--surface);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1.4}
.btn:hover {
  background:var(--sage)}
.btn.primary {
  background:var(--green-dark);
  color:#fff;
  border-color:var(--green-dark)}
.btn.primary:hover {
  background:var(--green)}
.btn.ghost {
  background:transparent;
  border-color:transparent}
.btn.sm {
  font-size:12px;
  padding:7px 11px;
  border-radius:8px}
.iconbtn {
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  color:var(--ink);
  display:grid;
  place-items:center}
.checkbtn {
  width:26px;
  height:26px;
  border:1.5px solid #b7c0aa;
  border-radius:8px;
  background:transparent;
  flex-shrink:0;
  display:grid;
  place-items:center;
  color:var(--green)}
.checkbtn.done {
  background:var(--green);
  color:white}
.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  font-size:11px;
  line-height:1.5;
  padding:4px 9px;
  border-radius:20px;
  background:var(--sage);
  color:var(--green)}
.badge.quiet {
  background:#f1eee6;
  color:#80745f}
.badge.line {
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted)}
.dot {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--green);
  display:inline-block}
.nav {
  display:flex;
  align-items:center;
  gap:28px;
  height:64px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none}
.nav button {
  height:64px;
  background:none;
  color:var(--muted);
  white-space:nowrap;
  padding:0 2px;
  position:relative;
  font-size:14px}
.nav button.active {
  color:var(--green-dark);
  font-weight:700}
.nav button.active:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:3px;
  background:var(--green)}
.nav-index {
  font-size:11px;
  margin-right:7px;
  opacity:.6}
.page {
  padding:34px 0 44px}
.pagehead {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:28px}
.pagehead p {
  margin-top:9px;
  font-size:14px;
  color:var(--muted)}
.overline {
  font-size:11px;
  letter-spacing:2px;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:8px}
.scope {
  display:flex;
  align-items:center;
  gap:9px}
.scope input {
  font-size:13px}
.grid {
  display:grid;
  gap:22px}
.grid.two {
  grid-template-columns:1.7fr 1fr}
.grid.equal {
  grid-template-columns:1fr 1fr}
.grid.three {
  grid-template-columns:repeat(3,1fr)}
.card {
  padding:27px 28px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0}
.card.flat {
  background:transparent;
  box-shadow:none}
.card.soft {
  background:var(--sage)}
.sectionhead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:20px}
.sectionhead p {
  margin-top:4px;
  color:var(--muted);
  font-size:12px}
.bigmoney {
  font-size:53px;
  line-height:1.25;
  font-weight:550;
  letter-spacing:-2px;
  margin:14px 0 9px}
.bigmoney .unit {
  font-size:19px;
  letter-spacing:-.5px;
  margin-left:5px;
  color:var(--muted)}
.fine {
  font-size:11px;
  color:var(--muted);
  line-height:1.7}
.funding-people {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--line)}
.person-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px}
.avatar {
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--sage);
  border-radius:50%;
  font-size:9px;
  margin-right:6px;
  color:var(--green);
  font-weight:700}
.amount {
  font-size:22px;
  letter-spacing:-.5px;
  font-weight:600}
.track {
  height:5px;
  background:var(--sage);
  border-radius:10px;
  overflow:hidden;
  margin:10px 0}
.track span {
  height:100%;
  display:block;
  background:var(--green);
  border-radius:10px}
.track.js span {
  background:var(--olive)}
.statfoot {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:24px;
  font-size:12px;
  color:var(--muted)}
.art-card {
  position:relative;
  overflow:hidden;
  min-height:315px;
  background:#e8eadc;
  border:1px solid #dce0cd;
  border-radius:var(--radius);
  padding:25px 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.art-tag {
  font-size:10px;
  letter-spacing:1.4px;
  color:#546044;
  z-index:1}
.art-quote {
  z-index:1;
  max-width:95%;
  font-size:23px;
  line-height:1.6;
  letter-spacing:-.7px;
  font-weight:450}
.art-note {
  font-size:11px;
  color:#626e54;
  margin-top:8px}
.landscape {
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none}
.sun {
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  background:#e1c794;
  right:36px;
  top:18px;
  opacity:.8}
.hill {
  position:absolute;
  width:450px;
  height:260px;
  border-radius:50% 50% 0 0;
  right:-210px;
  bottom:-100px;
  background:#a5b090;
  transform:rotate(-27deg)}
.hill.second {
  right:-60px;
  bottom:-182px;
  width:420px;
  height:340px;
  background:#6f856c;
  transform:rotate(-8deg)}
.art-card .landscape {
  opacity:.6}
.strip {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:7px;
  margin-bottom:16px}
.daypill {
  border-radius:12px;
  padding:10px 4px;
  text-align:center;
  background:var(--paper);
  border:1px solid transparent;
  cursor:pointer;
  color:var(--muted)}
.daypill.current {
  background:var(--green-dark);
  color:white}
.daypill.chosen:not(.current) {
  border-color:var(--green)}
.daypill .daynum {
  font-size:19px;
  font-weight:550;
  display:block}
.daypill .dayweek {
  font-size:10px}
.daypill .daycount {
  display:block;
  line-height:1;
  height:5px;
  margin-top:8px;
  font-size:9px}
.tasklist {
  display:flex;
  flex-direction:column}
.taskrow {
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 0;
  border-bottom:1px solid var(--line)}
.taskrow:last-child {
  border-bottom:0}
.tasktext {
  flex:1;
  min-width:0}
.tasktext strong {
  display:block;
  font-size:14px;
  font-weight:550}
.tasktext small {
  font-size:11px;
  color:var(--muted)}
.taskrow.complete .tasktext strong {
  text-decoration:line-through;
  color:var(--muted)}
.taskside {
  display:flex;
  align-items:center;
  gap:8px}
.mini-rule {
  padding:15px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:14px;
  align-items:flex-start}
.mini-rule:last-child {
  border:0}
.rule-no {
  font-family:Georgia,serif;
  color:var(--green);
  font-size:21px;
  font-style:italic}
.mini-rule strong {
  font-size:14px;
  display:block;
  font-weight:550}
.mini-rule small {
  font-size:11px;
  color:var(--muted)}
.note {
  border-left:3px solid #a6b28c;
  background:var(--sage);
  font-size:12px;
  color:#65715d;
  padding:12px 15px;
  line-height:1.8;
  margin-top:18px}
.note.neutral {
  border-color:#d1c8b5;
  background:#f3f0e8;
  color:#817864}
.footer {
  border-top:1px solid var(--line);
  padding:18px 0 28px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:11px;
  color:var(--muted)}
.metric {
  font-size:31px;
  font-weight:550;
  line-height:1.3;
  margin-top:10px;
  letter-spacing:-1px}
.kpi-label {
  font-size:12px;
  color:var(--muted)}
.tablewrap {
  overflow-x:auto}
table {
  width:100%;
  border-collapse:collapse;
  font-size:13px}
th {
  text-align:left;
  font-weight:500;
  color:var(--muted);
  font-size:11px;
  padding:12px 10px;
  border-bottom:1px solid var(--line);
  white-space:nowrap}
td {
  padding:13px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:middle}
tr:last-child td {
  border-bottom:0}
.tr {
  text-align:right}
.period-row {
  background:#f0f3e8}
.calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border-left:1px solid var(--line);
  border-top:1px solid var(--line)}
.calweekday {
  font-size:12px;
  padding:9px;
  text-align:center;
  background:var(--sage);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.calday {
  min-height:99px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:9px;
  cursor:pointer;
  background:var(--surface);
  text-align:left;
  color:var(--ink)}
.calday.blank {
  background:var(--paper);
  cursor:default}
.calday.today .calnum {
  background:var(--green);
  color:white;
  border-radius:50%;
  padding:3px 8px}
.calday.selected {
  box-shadow:inset 0 0 0 2px var(--olive);
  background:#f0f3e8}
.calnum {
  font-size:12px}
.calitem {
  font-size:10px;
  background:var(--sage);
  color:var(--green);
  border-radius:4px;
  padding:2px 5px;
  margin-top:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block}
.calmore {
  font-size:10px;
  color:var(--muted);
  margin-top:3px}
.tabs-sub {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:20px}
.tabs-sub button {
  padding:7px 14px;
  border-radius:20px;
  background:var(--surface);
  color:var(--muted);
  border:1px solid var(--line);
  font-size:12px}
.tabs-sub button.active {
  background:var(--green);
  color:white;
  border-color:var(--green)}
.charter-row {
  padding:23px 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:18px}
.charter-row h3 {
  font-size:18px;
  margin-bottom:8px}
.charter-row p {
  font-size:14px;
  line-height:1.9;
  max-width:880px}
.charter-note {
  margin-top:9px;
  font-size:12px;
  color:var(--muted)}
.signature {
  border:1px solid var(--line);
  border-radius:14px;
  padding:17px;
  flex:1}
.sig-name {
  font-size:17px;
  font-weight:600;
  margin-bottom:7px}
.promise {
  border:1px solid var(--line);
  border-radius:16px;
  padding:21px;
  margin-bottom:14px;
  background:var(--surface)}
.promise h3 {
  font-size:17px;
  margin:10px 0 8px}
.promise p {
  font-size:13px;
  color:var(--muted)}
.confirmrow {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:15px 0}
.review-field {
  padding:18px 0;
  border-top:1px solid var(--line)}
.review-field label {
  font-size:14px;
  font-weight:550;
  display:block;
  margin-bottom:10px}
.review-field textarea {
  font-size:13px;
  background:var(--paper)}
.roadmap td:not(:first-child),.roadmap th:not(:first-child) {
  text-align:center;
  padding:12px 6px;
  font-size:11px}
.roadmap td:first-child {
  font-size:12px;
  min-width:150px}
.formgrid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:17px}
.field {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0}
.field label {
  font-size:12px;
  color:var(--muted)}
.field.full {
  grid-column:1/-1}
.field input,.field select {
  width:100%}
.checklabel {
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.7;
  cursor:pointer}
.checklabel input {
  margin-top:6px;
  flex-shrink:0}
.divider {
  height:1px;
  background:var(--line);
  margin:23px 0}
.field small {
  font-size:10px;
  color:var(--muted)}
dialog {
  border:1px solid var(--line);
  border-radius:22px;
  padding:0;
  background:var(--surface);
  color:var(--ink);
  max-width:680px;
  width:calc(100% - 32px);
  max-height:90vh;
  box-shadow:0 24px 100px #182e3528}
dialog::backdrop {
  background:#172d2640;
  backdrop-filter:blur(3px)}
.modalhead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 27px 18px;
  border-bottom:1px solid var(--line)}
.modalbody {
  padding:24px 27px;
  overflow-y:auto}
.modalfoot {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px 27px;
  border-top:1px solid var(--line);
  background:var(--paper)}
#toast {
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translateX(-50%) translateY(80px);
  opacity:0;
  background:var(--green-dark);
  color:white;
  padding:12px 22px;
  border-radius:12px;
  z-index:100;
  font-size:13px;
  max-width:90%;
  transition:.2s;
  box-shadow:var(--shadow)}
#toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0)}
.onboarding {
  max-width:750px;
  margin:12vh auto;
  padding:40px}
.onboarding h1 {
  margin:20px 0}
.onboarding p {
  color:var(--muted);
  line-height:1.9;
  margin-bottom:23px}
.syncstate {
  font-size:11px;
  color:var(--muted)}
.syncstate.pending {
  color:#8b784d}
.source-link {
  font-size:11px;
  color:var(--muted);
  text-decoration:underline;
  background:transparent;
  padding:0}
.readonly-note {
  font-size:11px;
  color:var(--muted)}
.tv {
  position:fixed;
  inset:0;
  background:#e8e8db;
  z-index:50;
  overflow:hidden}
.tv .landscape {
  inset:-5%;
  transition:transform 3s}
.tv .sun {
  width:33vw;
  height:33vw;
  right:8vw;
  top:9vh}
.tv .hill {
  width:90vw;
  height:78vh;
  bottom:-25vh;
  right:-28vw;
  background:#a5b194}
.tv .hill.second {
  width:85vw;
  height:67vh;
  bottom:-28vh;
  right:15vw;
  background:#68836d;
  transform:rotate(12deg)}
.tv-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover}
.tv-photo-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#122c3360,#122c3300)}
.tv-content {
  position:absolute;
  inset:5.5vh 5vw;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  pointer-events:none}
.tv-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start}
.tv-clock {
  font-size:7vw;
  font-weight:350;
  letter-spacing:-.04em;
  line-height:1.1}
.tv-date {
  font-size:1.5vw;
  letter-spacing:.04em;
  margin-top:1vh}
.tv-label {
  font-size:1.1vw;
  letter-spacing:.1em}
.tv-panel {
  max-width:58%;
  padding:2.6vw;
  background:#fffef8d9;
  backdrop-filter:blur(10px);
  border:1px solid #fff8;
  border-radius:1.5vw;
  box-shadow:0 15px 50px #2345210b}
.tv-panel h2 {
  font-size:2.1vw;
  margin-bottom:1vw}
.tv-panel p {
  font-size:1.5vw;
  line-height:1.8}
.tv-panel .tv-rule {
  font-size:2.6vw;
  line-height:1.65;
  font-weight:450;
  letter-spacing:-.04em}
.tv-task {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #c6cebd88;
  padding:.8vw 0;
  font-size:1.5vw}
.tv-task:last-child {
  border:0}
.tv-bottom {
  display:flex;
  justify-content:space-between;
  align-items:flex-end}
.tv-counter {
  font-size:1.1vw}
.tv-controls {
  position:absolute;
  top:20px;
  right:24px;
  display:flex;
  gap:8px;
  opacity:0;
  transition:opacity .2s;
  z-index:2}
.tv:hover .tv-controls,.tv:focus-within .tv-controls {
  opacity:1}
.tv-control-hint {
  position:absolute;
  bottom:15px;
  right:24px;
  font-size:11px;
  opacity:.65}
.tv .photo-text {
  color:white;
  text-shadow:0 2px 8px #0004}
.tv-art-only .tv-panel {
  opacity:0}
.barcell {
  min-width:100px}
.subtle-meter {
  height:4px;
  background:var(--sage);
  border-radius:6px;
  width:100%;
  margin:5px 0}
.subtle-meter span {
  display:block;
  background:var(--olive);
  height:100%;
  border-radius:6px}
.notice-block {
  padding:20px 24px;
  border:1px dashed #c3c9b4;
  border-radius:16px;
  margin-bottom:22px}
.pending-count {
  font-size:34px;
  font-weight:500;
  line-height:1.2;
  margin:6px 0}
.gap-top {
  margin-top:22px}
.linkrow {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line)}
.linkrow:last-child {
  border:0}
.mobile-only {
  display:none}

@media(min-width:1650px) {
  .shell {
  max-width:1540px}
.pagehead {
  margin-bottom:34px}
.card {
  padding:30px 32px}
}

@media(max-width:1050px) {
  .shell {
  padding:0 25px}
.top-actions .syncstate {
  display:none}
.grid.two {
  grid-template-columns:1.35fr 1fr}
.nav {
  gap:22px}
.card {
  padding:23px}
.bigmoney {
  font-size:44px}
.art-quote {
  font-size:21px}
.taskside .badge {
  display:none}
.art-card {
  padding:24px}
.pagehead {
  align-items:flex-start}
.calday {
  padding:7px;
  min-height:94px}
.nav-index {
  display:none}
}

@media(max-width:760px) {
  .shell {
  padding:0 18px}
.topbar {
  height:78px}
.brand {
  font-size:18px}
.brand-sub {
  font-size:9px}
.top-actions {
  gap:5px}
.top-actions .desktop-only {
  display:none}
.top-actions .btn {
  padding:8px 10px;
  font-size:11px}
.mark {
  width:27px;
  height:27px}
.mark:after {
  width:19px;
  height:19px;
  top:7px;
  left:9px}
.identity {
  gap:9px}
.nav {
  height:54px;
  gap:25px}
.nav button {
  height:54px;
  font-size:13px}
.page {
  padding:25px 0}
.pagehead {
  display:block;
  margin-bottom:22px}
.pagehead h1 {
  font-size:29px;
  letter-spacing:-1px}
.pagehead p {
  font-size:12px}
.scope {
  margin-top:18px}
.scope input {
  padding:8px 10px}
.grid.two,.grid.equal,.grid.three {
  grid-template-columns:1fr;
  gap:17px}
.card {
  padding:21px}
.bigmoney {
  font-size:46px}
.sectionhead h2 {
  font-size:19px}
.art-card {
  min-height:224px}
.art-quote {
  font-size:22px;
  max-width:80%}
.funding-people {
  gap:17px}
.person-top {
  gap:3px}
.amount {
  font-size:19px}
.fine {
  font-size:10px}
.pagehead .actions {
  justify-content:flex-start;
  margin-top:15px}
.strip {
  gap:4px}
.daypill {
  padding:8px 3px}
.taskrow {
  gap:10px}
.tasktext strong {
  font-size:13px}
.taskside .btn {
  font-size:10px;
  padding:6px 8px}
.footer {
  font-size:10px;
  display:block}
.footer>div+div {
  margin-top:8px}
.calday {
  min-height:90px;
  padding:5px}
.calitem {
  font-size:9px;
  padding:2px 3px}
.calweekday {
  font-size:10px;
  padding:7px 3px}
.charter-row {
  grid-template-columns:26px 1fr;
  gap:12px}
.charter-row>.btn {
  grid-column:2;
  justify-self:start}
.charter-row p {
  font-size:13px}
.charter-row h3 {
  font-size:16px}
.formgrid {
  grid-template-columns:1fr}
.field.full {
  grid-column:auto}
.modalhead {
  padding:19px}
.modalbody {
  padding:19px}
.modalfoot {
  padding:16px 19px}
.formgrid label {
  font-size:12px}
.row.signatures {
  flex-direction:column;
  align-items:stretch}
.tablewrap {
  margin:0 -5px}
td {
  font-size:12px;
  padding:12px 8px}
.onboarding {
  margin:7vh 18px;
  padding:25px}
.tv-controls {
  opacity:1;
  top:12px;
  right:12px}
.tv-controls .btn {
  font-size:10px;
  padding:6px 8px}
.tv-panel {
  max-width:90%;
  padding:5vw;
  border-radius:3vw}
.tv-clock {
  font-size:16vw}
.tv-date {
  font-size:3.5vw}
.tv-panel h2 {
  font-size:5vw}
.tv-panel p,.tv-task {
  font-size:3.5vw}
.tv-panel .tv-rule {
  font-size:5vw}
.tv-counter {
  font-size:2.5vw}
.tv-label {
  font-size:2.5vw}
.tv-content {
  inset:8vh 5vw}
.mobile-only {
  display:block}
}

@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important;
  scroll-behavior:auto!important}
}

@media print {
  .top-actions,.nav,.actions,.btn,.footer {
  display:none!important}
.shell {
  padding:0}
.card {
  break-inside:avoid;
  box-shadow:none}
.page {
  padding:0}
body {
  background:white}
.grid.two {
  grid-template-columns:1fr 1fr}
.pagehead h1 {
  font-size:28px}
}