/* Portal adapters consume the existing Webits tokens, identity and native Figma materials. */
@font-face {
  font-family:'PP Mori';
  src:url("../fonts/PPMori-Regular.a17bf83caed5.woff2") format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap
}

@font-face {
  font-family:'PP Mori';
  src:url("../fonts/PPMori-SemiBold.2cef1a4771b0.woff2") format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap
}

.mp-document {
  background:var(--hn-canvas);
  color:var(--hn-ink);
  scrollbar-gutter:stable;
  scrollbar-color:var(--hn-rule) var(--hn-canvas);
  scrollbar-width:thin
}

.mp {
  --mp-sidebar:224px;
  --mp-content-pad:48px;
  --mp-cut:14px;
  --mp-scroll-thumb:var(--hn-rule);
  --mp-scroll-track:transparent;
  margin:0;
  font-family:var(--font-sans-pp-mori);
  font-size:16px;
  line-height:1.5;
  background:var(--hn-canvas);
  color:var(--hn-ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased
}

.mp * {
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:var(--mp-scroll-thumb) var(--mp-scroll-track)
}

.mp *::-webkit-scrollbar {
  width:8px;
  height:8px
}

.mp *::-webkit-scrollbar-track {
  background:var(--mp-scroll-track)
}

.mp *::-webkit-scrollbar-thumb {
  background:var(--mp-scroll-thumb);
  border:2px solid transparent;
  background-clip:padding-box;
  border-radius:8px
}

.mp *::-webkit-scrollbar-thumb:hover {
  background-color:var(--hn-muted)
}

.mp h1,.mp h2,.mp h3,.mp p {
  margin:0
}

.mp h1 {
  font-size:36px;
  line-height:44px;
  font-weight:600;
  letter-spacing:-.025em;
  overflow-wrap:anywhere
}

.mp h2 {
  font-size:24px;
  line-height:32px;
  font-weight:600;
  letter-spacing:-.02em
}

.mp h3 {
  font-size:20px;
  line-height:28px;
  font-weight:600;
  letter-spacing:-.015em
}

.mp a {
  color:inherit;
  text-decoration:none
}

.mp button,.mp input,.mp select,.mp textarea {
  font:inherit
}

.mp button,.mp a,.mp select,.mp summary {
  touch-action:manipulation
}

.mp button:not(:disabled),.mp summary,.mp select {
  cursor:pointer
}

.mp a:hover {
  color:var(--hn-purple)
}

.mp :focus-visible {
  outline:2px solid var(--hn-purple);
  outline-offset:4px
}

.mp [hidden] {
  display:none!important
}

.mp ul,.mp ol {
  margin:0;
  padding:0;
  list-style:none
}

.mp button {
  color:inherit
}

.mp button:disabled,.mp input:disabled,.mp select:disabled {
  cursor:not-allowed;
  opacity:.5
}

.mp strong {
  font-weight:600
}

:where(.mp) form {
  margin:0
}

.mp fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0
}

.mp legend {
  padding:0
}

.mp img {
  max-width:100%
}

.mp a,.mp button {
  -webkit-tap-highlight-color:transparent
}

.mp-sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.mp-skip {
  position:fixed;
  top:8px;
  left:16px;
  z-index:1000;
  padding:12px 20px;
  background:var(--color-bg);
  transform:translateY(-200%)
}

.mp-skip:focus {
  transform:translateY(0)
}

.mp-muted {
  color:var(--hn-muted)
}

.mp-small {
  font-size:14px;
  line-height:20px
}

.mp-meta {
  font-size:12px;
  line-height:18px
}

.mp-icon {
  display:inline-block;
  width:20px;
  height:20px;
  flex:0 0 20px;
  vertical-align:middle;
  object-fit:contain
}

.mp-icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:0;
  border-radius:4px;
  background:transparent;
  padding:10px;
  line-height:1;
  font-size:24px;
  transition:background 160ms ease,color 160ms ease
}

.mp-icon-button:hover:not(:disabled) {
  background:var(--hn-purple-wash);
  color:var(--hn-purple)
}

.mp-icon-button:active:not(:disabled) {
  background:var(--hn-purple-structural)
}

.mp-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  z-index:30;
  width:var(--mp-sidebar);
  background:var(--color-bg);
  display:flex;
  flex-direction:column;
  padding:30px 20px 24px;
  overflow:auto
}

.mp-brand {
  display:block;
  width:128px;
  height:34px;
  margin-left:12px
}

.mp-brand img {
  display:block;
  width:128px;
  height:auto
}

.mp-sidebar__label {
  margin:16px 12px 36px!important;
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted)
}

.mp-nav {
  display:flex;
  flex-direction:column;
  gap:8px
}

.mp-nav a {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  min-height:48px;
  border-radius:5px;
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted)
}

.mp-nav a:hover,.mp-nav a[aria-current=page] {
  background:var(--hn-purple-wash);
  color:var(--hn-purple)
}

.mp-nav a[aria-current=page] {
  font-weight:600
}

.mp-owner {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  margin:40px 4px 0;
  padding-top:24px;
  border-top:1px solid var(--hn-rule);
  margin-top:auto
}

.mp-owner>span:last-child {
  min-width:0
}

.mp-owner strong {
  display:block;
  font-size:14px;
  line-height:20px
}

.mp-owner small {
  display:block;
  font-size:12px;
  line-height:18px;
  color:var(--hn-muted)
}

.mp-avatar {
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--hn-purple-wash);
  color:var(--hn-purple);
  font-size:12px;
  line-height:18px;
  flex:0 0 32px
}

.mp-avatar--brand {
  color:var(--color-bg);
  background:var(--hn-purple);
  font-size:10px
}

.mp-topbar {
  height:80px;
  margin-left:var(--mp-sidebar);
  padding:0 var(--mp-content-pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:var(--color-bg);
  border-bottom:1px solid var(--hn-rule)
}

.mp-breadcrumb,.mp-private {
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted)
}

.mp-private {
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap
}

.mp-private .mp-icon {
  width:16px;
  height:16px;
  flex-basis:16px
}

.mp-mobile-brand,.mp-mobile-account,.mp-mobile-brand-reference {
  display:none
}

.mp-main {
  margin-left:var(--mp-sidebar);
  padding:40px var(--mp-content-pad) 80px;
  min-height:calc(100vh - 80px);
  width:calc(100% - var(--mp-sidebar));
  max-width:1800px
}

.mp-main:focus {
  outline:none
}

.mp-page-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:48px
}

.mp-page-head>div:first-child {
  min-width:0;
  max-width:880px
}

.mp-page-head p {
  color:var(--hn-muted);
  margin-top:12px
}

.mp-page-head>.mp-actions {
  padding-top:2px;
  flex-shrink:0
}

.mp-introduction p {
  color:var(--hn-muted);
  margin-top:12px
}

.mp-back {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  margin:-12px 0 16px;
  color:var(--hn-purple)!important;
  font-size:14px
}

.mp-back .mp-icon {
  width:16px;
  height:16px;
  flex-basis:16px
}

.mp-btn {
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:80px;
  min-height:44px;
  width:fit-content;
  max-width:100%;
  padding:11px 16px;
  border:0;
  background:transparent;
  color:var(--hn-ink);
  font-size:14px;
  line-height:20px;
  font-weight:400;
  white-space:nowrap;
  vertical-align:middle;
  transition:color 180ms ease,filter 180ms ease
}

.mp-btn::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  border:12px solid transparent;
  border-image-source:url("button-white.b0631b02f1c8.svg");
  border-image-slice:12 fill;
  border-image-width:12px;
  pointer-events:none
}

.mp-btn:hover:not(:disabled) {
  color:var(--hn-purple);
  filter:brightness(.985)
}

.mp-btn:active:not(:disabled) {
  filter:brightness(.96)
}

.mp-btn--primary {
  color:var(--color-bg)!important
}

.mp-btn--primary::before {
  border-image-source:url("button-purple.b07d4f11653e.svg")
}

.mp-btn--primary .mp-icon {
  filter:brightness(0) invert(1)
}

.mp-btn--primary:hover:not(:disabled) {
  filter:brightness(.94)
}

.mp-btn--small {
  min-height:40px;
  padding:9px 14px;
  font-size:12px;
  line-height:20px
}

.mp-btn--small .mp-icon {
  width:16px;
  height:16px;
  flex-basis:16px
}

.mp-btn[aria-busy=true] {
  cursor:wait
}

.mp-btn[aria-busy=true]::after {
  content:'';
  position:absolute;
  right:10px;
  top:calc(50% - 7px);
  width:14px;
  height:14px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:mp-spin 700ms linear infinite
}

.mp-btn[aria-busy=true]>* {
  visibility:hidden
}

.mp-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px
}

.mp-actions>form {
  display:contents
}

.mp-text-action {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  width:fit-content;
  max-width:100%;
  border:0;
  padding:2px 0;
  background:none;
  color:var(--hn-purple)!important;
  font-size:12px;
  line-height:18px;
  text-align:left
}

.mp-text-action .mp-icon {
  width:14px;
  height:14px;
  flex-basis:14px
}

.mp-text-action:hover {
  text-decoration:underline!important;
  text-underline-offset:3px
}

.mp-text-action--muted {
  color:var(--hn-muted)!important
}

.mp-text-action--danger {
  color:var(--color-danger)!important
}

.mp-file-button {
  overflow:hidden;
  cursor:pointer
}

.mp-file-button input[type=file] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
  z-index:1
}

.mp-file-button:focus-within {
  outline:2px solid var(--hn-purple);
  outline-offset:4px
}

.mp-panel {
  position:relative;
  padding:0 3px 7px 0;
  min-width:0;
  isolation:isolate
}

.mp-panel__rear,.mp-panel__side,.mp-panel__face {
  position:absolute;
  border:32px solid transparent;
  border-image-slice:32 fill;
  border-image-width:32px;
  border-image-repeat:stretch;
  pointer-events:none;
  z-index:-1
}

.mp-panel__rear {
  inset:7px 0 0 3px;
  border-image-source:url("panel-rear.2c5888ec712e.svg")
}

.mp-panel__side {
  inset:3.5px 1.5px 3.5px 1.5px;
  border-image-source:url("panel-side.3227343ed945.svg")
}

.mp-panel__face {
  inset:0 3px 7px 0;
  border-image-source:url("panel-face.441b55ecf567.svg")
}

.mp-panel__content {
  padding:24px;
  position:relative;
  min-width:0
}

.mp-panel h2 {
  max-width:calc(100% - 8px)
}

.mp-stack {
  display:flex;
  flex-direction:column;
  gap:24px;
  min-width:0
}

.mp-columns {
  display:grid;
  gap:32px;
  align-items:start
}

.mp-columns--editor {
  grid-template-columns:minmax(0,1.74fr) minmax(290px,1fr)
}

.mp-columns--form {
  grid-template-columns:minmax(0,1.72fr) minmax(285px,1fr)
}

.mp-columns--equal {
  grid-template-columns:1fr 1fr
}

.mp-section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px
}

.mp-section-head h2 {
  flex:1
}

.mp-divider {
  height:1px;
  border:0;
  background:var(--hn-rule);
  margin:24px 0
}

.mp-note {
  background:var(--hn-purple-wash);
  padding:24px;
  min-width:0
}

.mp-note--cut {
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)
}

.mp-note p {
  margin-top:20px
}

.mp-note .mp-btn {
  margin-top:20px
}

.mp-note__icon {
  margin-bottom:20px;
  color:var(--hn-purple)
}

.mp-note__icon .mp-icon {
  width:26px;
  height:26px;
  flex-basis:26px
}

.mp-note h3 {
  font-size:20px;
  line-height:28px
}

.mp-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:6px 10px;
  background:var(--hn-canvas);
  border-radius:4px;
  color:var(--hn-muted);
  font-size:12px;
  line-height:18px;
  white-space:nowrap
}

.mp-badge--brand {
  background:var(--hn-purple-wash);
  color:var(--hn-purple)
}

.mp-badge--success {
  background:var(--hn-purple-wash);
  color:var(--color-success)
}

.mp-field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:24px;
  min-width:0
}

.mp-field>label,.mp-field>legend {
  font-size:14px;
  line-height:20px;
  font-weight:600;
  color:var(--hn-ink)
}

.mp-field>legend {
  margin-bottom:12px
}

.mp input:not([type=checkbox]):not([type=radio]):not([type=file]),.mp select,.mp textarea {
  width:100%;
  max-width:100%;
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--hn-rule);
  border-radius:5px;
  background:var(--color-bg);
  color:var(--hn-ink);
  font-size:16px;
  line-height:24px;
  transition:border-color 160ms ease,box-shadow 160ms ease
}

.mp input:not([type=checkbox]):not([type=radio]):not([type=file]),.mp select {
  min-height:50px
}

.mp input::placeholder,.mp textarea::placeholder {
  color:var(--hn-muted);
  opacity:1
}

.mp input:focus,.mp select:focus,.mp textarea:focus {
  outline:2px solid var(--hn-purple-wash);
  outline-offset:1px;
  border-color:var(--hn-purple)
}

.mp textarea {
  min-height:96px;
  resize:none;
  display:block
}

.mp textarea[data-caption] {
  min-height:240px;
  background:var(--hn-canvas);
  border-color:transparent;
  border-radius:4px
}

.mp textarea[data-caption]:focus {
  border-color:var(--hn-purple);
  background:var(--color-bg)
}

.mp-field--error input,.mp-field--error select,.mp-field--error textarea {
  border-color:var(--color-danger)
}

.mp-field-errors,.mp .errorlist {
  font-size:14px;
  line-height:20px;
  color:var(--color-danger);
  margin-top:4px
}

.mp .errorlist li+li {
  margin-top:4px
}

.mp-help {
  font-size:12px;
  line-height:18px;
  color:var(--hn-muted);
  margin-top:16px!important
}

.mp-field>.mp-help {
  margin-top:0!important
}

.mp-optional {
  margin-left:8px;
  font-size:12px;
  font-weight:400;
  color:var(--hn-muted)
}

.mp-field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.mp-password {
  position:relative;
  min-width:0
}

.mp-password>input {
  padding-right:52px!important
}

.mp-password>.mp-icon-button {
  position:absolute;
  right:3px;
  top:3px
}

.mp-check-group {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.mp-check-group--stack {
  flex-direction:column;
  gap:4px
}

.mp-check {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 8px 0 0;
  cursor:pointer;
  font-size:14px;
  line-height:20px
}

.mp-check input[type=checkbox] {
  position:absolute;
  left:0;
  top:12px;
  width:20px;
  height:20px;
  margin:0;
  opacity:0
}

.mp-check__box {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex:0 0 20px
}

.mp-check .hn-checkbox-mark {
  display:block;
  overflow:visible
}

.mp-check .hn-checkbox-mark__surface {
  fill:var(--color-bg)
}

.mp-check .hn-checkbox-mark__fill {
  fill:var(--hn-purple);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 260ms cubic-bezier(.22,1,.36,1) 70ms
}

.mp-check .hn-checkbox-mark__outline {
  fill:none;
  stroke:var(--hn-rule);
  stroke-width:1.2;
  transition:stroke 220ms ease
}

.mp-check .hn-checkbox-mark__tick {
  fill:none;
  stroke:var(--color-bg);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 180ms cubic-bezier(.4,0,.2,1)
}

.mp-check input:checked+.mp-check__box .hn-checkbox-mark__fill {
  clip-path:inset(0);
  transition-delay:0ms
}

.mp-check input:checked+.mp-check__box .hn-checkbox-mark__outline {
  stroke:var(--hn-purple)
}

.mp-check input:checked+.mp-check__box .hn-checkbox-mark__tick {
  stroke-dashoffset:0;
  transition-duration:240ms;
  transition-delay:80ms
}

.mp-check input:focus-visible+.mp-check__box {
  outline:2px solid var(--hn-purple);
  outline-offset:3px
}

.mp-check input:disabled~span {
  opacity:.6
}

.mp-check:has(input:disabled) {
  cursor:default
}

.mp-platform-choice .mp-check {
  flex:1;
  min-width:120px
}

.mp-platform-choice .mp-check-group {
  gap:16px
}

.mp-status-tabs {
  display:flex;
  align-items:stretch;
  gap:38px;
  margin-bottom:32px
}

.mp-status-tabs>a {
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 0;
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted)
}

.mp-status-tabs>a[aria-current=page] {
  color:var(--hn-purple);
  font-weight:600
}

.mp-status-tabs>a[aria-current=page]::after {
  position:absolute;
  content:'';
  height:2px;
  background:var(--hn-purple);
  inset:auto 0 0
}

.mp-library-search {
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:28px
}

.mp-search {
  position:relative;
  flex:1;
  min-width:220px
}

.mp-search>.mp-icon {
  position:absolute;
  left:14px;
  top:15px;
  pointer-events:none
}

.mp-search input {
  padding-left:46px!important;
  padding-right:48px!important
}

.mp-search__clear {
  position:absolute;
  right:3px;
  top:3px
}

.mp-search-select {
  width:168px;
  flex:0 0 168px
}

.mp-search-select select {
  font-size:14px
}

.mp-result-count {
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted);
  margin-bottom:24px!important
}

.mp-story-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px
}

.mp-story-card {
  min-width:0
}

.mp-story-card .mp-panel__content {
  padding:16px 16px 24px
}

.mp-story-card__preview {
  height:278px;
  padding:16px;
  background:var(--hn-purple-wash)
}

.mp-story-card__preview>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.mp-story-card__body {
  padding:24px 8px 0
}

.mp-story-card h2 {
  font-size:20px;
  line-height:28px;
  letter-spacing:-.02em;
  margin:12px 0
}

.mp-story-card h2 a::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:2
}

.mp-story-card:focus-within .mp-panel__face,.mp-story-card:hover .mp-panel__face {
  filter:brightness(.99)
}

.mp-story-card__no-art {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  color:var(--hn-muted);
  font-size:14px
}

.mp-story-card__no-art .mp-icon {
  width:36px;
  height:36px
}

.mp-platform-states {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:16px!important
}

.mp-story-card__footer {
  display:flex;
  gap:8px;
  align-items:flex-start;
  border-top:1px solid var(--hn-rule);
  margin-top:12px;
  padding-top:12px;
  min-height:56px;
  font-size:12px;
  line-height:18px;
  color:var(--hn-muted)
}

.mp-story-card__footer .mp-icon {
  width:16px;
  height:16px;
  flex-basis:16px
}

.mp-library-footnote {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:48px!important;
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted)
}

.mp-library-footnote .mp-icon {
  width:18px;
  height:18px;
  flex-basis:18px
}

.mp-empty {
  grid-column:1/-1;
  padding:64px 32px;
  background:var(--hn-purple-wash);
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%);
  text-align:center
}

.mp-empty>.mp-icon {
  width:36px;
  height:36px;
  margin-bottom:20px
}

.mp-empty h2 {
  margin-bottom:12px
}

.mp-empty p {
  color:var(--hn-muted);
  max-width:480px;
  margin:0 auto 24px
}

.mp-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:40px
}

.mp-platform-tabs {
  display:flex;
  gap:12px;
  margin-bottom:32px
}

.mp-platform-tabs .mp-btn {
  min-width:108px
}

.mp-platform-tabs .mp-btn:not(:last-child) {
  min-width:154px
}

.mp-caption {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--hn-canvas);
  border-radius:4px;
  padding:16px;
  min-height:220px;
  font-size:16px;
  line-height:24px
}

.mp-caption-footer {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-top:16px
}

.mp-caption-footer .mp-help {
  margin:0!important
}

.mp-caption-footer [data-caption-count] {
  white-space:nowrap
}

.mp-media-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px
}

.mp-media-tile {
  min-width:0
}

.mp-media-tile__image {
  position:relative;
  display:block;
  aspect-ratio:4/5;
  background:var(--hn-canvas);
  overflow:hidden
}

.mp-media-tile__image>img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.mp-media-tile__missing {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:100%;
  font-size:12px;
  color:var(--hn-muted);
  padding:12px;
  text-align:center
}

.mp-media-tile__type {
  position:absolute;
  bottom:6px;
  left:6px;
  padding:2px 6px;
  min-height:22px;
  background:var(--color-bg)
}

.mp-media-tile__toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  min-height:44px
}

.mp-media-tile__arrows {
  display:flex;
  align-items:center
}

.mp-media-tile__arrows .mp-icon-button {
  width:32px;
  height:40px;
  flex-basis:32px;
  padding:8px
}

.mp-media-tile__arrows .mp-icon {
  width:16px;
  height:16px;
  flex-basis:16px
}

.mp-media-tile__view {
  display:none
}

.mp-media-tile>.mp-text-action,.mp-media-tile>form>.mp-text-action {
  font-size:11px
}

.mp-media-empty {
  grid-column:1/-1;
  padding:40px 16px;
  text-align:center;
  background:var(--hn-canvas);
  border:1px dashed var(--hn-rule);
  border-radius:4px
}

.mp-media-help {
  margin-top:20px!important
}

.mp-reuse {
  margin-top:24px;
  border-top:1px solid var(--hn-rule);
  padding-top:20px
}

.mp-reuse summary,.mp-readiness-note summary {
  font-size:14px;
  line-height:20px;
  color:var(--hn-purple);
  min-height:32px
}

.mp-reuse-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:16px 0
}

.mp-reuse-choice {
  min-width:0;
  cursor:pointer
}

.mp-reuse-choice>img {
  width:100%;
  height:120px;
  object-fit:contain;
  background:var(--hn-canvas);
  display:block
}

.mp-reuse-choice .mp-check {
  align-items:flex-start;
  margin-top:8px;
  font-size:12px;
  word-break:break-word
}

.mp-readiness-note {
  font-size:14px;
  color:var(--hn-muted);
  padding:0 4px
}

.mp-readiness-note ul {
  list-style:disc;
  padding-left:20px;
  margin-top:8px
}

.mp-story-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:0
}

.mp-story-details>div {
  min-width:0
}

.mp-story-details dt {
  font-size:14px;
  font-weight:600;
  line-height:20px;
  margin-bottom:8px
}

.mp-story-details dd {
  font-size:14px;
  line-height:22px;
  margin:0;
  color:var(--hn-muted);
  overflow-wrap:anywhere
}

.mp-story-details dd>a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--hn-purple)
}

.mp-story-details__full {
  grid-column:1/-1
}

.mp-source-notes {
  font-size:14px;
  line-height:20px;
  color:var(--hn-muted)
}

.mp-source-notes h3 {
  font-size:14px;
  line-height:20px;
  color:var(--hn-ink);
  margin-bottom:8px
}

.mp-preview-panel .mp-panel__content {
  min-height:550px
}

.mp-preview__account {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  line-height:18px;
  margin:0 0 16px
}

.mp-preview__account .mp-avatar {
  width:28px;
  height:28px;
  flex-basis:28px
}

.mp-preview__image {
  aspect-ratio:358/360;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:var(--hn-purple-wash);
  min-width:0;
  overflow:hidden
}

.mp-preview__image>img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}

.mp-preview__empty {
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  padding:32px;
  font-size:14px;
  color:var(--hn-muted);
  text-align:center
}

.mp-preview__dots {
  display:flex;
  gap:4px;
  margin-top:12px;
  height:24px;
  align-items:center
}

.mp-preview__dots button {
  position:relative;
  width:12px;
  height:24px;
  padding:0;
  border:0;
  background:transparent
}

.mp-preview__dots button::after {
  content:'';
  position:absolute;
  width:6px;
  height:6px;
  left:3px;
  top:9px;
  background:var(--hn-rule);
  border-radius:4px;
  transition:background 150ms ease,width 150ms ease
}

.mp-preview__dots button[aria-pressed=true] {
  width:24px
}

.mp-preview__dots button[aria-pressed=true]::after {
  width:20px;
  background:var(--hn-purple)
}

.mp-mobile-workspace-actions {
  display:none
}

.mp-upload-progress {
  margin-bottom:24px;
  padding:16px;
  background:var(--hn-purple-wash);
  font-size:14px
}

.mp-upload-progress>div {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px
}

.mp-upload-progress progress {
  display:block;
  width:100%;
  height:6px;
  accent-color:var(--hn-purple)
}

.mp-notice {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:16px 20px;
  background:var(--hn-purple-wash);
  color:var(--hn-purple);
  font-size:14px;
  line-height:20px;
  margin-bottom:24px;
  overflow-wrap:anywhere
}

.mp-notice>.mp-icon {
  width:18px;
  height:18px;
  flex-basis:18px
}

.mp-notice strong {
  display:block
}

.mp-notice ul {
  list-style:disc;
  padding-left:20px;
  margin-top:8px
}

.mp-notice--error {
  border-left:3px solid var(--color-danger);
  color:var(--color-danger);
  background:var(--hn-canvas);
  display:block
}

.mp-notice--warning {
  display:block;
  color:var(--hn-muted);
  background:var(--hn-purple-wash);
  border-left:3px solid var(--hn-purple)
}

.mp-notice--warning strong {
  color:var(--hn-ink)
}

.mp-caption-text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  line-height:26px;
  min-height:200px;
  margin-bottom:20px
}

.mp-pack-media {
  margin-top:24px!important
}

.mp-pack-media>li {
  display:grid;
  grid-template-columns:80px minmax(0,1fr) auto;
  align-items:start;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--hn-rule)
}

.mp-pack-media>li:first-child {
  padding-top:0;
  border-top:0
}

.mp-pack-media>li:last-child {
  padding-bottom:8px
}

.mp-pack-media__image {
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hn-canvas);
  width:80px;
  min-height:100px
}

.mp-pack-media__image img {
  display:block;
  width:80px;
  height:100px;
  object-fit:contain
}

.mp-pack-media h3 {
  font-size:14px;
  line-height:20px;
  margin-bottom:8px;
  overflow-wrap:anywhere;
  letter-spacing:0
}

.mp-pack-media__actions {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px
}

.mp-pack-media__empty {
  display:block!important;
  color:var(--hn-muted)
}

.mp-history h3 {
  font-size:16px;
  line-height:24px;
  margin-bottom:16px
}

.mp-history li {
  padding:16px 0;
  border-bottom:1px solid var(--hn-rule);
  font-size:14px
}

.mp-history strong,.mp-history small {
  display:block
}

.mp-history small {
  color:var(--hn-muted);
  margin:4px 0
}

.mp-history a {
  display:inline-flex;
  gap:8px;
  align-items:center;
  color:var(--hn-purple);
  min-height:32px;
  font-size:12px
}

.mp-history .mp-icon {
  width:14px;
  height:14px;
  flex-basis:14px
}

.mp-columns--equal>.mp-panel .mp-panel__content {
  padding:24px;
  min-height:638px
}

.mp-columns--equal h2 {
  margin-bottom:24px
}

.mp-columns--equal h2+p {
  margin-bottom:24px
}

.mp-permissions {
  padding:20px;
  background:var(--hn-purple-wash);
  display:flex;
  flex-direction:column;
  gap:16px
}

.mp-permissions>div {
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14px;
  line-height:20px
}

.mp-permissions .mp-icon {
  width:18px;
  height:18px;
  flex-basis:18px
}

.mp-permissions strong,.mp-permissions small {
  display:block
}

.mp-permissions small {
  font-size:14px;
  line-height:20px;
  margin-top:4px
}

.mp-key-list {
  margin-bottom:24px!important
}

.mp-key-list>li {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--hn-rule)
}

.mp-key-list>li:first-child {
  padding-top:0
}

.mp-key-list strong {
  font-size:16px;
  line-height:24px;
  overflow-wrap:anywhere
}

.mp-key-list .mp-meta {
  margin-top:6px
}

.mp-key-list .mp-key-empty {
  display:block;
  border:0
}

.mp-key-empty>.mp-icon {
  margin-bottom:16px;
  width:28px;
  height:28px
}

.mp-key-empty h3 {
  font-size:20px;
  line-height:28px
}

.mp-new-key {
  display:block;
  margin-top:20px
}

.mp-new-key p {
  margin:8px 0 16px
}

.mp-new-key input {
  font-family:ui-monospace,monospace;
  font-size:12px!important
}

.mp-new-key .mp-btn {
  margin-top:16px
}

.mp-full-image {
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--hn-purple-wash);
  min-height:480px
}

.mp-full-image>img {
  display:block;
  max-width:100%;
  height:auto;
  max-height:1000px;
  object-fit:contain
}

.mp-correction-content {
  margin-top:24px
}

.mp-correction-media {
  display:flex;
  flex-direction:column;
  gap:12px
}

.mp-correction-media__item {
  padding:12px 0;
  min-width:0
}

.mp-correction-media__item>img {
  object-fit:contain;
  background:var(--hn-canvas)
}

.mp-correction-media__item>span:last-child {
  overflow-wrap:anywhere;
  min-width:0
}

.mp-dialog {
  width:min(560px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  padding:0;
  border:1px solid var(--hn-rule);
  border-radius:6px;
  background:var(--color-bg);
  color:var(--hn-ink);
  box-shadow:6px 10px 0 var(--hn-rear);
  overflow:auto;
  overscroll-behavior:contain
}

.mp-dialog::backdrop {
  background:rgb(17 17 20 / .28);
  backdrop-filter:blur(3px)
}

.mp-dialog__body {
  padding:28px
}

.mp-dialog__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px
}

.mp-dialog__head .mp-icon-button {
  margin:-8px -8px -8px 0
}

.mp-dialog__body>p {
  color:var(--hn-muted);
  margin:16px 0 28px
}

.mp-dialog .mp-actions {
  margin-top:24px;
  justify-content:flex-end
}

.mp-btn--danger {
  background:var(--color-danger);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  color:var(--color-bg)!important
}

.mp-btn--danger::before {
  display:none
}

.mp-toasts {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:100;
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(440px,calc(100% - 48px));
  pointer-events:none
}

.mp-toast {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 12px 12px 20px;
  background:var(--color-bg);
  border:1px solid var(--hn-rule);
  box-shadow:3px 5px 0 var(--hn-side);
  font-size:14px;
  line-height:20px;
  pointer-events:auto;
  animation:mp-toast-in 220ms ease-out
}

.mp-toast--error {
  border-left:3px solid var(--color-danger)
}

.mp-toast--success {
  border-left:3px solid var(--hn-purple)
}

.mp-copy-fallback textarea {
  font-size:14px;
  min-height:220px
}

.mp-login {
  display:grid;
  grid-template-columns:40.55% 1fr;
  min-height:100svh
}

.mp-login__brand {
  position:relative;
  background:var(--hn-purple);
  color:var(--color-bg);
  padding:64px;
  min-height:800px;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column
}

.mp-login__brand::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(rgb(255 255 255 / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .06) 1px,transparent 1px);
  background-size:48px 48px
}

.mp-login__logo {
  display:block;
  width:176px;
  height:46px
}

.mp-login__logo img {
  display:block;
  width:176px;
  height:auto
}

.mp-login__intro {
  margin-top:clamp(100px,19vh,200px);
  position:relative;
  z-index:1
}

.mp-login__intro h1 {
  font-size:48px;
  line-height:56px;
  letter-spacing:-.02em;
  overflow-wrap:normal
}

.mp-login__intro p {
  margin-top:24px;
  line-height:24px
}

.mp-login__company {
  font-size:14px;
  line-height:20px;
  margin-top:auto!important;
  padding-top:200px
}

.mp-signature {
  position:absolute;
  width:164px;
  height:156px;
  right:76px;
  bottom:132px
}

.mp-signature img {
  position:absolute;
  width:148px;
  height:136px;
  max-width:none
}

.mp-signature__rear {
  left:6.5px;
  top:8px
}

.mp-signature__side {
  left:3.25px;
  top:4px
}

.mp-signature__front {
  left:0;
  top:0
}

.mp-login__main {
  padding:64px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0
}

.mp-login__form {
  width:408px;
  max-width:100%
}

.mp-login__form>.mp-introduction {
  margin-bottom:28px
}

.mp-login__form>.mp-small {
  margin-top:28px
}

.mp-login__form .mp-btn {
  margin-top:4px
}

@keyframes mp-spin {
  to {
    transform:rotate(360deg)
  }
}

@keyframes mp-toast-in {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media(min-width:1600px) {
  .mp-main {
    padding-right:64px
  }
  .mp-story-grid {
    gap:32px
  }
}

@media(max-width:1279px) {
  .mp {
    --mp-content-pad:32px
  }
  .mp-columns--editor,.mp-columns--form {
    grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);
    gap:24px
  }
  .mp-story-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
  }
  .mp-search-select {
    width:140px;
    flex-basis:140px
  }
  .mp-library-search {
    flex-wrap:wrap
  }
  .mp-search {
    flex-basis:100%
  }
  .mp-page-head {
    flex-wrap:wrap
  }
  .mp-media-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .mp-login__brand {
    padding:48px
  }
  .mp-login__main {
    padding:48px
  }
  .mp-signature {
    right:48px
  }
}

@media(max-width:1023px) {
  .mp {
    --mp-sidebar:0px;
    --mp-content-pad:32px
  }
  .mp-sidebar {
    display:none
  }
  .mp-topbar {
    position:relative
  }
  .mp-breadcrumb,.mp-private {
    display:none
  }
  .mp-mobile-brand,.mp-mobile-account {
    display:inline-flex
  }
  .mp-mobile-brand img {
    display:block;
    width:114px;
    height:auto
  }
  .mp-mobile-account {
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:14px
  }
  .mp-columns--editor {
    grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr)
  }
  .mp-columns--form {
    grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr)
  }
  .mp-main {
    max-width:none
  }
  .mp-columns--equal {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .mp-columns--equal>.mp-panel .mp-panel__content {
    padding:24px;
    min-height:0
  }
  .mp-mobile-brand-reference {
    display:block;
    margin-top:32px
  }
  .mp-preview-panel .mp-panel__content {
    min-height:0
  }
  .mp-page-head>div:first-child {
    max-width:100%
  }
  .mp-login__brand {
    padding:40px
  }
  .mp-login__main {
    padding:40px
  }
  .mp-login__intro h1 {
    font-size:40px;
    line-height:48px
  }
}

@media(max-width:767px) {
  .mp {
    --mp-content-pad:24px
  }
  .mp-topbar {
    height:80px
  }
  .mp-main {
    padding-top:32px;
    padding-bottom:64px
  }
  .mp h1 {
    font-size:36px;
    line-height:44px
  }
  .mp h2 {
    font-size:24px;
    line-height:32px
  }
  .mp-page-head {
    flex-direction:column;
    gap:24px;
    margin-bottom:32px
  }
  .mp-page-head>div,.mp-page-head>.mp-actions {
    width:100%
  }
  .mp-page-head p {
    margin-top:12px
  }
  .mp-page-head>.mp-actions {
    padding-top:0
  }
  .mp-new-draft {
    width:100%
  }
  .mp-status-tabs {
    gap:8px;
    margin-bottom:24px
  }
  .mp-status-tabs>a {
    flex:1;
    justify-content:center;
    border-radius:4px;
    background:var(--color-bg);
    font-size:12px;
    line-height:18px;
    padding:10px 6px
  }
  .mp-status-tabs>a[aria-current=page] {
    background:var(--hn-purple-structural);
    font-weight:400
  }
  .mp-status-tabs>a[aria-current=page]::after {
    display:none
  }
  .mp-library-search {
    gap:8px;
    margin-bottom:24px;
    flex-wrap:nowrap
  }
  .mp-search {
    min-width:0;
    flex-basis:auto
  }
  .mp-search-select {
    display:none
  }
  .mp-library-search>.mp-btn {
    padding:11px 12px;
    min-width:88px
  }
  .mp-library-search>.mp-btn .mp-icon {
    display:none
  }
  .mp-story-grid {
    grid-template-columns:1fr;
    gap:24px
  }
  .mp-story-card__preview {
    height:278px
  }
  .mp-story-card__body {
    padding-top:24px
  }
  .mp-story-card .mp-panel__content {
    padding:16px 16px 24px
  }
  .mp-platform-states {
    gap:6px
  }
  .mp-platform-states .mp-badge {
    padding-left:9px;
    padding-right:9px
  }
  .mp-empty {
    padding:48px 24px
  }
  .mp-empty h2 {
    font-size:24px;
    line-height:32px
  }
  .mp-empty .mp-btn {
    width:100%
  }
  .mp-library-footnote {
    font-size:12px;
    line-height:18px;
    margin-top:32px!important
  }
  .mp-pagination {
    gap:12px;
    flex-wrap:wrap
  }
  .mp-columns,.mp-columns--editor,.mp-columns--form,.mp-columns--equal {
    grid-template-columns:1fr;
    gap:24px
  }
  .mp-panel__content {
    padding:24px
  }
  .mp-stack {
    gap:24px
  }
  .mp-field-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .mp-actions--mobile-stack {
    flex-direction:column;
    align-items:stretch;
    width:100%;
    gap:12px
  }
  .mp-actions--mobile-stack>.mp-btn,.mp-actions--mobile-stack>form,.mp-actions--mobile-stack>form>.mp-btn {
    width:100%
  }
  .mp-platform-choice .mp-check-group {
    flex-direction:column;
    gap:4px
  }
  .mp-workspace-actions {
    display:none!important
  }
  .mp-platform-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:24px
  }
  .mp-platform-tabs .mp-btn,.mp-platform-tabs .mp-btn:not(:last-child) {
    min-width:0;
    width:100%;
    padding:11px 8px;
    font-size:12px
  }
  .mp-media-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 12px
  }
  .mp-section-head {
    gap:12px;
    margin-bottom:20px
  }
  .mp-section-head .mp-btn {
    font-size:12px
  }
  .mp-media-tile__arrows .mp-icon-button {
    width:40px;
    height:44px;
    flex-basis:40px
  }
  .mp-media-tile__view {
    display:inline-flex
  }
  .mp-media-tile>.mp-text-action,.mp-media-tile>form>.mp-text-action {
    font-size:12px;
    min-height:36px
  }
  .mp-media-tile__toolbar {
    gap:0
  }
  .mp-caption-footer {
    flex-direction:column;
    gap:8px
  }
  .mp-caption-footer [data-caption-count] {
    display:none
  }
  .mp-story-details {
    grid-template-columns:1fr;
    gap:20px
  }
  .mp-story-details__full {
    grid-column:auto
  }
  .mp-editor-aside .mp-preview-panel {
    display:none
  }
  .mp-editor-aside .mp-note {
    display:none
  }
  .mp-editor-aside:has(.mp-source-notes) {
    margin-top:0
  }
  .mp-editor-aside:empty {
    display:none
  }
  .mp-mobile-workspace-actions {
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:24px
  }
  .mp-mobile-workspace-actions .mp-btn {
    width:100%
  }
  .mp-reuse-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .mp-note {
    padding:24px
  }
  .mp-note--cut {
    clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)
  }
  .mp-notice {
    padding:16px;
    font-size:12px;
    line-height:18px
  }
  .mp-desktop-only {
    display:none!important
  }
  .mp-page-head>.mp-actions>.mp-btn {
    width:100%
  }
  .mp-caption-text {
    font-size:16px;
    line-height:26px;
    min-height:0
  }
  .mp-pack-media>li {
    grid-template-columns:68px minmax(0,1fr);
    gap:12px
  }
  .mp-pack-media__image {
    width:68px;
    min-height:85px
  }
  .mp-pack-media__image img {
    width:68px;
    height:85px
  }
  .mp-pack-media__actions {
    grid-column:2;
    align-items:stretch;
    gap:8px
  }
  .mp-pack-media__actions>.mp-btn {
    width:100%
  }
  .mp-pack-media h3 {
    font-size:12px;
    line-height:18px
  }
  .mp-pack-media__body>.mp-small {
    font-size:12px;
    line-height:18px
  }
  .mp-pack-media .mp-text-action {
    min-height:36px
  }
  .mp-columns--equal>.mp-panel .mp-panel__content {
    min-height:0
  }
  .mp-columns--equal h2 {
    margin-bottom:20px
  }
  .mp-key-list>li {
    flex-wrap:wrap
  }
  .mp-key-list>li>div {
    max-width:100%
  }
  .mp-full-image {
    padding:16px;
    min-height:240px
  }
  .mp-full-image>img {
    max-height:none
  }
  .mp-dialog {
    width:calc(100% - 32px);
    max-height:calc(100dvh - 32px)
  }
  .mp-dialog__body {
    padding:24px
  }
  .mp-dialog .mp-actions {
    flex-direction:column-reverse;
    align-items:stretch;
    gap:12px
  }
  .mp-dialog .mp-actions>.mp-btn {
    width:100%
  }
  .mp-dialog__head h2 {
    font-size:24px;
    line-height:32px
  }
  .mp-toasts {
    right:16px;
    bottom:16px;
    width:calc(100% - 32px)
  }
  .mp-login {
    display:flex;
    flex-direction:column;
    min-height:100svh
  }
  .mp-login__brand {
    min-height:0;
    padding:24px;
    background:var(--hn-canvas);
    color:var(--hn-ink);
    overflow:visible
  }
  .mp-login__brand::before,.mp-login__intro,.mp-login__company,.mp-signature {
    display:none
  }
  .mp-login__logo {
    width:114px;
    height:30px
  }
  .mp-login__logo img {
    width:114px;
    filter:brightness(0) saturate(100%);
    opacity:0
  }
  .mp-login__logo {
    background:url("../img/brand/webits-wordmark-continuous-site-purple.d5f95b84bd4e.svg") left center / 114px auto no-repeat
  }
  .mp-login__main {
    flex:1;
    align-items:flex-start;
    padding:56px 24px 64px
  }
  .mp-login__form {
    width:100%;
    max-width:440px
  }
  .mp-login__form .mp-btn {
    width:100%
  }
  .mp-login__form h2 {
    font-size:36px;
    line-height:44px
  }
  .mp-login__form>.mp-introduction {
    margin-bottom:32px
  }
}

@media(prefers-reduced-motion:reduce) {
  .mp *,.mp *::before,.mp *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

@media(forced-colors:active) {
  .mp-btn {
    border:1px solid ButtonText
  }
  .mp-btn::before,.mp-panel__rear,.mp-panel__side,.mp-panel__face {
    display:none
  }
  .mp-panel {
    border:1px solid CanvasText
  }
  .mp-check input[type=checkbox] {
    position:static;
    opacity:1
  }
  .mp-check__box {
    display:none
  }
}

.mp-copy-buffer {
  position:fixed;
  left:0;
  top:0;
  opacity:0;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  padding:0!important;
  pointer-events:none
}

.mp-btn[aria-busy=true] {
  color:transparent!important
}

.mp-btn[aria-busy=true]::after {
  left:calc(50% - 7px);
  right:auto;
  border-color:var(--hn-purple);
  border-right-color:transparent
}

.mp-btn--primary[aria-busy=true]::after {
  border-color:var(--color-bg);
  border-right-color:transparent
}

.mp-correction-media__item {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.mp-correction-media__item>.mp-check {
  flex:1;
  min-width:0;
  padding:0
}

.mp-correction-media__item>.mp-check>img {
  object-fit:contain;
  background:var(--hn-canvas);
  flex:0 0 48px
}

.mp-correction-media__item>.mp-check>span:last-child {
  overflow-wrap:anywhere;
  min-width:0
}

.mp-correction-media__arrows {
  display:flex;
  flex-shrink:0
}

.mp-correction-media__arrows .mp-icon-button {
  width:36px;
  flex-basis:36px
}

@media(max-width:767px) {
  .mp-correction-media__item {
    flex-wrap:wrap
  }
  .mp-correction-media__arrows {
    margin-left:auto
  }
  .mp-correction-media__arrows .mp-icon-button {
    width:44px;
    flex-basis:44px
  }
}

.mp-badge abbr {
  text-decoration:none
}

.mp-mobile-only {
  display:none
}

@media(max-width:767px) {
  .mp-library-page .mp-main {
    display:flex;
    flex-direction:column
  }
  .mp-library-page .mp-page-head {
    order:0
  }
  .mp-library-page .mp-library-search {
    order:1
  }
  .mp-library-page .mp-status-tabs {
    order:2
  }
  .mp-library-page .mp-result-count {
    order:3
  }
  .mp-library-page .mp-story-grid {
    order:4
  }
  .mp-library-page .mp-pagination {
    order:5
  }
  .mp-library-page .mp-library-footnote {
    order:6
  }
  .mp-status-tabs>.mp-status-published,.mp-library-search>.mp-btn {
    display:none
  }
  .mp-status-tabs>.mp-mobile-only {
    display:inline-flex;
    flex:1;
    min-width:0;
    min-height:44px;
    font-size:12px;
    padding:10px 8px
  }
  .mp-status-tabs>a {
    min-width:0
  }
  .mp-library-search {
    margin-bottom:24px
  }
}