@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,600;1,6..72,600&display=swap");

:root {
  --ink: #10203c;
  --muted: #60718e;
  --blue: #2468df;
  --blue-dark: #174ba8;
  --sky: #65c7f2;
  --aqua: #31d2c0;
  --paper: #f7fbff;
  --line: #d8e5f5;
  --shadow: 0 26px 70px rgba(24, 76, 145, .14);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Aptos", "Trebuchet MS", sans-serif;
  background:
    radial-gradient(circle at 10% 8%, rgba(101, 199, 242, .32), transparent 25rem),
    radial-gradient(circle at 92% 24%, rgba(49, 210, 192, .18), transparent 24rem),
    linear-gradient(180deg, #f6fbff 0, #fff 42rem);
}

button, input, textarea, a { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  width: min(1240px, calc(100% - 40px));
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 1.15rem; font-weight: 800; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 14px; color: white; font-family: Georgia, serif; font-size: 1.35rem; background: linear-gradient(145deg, var(--blue), var(--sky)); box-shadow: 0 10px 22px rgba(36, 104, 223, .24); }
.free-pill { display: inline-flex; align-items: center; gap: 9px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: #486180; background: rgba(255,255,255,.72); font-size: .82rem; font-weight: 700; }
.free-pill span { width: 8px; aspect-ratio: 1; border-radius: 50%; background: #24b77b; box-shadow: 0 0 0 4px rgba(36,183,123,.12); }

main { width: min(1240px, calc(100% - 40px)); margin: 0 auto; }
.hero { padding: clamp(68px, 10vw, 130px) 0 90px; text-align: center; animation: rise .7s ease-out both; }
.eyebrow, .section-kicker { margin: 0 0 13px; color: var(--blue); font-size: .74rem; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }
h1, h2, h3, p { text-wrap: balance; }
h1 { max-width: 980px; margin: 0 auto; font: 700 clamp(3.7rem, 8.8vw, 7.6rem)/.88 Georgia, serif; letter-spacing: -.065em; }
h1 em { color: var(--blue); font-weight: inherit; }
.hero-copy { max-width: 680px; margin: 30px auto; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.step-row { display: inline-flex; align-items: center; gap: 14px; padding: 11px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.78); color: #536887; font-size: .83rem; font-weight: 700; box-shadow: 0 12px 30px rgba(24,76,145,.07); }
.step-row span { display: inline-flex; align-items: center; gap: 7px; }
.step-row b { display: grid; place-items: center; width: 22px; aspect-ratio: 1; border-radius: 50%; color: white; background: var(--blue); font-size: .7rem; }
.step-row i { width: 25px; height: 1px; background: #c6d7ec; }

.workspace, .result-section { margin-bottom: 90px; padding: clamp(22px, 4vw, 44px); border: 1px solid rgba(196,216,239,.95); border-radius: 34px; background: rgba(255,255,255,.84); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
h2 { margin: 0; font: 700 clamp(2rem, 4vw, 3.1rem)/1 Georgia, serif; letter-spacing: -.035em; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .65fr); gap: 22px; }
.canvas-panel, .assistant-panel { min-width: 0; border: 1px solid var(--line); border-radius: 26px; background: #fbfdff; overflow: hidden; }

.upload-zone { min-height: 570px; display: grid; place-content: center; justify-items: center; padding: 40px; border: 2px dashed #bfd5ef; border-radius: 24px; margin: 9px; text-align: center; transition: .25s ease; }
.upload-zone.dragging { border-color: var(--blue); background: #edf6ff; transform: scale(.995); }
.upload-icon { display: grid; place-items: center; width: 80px; aspect-ratio: 1; margin-bottom: 20px; border-radius: 28px; color: white; background: linear-gradient(145deg, var(--blue), var(--sky)); font-size: 2.4rem; box-shadow: 0 18px 34px rgba(36,104,223,.22); }
.upload-zone h3 { margin: 0; font: 700 1.6rem Georgia, serif; }
.upload-zone p { margin: 9px 0 24px; color: var(--muted); }
.primary-button, .secondary-button, .restore-button { border: 0; border-radius: 999px; cursor: pointer; font-weight: 800; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.primary-button { display: inline-flex; justify-content: center; padding: 13px 22px; color: white; background: var(--blue); box-shadow: 0 12px 25px rgba(36,104,223,.22); }
.secondary-button { padding: 11px 17px; color: #315276; background: #eaf2fb; }
.primary-button:hover, .secondary-button:hover, .restore-button:hover:not(:disabled) { transform: translateY(-2px); }

.canvas-toolbar { display: grid; grid-template-columns: auto minmax(90px, 1fr) auto auto; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.canvas-toolbar label { color: #486180; font-size: .82rem; font-weight: 800; }
.canvas-toolbar output { color: var(--blue); }
.canvas-toolbar input { accent-color: var(--blue); }
.canvas-toolbar button, .prompt-chips button { border: 1px solid #d4e1f0; border-radius: 999px; padding: 8px 11px; color: #45617f; background: white; cursor: pointer; font-size: .78rem; font-weight: 750; }
.canvas-toolbar button:disabled { cursor: default; opacity: .45; }
.canvas-wrap { position: relative; display: grid; place-items: center; min-height: 490px; padding: 16px; overflow: auto; background: linear-gradient(45deg, #e8eef5 25%, transparent 25%), linear-gradient(-45deg, #e8eef5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e8eef5 75%), linear-gradient(-45deg, transparent 75%, #e8eef5 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.canvas-wrap canvas { grid-area: 1 / 1; display: block; max-width: 100%; max-height: 66vh; border-radius: 7px; box-shadow: 0 16px 40px rgba(20,45,80,.2); }
#maskCanvas { cursor: none; touch-action: none; opacity: .52; mix-blend-mode: screen; }
.brush-cursor { position: absolute; z-index: 3; border: 2px solid white; border-radius: 50%; background: rgba(36,104,223,.22); box-shadow: 0 0 0 1px var(--blue); pointer-events: none; transform: translate(-50%, -50%); }
.canvas-help { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0; padding: 12px; color: #5c708d; font-size: .82rem; }
.canvas-help span { width: 11px; aspect-ratio: 1; border-radius: 50%; background: rgba(36,104,223,.55); }

.assistant-panel { display: flex; flex-direction: column; padding: 20px; background: linear-gradient(180deg, #f4f9ff, #fff); }
.assistant-title { display: flex; align-items: center; gap: 11px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.assistant-title div { display: grid; gap: 2px; }
.assistant-title small { color: var(--muted); }
.spark { display: grid; place-items: center; width: 40px; aspect-ratio: 1; border-radius: 14px; color: white; background: linear-gradient(145deg, var(--blue), var(--aqua)); font-size: 1.5rem; }
.chat { min-height: 155px; max-height: 230px; overflow: auto; padding: 18px 0; }
.message { width: fit-content; max-width: 92%; margin-bottom: 10px; padding: 12px 14px; border-radius: 17px; font-size: .9rem; line-height: 1.45; }
.assistant-message { color: #38536f; background: #e7f1fc; border-bottom-left-radius: 5px; }
.user-message { margin-left: auto; color: white; background: var(--blue); border-bottom-right-radius: 5px; }
.prompt-label { margin-bottom: 7px; color: #49607d; font-size: .78rem; font-weight: 800; }
textarea { width: 100%; resize: vertical; min-height: 96px; padding: 13px; border: 1px solid #cadbee; border-radius: 16px; outline: none; color: var(--ink); background: white; line-height: 1.45; }
textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(36,104,223,.09); }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0 16px; }
.prompt-chips button:hover { border-color: #8bb4e8; background: #f0f7ff; }
.permission-check { display: flex; align-items: start; gap: 9px; margin-top: auto; color: #516984; font-size: .8rem; line-height: 1.35; }
.permission-check input { margin-top: 2px; accent-color: var(--blue); }
.restore-button { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 14px 18px; color: white; background: linear-gradient(115deg, var(--blue-dark), var(--blue)); box-shadow: 0 14px 26px rgba(36,104,223,.23); }
.restore-button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.restore-button.loading span::after { content: ""; display: inline-block; width: 13px; aspect-ratio: 1; margin-left: 9px; border: 2px solid rgba(255,255,255,.35); border-top-color: white; border-radius: 50%; vertical-align: -2px; animation: spin .7s linear infinite; }
.usage-note { margin: 11px 0 0; color: #7a8da6; font-size: .7rem; text-align: center; }

.result-section { display: grid; justify-items: center; text-align: center; animation: rise .55s ease-out both; }
.result-copy p:last-child { max-width: 600px; color: var(--muted); }
.result-card { width: min(860px, 100%); margin: 22px 0; padding: 12px; border: 1px solid var(--line); border-radius: 24px; background: #edf4fb; }
.result-card img { display: block; max-width: 100%; max-height: 72vh; margin: auto; border-radius: 14px; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
footer { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 38px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; color: #71839b; font-size: .78rem; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .editor-grid { grid-template-columns: 1fr; }
  .upload-zone { min-height: 420px; }
  .assistant-panel { min-height: 500px; }
}

@media (max-width: 600px) {
  .site-header, main, footer { width: min(100% - 24px, 1240px); }
  .hero { padding: 48px 0 60px; }
  .step-row i { width: 8px; }
  .workspace, .result-section { padding: 14px; border-radius: 25px; }
  .workspace-heading { padding: 8px 5px 0; }
  .canvas-toolbar { grid-template-columns: auto 1fr; }
  .canvas-toolbar button { width: 100%; }
  .canvas-wrap { min-height: 350px; padding: 8px; }
  footer { flex-direction: column; }
}

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

/* Restoration darkroom theme. */
:root {
  --ink: #171a18;
  --muted: #626963;
  --blue: #ff5d3a;
  --blue-dark: #bd321d;
  --sky: #bcefd8;
  --aqua: #79d9bd;
  --paper: #f4f0e7;
  --line: #cbc8ba;
  --shadow: 0 32px 80px rgba(22, 27, 23, .15);
}

body {
  font-family: "Manrope", sans-serif;
  background:
    linear-gradient(rgba(36, 42, 37, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 42, 37, .055) 1px, transparent 1px),
    radial-gradient(circle at 8% 4%, rgba(255, 93, 58, .2), transparent 25rem),
    radial-gradient(circle at 94% 22%, rgba(121, 217, 189, .25), transparent 28rem),
    #f4f0e7;
  background-size: 28px 28px, 28px 28px, auto, auto, auto;
}

.site-header {
  position: relative;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(23, 26, 24, .16);
  border-radius: 18px;
  background: rgba(249, 246, 238, .78);
  box-shadow: 0 12px 34px rgba(25, 29, 26, .08);
  backdrop-filter: blur(14px);
}

.brand { font-size: 1.05rem; letter-spacing: -.04em; }
.brand-mark {
  border-radius: 50% 50% 48% 52% / 42% 48% 52% 58%;
  background: #171a18;
  font-family: "Newsreader", serif;
  box-shadow: 5px 5px 0 var(--blue);
  transform: rotate(-5deg);
}

.header-meta { display: flex; align-items: center; gap: 10px; }
.powered-by {
  color: #565d57;
  font-family: "DM Mono", monospace;
  font-size: .68rem;
  letter-spacing: .02em;
  text-decoration: none;
}
.powered-by strong { color: var(--ink); font-weight: 500; }
.powered-by:hover strong { color: var(--blue-dark); }
.free-pill { border-color: rgba(23, 26, 24, .18); color: #4f5751; background: #fffaf0; }
.free-pill span { background: #35a879; box-shadow: 0 0 0 4px rgba(53,168,121,.13); }

.hero { position: relative; padding-top: clamp(78px, 11vw, 142px); }
.hero::before {
  content: "RESTORE / REBUILD / RETOUCH";
  position: absolute;
  top: 40px;
  left: 50%;
  color: rgba(23, 26, 24, .35);
  font: 500 .66rem/1 "DM Mono", monospace;
  letter-spacing: .22em;
  transform: translateX(-50%);
  white-space: nowrap;
}
.eyebrow, .section-kicker { color: var(--blue-dark); font-family: "DM Mono", monospace; }
h1, h2, .upload-zone h3 { font-family: "Newsreader", serif; }
h1 { max-width: 1080px; font-size: clamp(4rem, 9.5vw, 8.2rem); letter-spacing: -.07em; }
h1 em {
  display: inline-block;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: rgba(255, 93, 58, .26);
  text-decoration-thickness: .13em;
  text-underline-offset: .08em;
}
.hero-copy { color: #535b54; }
.step-row { border-color: rgba(23, 26, 24, .18); background: #fffaf0; box-shadow: 8px 8px 0 rgba(23,26,24,.08); }
.step-row b { background: var(--ink); }
.step-row i { background: #a7aaa0; }

.workspace, .result-section {
  position: relative;
  border: 1px solid rgba(23, 26, 24, .22);
  border-radius: 28px 28px 48px 28px;
  background: rgba(255, 252, 244, .88);
  box-shadow: 12px 14px 0 rgba(23, 26, 24, .07), var(--shadow);
}
.workspace::before {
  content: "LIVE WORKBENCH";
  position: absolute;
  top: 18px;
  right: 28px;
  color: rgba(23, 26, 24, .34);
  font: 500 .62rem/1 "DM Mono", monospace;
  letter-spacing: .14em;
}
.canvas-panel, .assistant-panel { border-color: rgba(23, 26, 24, .2); border-radius: 20px; background: #f8f5ec; }
.upload-zone { border-color: #a8aa9e; border-radius: 14px; background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(188,239,216,.16)); }
.upload-zone.dragging { border-color: var(--blue); background: #fff1e9; }
.upload-icon { border-radius: 50%; background: var(--blue); box-shadow: 7px 7px 0 var(--ink); }
.primary-button { background: var(--ink); box-shadow: 6px 6px 0 var(--blue); }
.secondary-button { color: var(--ink); background: #dfe4d8; }
.canvas-toolbar { border-color: rgba(23,26,24,.16); background: #e8e7dc; }
.canvas-toolbar output { color: var(--blue-dark); }
.canvas-toolbar input, .permission-check input { accent-color: var(--blue); }
.canvas-toolbar button, .prompt-chips button { border-color: #c3c5ba; color: #454b46; background: #fffaf0; }
.canvas-wrap {
  background-color: #d8d7cd;
  background-image: linear-gradient(45deg, #c7c7bc 25%, transparent 25%), linear-gradient(-45deg, #c7c7bc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c7c7bc 75%), linear-gradient(-45deg, transparent 75%, #c7c7bc 75%);
}
.brush-cursor { background: rgba(255, 93, 58, .24); box-shadow: 0 0 0 1px var(--blue); }
.canvas-help span { background: var(--blue); }
.assistant-panel { background: linear-gradient(180deg, #e6f2e9, #faf7ef); }
.assistant-title { border-color: rgba(23,26,24,.15); }
.spark { border-radius: 50% 50% 42% 58%; background: var(--ink); box-shadow: 4px 4px 0 var(--sky); }
.assistant-message { color: #334039; background: #d9eadf; }
.user-message { color: white; background: var(--ink); }
textarea { border-color: #bfc4b9; border-radius: 12px; background: #fffdf7; }
textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(255, 93, 58, .12); }
.restore-button { border-radius: 14px; background: linear-gradient(115deg, #bd321d, #ff6b44); box-shadow: 7px 7px 0 rgba(23,26,24,.88); }
.result-card { border-color: rgba(23,26,24,.18); background: #deded3; }
footer { border-color: rgba(23,26,24,.18); color: #666d67; font-family: "DM Mono", monospace; }

@media (max-width: 700px) {
  .site-header { align-items: flex-start; }
  .header-meta { align-items: flex-end; flex-direction: column-reverse; }
  .powered-by { max-width: 18ch; text-align: right; }
  .workspace::before { display: none; }
}