/* Withyham — the bench. Cream paper, dark ink, one willow-green accent. The twine (contract address) is pinned across
   the top at every width; the weave is a three-step form and it comes first; the market stands beside it from 1000px. */
:root{
  --paper:#F5EFE3; --card:#FFFDF8; --card2:#F0E8D8;
  --ink:#2A2418; --ink2:rgba(42,36,24,.66); --ink3:rgba(42,36,24,.42);
  --rule:#E4DBC8; --rule2:#CFC3A8;
  --willow:#2E7D4F; --willow2:#1F5C39; --willowSoft:rgba(46,125,79,.12);
  --bark:#8A5A2B;
  --twine:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--paper)}
body{
  background:var(--paper); color:var(--ink);
  font:400 15.5px/1.55 "Karla",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-top:calc(var(--twine) + env(safe-area-inset-top,0px));
}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
code,.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.serif{font-family:"Fraunces","Iowan Old Style",Georgia,serif;font-weight:700;letter-spacing:-.01em}

/* ---------- the twine: pinned top, the address and nothing else ---------- */
#twine{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:calc(var(--twine) + env(safe-area-inset-top,0px));
  padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; justify-content:center; gap:3px;
}
.twineLine{display:flex;align-items:baseline;gap:8px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,239,227,.62);line-height:1;white-space:nowrap}
.twineTag{color:var(--paper);font-weight:700}
.twineGmgn{margin-left:auto;text-decoration:none;color:rgba(245,239,227,.62);letter-spacing:.08em;text-transform:none}
.twineGmgn:hover{color:var(--paper)}
.twineRow{display:flex;align-items:center;gap:8px;min-width:0}
.twineAddr{
  flex:1 1 auto; min-width:0; font-size:11px; letter-spacing:-.01em; line-height:1.2;
  overflow-wrap:anywhere; word-break:break-all; user-select:all; -webkit-user-select:all;
  color:var(--paper);
}
.twineAddr[data-live="0"]{color:rgba(245,239,227,.55);font-family:"Karla",sans-serif;font-size:13px;letter-spacing:0}
.twineCopy{
  flex:0 0 auto; height:28px; padding:0 12px; border-radius:999px;
  background:var(--willow); color:#FFFDF8; font-size:12px; font-weight:700; letter-spacing:.04em;
}
.twineCopy[disabled]{background:rgba(245,239,227,.16);color:rgba(245,239,227,.5);cursor:default}
.twineCopy[data-done="1"]{background:var(--paper);color:var(--ink)}

/* ---------- the bench ---------- */
#bench{width:100%;max-width:600px;margin:0 auto;padding:16px 14px 36px;display:block}

/* ---------- the wizard ---------- */
.wizard{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:16px 16px 18px;box-shadow:0 1px 0 rgba(42,36,24,.04)}
.wizHead{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.wizHead img{width:30px;height:30px;border-radius:8px;display:block;border:1px solid var(--rule)}
.wizName{font-family:"Fraunces",Georgia,serif;font-weight:500;font-size:17px;letter-spacing:.01em}
.wizName b{font-weight:700}
.wizClock{margin-left:auto;font-size:12px;color:var(--ink2);text-align:right;line-height:1.25}
.wizClock .mono{font-size:14px;color:var(--ink);font-weight:600}

.wpips{display:flex;align-items:center;gap:6px;margin:0 0 16px}
.wpip{flex:1 1 0;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;border:1px solid var(--rule);background:var(--card2);color:var(--ink3);font-size:12px;letter-spacing:.02em;text-align:left;min-width:0}
.wpip i{font-style:normal;font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:14px;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--rule);color:var(--ink);flex:0 0 auto}
.wpip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpip[data-on="1"]{border-color:var(--willow);background:var(--willowSoft);color:var(--ink)}
.wpip[data-on="1"] i{background:var(--willow);color:#FFFDF8}
.wpip[data-done="1"]{color:var(--ink2)}
.wpip[data-done="1"] i{background:var(--willow2);color:#FFFDF8}
.wpip[disabled]{cursor:default}

.wstep{}
.wTitle{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.01em;margin:0 0 4px}
.wLede{color:var(--ink2);font-size:14px;line-height:1.5;margin:0 0 14px}

.frameGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.frameCard{
  display:block;text-align:left;border:1px solid var(--rule);border-radius:10px;padding:10px 11px 11px;background:var(--card);
  transition:border-color .15s,background .15s;position:relative;min-width:0;
}
.frameCard:hover{border-color:var(--rule2)}
.frameCard[data-pick="1"]{border-color:var(--willow);background:var(--willowSoft);box-shadow:inset 0 0 0 1px var(--willow)}
.frameCard[data-sold="1"]{background:var(--card2);color:var(--ink3);cursor:default}
.frameCard[data-mine="1"]{cursor:default}
.frameCard[disabled]{cursor:default}
.fcTop{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin:0 0 6px}
.fcName{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fcFill{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;font-weight:600;white-space:nowrap;flex:0 0 auto}
.fcFill small{font-size:11px;font-weight:400;color:var(--ink3)}
.fillBar{height:8px;border-radius:4px;background:var(--rule);overflow:hidden;position:relative}
.fillBar b{display:block;height:100%;background:var(--willow);border-radius:4px;width:0;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.frameCard[data-sold="1"] .fillBar b{background:var(--bark)}
.fcHint{font-size:11.5px;color:var(--ink3);margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frameCard[data-pick="1"] .fcHint{color:var(--willow2)}

.wField{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--rule);font-size:14px}
.wField:last-of-type{border-bottom:1px solid var(--rule)}
.wField .k{color:var(--ink2)}
.wField .v{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13.5px;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wField .v.ok{color:var(--willow2);font-weight:600}

.wActs{display:flex;gap:8px;align-items:center;margin:14px 0 0;flex-wrap:wrap}
.weaveBtn{
  flex:1 1 auto;min-height:46px;padding:0 18px;border-radius:10px;background:var(--willow);color:#FFFDF8;
  font-weight:700;font-size:15px;letter-spacing:.01em;
}
.weaveBtn:hover{background:var(--willow2)}
.weaveBtn[disabled]{background:var(--rule);color:var(--ink3);cursor:default}
.backBtn{min-height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--rule2);color:var(--ink2);font-size:14px}
.wMinor{font-size:12.5px;color:var(--ink3);margin:10px 0 0;line-height:1.45}
.wMinor a{color:var(--willow2)}
.wReceipt{border:1px dashed var(--rule2);border-radius:10px;padding:12px;margin:0 0 12px;font-size:14px;line-height:1.5;background:var(--card2)}
.wReceipt code{font-size:12px;overflow-wrap:anywhere}

.wHow{margin:16px 0 0;border-top:1px solid var(--rule);padding-top:10px}
.wHow summary{cursor:pointer;font-size:13px;color:var(--ink2);letter-spacing:.02em;list-style:none;display:flex;align-items:center;gap:6px}
.wHow summary::-webkit-details-marker{display:none}
.wHow summary::before{content:"+";font-family:"Fraunces",serif;font-weight:700;font-size:16px;color:var(--willow)}
.wHow[open] summary::before{content:"–"}
.wHow p{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:8px 0 0}
.wHow p b{color:var(--ink)}

/* ---------- the stall: the market beside the bench ---------- */
.stall{margin:14px 0 0;display:grid;gap:12px}
.stallCard{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.stallHead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 8px}
.stallHead .t{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.stallHead .r{font-size:12px;color:var(--ink3)}
.stallHead .r a{color:var(--willow2);text-decoration:none}
.bigNum{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:38px;line-height:1;letter-spacing:-.02em;margin:2px 0 4px}
.bigNum small{font-family:"Karla",sans-serif;font-weight:400;font-size:13px;letter-spacing:0;color:var(--ink2);margin-left:6px}
.stallSub{font-size:13px;color:var(--ink2);line-height:1.45;margin:0}
.statRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
.statRow div{border-top:1px solid var(--rule);padding-top:6px}
.statRow .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.statRow .v{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:15px;font-weight:600;margin-top:2px}

.strands{display:block;margin:0}
.strandRow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--rule);font-size:13px}
.strandRow:first-child{border-top:0}
.strandRow .who{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.strandRow .who a{text-decoration:none;color:var(--ink)}
.strandRow .what{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strandRow .what b{color:var(--willow2);font-weight:600}
.strandRow .when{color:var(--ink3);font-size:12px}
.strandEmpty{color:var(--ink3);font-size:13.5px;padding:6px 0 2px;line-height:1.5}

.pastRow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:8px 0;border-top:1px solid var(--rule);font-size:13.5px}
.pastRow:first-child{border-top:0}
.pastRow .id{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:15px}
.pastRow .sum{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pastRow .pay{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;color:var(--willow2);font-weight:600;white-space:nowrap}

/* ---------- other pages ---------- */
.pageTitle{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.01em;margin:0 0 6px}
.pageLede{color:var(--ink2);font-size:14px;margin:0 0 14px}
.pageLede code{font-size:12px;overflow-wrap:anywhere}
.rulesText p{font-size:15px;line-height:1.6;margin:0 0 12px;color:var(--ink)}
.rulesText p b{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:16px;display:block;margin:14px 0 2px}
.rulesText code{font-size:12.5px;overflow-wrap:anywhere}
.handCard{border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:var(--card)}
.handCard .hTop{display:flex;justify-content:space-between;gap:8px;align-items:baseline;margin:0 0 6px}
.handCard .hTop b{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:16px}
.handCard .hTop span{font-size:12px;color:var(--ink3)}
.handKv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px}
.handKv span{color:var(--ink2)}
.handKv code{font-size:13px;text-align:right}
.collectBtn{margin:10px 0 0;min-height:40px;padding:0 16px;border-radius:9px;background:var(--willow);color:#FFFDF8;font-weight:700;font-size:14px}
.collectBtn[disabled]{background:var(--rule);color:var(--ink3)}

/* ---------- the hem ---------- */
.hem{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--rule2);font-size:12.5px;color:var(--ink3);line-height:1.6}
.hemLine{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.hemLine a{color:var(--ink2);text-decoration:none}
.hemLine a:hover{color:var(--willow2)}
.hem code{font-size:11.5px;overflow-wrap:anywhere;color:var(--ink2)}
.hemAddr{margin:6px 0 0}

/* ---------- the note ---------- */
.note{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--paper);padding:9px 14px;border-radius:999px;font-size:13.5px;max-width:calc(100vw - 32px);box-shadow:0 8px 24px rgba(42,36,24,.25)}
.note[hidden]{display:none}
.walletPick{display:grid;gap:8px;margin:8px 0 0}
.walletPick button{display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:10px;padding:10px 12px;font-size:14px;text-align:left}
.walletPick img{width:22px;height:22px;border-radius:6px}

/* ---------- 720+ : a wider measure ---------- */
@media (min-width:720px){
  :root{--twine:60px}
  .twineAddr{font-size:13.5px}
  .twineLine{font-size:11px}
  #bench{max-width:760px;padding:22px 20px 44px}
  .wizard{padding:22px 22px 24px}
  .wTitle{font-size:28px}
  .frameGrid{grid-template-columns:repeat(3,1fr);gap:10px}
  .bigNum{font-size:44px}
  .stall{grid-template-columns:1fr 1fr}
  .stallCard.wide{grid-column:1 / -1}
}
/* ---------- 1000+ : the bench recomposes — the weave left, the market on the right ---------- */
@media (min-width:1000px){
  #bench{max-width:1160px;display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"wiz stall" "hem hem";gap:20px 24px;align-items:start;padding:26px 24px 48px}
  .wizard{grid-area:wiz;padding:28px 30px 30px}
  .stall{grid-area:stall;margin:0;grid-template-columns:1fr}
  .stallCard.wide{grid-column:auto}
  .hem{grid-area:hem}
  .wTitle{font-size:32px}
  .wLede{font-size:15px}
  .frameGrid{grid-template-columns:repeat(3,1fr);gap:12px}
  .fcFill{font-size:17px}
  .bigNum{font-size:48px}
  .twineAddr{font-size:14px}
}
@media (min-width:1300px){
  .wizard{padding:32px 36px 34px}
  .frameGrid{gap:14px}
}