/* goodmorning.family — cream editorial system v3 */
:root{
  --paper:#FAF4E8; --paper-2:#F3EBDB; --paper-3:#EAE0CC;
  --ink:#24211C; --ink-2:#615A4F; --ink-3:#9C9383;
  --hair:rgba(36,33,28,.12);
  --serif:"Literata","Noto Serif TC",Georgia,serif; --sans:"Noto Sans TC",system-ui,sans-serif;
  --m:clamp(20px,5vw,80px); --max:1440px; --gut:clamp(12px,1.6vw,24px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color-scheme:light only;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:300 15px/1.75 var(--sans);letter-spacing:.02em;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} ul{list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;width:100%;height:100%;object-fit:cover}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--m)}
.eyebrow{font:400 12px/1.5 var(--sans);letter-spacing:.16em;color:var(--ink-3)}
.display{font:300 clamp(34px,3.9vw,58px)/1.22 var(--serif);letter-spacing:.04em;color:var(--ink)}
.h2{font:300 clamp(24px,2.1vw,30px)/1.3 var(--serif);letter-spacing:.06em}
.h3{font:300 clamp(22px,1.8vw,26px)/1 var(--serif);letter-spacing:.02em}
.lede{font-size:15px;color:var(--ink-2);max-width:26em}
.mark{font:400 18px var(--serif);letter-spacing:.01em}.mark em{font-style:normal;color:var(--ink-3)}
nav{display:flex;gap:32px;font-size:13px;letter-spacing:.18em;color:var(--ink-2)} nav a:hover{color:var(--ink)}
/* header */
.bar{display:flex;justify-content:space-between;align-items:center;height:76px}
/* hero: 5/7 split, framed 4:5 photo, copy baseline-aligned to photo bottom */
.hero{display:grid;grid-template-columns:5fr 7fr;gap:var(--gut);align-items:end;padding:clamp(24px,4vw,56px) 0 clamp(80px,9vw,128px);border-top:1px solid var(--hair)}
.hero-copy{display:flex;flex-direction:column;gap:28px;padding:0 clamp(0px,3vw,48px) 4px 0}
.eyebrow .sep{display:inline-block;width:24px;height:1px;background:var(--ink-3);vertical-align:middle;margin:0 12px;opacity:.6}
.lede{margin-top:-4px}
.hero-photo{justify-self:end;width:min(100%,600px)}
.frame{position:relative;aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.frame img{position:absolute;inset:0}
.pending{display:none;position:absolute;inset:0;place-items:center;color:var(--ink-3);font-size:13px;letter-spacing:.2em}
.frame.empty img{display:none}.frame.empty .pending{display:grid}
.cap{display:flex;justify-content:space-between;padding-top:14px;font-size:12px;letter-spacing:.16em;color:var(--ink-3)}
.slots{display:flex;gap:0;margin-top:16px;border-top:1px solid var(--hair)}
.slots li{flex:1}
.slots button{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 0 0;color:var(--ink-3);position:relative;transition:color .3s}
.slots button::before{content:"";position:absolute;left:0;right:24px;top:-1px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.slots .zh{font:400 18px/1.2 var(--serif);letter-spacing:.24em}
.slots .t{font-size:12px;letter-spacing:.14em}
.slots button:hover,.slots button.on{color:var(--ink)} .slots button.on::before{transform:scaleX(1)}
.slots button.none .t::after{content:"・未發佈"}
/* archive: one calm row per day, 3 equal 4:5 cells, date column at left */
.archive{padding:0 0 clamp(96px,10vw,160px)}
.sec{display:grid;grid-template-columns:2fr 7fr 3fr;align-items:baseline;gap:var(--gut);padding:28px 0 clamp(40px,4vw,64px);border-top:1px solid var(--hair)}
.range{text-align:right}
.day{display:grid;grid-template-columns:2fr 10fr;gap:var(--gut);padding:28px 0 36px;border-top:1px solid var(--hair)}
.day-label{display:flex;flex-direction:column;gap:10px;padding-top:2px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.cell{display:flex;flex-direction:column;gap:12px}
.ph{aspect-ratio:4/5;background:var(--paper-2);overflow:hidden}
.ph img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)} a.cell:hover img{transform:scale(1.025)}
.void{display:grid;place-items:center;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair)}
.void span{font-size:12px;letter-spacing:.18em;color:var(--ink-3)}
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-top:40px;padding-bottom:48px;border-top:1px solid var(--hair)}
.foot nav{justify-self:end}
/* mobile */
@media(max-width:820px){
  .bar{height:64px} nav{gap:22px;font-size:13px;letter-spacing:.14em}
  .hero{grid-template-columns:1fr;gap:32px;padding:0 0 72px;border-top:0}
  .hero-photo{order:-1;width:auto;justify-self:stretch;margin:0 calc(-1*var(--m))}
  .cap{padding:12px var(--m) 0}
  .hero-copy{padding:0;gap:22px}
  .display{font-size:32px}
  .sec{grid-template-columns:1fr auto;gap:8px 16px;padding:24px 0 32px}.sec .h2{grid-column:1/-1;order:2}
  .day{grid-template-columns:1fr;gap:16px;padding:22px 0 28px}
  .day-label{flex-direction:row;align-items:baseline;gap:14px}
  .trio{gap:8px}.cell{gap:8px}.cell .eyebrow{font-size:11px;letter-spacing:.14em}
  .void span{font-size:11px;letter-spacing:.1em;writing-mode:vertical-rl}
  .foot{grid-template-columns:1fr;justify-items:start;gap:14px}.foot nav{justify-self:start}
}

/* ===== v4 editorial enrichment ===== */
:root{
  --paper:#F8F0E1; --paper-2:#EFE4CF; --paper-3:#E4D6BC; --matte:#FDF9F1;
  --ink:#2B2219; --ink-2:#5E5244; --ink-3:#97887354; --ink-3:#978873; --accent:#9A5B3C;
  --hair:rgba(60,44,28,.16); --hair-2:rgba(60,44,28,.32);
}
body{background-color:var(--paper);background-image:
  radial-gradient(ellipse at 15% 0%,rgba(255,250,238,.9),transparent 55%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.mark{font:400 21px var(--serif);font-style:italic}.mark em{color:var(--accent)}
.masthead{display:flex;justify-content:space-between;align-items:center;padding-top:10px;padding-bottom:10px;border-top:1px solid var(--hair-2);box-shadow:inset 0 -1px 0 var(--hair);font:400 11px/1 var(--sans);letter-spacing:.24em;color:var(--ink-2)}
.masthead span:first-child,.masthead span:last-child{font-family:var(--serif);font-style:italic;letter-spacing:.08em}
.hero{border-top:0;padding-top:clamp(40px,5vw,72px)}
.kicker .no{color:var(--accent);margin-right:14px;font-family:"Noto Serif TC",serif;letter-spacing:.3em}
.display{font:300 clamp(40px,4.6vw,72px)/1.16 "Noto Serif TC",var(--serif);letter-spacing:.06em}
.display em{font-style:normal;font-weight:400;color:var(--accent)}
.lede{font:300 16px/1.95 "Noto Serif TC",serif;color:var(--ink-2);padding-left:18px;border-left:1px solid var(--accent)}
.hero-photo{width:min(100%,560px)}
.frame,.ph{background:var(--matte);padding:clamp(10px,1.1vw,16px);box-shadow:0 0 0 1px var(--hair),0 1px 2px rgba(60,40,20,.06),0 18px 40px -22px rgba(60,40,20,.35)}
.frame{aspect-ratio:auto;padding:clamp(14px,1.6vw,22px)}
.frame img{position:static;aspect-ratio:4/5;height:auto}
.frame .pending{position:static;aspect-ratio:4/5;background:var(--paper-2)}
.ph{aspect-ratio:auto;overflow:visible}.ph img{aspect-ratio:4/5;height:auto}
.ph>*{overflow:hidden}
.cap{font-family:"Noto Serif TC",serif;padding-top:18px;color:var(--ink-2)}
.cap #heroCap{color:var(--accent);letter-spacing:.3em}
.slots .zh{font:400 22px/1.2 "Noto Serif TC",serif}
.slots button.on .zh{color:var(--accent)}
.slots button::before{height:2px;top:-1px;background:var(--accent)}
.sec{border-top:1px solid var(--hair-2);box-shadow:inset 0 4px 0 -3px var(--hair);padding-top:32px}
.secno{font:italic 400 13px var(--serif);color:var(--accent);margin-right:14px;letter-spacing:.1em}
.h2{font:400 clamp(28px,2.6vw,40px)/1.25 "Noto Serif TC",serif;letter-spacing:.08em}
.day{padding:44px 0 56px;border-top:1px solid var(--hair)}
.day-label{gap:8px;position:sticky;top:24px;align-self:start}
.day-label .h3{font:300 clamp(56px,5.4vw,84px)/.9 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.day-label .eyebrow:first-child{font-family:var(--serif);font-style:italic;color:var(--accent);letter-spacing:.12em}
.count{margin-top:10px;padding-top:10px;border-top:1px solid var(--hair);font:300 12px "Noto Serif TC",serif;color:var(--ink-2);letter-spacing:.14em;max-width:9em}
.trio .cell:nth-child(2){margin-top:clamp(0px,2.4vw,36px)}
.day:nth-child(even) .trio .cell:nth-child(2){margin-top:0}
.day:nth-child(even) .trio .cell:nth-child(1),.day:nth-child(even) .trio .cell:nth-child(3){margin-top:clamp(0px,2.4vw,36px)}
.cell .eyebrow{display:flex;justify-content:space-between;border-bottom:1px solid var(--hair);padding-bottom:8px;color:var(--ink-3)}
.cell .eyebrow b{font:400 14px "Noto Serif TC",serif;letter-spacing:.24em;color:var(--ink)}
a.cell:hover .ph{box-shadow:0 0 0 1px var(--hair-2),0 2px 4px rgba(60,40,20,.08),0 26px 50px -24px rgba(60,40,20,.45)}
.ph,.frame{transition:box-shadow .6s}
.void{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(60,44,28,.035) 9px 10px),var(--paper-2);box-shadow:inset 0 0 0 1px var(--hair);padding:0}
.void span{font:300 30px "Noto Serif TC",serif;letter-spacing:.3em;color:var(--ink-3);writing-mode:vertical-rl}
.void small{font-size:11px;letter-spacing:.24em;color:var(--ink-3)}
.foot{border-top:1px solid var(--hair-2);box-shadow:inset 0 4px 0 -3px var(--hair);padding-top:48px;padding-bottom:56px}
.foot .eyebrow{font-family:"Noto Serif TC",serif;color:var(--ink-2)}
@media(max-width:820px){
  .masthead .mh-mid{display:none}
  .hero-photo{margin:0}.frame{padding:12px}.cap{padding:14px 0 0}
  .display{font-size:36px}
  .day{padding:28px 0 36px}.day-label{position:static;flex-wrap:wrap;gap:6px 12px}
  .day-label .h3{font-size:44px}.count{margin:0;padding:0;border:0;margin-left:auto}
  .ph{padding:5px}.trio .cell,.day:nth-child(even) .trio .cell{margin-top:0!important}
  .cell .eyebrow{flex-direction:column;gap:2px;font-size:10px}.cell .eyebrow b{font-size:13px;letter-spacing:.14em}
  .void span{font-size:18px}.void small{display:none}
}
.display .nw{white-space:nowrap} nav a.quiet{color:var(--ink-3)} nav a.quiet:hover{color:var(--accent)}
@media(min-width:821px){.display{font-size:clamp(40px,4.2vw,64px)}}

/* ===== maker component (shared: home hero + /make) ===== */
.mkr{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(20px,3vw,48px);align-items:start}
.mkr-ctl{display:flex;flex-direction:column;gap:22px}
.mkr-lbl{font:400 11px/1 var(--sans);letter-spacing:.2em;color:var(--ink-3);margin-bottom:10px;display:flex;justify-content:space-between}
.mkr-tabs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--hair);border-radius:999px;padding:4px;background:var(--paper-2)}
.mkr-tabs button{padding:9px 0;border-radius:999px;font:400 15px var(--serif);letter-spacing:.2em;color:var(--ink-2);transition:.2s}
.mkr-tabs button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(36,33,28,.12)}
.mkr-pg{display:flex;flex-wrap:wrap;gap:8px}
.mkr-pg button{padding:7px 14px;border:1px solid var(--hair);border-radius:999px;font-size:13px;color:var(--ink-2);background:var(--paper);text-align:left}
.mkr-pg button:hover{border-color:var(--ink-3)}.mkr-pg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mk-empty{font-size:13px;color:var(--ink-3)}
.mkr input[type=search],.mkr textarea{width:100%;font:300 14px/1.6 var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--hair);border-radius:12px;padding:10px 14px;outline:none}
.mkr input[type=search]:focus,.mkr textarea:focus{border-color:var(--ink-3)}
.mkr textarea{height:76px;resize:vertical}
.mkr-col{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mkr-col button{display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border:1px solid var(--hair);border-radius:999px;font-size:12px;color:var(--ink-2)}
.mkr-col button i{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(36,33,28,.18)}
.mkr-col button.on{border-color:var(--ink);color:var(--ink)}
.mkr-col label{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);cursor:pointer}
.mkr-col input[type=color]{width:30px;height:30px;border:1px solid var(--hair);border-radius:50%;padding:2px;background:var(--paper);cursor:pointer}
.mkr-col input[type=color]::-webkit-color-swatch-wrapper{padding:0}.mkr-col input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
.mkr-tg{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.mkr-tg button{flex:0 0 64px;display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--ink-3);text-align:center}
.mkr-tg img{height:80px;border-radius:8px;outline:2px solid transparent;outline-offset:2px;transition:.2s}
.mkr-tg button.on img{outline-color:var(--ink)}.mkr-tg button.dim{opacity:.55}
.mkr-pv{display:flex;flex-direction:column;align-items:center;gap:14px}
.mkr-pv canvas{width:100%;max-width:520px;aspect-ratio:4/5;height:auto;border-radius:6px;background:var(--paper-2);box-shadow:0 1px 2px rgba(36,33,28,.06),0 24px 60px -24px rgba(60,45,25,.35)}
.mkr-dl{width:100%;max-width:520px;padding:15px;border-radius:999px;background:var(--ink);color:var(--paper);font:400 15px var(--sans);letter-spacing:.24em;transition:.2s}
.mkr-dl:hover{background:#3A3226}
.mkr-meta{font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.mkr-more{font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--hair);align-self:flex-start}
.hero-mk{padding:clamp(20px,3vw,44px) 0 clamp(72px,8vw,112px);border-top:1px solid var(--hair)}
.hero-mk .head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(20px,2.5vw,32px)}
.hero-mk .display{font-size:clamp(30px,3.4vw,50px)}
@media(max-width:820px){
 .mkr{grid-template-columns:1fr}.mkr-pv{order:-1}
 .mkr-pv canvas{max-width:340px}.mkr-stage{max-width:340px}
}

/* chips + drag/resize */
.mkr-pg button{transition:background .12s,border-color .12s}.mkr-pg button.on{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink)}
.mkr-shuf{margin-top:10px;padding:7px 14px;border-radius:999px;border:1px dashed var(--ink-3);font-size:13px;color:var(--ink)}
.mkr-own{margin-top:16px}.mkr-lbl span{letter-spacing:.05em}
.mkr-stage{position:relative;width:100%;max-width:520px;touch-action:none}.mkr-stage canvas{display:block;max-width:none!important}
.mkr-ov{position:absolute;cursor:grab;border:1px dashed transparent;border-radius:6px;touch-action:none;transition:border-color .2s;outline:none}
.mkr-ov.sel,.mkr-ov.act{border-color:rgba(127,110,85,.7)}.mkr-ov.act{cursor:grabbing}
.mkr-h{position:absolute;right:-9px;bottom:-9px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink-2);cursor:nwse-resize;opacity:0;transition:opacity .2s}
.mkr-h{pointer-events:none}.mkr-ov.sel .mkr-h,.mkr-ov.act .mkr-h{opacity:1;pointer-events:auto}

.mkr-lay{display:flex;align-items:center;gap:8px;width:100%;max-width:520px;font-size:12px;color:var(--ink-2)}
.mkr-lay button{padding:5px 10px;border:1px solid var(--hair);border-radius:999px}.mkr-lay input{flex:1;accent-color:var(--ink)}
.mkr-fonts{display:flex;flex-wrap:wrap;gap:8px}.mkr-fonts button{padding:7px 14px;border:1px solid var(--hair);border-radius:999px;font-size:15px;color:var(--ink-2)}.mkr-fonts button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* curated chips + quiet search panel */
.mkr-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.mkr-acts .mkr-shuf{margin-top:0}
.mkr-moreq{padding:7px 14px;border-radius:999px;border:1px solid transparent;font-size:13px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.mkr-moreq[aria-expanded="true"]{text-decoration:none;border-color:var(--hair)}
.mkr-sp{margin-top:10px;padding:12px;border:1px solid var(--hair);border-radius:12px;background:var(--paper)}
.mkr-sp input{width:100%;padding:8px 12px;border:1px solid var(--hair);border-radius:999px;font:inherit;font-size:14px;background:transparent;color:var(--ink)}
.mkr-hint{margin:6px 2px 0;font-size:12px;color:var(--ink-3)}

/* ===== align-fix-1 ===== */
.mkr{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px)}
.mkr-ctl{gap:24px;min-width:0}
.mkr-ctl>div>.mkr-lbl,.mkr-lbl{align-items:baseline;margin-bottom:12px}
.mkr-pv{align-items:stretch;gap:12px;max-width:560px;width:100%;justify-self:end}
.mkr-stage,.mkr-lay,.mkr-dl,.mkr-pv canvas{max-width:none;width:100%}
.mkr-meta{text-align:center}
/* chip rows: equal grids, no orphans */
.mkr-fonts{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.mkr-fonts button{padding:8px 6px;text-align:center;white-space:nowrap;font-size:14px}
.mkr-col{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.mkr-col button,.mkr-col label{justify-content:center;padding:5px 6px;min-height:34px;white-space:nowrap;border:1px solid var(--hair);border-radius:999px;font-size:12px}
.mkr-col label{gap:6px}.mkr-col input[type=color]{width:22px;height:22px;padding:0;border:0}
.mkr-col button i{flex:0 0 18px;width:18px;height:18px}
/* template thumbs: centered labels, ring only, no flash/jump */
.mkr-tg{gap:10px;padding:4px 4px 8px}
.mkr-tg button{flex:0 0 66px;align-items:center;padding:0;-webkit-tap-highlight-color:transparent;outline:none}
.mkr-tg button:focus{outline:none}.mkr-tg button:focus-visible img{outline-color:var(--ink-3)}
.mkr-tg img{width:66px;height:82px;object-fit:cover;outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s}
.mkr-tg button.on img{outline-color:var(--ink)}.mkr-tg button.on span{color:var(--ink)}
.mkr-tg span{display:block;width:100%;text-align:center;line-height:1.3}
.mkr button{-webkit-tap-highlight-color:transparent}
.mkr-more{margin-top:-4px}
.hero-mk{padding-bottom:clamp(56px,6vw,88px)}
@media(max-width:820px){
 .bar nav{gap:16px;letter-spacing:.1em;white-space:nowrap}
 .mkr{gap:28px}.mkr-pv{max-width:none;justify-self:stretch}
 .mkr-fonts{grid-template-columns:repeat(3,1fr)}
 .mkr-col{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.mkr-col button,.mkr-col label{font-size:11px;padding:4px 2px;gap:4px}
 .mkr-col button i{flex-basis:14px;width:14px;height:14px}
 .hero-mk .head{margin-bottom:20px}
}
/* mobile maker: sticky compact preview, 44px targets */
@media(max-width:820px){
 .mkr-pv{position:sticky;top:0;z-index:5;align-items:center;padding:10px 0 12px;margin:0 calc(-1*var(--m));padding-left:var(--m);padding-right:var(--m);background:var(--paper);box-shadow:0 1px 0 var(--hair),0 10px 18px -16px rgba(60,44,28,.4)}
 .mkr-stage{width:min(100%,calc(40vh*.8));margin:0 auto}
 .mkr-lay{max-width:340px}.mkr-dl{max-width:340px;min-height:48px;padding:12px}
 .mkr-meta{display:none}
 .mkr-tabs button,.mkr-pg button,.mkr-fonts button,.mkr-col button,.mkr-col label,.mkr-shuf,.mkr-moreq,.mkr-lay button{min-height:44px}
 .mkr-pg button{font-size:14px}
 .mkr-tg button{flex-basis:72px}.mkr-tg img{width:72px;height:90px}
}

/* ===== mobile tray v2: sticky preview top, swipe rows, 樣式 sheet ===== */
.mkr-style{display:contents}.mkr-stylebtn,.mkr-sheet-hd{display:none}
@media(max-width:820px){
 .mkr{display:flex;flex-direction:column;gap:0}
 .mkr-pv{order:-1;position:sticky;top:0;z-index:6;margin:0 calc(-1*var(--m));padding:8px var(--m) 10px;gap:8px;background:var(--paper);box-shadow:0 1px 0 var(--hair),0 12px 20px -18px rgba(60,44,28,.45)}
 .mkr-stage{width:auto;height:min(46vh,calc((100vw - 2*var(--m))*1.25));aspect-ratio:4/5;margin:0 auto}
 .mkr-stage canvas{width:100%!important;height:100%!important}
 .mkr-lay,.mkr-meta{display:none}
 .mkr-dl{max-width:none;min-height:48px;padding:12px;font-size:15px}
 .mkr-ctl{gap:14px;padding:14px 0 8px}
 .mkr-ctl>div,.mkr-stylebtn{min-width:0}
 .mkr-ctl .mkr-lbl{margin-bottom:8px}
 /* swipe rows */
 .mkr-pg{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin:0 calc(-1*var(--m));padding:2px var(--m) 4px;scrollbar-width:none}
 .mkr-pg::-webkit-scrollbar,.mkr-tg::-webkit-scrollbar{display:none}
 .mkr-pg button{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start;min-height:44px}
 .mkr-acts{margin-top:8px}.mkr-acts button{min-height:40px;font-size:13px}
 .mkr-sp{margin-top:8px}
 .mkr-tg{margin:0 calc(-1*var(--m));padding:4px var(--m) 4px;scrollbar-width:none}
 .mkr-tg button{flex:0 0 64px}.mkr-tg img{width:64px;height:80px}
 .mkr-more{display:none}
 .mkr-stylebtn{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--hair-2);border-radius:999px;background:var(--matte);font:400 14px var(--sans);letter-spacing:.12em;color:var(--ink)}
 /* bottom sheet */
 .mkr-style{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:62vh;overflow:auto;padding:0 var(--m) calc(20px + env(safe-area-inset-bottom));background:var(--matte);border-radius:18px 18px 0 0;box-shadow:0 -1px 0 var(--hair),0 -20px 40px -20px rgba(60,44,28,.45)}
 .mkr-style.open{display:flex;flex-direction:column;gap:18px}
 .mkr-sheet-hd{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:var(--matte);padding:14px 0 8px;font:400 15px var(--serif);letter-spacing:.2em}
 .mkr-sheet-x{min-height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:13px;letter-spacing:.16em}
 .mkr-ownbox .mkr-own{margin-top:0}
}
@media(max-width:820px){.mkr-ctl button,.mkr-ctl textarea,.mkr-ctl input{scroll-margin-top:calc(50vh + 90px)}}
@media(max-width:820px){.mkr>.mkr-ctl{width:100%;max-width:100%;min-width:0;overflow:hidden}.mkr-ctl>div{max-width:100%;overflow:visible}.mkr-pv{width:auto;align-items:center}.mkr-dl{width:100%}.mkr-pg,.mkr-tg{max-width:none}}
@media(max-width:820px){.mkr>.mkr-pv{width:calc(100% + 2*var(--m));max-width:none;align-self:stretch}.mkr-pv .mkr-dl{width:calc(100vh*0 + min(46vh,calc((100vw - 2*var(--m))*1.25))*.8)}}

/* deselect: hover hint only (no persistent box) */
@media(hover:hover){.mkr-stage:hover .mkr-ov:not(.sel){border-color:rgba(127,110,85,.3)}}
/* mobile header: one clean row */
@media(max-width:820px){.bar{gap:12px;padding-top:0;padding-bottom:0}.bar .mark,header.bar a.mark{font-size:18px;padding-right:4px;white-space:nowrap;flex:0 1 auto;min-width:0;line-height:1}.bar nav,header.bar nav{display:flex;align-items:center;gap:12px;margin-left:auto;letter-spacing:.06em;flex:0 0 auto;font-size:14px;line-height:1}.bar nav a{padding:10px 0}}
@media(max-width:360px){.bar .mark{font-size:17px}.bar nav{gap:10px;font-size:13px}}
/* greeting pick: big 2-col chips, no sideways hunt */
@media(max-width:820px){.mkr-pg{display:grid;grid-template-columns:1fr 1fr;gap:8px;overflow:visible;margin:0;padding:0}
 .mkr-pg button{white-space:normal;min-height:52px;font-size:15px;line-height:1.35;padding:8px 12px;border-radius:14px;text-align:left}
 .mkr-pg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:600}
 .mkr-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mkr-acts button{justify-content:center;text-align:center;font-size:14px}}

.mkr-dlrow{display:flex;gap:8px;width:100%}.mkr-dlrow>*{flex:1 1 0;margin:0}
.mkr-share{min-height:48px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);background:var(--paper);font-size:15px;letter-spacing:.12em}
@media(max-width:820px){.mkr-pv .mkr-dlrow{width:min(46vh*.8,calc((100vw - 2*var(--m))*1.25*.8));align-self:center}.mkr-pv .mkr-dlrow .mkr-dl{width:auto}.mkr-share{background:var(--ink);color:var(--paper);order:-1}.mkr-dlrow .mkr-dl{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink)}}

.mkr-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 18px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:99}.mkr-toast.on{opacity:1;transform:translate(-50%,0)}
/* quiet wordmark (2026-10-30): smaller, lighter; ".family" faint on desktop, dropped on mobile */
.bar .mark,header .mark{font:italic 400 17px/1 var(--serif);letter-spacing:.02em;color:var(--ink-2)}
.bar .mark .tld,header .mark .tld{color:var(--ink-3);opacity:.7}.mark .tld em{color:inherit}
.bar .mark:hover{color:var(--ink)}
@media(max-width:820px){.bar .mark,header.bar a.mark,header .mark{font-size:16px;color:var(--ink-2)}.mark .tld{display:none}}
@media(max-width:360px){.bar .mark{font-size:15px}}

/* ultra-minimal greeting pick */
.mkr-pg{display:flex!important;flex-direction:column;gap:0!important;overflow:visible!important;margin:0!important;padding:0!important}
.mkr-pg button{white-space:normal!important;width:100%;min-height:56px!important;padding:14px 4px!important;border:0!important;border-bottom:1px solid var(--hair)!important;border-radius:0!important;background:none!important;color:var(--ink-2)!important;font-size:17px!important;font-weight:400!important;box-shadow:none!important;text-align:left}
.mkr-pg button.on{color:var(--ink)!important;font-weight:600!important}
.mkr-pg button.on::after{content:" ✓";color:var(--ink-3)}
.mkr-ownbtn{display:block;width:100%;min-height:56px;padding:14px 4px;text-align:left;font-size:17px;color:var(--ink-3);border:0;border-bottom:1px solid var(--hair);background:none;margin-top:0!important}
.mkr-acts{display:flex!important;justify-content:flex-end;gap:18px!important;margin-top:10px!important;order:9}
.mkr-acts button{min-height:32px!important;padding:4px 0!important;border:0!important;background:none!important;font-size:12px!important;color:var(--ink-3)!important;text-decoration:none!important}
.mkr-lbl [data-mk=cnt]{display:none}
[data-mk=custom]{margin-top:10px}
/* daylight editorial polish */
.mkr-pg{margin-top:4px!important;border-top:1px solid var(--hair)}
.mkr-pg button{font-family:inherit;letter-spacing:.02em;line-height:1.5!important;padding:18px 2px!important;min-height:64px!important;transition:color .15s}
.mkr-pg button.on::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink);margin-left:10px;vertical-align:middle}
.mkr-ownbtn{padding:18px 2px;min-height:64px;font-size:15px;letter-spacing:.04em;color:var(--ink-3)}
.mkr-lbl{font-size:11px;letter-spacing:.24em;color:var(--ink-3);margin:36px 0 10px}
.mkr-acts{margin-top:14px!important}
.mkr-acts button{letter-spacing:.08em}
[data-mk=custom]{margin-top:14px;border:1px solid var(--hair);border-radius:12px;padding:14px;font-size:16px;background:transparent}
/* pro-generator patterns: one primary action, ghost secondary; prompt-bar custom */
.mkr-dl{border:0!important;background:none!important;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--hair);color:var(--ink-2)!important;letter-spacing:.06em}
.mkr-ownbtn{display:flex;align-items:center;gap:10px;margin-top:18px!important;border:1px solid var(--hair)!important;border-radius:999px;padding:0 20px!important;min-height:52px!important;color:var(--ink-3)}
.mkr-ownbtn[aria-expanded=true]{border-color:var(--ink-3);color:var(--ink)}


/* runway preview: never allow 46vh square trap on .mkr.rw */
@media (max-width:820px){
  .mkr.rw .mkr-stage,
  .mkr.rw .rw-pv .mkr-stage{
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:4/5!important;
    margin:0 auto!important;
  }
  .mkr.rw .mkr-stage canvas,
  .mkr.rw .rw-pv .mkr-stage canvas{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-height:none!important;
  }
  .mkr.rw .mkr-stage,
  .mkr.rw .rw-pv .mkr-stage{position:relative!important}
}