:root {
  color-scheme: light;
  --page: #f6f5ed;
  --ink: #182b24;
  --muted: #4c6056;
  --green: #254f41;
  --line: #e1e5db;
  --paper: #fffefa;
  font-family: "IBM Plex Sans Arabic", Tahoma, Arial, sans-serif;
  background: var(--page);
  color: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img { display: block; }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #8c5b2e; outline-offset: 3px; }

.shell { width: min(1080px, calc(100% - 64px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid #e5e7dc; }
.topbar { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display: inline-flex; gap: 11px; align-items: center; font-size: 19px; font-weight: 700; line-height: 1.19; text-decoration: none; }
.brand small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; letter-spacing: .045em; }
.brand-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #e3ebca; }
.site-link { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--green); }
.site-link span { margin-inline-start: 6px; }
.site-link:hover, .footer a:hover { text-decoration: underline; }
.hero {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: 277px; margin-block: 35px 24px; padding: 33px 47px;
  border-radius: 27px; background: linear-gradient(108deg, #234c3f, #14382e 66%, #163a30);
  color: #f9fcf0;
}
.hero-copy { position: relative; z-index: 1; max-width: 59%; }
.hero h1 { font-size: clamp(44px, 5.5vw, 72px); line-height: .99; letter-spacing: -.033em; font-weight: 700; }
.hero h1 span { color: #dbebaa; }
.hero p { margin-top: 22px; max-width: 440px; font-size: 17px; line-height: 1.6; color: #edf3df; }
.hero-art { position: absolute; width: 390px; height: 325px; left: 4%; top: 50%; transform: translateY(-50%); pointer-events: none; }
.orbit { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-24deg); border: 1px solid #9abd8a56; border-radius: 50%; }
.orbit-large { width: 360px; height: 208px; }
.orbit-small { width: 295px; height: 156px; }
.orbit-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #d6eaab; }
.point-one { top: 99px; right: 51px; }
.point-two { bottom: 79px; left: 52px; opacity: .65; }
.art-tile {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-9deg);
  width: 139px; height: 132px; display: grid; place-items: center; border-radius: 31px;
  background: linear-gradient(143deg, #f5f7dd, #bad282); border: 1px solid #f2f8d8;
  box-shadow: 0 23px 60px #122b21b0, inset 0 -6px 12px #8aaa5b32;
}
.art-tile img { transform: rotate(9deg); }
.art-bubble {
  position: absolute; bottom: 81px; left: 222px; width: 55px; height: 55px; border-radius: 17px;
  display: grid; place-items: center; background: #dcead1; border: 1px solid #f1f9e7;
  transform: rotate(11deg); box-shadow: 0 8px 19px #19372bb0;
}
.workspace { display: grid; grid-template-columns: minmax(0, 1.83fr) minmax(0, 1fr); gap: 21px; align-items: start; }
.card { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 5px 22px #213c2610; border-radius: 22px; padding: 25px; }
h2 { font-size: 24px; font-weight: 700; }
.drop { position: relative; margin-block: 15px 15px; border: 1.5px dashed #a9b9a2; border-radius: 17px; background: #f2f6eb; transition: border-color .15s, background .15s; }
.drop:hover, .drop.dragging { border-color: #3d674c; background: #e8efdd; }
.drop:focus-within { outline: 2px solid #8c5b2e; outline-offset: 2px; }
.drop-label { cursor: pointer; min-height: 143px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.drop-label strong { max-width: 100%; overflow-wrap: anywhere; unicode-bidi: plaintext; font-size: 16px; margin-top: 6px; }
.drop-label small { color: var(--muted); font-size: 13px; }
.drop input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; inset: 50% auto auto 50%; }
.drop-icon { width: 45px; height: 45px; border-radius: 14px; background: #e1ebd4; display: grid; place-items: center; }
.invite-label { font-weight: 600; font-size: 15px; display: block; margin-bottom: 5px; }
.invite-field, .copy-field { display: flex; align-items: stretch; min-width: 0; gap: 8px; }
.invite-field { border: 1px solid #c9d3c9; border-radius: 11px; padding: 2px 4px 2px 9px; background: #fff; }
.invite-field:focus-within { border-color: var(--green); }
.invite-field input { border: 0; background: transparent; padding: 8px 6px; min-width: 0; flex: 1; color: var(--ink); font-size: 16px; }
.reveal { padding: 0 10px; border: 0; background: transparent; color: var(--green); font-weight: 600; font-size: 13px; }
.field-hint { margin-top: 6px; font-size: 13px; color: var(--muted); }
.primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px;
  min-height: 44px; padding: 8px 18px; background: var(--green); color: white; text-decoration: none;
  font-weight: 600; font-size: 15px; transition: background .15s;
}
.primary:hover { background: #153e31; }
.primary:disabled { cursor: default; background: #dce4d7; color: #435749; }
.primary:disabled img { visibility: hidden; }
#upload { width: 100%; margin-top: 14px; }
.side-card h2 { margin-bottom: 13px; }
.detail { display: flex; align-items: flex-start; gap: 12px; padding-block: 13px; border-top: 1px solid #edf0e8; }
.detail:last-child { padding-bottom: 2px; }
.detail-icon { display: grid; flex: 0 0 40px; height: 40px; place-items: center; border-radius: 12px; background: #edf2e5; }
.detail h3 { font-size: 15px; margin-bottom: 2px; }
.detail p, .download-card p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.transfer { display: flex; align-items: center; margin-top: 13px; gap: 10px; }
progress { flex: 1; min-width: 0; height: 12px; accent-color: var(--green); }
.quiet { color: var(--green); font-weight: 600; border: 1px solid #cdd9ce; background: #f5f8ef; border-radius: 9px; padding: 7px 11px; }
.status { font-size: 14px; line-height: 1.5; color: var(--green); margin-top: 10px; }
.status:empty { margin: 0; }
.status[data-error="true"] { color: #8b3226; }
.result { margin-top: 19px; padding: 15px; border-radius: 12px; background: #edf4e4; }
.result h3 { font-size: 17px; }
.result p { font-size: 13px; margin-block: 3px 8px; color: var(--muted); overflow-wrap: anywhere; }
.result .copy-note { margin: 4px 0 0; }
.copy-field input { min-width: 0; flex: 1; background: white; padding: 8px; color: var(--ink); border: 1px solid #bacab5; border-radius: 9px; font-family: Arial, sans-serif; font-size: 13px; }
.copy-field button { flex-shrink: 0; }
.download-card { max-width: 610px; min-height: 245px; }
body[data-view="download"] .hero { min-height: 195px; }
body[data-view="download"] .hero h1 { font-size: clamp(37px, 4vw, 58px); }
body[data-view="download"] .hero p { display: none; }
.download-card h2 { margin-top: 10px; }
.download-card h3 { overflow-wrap: anywhere; margin-top: 8px; text-align: start; }
.download-card .primary, .download-card .quiet { margin-top: 16px; }
.footer { display: flex; justify-content: space-between; margin-block: 25px 0; padding-block: 15px 23px; border-top: 1px solid var(--line); color: var(--muted); }
.footer a { text-decoration: none; font-size: 13px; }

@media (max-width: 800px) {
  .hero-art { scale: .75; left: -4%; }
  .hero { padding-inline: 32px; }
  .card { padding: 20px; }
}
@media (max-width: 650px) {
  .shell { width: calc(100% - 32px); }
  .topbar { min-height: 67px; }
  .site-link { font-size: 12px; }
  .brand { font-size: 16px; }
  .brand-icon { width: 38px; height: 38px; }
  .hero { min-height: 211px; padding: 22px; margin-block: 21px 16px; border-radius: 20px; }
  .hero-copy { max-width: 100%; }
  .hero h1 { max-width: 100%; font-size: clamp(35px, 9.4vw, 54px); }
  .hero p { margin-top: 17px; max-width: 285px; font-size: 14px; }
  .hero-art { scale: .31; transform: none; transform-origin: left top; left: -3px; top: 30px; }
  .art-tile { width: 123px; height: 123px; }
  .workspace { grid-template-columns: 1fr; gap: 14px; }
  .card { border-radius: 17px; padding: 17px; }
  .drop-label { min-height: 131px; }
  body[data-view="download"] .hero { min-height: 153px; }
  body[data-view="download"] .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  body[data-view="download"] .hero-art { top: 19px; }
}
@media (max-width: 380px) {
  .hero-art { left: -16px; scale: .26; }
  .site-link span { margin-inline-start: 3px; }
}
@media (max-width: 345px) {
  .hero-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

.retention { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; border: 0; }
.retention legend { font-weight: 700; margin-bottom: 6px; }
.retention label { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; background: #f5f8ef; border: 1px solid #d6dfcf; border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.retention input { accent-color: var(--green); }
#login-form { margin-top: 12px; }
#login-form .primary { margin-top: 14px; }
.library { margin-top: 21px; }
.library ul { list-style: none; margin: 0; padding: 0; }
.library li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.library li:last-child { border-bottom: 0; }
.library li div { min-width: 0; }
.library li div:first-child { overflow-wrap: anywhere; }
.library li small { display: block; color: var(--muted); }
.library li div:last-child { flex-shrink: 0; display: flex; gap: 6px; }

#login-form label:not(:first-child) { margin-top: 10px; }
#preview-content img, #preview-content pre { max-width: 100%; margin-top: 14px; }
#preview-content pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 300px; overflow: auto; }