:root{
  --ink:#1d1d1f;
  --muted:#6b6b70;
  --paper:#fbf9f4;
  --paper-deep:#f4f0e4;
  --rule:#e9e4d6;
  --accent:#7a4b1a;
  --accent-soft:#f3e5d4;
  --accent-deep:#5a370f;
  --high:#1f7a47;
  --low:#a83232;
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text",Georgia,serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  justify-content:center;
}

.wrap{
  max-width:680px;
  width:100%;
  padding:48px 24px 80px;
}

.hero{margin-bottom:32px;text-align:center}
.hero h1{
  font:600 36px/1.1 Georgia,serif;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.hero-mark{
  font-style:italic;
  color:var(--accent);
  font-weight:500;
}
.lede{
  color:var(--muted);
  font-family:Georgia,serif;
  font-size:16px;
  line-height:1.55;
  max-width:560px;
  margin:0 auto;
}

.zone{
  background:#fff;
  border:1.5px dashed var(--rule);
  border-radius:14px;
  padding:36px 24px;
  transition:border-color .15s, background .15s;
  margin-bottom:18px;
}
.zone.idle:hover,
.zone.idle.dragover{
  border-color:var(--accent);
  background:#fffaf2;
}
.zone-inner{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.zone-icon{
  width:36px;height:36px;
  color:var(--accent);
  margin-bottom:6px;
}
.zone-title{
  font:500 18px/1.3 Georgia,serif;
  margin:0;
  color:var(--ink);
}
.zone-sub{
  font-size:14px;
  color:var(--muted);
  margin:0;
}
.zone-foot{
  font-size:13px;
  color:var(--muted);
  margin:10px 0 0;
  max-width:420px;
}
.zone-foot.tiny{font-size:12px}

.hidden{display:none !important}

.link-btn{
  background:none;border:none;padding:0;
  color:var(--accent);
  font:inherit;
  cursor:pointer;
  border-bottom:1px dotted var(--accent);
}
.link-btn:hover{color:var(--accent-deep)}

.primary-btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  font:500 15px/1 -apple-system,sans-serif;
  padding:14px 24px;
  border-radius:10px;
  text-decoration:none;
  margin-top:14px;
  transition:background .15s;
  border:none;
  cursor:pointer;
}
.primary-btn:hover{background:var(--accent-deep)}
.primary-btn.small{padding:10px 16px;font-size:14px;margin:0}

.url-row{
  width:100%;max-width:460px;margin:20px auto 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.url-sep{font-size:12px;color:var(--muted);text-transform:lowercase;letter-spacing:.02em}
.url-input{
  display:flex;gap:8px;width:100%;
}
.url-input input{
  flex:1;
  padding:11px 14px;border-radius:10px;
  border:1px solid var(--rule);
  background:#fff;
  font:14px Georgia,serif;
  color:var(--ink);
  outline:none;
}
.url-input input:focus{border-color:var(--accent)}

.share-block{
  width:100%;max-width:520px;margin:18px auto 0;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
}
.share-label{
  font:600 11px/1 -apple-system,sans-serif;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);text-align:left;
}
.share-row{display:flex;gap:8px}
.share-row input{
  flex:1;
  padding:11px 14px;border-radius:10px;
  border:1px solid var(--rule);
  background:#fff;
  font:13px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--ink);
  outline:none;
  text-overflow:ellipsis;
}
.share-row input:focus{border-color:var(--accent)}

.phase-row{
  display:flex;
  gap:6px;
  margin-bottom:14px;
}
.phase-dot{
  width:24px;height:6px;border-radius:3px;
  background:var(--rule);
  transition:background .25s;
}
.phase-dot.done{background:var(--high)}
.phase-dot.current{background:var(--accent);animation:pulse 1.4s infinite}
@keyframes pulse{
  0%,100%{opacity:1}
  50%{opacity:.45}
}

#phase-detail{min-height:42px}
#phase-progress{font-variant-numeric:tabular-nums}

.legalish{
  margin-top:36px;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
.legalish code{
  background:var(--paper-deep);
  padding:1px 5px;
  border-radius:4px;
  font-size:11.5px;
}