/* The JEM page, worn through Kaleidoscope's HERE lens.
   glass.css and lens-here.css are already on <html class="ink" data-lens="here">.
   This sheet replaces the page's two style blocks and chester.css.
   The profile app keeps its own sheet; the names it reads are set below. */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  min-height: 100vh;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
body:has(#advanced-account:not([hidden])) {
  padding:
    max(var(--s5), env(safe-area-inset-top))
    max(var(--s4), env(safe-area-inset-right))
    max(var(--s6), env(safe-area-inset-bottom))
    max(var(--s4), env(safe-area-inset-left));
  overflow-x: hidden;
}
/* The universal bar keys its narrow layouts on the viewport, so inside the padded advanced screen it was 32px
   short of what it measures for, and in Open Runde it ran past the screen just above its breakpoints
   (320-325px, 401-406px). It spans the full width there, as on the default view. */
body:has(#advanced-account:not([hidden])) > here-bar {
  margin-left: calc(-1 * max(var(--s4), env(safe-area-inset-left)));
  margin-right: calc(-1 * max(var(--s4), env(safe-area-inset-right)));
}
::selection { background: var(--pick); color: var(--on-pick); }
::-moz-selection { background: var(--pick); color: var(--on-pick); }
a { color: var(--ink); }
a[href^="http"]:not([href*="hereandmore.com"])::after {
  content: " \2197";
  color: var(--ink-2);
  font-size: var(--t-xs);
  text-decoration: none;
}
a[href^="http"]:not([href*="hereandmore.com"]):hover { text-decoration-color: var(--ink); }
[hidden] { display: none !important; }

/* Names the profile sheet reads. --ch-sans is used on body, so it lives on the root.
   The other four are reset on #jem-app: that sheet sets them itself, on the same element. */
html.ink {
  --ch-sans: var(--f-ui);
  --ch-serif: var(--f-voice);
}
html.ink #jem-app {
  --paper: var(--ink);
  --muted: var(--ink-2);
  --line: inherit;
  --accent: var(--light);
  --ch-sans: var(--f-ui);
  --ch-serif: var(--f-voice);
}
html.ink body:has(#jem-app:not([hidden])) {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
}
html.ink #jem-app .button.primary,
html.ink #jem-app .button.primary:hover,
html.ink #jem-app .button.primary:focus-visible {
  background: var(--cta);
  color: var(--cta-ink);
  border-color: transparent;
  box-shadow: var(--cta-shadow);
  font-weight: 600;
}
html.ink #jem-app .button:not(.primary):not(.quiet):not(:disabled) {
  border-color: var(--ink-4);
}
html.ink #jem-app input:not([type="file"]),
html.ink #jem-app textarea,
html.ink #jem-app select {
  border-color: var(--ink-4);
}
html.ink #jem-app .button:disabled,
html.ink #jem-app .button.primary:disabled {
  opacity: 1;
  background: var(--tint);
  color: var(--ink-2);
  border-color: var(--ink-4);
  box-shadow: none;
  cursor: not-allowed;
}
html.ink #jem-app button[data-remove] {
  color: var(--bad);
  background: transparent;
  border: 1px solid var(--bad);
}
html.ink #jem-app button[data-remove]:active { background: var(--bad-soft); }
html.ink #jem-app .status.error { color: var(--bad); }
html.ink #jem-app { min-width: 0; }
html.ink #jem-app .topbar,
html.ink #jem-app .intro,
html.ink #jem-app .layout,
html.ink #jem-app .editor,
html.ink #jem-app .left-column,
html.ink #jem-app .preview { min-width: 0; }
html.ink #jem-app .topbar { flex-wrap: wrap; row-gap: var(--s2); }
html.ink #jem-app .top-links { flex-wrap: wrap; min-width: 0; }
html.ink #jem-app .wordmark { min-width: 0; }
html.ink #jem-app .session-state { white-space: normal; }
#jem-app .top-links a[href="/"] { display: none; }

/* US and NOW. Two equal doors; the one used last carries a quiet mark. */
/* The old page measured the doors and the profile column as content-box; border-box was only ever the advanced
   view's. Kept so the doors' and the profile column's widths match the old page. */
.here-doors, .here-doors .door, #jem-app { box-sizing: content-box; }
.here-doors {
  max-width: 1160px;
  margin: auto;
  padding: var(--s6) 42px 0;
  color: var(--ink);
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
  min-width: 0;
}
body:has(#jem-app[hidden]) .here-doors { display: none; }
.here-doors .doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  min-width: 0;
}
.here-doors .door {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
  min-height: 112px;
  padding: var(--s4) var(--s5);
  border: 1px solid var(--ink-4);
  border-radius: var(--r2);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--d-dur) var(--ease), background var(--d-dur) var(--ease);
}
.here-doors .door:hover { border-color: var(--ink-3); background: var(--raised); }
.here-doors .door:focus-visible,
.here-doors a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.here-doors .dw,
.here-doors .dl,
.here-doors .dlast { overflow-wrap: anywhere; }
.here-doors .dw {
  font: 400 var(--t-d2)/var(--lh-d2) var(--f-voice);
  letter-spacing: .02em;
}
.here-doors .dl { color: var(--ink-2); font-size: var(--t-s); line-height: var(--lh-s); }
.here-doors .door.last { border-color: var(--light); }
.here-doors .dlast {
  margin-top: auto;
  color: var(--light);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.here-doors .more {
  margin: var(--s3) var(--s1) 0;
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
}
.here-doors .more a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-3);
}
.here-doors .more a:hover { border-bottom-color: var(--ink); }
@media (max-width: 700px) {
  .here-doors {
    padding:
      max(var(--s4), env(safe-area-inset-top))
      max(var(--s4), env(safe-area-inset-right))
      0
      max(var(--s4), env(safe-area-inset-left));
  }
  .here-doors .door { min-height: var(--s9); padding: var(--s4); }
  .here-doors .dw { font-size: var(--t-d1); line-height: var(--lh-d1); }
}

/* Advanced account. Scoped so it does not restyle the profile, which shares .field. */
#advanced-account { --sep: var(--line); }
/* At no specificity, as the old block's reset was, so the desk card's own margins still win. */
:where(#advanced-account, #advanced-account *) { margin: 0; }
#advanced-account { -webkit-tap-highlight-color: transparent; }
#advanced-account .wrap { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }
#advanced-account .head h1 {
  font: 400 clamp(var(--t-l), 6vw, var(--t-d1))/var(--lh-d1) var(--f-voice);
  letter-spacing: -.01em;
}
#advanced-account .head .sub {
  color: var(--ink-2);
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
  margin-top: var(--s2);
}
#advanced-account a:not(.b):not(#deskcard a) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}
#advanced-account .sig {
  height: 1.15em;
  width: auto;
  max-width: 100%;
  vertical-align: -0.24em;
  margin: 0 var(--s1);
  filter: none;
}
#advanced-account .row .v:has(.sig) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
#advanced-account .who,
#advanced-account h2.who {
  font: 400 var(--t-s)/var(--lh-s) var(--f-ui);
  color: var(--ink-2);
  margin: var(--s6) var(--s2) var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  min-width: 0;
}
#advanced-account .who i,
#advanced-account .who em {
  font-family: var(--f-voice);
  font-style: italic;
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
}
#advanced-account .card {
  background: var(--surface);
  box-shadow: var(--ring), var(--shadow);
  border-radius: var(--r3);
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}
#advanced-account .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  flex-wrap: wrap;
  padding: var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .row:first-child { border-top: none; }
#advanced-account .row .l {
  color: var(--ink-2);
  font-size: var(--t-m);
  line-height: var(--lh-m);
  flex: none;
  max-width: 100%;
}
#advanced-account .row .v {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font-size: var(--t-m);
  line-height: var(--lh-m);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#advanced-account .row .v.mbsecret {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
  text-align: right;
}
#advanced-account .pf {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .pf:first-child { border-top: none; }
#advanced-account .pf .g {
  width: var(--h-s);
  height: var(--h-s);
  flex: none;
  border-radius: var(--r0);
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-m);
  font-weight: 600;
}
#advanced-account .pf .m { flex: 1; min-width: 0; }
#advanced-account .pf .m .n { font-size: var(--t-m); line-height: var(--lh-m); font-weight: 600; }
#advanced-account .pf .m .h {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
#advanced-account .ws {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4);
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-height: var(--reach);
  min-width: 0;
}
#advanced-account .ws:first-child { border-top: 0; }
#advanced-account .ws:active { background: var(--tint); }
#advanced-account .ws .mark {
  width: var(--s3);
  height: var(--s3);
  border-radius: var(--r-pill);
  border: 1px solid var(--ink-4);
  flex: none;
}
#advanced-account .ws.on .mark { border-color: var(--ink); background: var(--ink); }
#advanced-account .ws .wm { flex: 1; min-width: 0; }
#advanced-account .ws .wn { font-size: var(--t-m); line-height: var(--lh-m); font-weight: 600; }
#advanced-account .ws .wh {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  margin-top: 2px;
}
#advanced-account .ws .wk {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-2);
  flex: none;
  max-width: 100%;
}
#advanced-account .x {
  color: var(--bad);
  font-size: var(--t-l);
  line-height: 1;
  padding: var(--s1) var(--s2);
  min-width: var(--h-s);
  min-height: var(--h-s);
  cursor: pointer;
  flex: none;
  background: none;
  border: 1px solid var(--bad);
  border-radius: var(--r0);
}
#advanced-account .x:active { background: var(--bad-soft); color: var(--bad); }
#advanced-account .fi {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .fi:first-child { border-top: none; }
#advanced-account .fi .n {
  font-size: var(--t-m);
  line-height: var(--lh-m);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  min-width: 0;
}
#advanced-account .fi .n .e {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--tint);
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
}
#advanced-account .fi .lb {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink);
  margin-top: var(--s1);
}
#advanced-account .fi .cx {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  margin-top: var(--s1);
  overflow-wrap: anywhere;
}
#advanced-account .fi .pe {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
  margin-top: var(--s1);
  text-transform: uppercase;
  letter-spacing: .04em;
}
#advanced-account .rl {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .rl:first-child { border-top: none; }
#advanced-account .rl .rw {
  font-size: var(--t-m);
  line-height: var(--lh-m);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  min-width: 0;
}
#advanced-account .rl .rw span.t { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 400; }
#advanced-account .rk {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-2);
  background: var(--tint);
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
  flex: none;
  max-width: 100%;
}
#advanced-account .rf {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  margin-top: var(--s1);
  padding-left: 2px;
  overflow-wrap: anywhere;
}
#advanced-account .rf b {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-2);
  font-weight: 600;
  margin-right: var(--s2);
}
#advanced-account .pow {
  padding: var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .pow:first-child { border-top: none; }
#advanced-account .pow .h {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  color: var(--ink);
}
#advanced-account .pow.hard .h { color: var(--ok); }
#advanced-account .pow.soft .h { color: var(--c5); }
#advanced-account .pow.next .h { color: var(--c1); }
#advanced-account .pow .h .d { width: var(--s2); height: var(--s2); border-radius: var(--r-pill); flex: none; }
#advanced-account .pow.hard .h .d { background: var(--ok); }
#advanced-account .pow.soft .h .d { background: var(--c5); }
#advanced-account .pow.next .h .d { background: var(--c1); }
#advanced-account .pow ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
#advanced-account .pow li {
  font-size: var(--t-m);
  line-height: var(--lh-m);
  padding-left: var(--s4);
  position: relative;
}
#advanced-account .pow li:before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-2);
}
#advanced-account .pow.next li:before { content: "→"; color: var(--c1); }
#advanced-account .note,
#advanced-account .det,
#advanced-account .ccap {
  font-family: var(--f-ui);
  font-size: var(--t-s);
  line-height: var(--lh-s);
}
#advanced-account .note {
  padding: var(--s4);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
#advanced-account .note b { color: var(--ink); font-weight: 600; }
#advanced-account .field { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); min-width: 0; }
#advanced-account .field:first-child { border-top: none; }
#advanced-account .field label {
  display: block;
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: var(--s2);
}
#advanced-account .field input,
#advanced-account .field textarea,
#advanced-account .field select {
  width: 100%;
  min-width: 0;
  min-height: var(--h-l);
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
  color: var(--ink);
  background: var(--sunk);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--ink-4);
  border-radius: var(--r1);
  padding: var(--s3);
  outline: none;
}
#advanced-account .field textarea {
  resize: vertical;
  min-height: calc(var(--h-l) + var(--s1));
}
#advanced-account .field input:focus,
#advanced-account .field textarea:focus,
#advanced-account .field select:focus {
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--ink-4), var(--focus);
}
#advanced-account .field input::placeholder,
#advanced-account .field textarea::placeholder { color: var(--ink-2); }
#advanced-account .field .fpick {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  min-width: 0;
}
#advanced-account .field .fname {
  flex: 1;
  min-width: 0;
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#advanced-account a.b,
#advanced-account button.b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  width: 100%;
  max-width: 100%;
  min-height: var(--reach);
  min-width: 0;
  font: 600 var(--t-m)/var(--lh-m) var(--f-ui);
  text-decoration: none;
  padding: var(--s3) var(--s4);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: transform var(--d-micro) var(--spring), background var(--d-dur) var(--ease), box-shadow var(--d-micro) var(--ease);
}
#advanced-account button.b:active,
#advanced-account a.b:active { transform: scale(.975); }
#advanced-account .b.p {
  background: var(--cta);
  color: var(--cta-ink);
  box-shadow: var(--cta-shadow);
}
#advanced-account .card:has(.mbcopy) a.b.p {
  background: var(--light);
  color: var(--on-ink);
  box-shadow: none;
}
#advanced-account .b.s {
  background: var(--tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
#advanced-account .b.g {
  background: transparent;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
#advanced-account .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  padding: var(--s4);
  min-width: 0;
}
#advanced-account .chip {
  background: var(--tint);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s3);
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink);
  min-width: 0;
  max-width: 100%;
}
#advanced-account .det { padding: 0 var(--s4) var(--s1); }
#advanced-account .det .chip {
  margin: 0 var(--s2) var(--s2) 0;
  display: inline-block;
  color: var(--ink-2);
  max-width: 100%;
}
#advanced-account .det .amb {
  display: block;
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
  padding: 2px 0 var(--s2);
}
#advanced-account .kchips { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
#advanced-account .kchip {
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--ink-4);
  border-radius: var(--r-pill);
  padding: var(--s2) var(--s3);
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  cursor: pointer;
  max-width: 100%;
  transition: transform var(--d-micro) var(--spring), background var(--d-dur) var(--ease);
}
#advanced-account .kchip:active { transform: scale(.95); }
#advanced-account .kchip.on {
  background: var(--light);
  color: var(--on-ink);
  box-shadow: none;
  font-weight: 600;
}
#advanced-account .post {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4);
  min-width: 0;
}
#advanced-account .post > div { min-width: 0; flex: 1; }
#advanced-account .dot { width: var(--s3); height: var(--s3); border-radius: var(--r-pill); flex: none; }
#advanced-account .dot.high { background: var(--ok); }
#advanced-account .dot.mid { background: var(--warn); }
#advanced-account .dot.low { background: var(--ink-4); }
#advanced-account .post .t { font-size: var(--t-m); line-height: var(--lh-m); }
#advanced-account .post .s {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  margin-top: 2px;
}
#advanced-account .soon {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
  margin-left: var(--s2);
}
#advanced-account .crys { margin: var(--s4) 2px 0; min-width: 0; }
#advanced-account .cbar {
  height: var(--s2);
  border-radius: var(--r-pill);
  background: var(--tint);
  overflow: hidden;
}
#advanced-account .cbar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c4), var(--c1));
  transition: width var(--d-macro) var(--spring);
}
#advanced-account .crow {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s2);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
  min-width: 0;
}
#advanced-account .crow .cn { color: var(--ink); text-align: right; }
#advanced-account .mo {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s2) var(--s4);
  align-items: baseline;
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .mo:first-child { border-top: none; }
#advanced-account .mo .mt {
  flex: none;
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
  letter-spacing: .02em;
}
#advanced-account .mo .ml {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  min-width: 0;
  overflow-wrap: anywhere;
}
#advanced-account .gtag {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
  flex: none;
  max-width: 100%;
}
#advanced-account .cwrap { margin: var(--s4) 0 2px; text-align: center; min-width: 0; }
#advanced-account .cwrap canvas {
  width: 100%;
  max-width: 340px;
  height: 250px;
  touch-action: none;
  cursor: grab;
  display: block;
  margin: 0 auto;
}
#advanced-account .ccap {
  color: var(--ink-2);
  margin-top: var(--s1);
  letter-spacing: .02em;
}
#advanced-account .gm {
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  min-width: 0;
}
#advanced-account .gm:first-child { border-top: none; }
#advanced-account .gm.one {
  background: var(--glass-soft);
  box-shadow: inset 2px 0 0 var(--glass);
}
#advanced-account .onetag {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--glass-soft);
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
  flex: none;
  max-width: 100%;
}
#advanced-account .gh {
  display: flex;
  gap: var(--s2);
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
#advanced-account .gn {
  font-weight: 600;
  font-size: var(--t-m);
  line-height: var(--lh-m);
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
#advanced-account .gt {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r0);
  padding: var(--s1) var(--s2);
  flex: none;
  max-width: 100%;
}
#advanced-account .gt.seal { color: var(--warn); background: var(--warn-soft); }
#advanced-account .gt.signet { color: var(--on-ink); background: var(--light); }
#advanced-account .gt.mark { color: var(--ink-2); background: var(--tint); }
#advanced-account .gt.trace {
  color: var(--ink-2);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ink-4);
}
#advanced-account .gs {
  font-size: var(--t-s);
  line-height: var(--lh-s);
  color: var(--ink-2);
  margin-top: var(--s1);
}
#advanced-account .gs .cert { color: var(--ok); }
#advanced-account .gu {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s2);
  min-width: 0;
}
#advanced-account .gub {
  flex: 1;
  min-width: 0;
  height: var(--s1);
  border-radius: var(--r-pill);
  background: var(--tint);
  overflow: hidden;
}
#advanced-account .gub i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--c5), var(--c1));
}
#advanced-account .gu span {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
  white-space: normal;
  min-width: 0;
}
#advanced-account .ga {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--s2);
  gap: var(--s2);
  min-width: 0;
}
#advanced-account .ga > span { flex-wrap: wrap; max-width: 100%; min-width: 0; }
#advanced-account .ch {
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
  font-family: var(--f-mono);
  overflow-wrap: anywhere;
  min-width: 0;
}
#advanced-account .ab {
  font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui);
  color: var(--ink);
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--ink-4);
  border: 0;
  border-radius: var(--r0);
  padding: var(--s2) var(--s3);
  cursor: pointer;
  flex: none;
  max-width: 100%;
  white-space: normal;
}
#advanced-account .ab:active { transform: scale(.95); }
#advanced-account .gemc {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: var(--r1);
  background: var(--tint);
}
#advanced-account .gm.one .gemc { box-shadow: var(--glow); }
#advanced-account .foot {
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  text-align: center;
  margin: var(--s5) 0 var(--s1);
}
#advanced-account .toast {
  position: fixed;
  left: 50%;
  bottom: max(var(--s5), env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(var(--s5));
  width: max-content;
  max-width: calc(100% - var(--s6));
  background: var(--light);
  color: var(--on-ink);
  border: 1px solid color-mix(in srgb, var(--on-ink) 55%, transparent);
  padding: var(--s3) var(--s4);
  border-radius: var(--r2);
  font-size: var(--t-s);
  line-height: var(--lh-s);
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  transition: opacity var(--d-rise) var(--ease), transform var(--d-rise) var(--spring);
  pointer-events: none;
  z-index: 9;
}
#advanced-account .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#advanced-account .mbfield {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - var(--s6));
  border: 1px solid var(--ink-4);
  border-radius: var(--r1);
  background: var(--sunk);
  margin: 0 var(--s4) var(--s2);
  padding: 0 var(--s3);
  transition: border-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease);
}
#advanced-account .mbfield:focus-within {
  border-color: var(--focus-ring);
  box-shadow: var(--focus);
}
#advanced-account .mbfield input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
  padding: var(--s3) var(--s1) var(--s3) 0;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui);
  color: var(--ink);
}
#advanced-account .mbfield .mbsuf {
  color: var(--ink-2);
  font-size: var(--t-s);
  line-height: var(--lh-s);
  white-space: nowrap;
}
#advanced-account .mbmsg {
  min-height: var(--lh-s);
  margin: 0 var(--s4) var(--s3);
  padding: 0;
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  color: var(--ink-2);
}
#advanced-account .mbmsg.ok { color: var(--ok); }
#advanced-account .mbmsg.bad {
  color: var(--bad);
  font-family: var(--f-ui);
  font-size: var(--t-s);
  line-height: var(--lh-s);
}
#advanced-account .b.mbgo {
  width: auto;
  max-width: calc(100% - var(--s6));
  margin: 0 var(--s4) var(--s4);
  border-radius: var(--r1);
}
@media (max-width: 480px) {
  #advanced-account .b.mbgo { width: calc(100% - var(--s6)); padding: var(--s4); }
}
#advanced-account .b.mbgo:active { transform: scale(.975); }
#advanced-account .b.mbgo:disabled {
  opacity: 1;
  background: var(--tint);
  color: var(--ink-2);
  border: 1px solid var(--ink-4);
  box-shadow: none;
  cursor: not-allowed;
}
#advanced-account .mbhint {
  font: 400 var(--t-xs)/var(--lh-xs) var(--f-ui);
  color: var(--ink-2);
  margin: calc(var(--s1) * -1) var(--s4) var(--s4);
}
#advanced-account .mbsecret {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  line-height: var(--lh-xs);
  word-break: break-all;
  text-align: right;
  user-select: all;
}
#advanced-account .mbcopyrow { padding: 0 var(--s4) var(--s1); }
#advanced-account .b.mbcopy {
  width: auto;
  max-width: 100%;
  border-radius: var(--r1);
  padding: var(--s3) var(--s4);
}
#advanced-account .b.mbcopy.done { background: var(--ok); color: var(--on-ink); box-shadow: none; }
#advanced-account .mbtrust {
  font: 400 var(--t-xs)/var(--lh-xs) var(--f-ui);
  color: var(--ink-2);
  padding: 0 var(--s4) var(--s3);
  overflow-wrap: anywhere;
}
#advanced-account .mbtrust b { color: var(--ink); font-weight: 600; }
#advanced-account .mbfix {
  font: 400 var(--t-s)/var(--lh-s) var(--f-ui);
  color: var(--ink-2);
  margin: 2px var(--s4) var(--s3);
  overflow-wrap: anywhere;
}
#advanced-account .mbfix b { color: var(--ink); font-weight: 600; }
#advanced-account .v.num,
#advanced-account .mbnum {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

#advanced-account :focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--r0);
}
#advanced-account .b:focus-visible,
#advanced-account .b.p:focus-visible { outline-offset: 2px; }
#advanced-account .row:focus-visible,
#advanced-account .ws:focus-visible { outline-offset: -2px; }
#advanced-account .mbfield input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  #advanced-account, #advanced-account *,
  .here-doors, .here-doors * {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  html { color-scheme: light; }
  body { background: var(--ink); color: var(--ground); padding: 0; }
  body *, body *::before, body *::after { color: var(--ground) !important; }
  #jem-app, #jem-app *:not(.colour) {
    background: transparent !important;
    box-shadow: none !important;
  }
  #advanced-account .card,
  #advanced-account .note,
  #advanced-account .b,
  #advanced-account .chip,
  #advanced-account .kchip,
  #advanced-account .toast,
  #advanced-account .mbfield,
  #advanced-account .field input,
  #advanced-account .field textarea,
  #advanced-account .field select,
  .here-doors .door {
    background: transparent !important;
    box-shadow: none !important;
    border-color: var(--ground);
  }
  #advanced-account .toast,
  .tabbar, #tabbar, .fab, .hfullbtn, .aurora, .grain, .pet, #pet, #ask, .ask, .sheetbk, nav.rail .mk {
    display: none !important;
  }
  a { text-decoration: underline; }
  #advanced-account .card,
  .here-doors .door { break-inside: avoid; }
  #advanced-account .sig { filter: invert(1); }
}