/* =============================================================================
   Notes Studio — skeuomorphic materials & controls
   Shared by the sign-in page (index.html) and the workspace (app.html).
   Materials: walnut desk, stitched espresso leather, brushed steel, yellow legal pad.
   Controls: physical keys that travel down when pressed, recessed (debossed) fields,
   rocker toggles and a slide switch.
   ============================================================================= */

@font-face { font-family: 'DM Sans'; font-weight: 400; src: url(../fonts/dm-sans-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 500; src: url(../fonts/dm-sans-latin-500-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'DM Sans'; font-weight: 600; src: url(../fonts/dm-sans-latin-600-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 600; src: url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 700; src: url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Caveat'; font-weight: 500; src: url(../fonts/caveat-latin-500-normal.woff2) format('woff2'); font-display: swap; }

:root {
  /* materials */
  --sk-desk: #1b130e;
  --sk-desk-2: #2b1c12;
  --sk-leather: #5c3522;
  --sk-leather-hi: #7a4a2f;
  --sk-leather-lo: #2a170d;
  --sk-thread: #d6a24a;
  --sk-steel-hi: #f4f6f8;
  --sk-steel: #c4c9cf;
  --sk-steel-lo: #868d95;
  --sk-pad: #f9ed9f;
  --sk-pad-lo: #ecdc86;
  --sk-rule-line: rgba(64, 108, 178, .34);
  --sk-margin-line: rgba(208, 66, 58, .55);
  /* inks */
  --sk-ink: #1e2a44;
  --sk-ink-key: #2c4d80;
  --sk-ink-key-lo: #172b4c;
  --sk-pencil: #4a4232;
  --sk-red-ink: #b3261e;
  --sk-green-ink: #2d6a32;
  --sk-brass: #e0a93b;
  --sk-brass-lo: #9a6b14;
  /* rhythm of the ruled paper */
  --rule: 30px;
  --sk-font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sk-display: 'Bricolage Grotesque', 'DM Sans', sans-serif;
  --sk-script: 'Caveat', 'Segoe Print', cursive;
  --sk-ease: cubic-bezier(.2, .8, .2, 1);

  /* textures (SVG noise, rendered once by the browser) */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='turbulence' baseFrequency='.42' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.15 0 0 0 .52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --tex-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -.8 .45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  --tex-brushed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='120'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0025 .9' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E");
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .07' numOctaves='5' seed='11' /%3E%3CfeColorMatrix values='.48 0 0 0 -.045 .3 0 0 0 -.03 .18 0 0 0 -.02 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
  --tex-wood-pores: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .4' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .03 0 0 0 0 .01 0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --tex-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .05 0 0 0 .22 -.06'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ desk */
.desk {
  margin: 0;
  min-height: 100dvh;
  color: #f1e6d3;
  font: 15px/1.5 var(--sk-font);
  -webkit-font-smoothing: antialiased;
  background-color: var(--sk-desk);
  background-image:
    radial-gradient(120% 80% at 22% -10%, rgba(255, 190, 110, .2), rgba(255, 190, 110, 0) 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 60%),
    linear-gradient(rgba(28, 14, 6, .28), rgba(28, 14, 6, .28)),
    var(--tex-wood-pores),
    var(--tex-wood);
  background-size: auto, auto, auto, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
.desk::after { /* fine grain over the whole desk */
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--tex-grain); opacity: .35; mix-blend-mode: multiply;
}

/* ------------------------------------------------------------------ leather */
.mat-leather, .portfolio {
  background-color: var(--sk-leather);
  background-image:
    radial-gradient(130% 90% at 30% 0%, rgba(255, 220, 180, .14), rgba(255, 220, 180, 0) 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .25)),
    var(--tex-leather);
  background-size: auto, auto, 220px 220px;
}
.stitched { position: relative; }
.stitched::before, .portfolio::before {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 2px dashed var(--sk-thread); border-radius: inherit;
  opacity: .8;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)) drop-shadow(0 -1px 0 rgba(255, 230, 190, .12));
}

/* ------------------------------------------------------------------ brushed steel */
.mat-steel {
  background-color: var(--sk-steel);
  background-image:
    var(--tex-brushed),
    linear-gradient(180deg, var(--sk-steel-hi) 0%, #d9dde1 18%, var(--sk-steel) 52%, #b3b9c0 78%, #d3d7db 100%);
  background-size: 600px 120px, auto;
}

/* ------------------------------------------------------------------ keys
   .key is the switch housing; .key-face the cap. At rest the cap sits on a
   visible base (the coloured bottom edge); pressed, it travels down 4px. */
.key {
  --key-top: #ffffff;
  --key-bottom: #e9ebee;
  --key-base: #a9aeb5;
  --key-text: #2b2f36;
  --key-travel: 4px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  min-height: 52px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--key-text);
  font: 600 15px/1 var(--sk-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  isolation: isolate;
}
.key::before { /* the base the cap stands on */
  content: ''; position: absolute; inset: var(--key-travel) 0 0; z-index: -1;
  border-radius: inherit;
  background: var(--key-base);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, .45), 0 14px 22px -10px rgba(0, 0, 0, .5);
}
.key-face {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  margin-bottom: var(--key-travel);
  padding: 0 20px;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(0, 0, 0, .14),
    inset 0 0 0 1px rgba(0, 0, 0, .06);
  transition: transform .07s ease-out, box-shadow .07s ease-out, filter .15s;
}
.key-face::after { /* soft sheen on the cap */
  content: ''; position: absolute; inset: 1px 1px 50%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.key:hover .key-face { filter: brightness(1.04); }
.key:active .key-face, .key.is-pressed .key-face {
  transform: translateY(var(--key-travel));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 2px 5px rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.key:active::before, .key.is-pressed::before { box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.key:focus-visible { outline: none; }
.key:focus-visible .key-face { box-shadow: 0 0 0 3px var(--sk-pad), 0 0 0 5px var(--sk-ink-key), inset 0 1px 0 rgba(255, 255, 255, .55); }
.key:disabled { cursor: default; }
.key:disabled:not(.is-busy) { opacity: .55; }
.key.is-busy .key-face { transform: translateY(calc(var(--key-travel) / 2)); }

.key-ink { --key-top: #3c639c; --key-bottom: var(--sk-ink-key); --key-base: var(--sk-ink-key-lo); --key-text: #f4f7fc; }
.key-ink .key-face { text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); }
.key-enamel { --key-top: #ffffff; --key-bottom: #eceef1; --key-base: #a6abb3; --key-text: #3c4043; }
.key-paper { --key-top: #fffbe6; --key-bottom: #f1e7bb; --key-base: #c4b577; --key-text: #3d3622; min-height: 42px; font-size: 14px; }
.key-paper .key-face { padding: 0 16px; }
.key-brass { --key-top: #f3c766; --key-bottom: var(--sk-brass); --key-base: var(--sk-brass-lo); --key-text: #2a1b05; }
.key-brass .key-face { text-shadow: 0 1px 0 rgba(255, 240, 200, .5); }

.g-logo { width: 20px; height: 20px; flex: none; }

.spinner { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: sk-spin .8s linear infinite; }
.is-busy .spinner { display: inline-block; }
@keyframes sk-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ recessed field */
.well {
  position: relative;
  display: flex; align-items: center;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(180deg, #e3d27a, #efe199 70%, #f2e5a2);
  box-shadow:
    inset 0 2px 3px rgba(84, 64, 6, .38),
    inset 0 1px 1px rgba(84, 64, 6, .45),
    inset 0 -1px 0 rgba(255, 255, 240, .5),
    0 1px 0 rgba(255, 255, 245, .8);
  transition: box-shadow .15s;
}
.well input {
  flex: 1; min-width: 0; height: 100%;
  padding: 0 14px;
  border: 0; outline: 0; background: transparent;
  color: var(--sk-ink);
  font: 500 15.5px var(--sk-font);
  caret-color: var(--sk-ink-key);
}
.well input::placeholder { color: rgba(60, 50, 20, .45); }
.well:focus-within {
  box-shadow:
    inset 0 2px 3px rgba(84, 64, 6, .38),
    inset 0 1px 1px rgba(84, 64, 6, .45),
    0 0 0 2px var(--sk-pad), 0 0 0 4px rgba(44, 77, 128, .75);
}
.well input:-webkit-autofill { -webkit-text-fill-color: var(--sk-ink); transition: background-color 9999s; box-shadow: none; }
.peek {
  display: grid; place-items: center;
  width: 36px; height: 32px; margin-right: 6px;
  border: 0; border-radius: 8px;
  background: linear-gradient(180deg, #fffbe3, #efe3ad);
  box-shadow: 0 2px 0 #c8b770, 0 3px 4px rgba(0, 0, 0, .18), inset 0 1px 0 #fff;
  color: var(--sk-pencil); cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.peek:active, .peek[aria-pressed="true"] { transform: translateY(2px); box-shadow: 0 0 0 #c8b770, inset 0 1px 3px rgba(0, 0, 0, .2); }
.peek svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.peek[aria-pressed="true"] svg { color: var(--sk-ink-key); }
.peek:focus-visible { outline: 2px solid var(--sk-ink-key); outline-offset: 1px; }

/* ------------------------------------------------------------------ rocker toggle */
.toggle { flex: none; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.toggle-track {
  position: relative; display: block;
  width: 48px; height: 26px; border-radius: 13px;
  background: linear-gradient(180deg, #cdbd6a, #e2d27f);
  box-shadow: inset 0 2px 4px rgba(70, 52, 0, .45), 0 1px 0 rgba(255, 255, 240, .7);
  transition: background .2s;
}
.toggle-lever {
  position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #e3e6ea 55%, #b9bfc6);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 -1px 1px rgba(0, 0, 0, .15);
  transition: transform .18s var(--sk-ease);
}
.toggle[aria-checked="true"] .toggle-track { background: linear-gradient(180deg, #284774, #3a5f96); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 240, .7); }
.toggle[aria-checked="true"] .toggle-lever { transform: translateX(22px); }
.toggle:focus-visible { outline: 2px solid var(--sk-ink-key); outline-offset: 3px; border-radius: 14px; }

/* ------------------------------------------------------------------ slide switch (two positions) */
.slide-switch {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  height: 44px; padding: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ddcb72, #ebdc92);
  box-shadow: inset 0 2px 4px rgba(84, 64, 6, .42), inset 0 1px 1px rgba(84, 64, 6, .4), 0 1px 0 rgba(255, 255, 245, .8);
}
.slide-switch button {
  position: relative; z-index: 1;
  border: 0; background: none; border-radius: 9px;
  color: rgba(52, 44, 20, .72);
  font: 600 14px var(--sk-font);
  cursor: pointer;
  transition: color .2s;
}
.slide-switch button[aria-selected="true"] { color: var(--sk-ink); }
.slide-switch button:focus-visible { outline: 2px solid var(--sk-ink-key); outline-offset: -2px; }
.slide-switch .knob {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 9px;
  background: linear-gradient(180deg, #fffdf2, #f3ecd0);
  box-shadow: 0 2px 0 #c2b26e, 0 3px 6px rgba(70, 52, 0, .3), inset 0 1px 0 #fff;
  transition: transform .26s var(--sk-ease);
}
.slide-switch[data-active="signup"] .knob { transform: translateX(100%); }

/* ------------------------------------------------------------------ sign-in page */
.auth-page { overflow-x: hidden; }
.auth-page.leaving main { opacity: .6; transition: opacity .3s; }

.portfolio {
  position: relative;
  padding: 30px 16px 18px;
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 225, 190, .14),
    inset 0 -3px 8px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35),
    0 2px 0 #1c0f07,
    0 28px 60px -12px rgba(0, 0, 0, .8),
    0 10px 24px rgba(0, 0, 0, .45);
}

.sk-clip {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: min(316px, 84%);
  height: 58px;
  margin: -8px auto -24px;
  padding: 0 14px;
  border-radius: 14px 14px 18px 18px;
  background-color: var(--sk-steel);
  background-image:
    var(--tex-brushed),
    linear-gradient(180deg, var(--sk-steel-hi) 0%, #dfe2e6 22%, var(--sk-steel) 55%, #a9b0b8 82%, #cdd2d7 100%);
  background-size: 600px 120px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 2px rgba(0, 0, 0, .18),
    inset 0 0 0 1px rgba(60, 66, 74, .35),
    0 3px 0 #6e757d,
    0 8px 14px rgba(0, 0, 0, .45);
}
.sk-clip::after { /* shadow the clip casts on the paper */
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 14px; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(40, 28, 0, .45), rgba(40, 28, 0, 0));
}
.screw {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  background:
    linear-gradient(135deg, transparent 44%, rgba(40, 44, 50, .75) 45% 55%, transparent 56%),
    radial-gradient(circle at 35% 30%, #fbfcfd, #b8bec5 60%, #7c838b);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 1px 1px rgba(0, 0, 0, .45), 0 0 0 2px rgba(110, 117, 125, .35);
}
.plate {
  display: flex; align-items: center; gap: 10px;
  margin: 0;
  font: 700 21px/1 var(--sk-display);
  letter-spacing: .01em;
  color: #59606a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 -1px 0 rgba(0, 0, 0, .38); /* engraved */
}
.enamel {
  width: 18px; height: 18px; border-radius: 5px;
  background: radial-gradient(circle at 35% 30%, #ffd98a, var(--sk-brass) 55%, #a16f14);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -1px 2px rgba(80, 50, 0, .5), 0 1px 0 rgba(255, 255, 255, .8);
}

.pad { position: relative; z-index: 2; }
.sheet {
  --margin-x: 50px;
  position: relative;
  padding: 58px 24px 26px calc(var(--margin-x) + 22px);
  border-radius: 3px 3px 6px 6px;
  color: var(--sk-pencil);
  background-color: var(--sk-pad);
  background-image:
    var(--tex-fiber),
    linear-gradient(var(--sk-pad) 0 58px, transparent 58px),
    linear-gradient(transparent calc(var(--rule) - 1px), var(--sk-rule-line) calc(var(--rule) - 1px) var(--rule));
  background-size: 240px 240px, 100% 100%, 100% var(--rule);
  background-position: 0 0, 0 0, 0 58px;
  background-repeat: repeat, no-repeat, repeat-y;
  box-shadow: /* the pages underneath */
    0 1px 0 #e6d88f, 0 2px 0 #f6e9a2, 0 3px 0 #dccd82, 0 4px 0 #f2e49b, 0 5px 0 #d4c47a,
    0 7px 10px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .25);
}
.sheet::before { /* double red margin line */
  content: ''; position: absolute; top: 0; bottom: 0; left: var(--margin-x); width: 4px;
  border-left: 1px solid var(--sk-margin-line); border-right: 1px solid var(--sk-margin-line);
  pointer-events: none;
}
.sheet::after { /* faint light falloff across the page */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%, rgba(120, 90, 0, .06));
}
.sheet > * { position: relative; z-index: 1; }
.sheet.checking { cursor: progress; }
.sheet.checking .ruled-form, .sheet.checking #google { opacity: .55; pointer-events: none; }

.sk-hand {
  height: calc(var(--rule) * 2);
  margin: 0;
  font: 500 34px/1 var(--sk-script);
  color: var(--sk-ink);
  padding-top: 25px;
  transform: rotate(-1.2deg);
  transform-origin: left bottom;
  white-space: nowrap;
}
.sheet .slide-switch { margin: 8px 0; }

.ruled-form { display: block; }
.sk-field label, .lead-text, .toggle-label, .sk-hint, .sk-status, .or-rule span { color: var(--sk-pencil); }
.sk-field label { display: block; height: var(--rule); font-size: 13.5px; font-weight: 600; line-height: 42px; }
.sk-field .opt { font-weight: 400; opacity: .75; }
.sk-field .well { margin: 7px 0; }
.sk-field-row { display: flex; align-items: center; gap: 12px; height: calc(var(--rule) * 2); }
.toggle-label { font-size: 13.5px; line-height: 1.3; }
.sk-hint { margin: -7px 0 0; font-size: 12.5px; line-height: var(--rule); opacity: .85; }
.lead-text { margin: 0; padding-top: 8px; font-size: 14.5px; line-height: var(--rule); }
.lead-text + .lead-text { padding-top: 0; }
.lead-text b { color: var(--sk-ink); font-weight: 600; overflow-wrap: anywhere; }
.lead-text[data-show="forgot"]:not([hidden]) { margin-bottom: 22px; }
.lead-text[data-show="recovery"]:not([hidden]) { margin-bottom: 0; }

#submit { margin: 4px 0; display: flex; }
.ruled-form .key { min-height: 52px; }

.link-ink {
  padding: 0; border: 0; background: none;
  color: var(--sk-ink-key);
  font: 600 13px var(--sk-font);
  line-height: var(--rule);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  cursor: pointer;
}
.link-ink:hover { color: var(--sk-ink); }
.link-ink:focus-visible { outline: 2px solid var(--sk-ink-key); outline-offset: 2px; border-radius: 3px; }
.link-ink.inline { font-size: inherit; line-height: inherit; }
.link-ink.back { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.link-ink.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sk-status { display: none; margin: 0; padding-top: 8px; font-size: 14px; font-weight: 500; line-height: var(--rule); }
.sk-status.show { display: block; }
.sk-status.error { color: var(--sk-red-ink); }
.sk-status.ok { color: var(--sk-green-ink); }

.or-rule { display: flex; align-items: center; gap: 12px; height: var(--rule); }
.or-rule::before, .or-rule::after { content: ''; flex: 1; height: 0; border-top: 1px dashed rgba(74, 66, 50, .35); }
.or-rule span { font: 500 20px/1 var(--sk-script); }
#google { display: flex; margin: 4px 0; }

.sent { padding-top: 6px; }
.sent .flex { margin-top: 20px; }
.sent-title { margin: 0; font: 700 24px/var(--rule) var(--sk-display); color: var(--sk-ink); height: calc(var(--rule) * 2); padding-top: 26px; }
.stamp {
  position: absolute; right: -4px; top: -6px;
  padding: 4px 12px 2px;
  border: 3px solid var(--sk-red-ink);
  border-radius: 8px;
  color: var(--sk-red-ink);
  font: 700 22px/1 var(--sk-display);
  letter-spacing: .06em;
  opacity: .78;
  transform: rotate(-9deg);
  mix-blend-mode: multiply;
  -webkit-mask-image: var(--tex-grain);
  mask-image: radial-gradient(circle, #000 60%, rgba(0, 0, 0, .75));
}
.sent:not([hidden]) .stamp { animation: sk-stamp .38s cubic-bezier(.3, 1.6, .5, 1) both .08s; }
@keyframes sk-stamp { from { opacity: 0; transform: rotate(-9deg) scale(1.8); } }

.noscript { position: fixed; inset: auto 0 0; margin: 0; padding: 12px; background: var(--sk-red-ink); color: #fff; text-align: center; }

@media (max-width: 480px) {
  :root { --rule: 28px; }
  .portfolio { padding: 26px 10px 12px; border-radius: 18px; }
  .portfolio::before { inset: 6px; }
  .sheet { --margin-x: 28px; padding: 54px 16px 22px calc(var(--margin-x) + 14px); background-position: 0 0, 0 0, 0 54px; background-image: var(--tex-fiber), linear-gradient(var(--sk-pad) 0 54px, transparent 54px), linear-gradient(transparent calc(var(--rule) - 1px), var(--sk-rule-line) calc(var(--rule) - 1px) var(--rule)); }
  .sk-hand { font-size: 29px; padding-top: 24px; }
  .plate { font-size: 18px; }
  .slide-switch button { font-size: 13px; }
  .key-face { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .key-face, .toggle-lever, .slide-switch .knob { transition: none; }
  .sent:not([hidden]) .stamp { animation: none; }
}
@media (forced-colors: active) {
  .key-face, .well, .slide-switch, .toggle-track { border: 1px solid CanvasText; }
}