* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--color-page);
  color:var(--color-text);
  font:15px/1.6 var(--font-sans)}
.account-page {
  max-width:1120px;
  margin:48px auto 80px;
  padding:0 24px;
  min-height:65vh}
h1,h2,p {
  margin-top:0}
h1 {
  font:500 clamp(2.5rem,5vw,3.8rem)/1.1 var(--font-serif);
  letter-spacing:-.03em;
  margin-bottom:16px}
h2 {
  font:500 1.8rem/1.2 var(--font-serif)}
.eyebrow {
  color:var(--brand-green);
  font-size:12px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase}
.muted,#account-status {
  color:var(--color-text-muted)}
.account-nav {
  display:flex;
  gap:24px;
  border-bottom:1px solid var(--color-border);
  margin-bottom:36px;
  padding-bottom:14px}
.account-nav a {
  color:inherit;
  text-decoration:none}
.account-nav [aria-current] {
  color:var(--brand-green);
  font-weight:700}
.account-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:24px}
.account-page button,.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:44px;
  padding:10px 18px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
  color:var(--color-text);
  font:600 14px var(--font-sans);
  text-decoration:none;
  cursor:pointer}
.account-page .primary {
  background:var(--brand-green);
  border-color:var(--brand-green);
  color:var(--color-page)}
.account-page button:disabled {
  opacity:.55;
  cursor:wait}
.account-page [hidden] {
  display:none!important}
:focus-visible {
  outline:3px solid var(--brand-gold);
  outline-offset:3px}
.panel {
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:18px;
  padding:32px}
.profile-layout,.guest-layout {
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px}
.guest-layout {
  align-items:center;
  padding:32px 0}
.guest-art {
  background:var(--color-surface-muted);
  padding:48px;
  border-radius:24px}
.avatar {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--color-surface-muted);
  color:var(--brand-green);
  font-size:22px;
  font-weight:700;
  margin-bottom:24px}
dl {
  margin:0}
dl>div {
  padding:18px 0;
  border-bottom:1px solid var(--color-border)}
dl>div:last-child {
  border:0}
dt {
  font-size:12px;
  font-weight:700;
  color:var(--color-text-muted)}
dd {
  margin:4px 0;
  overflow-wrap:anywhere}
.badge {
  font-size:12px;
  border:1px solid var(--color-border);
  border-radius:20px;
  padding:4px 10px;
  display:inline-block}
.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px}
.toolbar {
  display:flex;
  gap:16px;
  margin:28px 0}
.account-page input,.account-page select {
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:8px;
  background:var(--color-surface);
  color:inherit;
  font:inherit;
  min-width:0}
.toolbar input {
  flex:1}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
.project-card {
  padding:24px;
  display:flex;
  flex-direction:column}
.project-card h2 {
  font-size:24px;
  overflow-wrap:anywhere;
  margin:16px 0 8px}
.project-card .account-actions {
  margin-top:auto;
  padding-top:20px;
  gap:8px}
.project-card button {
  padding:8px 10px;
  font-size:12px}
.empty {
  text-align:center;
  padding:64px 24px}
.account-page dialog {
  width:min(480px,calc(100% - 32px));
  background:var(--color-surface);
  color:inherit;
  border:1px solid var(--color-border);
  border-radius:16px;
  padding:28px}
.account-page dialog::backdrop {
  background:#15251e66}
.account-page dialog input {
  width:100%;
  margin-top:8px}
.danger {
  color:#b63827!important}
#account-status:empty {
  display:none}
@media(max-width:760px) {
  .profile-layout,.guest-layout,.project-grid {
  grid-template-columns:1fr}
.guest-art {
  padding:28px}
.page-heading {
  display:block}
.panel {
  padding:24px}
.account-page {
  margin-top:28px}
.toolbar {
  flex-wrap:wrap}
.toolbar input {
  flex-basis:100%}
}

.agreement-panel { max-width:800px; margin:auto; }
.agreement-panel h1 { font-size:clamp(2rem,4vw,3rem); }
.agreement-panel li { margin-bottom:16px; }
.agreement-choice { display:flex; align-items:flex-start; gap:12px; padding:20px 0; border-top:1px solid var(--color-border); }
.agreement-choice input { flex:none; width:20px; height:20px; margin-top:3px; accent-color:var(--brand-green); }
.agreement-panel a,.legal-page a { color:var(--brand-green); text-underline-offset:3px; }
.legal-page { max-width:850px; }
.legal-page section { margin-top:32px; }
.legal-page h2 { font-size:1.6rem; }

/* Project cards: two clear actions, with less frequent actions in a disclosure. */
.project-card{position:relative;gap:0;padding:24px;border-radius:16px;overflow:visible}
.project-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.project-kind{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-green)}
.project-badge{font-size:11px;white-space:nowrap;color:var(--color-text-muted);background:var(--color-surface-muted);padding:3px 8px;border-radius:20px}
.project-badge.is-published{color:var(--brand-green);background:color-mix(in srgb,var(--brand-green) 10%,transparent)}
.project-card h2{font-size:1.55rem;line-height:1.25;margin:0 0 10px;overflow-wrap:anywhere}
.project-card .project-updated{font-size:13px;margin:0 0 8px}
.project-changes{font-size:12px;color:var(--color-text-muted);margin:0 0 8px}
.project-card .project-actions{margin-top:auto;padding-top:22px;flex-wrap:nowrap;gap:10px}
.project-actions>.button{padding:9px 18px;min-height:40px;font-size:14px;line-height:1.4}
.project-more{position:relative;margin-left:auto}
.project-more summary{display:grid;place-items:center;min-width:40px;min-height:40px;border-radius:8px;list-style:none;cursor:pointer;letter-spacing:2px}
.project-more summary::-webkit-details-marker{display:none}
.project-more summary:hover,.project-more[open] summary{background:var(--color-surface-muted)}
.project-card:has(.project-more[open]){z-index:2}
.project-more-panel{position:absolute;right:0;bottom:calc(100% + 6px);width:160px;padding:5px;border:1px solid var(--color-border);border-radius:10px;background:var(--color-page);box-shadow:0 8px 24px #0002;z-index:3}
.project-card .project-more-panel button{display:block;width:100%;border:0;background:none;text-align:left;padding:10px 12px;min-height:40px;border-radius:6px;font-size:13px}
.project-card .project-more-panel button:hover{background:var(--color-surface-muted)}
.project-card .project-more-panel .project-delete{color:#b64036}
.project-more :focus-visible{outline:2px solid var(--brand-green);outline-offset:2px}

.project-filters{display:flex;gap:6px;margin:0 0 22px}.project-filters button{padding:7px 14px;min-height:38px;border:1px solid transparent;border-radius:20px;background:none;font-size:13px}.project-filters button[aria-pressed="true"]{background:var(--color-surface-muted);color:var(--brand-green);border-color:var(--color-border)}

.project-thumbnail{position:relative;aspect-ratio:8/5;margin:-24px -24px 20px;background:linear-gradient(135deg,#dce9df,#f4f0dc);border-radius:16px 16px 0 0;overflow:hidden}.project-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.thumbnail-placeholder{display:grid;place-items:center;height:100%;font-size:48px;color:#2c756254}.community-opt-in{display:flex!important;align-items:center;gap:8px}.community-opt-in input{width:auto!important;min-height:0}