portfolio-guide {
  --guide-offset: max(16px, env(safe-area-inset-right));
  display: block;
  font-family: var(--sans, "Segoe UI", sans-serif);
}
portfolio-guide .guide-trigger {
  position: fixed;
  z-index: 6;
  right: var(--guide-offset);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--action);
  border-radius: 24px;
  background: var(--action);
  color: var(--on-action);
  box-shadow: 0 4px 15px rgb(23 19 18 / .21);
  font-size: 14px;
  font-weight: 620;
  cursor: pointer;
}
portfolio-guide .guide-panel {
  inset: auto var(--guide-offset) max(16px, env(safe-area-inset-bottom)) auto;
  margin: 0;
  padding: 0;
  width: min(372px, calc(100vw - 2 * var(--guide-offset)));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--control-border);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 60px rgb(23 19 18 / .35);
}
portfolio-guide .guide-panel[open] {display: flex; flex-direction: column}
portfolio-guide .guide-panel::backdrop {background: rgb(22 18 18 / .32)}
@media (prefers-reduced-motion: no-preference) {
  portfolio-guide .guide-panel[open],
  portfolio-guide .guide-panel[open]::backdrop {
    animation: fadeIn 160ms ease-out;
  }
}
portfolio-guide .guide-glyph {
  display: block;
  width: 19px;
  height: 19px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
  forced-color-adjust: none;
}
portfolio-guide .guide-trigger { --glyph: var(--ui-icon-message-circle); }
portfolio-guide .guide-close { --glyph: var(--ui-icon-x); }
portfolio-guide .guide-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 16px 19px;
  border-bottom: 1px solid var(--rule);
}
portfolio-guide .guide-header h2 {
  margin: 0 0 4px;
  font: 400 30px/1.08 var(--serif, Georgia, serif);
  letter-spacing: -.045em;
}
portfolio-guide .guide-header p {margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45}
portfolio-guide .guide-close {display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid var(--control-border); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer}
portfolio-guide .guide-body {padding: 16px 19px; overflow-y: auto; overscroll-behavior: contain; min-height: 0}
portfolio-guide .guide-result:not(:empty) {margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere}
portfolio-guide .guide-result h3 {font-size: 14px; font-weight: 650; margin: 0 0 6px}
portfolio-guide .guide-result p {font-size: 15px; line-height: 1.48; margin: 0}
portfolio-guide .guide-links {margin-top: 6px; display: flex; flex-wrap: wrap; gap: 0 14px}
portfolio-guide .guide-links a {display: inline-flex; align-items: center; min-height: 36px; text-decoration: underline; text-underline-offset: 3px; color: var(--accent); font-size: 14px}
portfolio-guide .guide-examples {display: flex; flex-wrap: wrap; gap: 6px}
portfolio-guide .guide-examples button {border: 1px solid var(--control-border); border-radius: 5px; padding: 7px 10px; min-height: 38px; font: 500 13px/1.35 var(--sans, sans-serif); text-align: left; background: var(--raised); color: var(--ink); cursor: pointer}
portfolio-guide .guide-form {padding: 13px 19px 17px; border-top: 1px solid var(--rule); display: flex; align-items: end; gap: 8px}
portfolio-guide .guide-form label {flex: 1; min-width: 0; font-size: 12px; color: var(--muted)}
portfolio-guide .guide-form input {display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 7px 10px; border: 1px solid var(--control-border); border-radius: 4px; background: var(--panel); color: var(--ink); font-size: 16px}
portfolio-guide .guide-form input::placeholder {color: var(--muted); opacity: 1}
portfolio-guide .guide-form button {min-height: 44px; border: 0; border-radius: 4px; padding: 8px 14px; cursor: pointer; background: var(--action); color: var(--on-action)}
portfolio-guide .guide-close:hover, portfolio-guide .guide-examples button:hover {background: var(--hover)}
portfolio-guide .guide-trigger:hover, portfolio-guide .guide-form button:hover {background: var(--action-hover)}
@media(max-width: 630px) {
  portfolio-guide {--guide-offset: max(10px, env(safe-area-inset-right))}
  portfolio-guide .guide-header, portfolio-guide .guide-body, portfolio-guide .guide-form {padding-inline: 14px}
  .foot {padding-bottom: 76px}
}
@media(max-height: 360px) {
  portfolio-guide .guide-header {padding-block: 8px}
  portfolio-guide .guide-form {padding-block: 6px}
  portfolio-guide .guide-header h2 {font-size: 23px}
}
@media print {portfolio-guide {display: none}}