/* UNFIRED — prototype stylesheet */
:root{
  --bg:#000; --ink:#F4F2EC; --ink-dim:#8C8A84; --ink-faint:#54524E;
  --line:#1E1E1E; --line-2:#2B2B2B; --paper:#F4F2EC;
  --blue:#2B36FF; --acid:#D6FF2E; --orange:#FF4A17; --cyan:#00E2FF; --rose:#FF7BB0;
  --sheet:#0C0C0C;
  --idea:#D6FF2E; --making:#FF4A17; --finished:#00E2FF;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.9,.24,1);
  --font:"Helvetica Neue",Helvetica,"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;background:#0A0A0A;font-family:var(--font);color:var(--ink)}
body{overscroll-behavior:none;
  /* grayscale antialiasing, as Figma draws text: without it macOS browsers
     thicken light-on-dark text and every weight looks a step bolder */
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  -webkit-user-select:none;user-select:none}
input,textarea{font:inherit;color:inherit;background:none;border:0;outline:none}
img{display:block;max-width:100%}

/* ---------- device / viewport ---------- */
#device{position:fixed;inset:0;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column}
@media (min-width:760px){
  /* Lightened from #3C3A36/#221F1C -- the old backdrop and the app's own
     near-black content (#040404/#0A0A0A/#0B0B0B everywhere) read as one
     continuous surface, no visible frame edge. The device's own hairline
     border also moves from a near-invisible dark gray (#262626, barely
     different from the backdrop it sits on) to a translucent white ring,
     which stays visible against any dark surface regardless of exactly
     how dark the backdrop is. */
  body{display:flex;align-items:center;justify-content:center;background:#57534C;
    background-image:radial-gradient(circle at 50% 0%,#6B6660 0%,#332F2A 70%)}
  #device{position:relative;inset:auto;width:402px;height:min(874px,96vh);
    border-radius:44px;
    box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.14);
    /* no simulated home-indicator inset at the bottom: the bottom bars'
       buttons sit exactly 16px from the frame's edge, as designed */
    --safe-t:14px;--safe-b:0px}
}
/* Inside an iframe the viewport is phone-sized, so the rule above never runs
   and env(safe-area-inset-top) is 0 -- give the embedded frame the same top
   inset as the standalone desktop one (html.framed is set by js/app.js). */
@media (max-width:759px){ html.framed #device{--safe-t:14px;--safe-b:0px} }
/* the drawn iPhone status bar (js/sysbar.js, Figma "Status bar - iPhone"
   402 x 62): content starts under it, as in every Figma screen */
html.with-sysbar #device{--safe-t:62px}
.sysbar{display:none}
/* always 62px tall: at 402 wide the whole image; narrower, the same
   size, its sides cropped evenly */
html.with-sysbar .sysbar{display:block;position:absolute;z-index:150;top:0;left:0;width:100%;height:62px;
  object-fit:cover;object-position:center;pointer-events:none;user-select:none;-webkit-user-select:none}
html.with-sysbar .sysbar[hidden]{display:none}
/* under it, the Items top bar's progressive blur, so what scrolls up
   under the clock goes soft instead of colliding with it */
.sysbar-blur{display:none}
html.with-sysbar .sysbar-blur{display:block;position:absolute;z-index:149;top:0;left:0;right:0;
  height:var(--safe-t);pointer-events:none;isolation:isolate}
.app{position:absolute;inset:0;overflow:hidden}

/* ---------- typography ---------- */
/* Type scale = the Items screen + piece card (Figma). Outside those, the
   shared classes map onto it:
     .h-mega  screen title   32px bold upper -1.05px   (ITEMS / INSIGHTS)
     .h-big   section title  24px bold upper -0.55px   (READY TO POST)
     .label   meta / status  12px regular upper        (MAKING, 23 DAYS AGO)
     .meta    small secondary 14px regular              (Edit screen helper text)
   .h-mid stays as the piece card's own section title. .keep-type (Items
   screen empty states, "card gone") pins the previous look there. */
.h-mega{font-size:32px;line-height:1;letter-spacing:-1.05px;
  font-weight:700;text-transform:uppercase;margin:0}
.h-big{font-size:24px;line-height:1.1;letter-spacing:-.55px;
  font-weight:700;text-transform:uppercase;margin:0}
.h-mid{font-size:22px;line-height:1.02;letter-spacing:-.025em;font-weight:700;
  text-transform:uppercase;margin:0}
/* piece name as a title, like the Items screen / card page: Title Case
   (in JS), medium, tight -- 32px big title, .sm 20px on small cards */
.piece-t{font-size:32px;font-weight:500;letter-spacing:-1.05px;line-height:30px;margin:0}
.piece-t.sm{font-size:20px;letter-spacing:-.4px;line-height:20px}
.label{font-size:12px;line-height:normal;letter-spacing:normal;text-transform:uppercase;
  font-weight:400;color:var(--ink-dim)}
.meta{font-size:14px;letter-spacing:.22px;color:var(--ink-dim);line-height:1.3}
.keep-type .h-mega{font-size:clamp(44px,15vw,64px);line-height:.86;letter-spacing:-.045em}
.keep-type .h-big{font-size:clamp(30px,9vw,38px);line-height:.92;letter-spacing:-.035em}
.keep-type .label{font-size:10px;letter-spacing:.16em;font-weight:600}
.keep-type .meta{font-size:12px;letter-spacing:.02em;line-height:1.45}
.keep-type .bigact{font-size:14px;letter-spacing:.13em;border-radius:30px;padding:0;box-shadow:none}
/* sub-page header title (Ready to post / Edit headers) */
.page-top .label{font-size:20px;font-weight:700;letter-spacing:-.55px;color:#f6f4ec}
.chat-head .label{font-size:12px;font-weight:400;letter-spacing:normal;color:var(--ink-dim)}
.chat-head .h-mid{font-size:20px;letter-spacing:-.55px;line-height:normal}
.body{font-size:15px;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}

/* ---------- screen scaffold ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.scroll{flex:1;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(132px + var(--safe-b))}
.scroll::-webkit-scrollbar{width:0}
.pad{padding-left:20px;padding-right:20px}

/* ITEMS / INSIGHTS: floats over the page like the bottom tab bar, with a
   progressive blur the other way up (5px at the top, none at the bottom
   edge) under a dark tint, so the words stay readable over scrolled content.
   The pages start below it. */
.sb-safe{flex:none;height:var(--safe-t)}
.topbar{padding:calc(var(--safe-t) + 4px) 16px 36px;display:flex;align-items:flex-end;
  gap:18px;background:rgba(0,0,0,.01);position:absolute;top:0;left:0;right:0;z-index:40}
.screen .scroll{padding-top:calc(var(--safe-t) + 56px)}
.navword{font-size:32px;line-height:1;letter-spacing:-1.05px;font-weight:700;
  text-transform:uppercase;color:var(--ink-faint);transition:color .25s var(--ease)}
.navword.on{color:#f6f4ec}
.topbar .spacer{flex:1}
.topbar{flex-wrap:wrap;row-gap:12px}
.topbar .filters{flex-basis:calc(100% + 32px);margin:0 -16px;padding-bottom:0}
.screen .scroll.feed{padding-top:calc(var(--safe-t) + 56px + 36px)}
/* the fade below the bar lets taps through to what's under it */
.topbar,.logdock{pointer-events:none}
.topbar>*,.logdock>*{pointer-events:auto}
.topbar>.pblur,.logdock>.pblur{pointer-events:none}
.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:#0e0e0e;border:1px solid #292929;color:#f6f4ec;flex:none}
.iconbtn svg{width:16px;height:16px}
.iconbtn:active{transform:scale(.92)}
.circlebtn{width:40px;height:40px;display:grid;place-items:center;flex:none}
.circlebtn svg{width:24px;height:24px}
.circlebtn:active{transform:scale(.92)}

/* Progressive blur under the bottom bars: one blurred layer behind the
   buttons, masked from solid at the bottom edge to clear at the top, so
   the blur fades from 5px at the bottom to none at the top of the bar. */
/* Progressive blur without a visible edge (ui.js pblur()): five stacked
   layers blurred 5 / 3.5 / 2 / 1 / 0.5px, each masked to its own band so
   the blur strength steps down gradually instead of a 5px copy fading out.
   .down: strongest at the top (top bars), easing out over the bottom 40px.
   .up: strongest at the bottom (bottom bars), easing out towards the top. */
.pblur{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pblur i{position:absolute;inset:0}
.pblur i:nth-child(1){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.pblur i:nth-child(2){-webkit-backdrop-filter:blur(3.5px);backdrop-filter:blur(3.5px)}
.pblur i:nth-child(3){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.pblur i:nth-child(4){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}
.pblur i:nth-child(5){-webkit-backdrop-filter:blur(.5px);backdrop-filter:blur(.5px)}
.pblur.down i:nth-child(1){-webkit-mask-image:linear-gradient(to bottom,var(--bg) 0,var(--bg) calc(100% - 40px),transparent calc(100% - 30px));mask-image:linear-gradient(to bottom,var(--bg) 0,var(--bg) calc(100% - 40px),transparent calc(100% - 30px))}
.pblur.down i:nth-child(2){-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - 40px),var(--bg) calc(100% - 34px),var(--bg) calc(100% - 28px),transparent calc(100% - 22px));mask-image:linear-gradient(to bottom,transparent calc(100% - 40px),var(--bg) calc(100% - 34px),var(--bg) calc(100% - 28px),transparent calc(100% - 22px))}
.pblur.down i:nth-child(3){-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - 32px),var(--bg) calc(100% - 26px),var(--bg) calc(100% - 20px),transparent calc(100% - 14px));mask-image:linear-gradient(to bottom,transparent calc(100% - 32px),var(--bg) calc(100% - 26px),var(--bg) calc(100% - 20px),transparent calc(100% - 14px))}
.pblur.down i:nth-child(4){-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - 24px),var(--bg) calc(100% - 18px),var(--bg) calc(100% - 12px),transparent calc(100% - 6px));mask-image:linear-gradient(to bottom,transparent calc(100% - 24px),var(--bg) calc(100% - 18px),var(--bg) calc(100% - 12px),transparent calc(100% - 6px))}
.pblur.down i:nth-child(5){-webkit-mask-image:linear-gradient(to bottom,transparent calc(100% - 16px),var(--bg) calc(100% - 10px),var(--bg) calc(100% - 4px),transparent 100%);mask-image:linear-gradient(to bottom,transparent calc(100% - 16px),var(--bg) calc(100% - 10px),var(--bg) calc(100% - 4px),transparent 100%)}
.pblur.up i:nth-child(1){-webkit-mask-image:linear-gradient(to top,var(--bg) 0,var(--bg) 20%,transparent 36%);mask-image:linear-gradient(to top,var(--bg) 0,var(--bg) 20%,transparent 36%)}
.pblur.up i:nth-child(2){-webkit-mask-image:linear-gradient(to top,transparent 18%,var(--bg) 30%,var(--bg) 40%,transparent 54%);mask-image:linear-gradient(to top,transparent 18%,var(--bg) 30%,var(--bg) 40%,transparent 54%)}
.pblur.up i:nth-child(3){-webkit-mask-image:linear-gradient(to top,transparent 38%,var(--bg) 50%,var(--bg) 58%,transparent 72%);mask-image:linear-gradient(to top,transparent 38%,var(--bg) 50%,var(--bg) 58%,transparent 72%)}
.pblur.up i:nth-child(4){-webkit-mask-image:linear-gradient(to top,transparent 56%,var(--bg) 68%,var(--bg) 76%,transparent 88%);mask-image:linear-gradient(to top,transparent 56%,var(--bg) 68%,var(--bg) 76%,transparent 88%)}
.pblur.up i:nth-child(5){-webkit-mask-image:linear-gradient(to top,transparent 74%,var(--bg) 84%,var(--bg) 92%,transparent 100%);mask-image:linear-gradient(to top,transparent 74%,var(--bg) 84%,var(--bg) 92%,transparent 100%)}

/* the app's iOS keyboard (js/keyboard.js mountKeyboard): slides up over the
   bottom of the phone when a text field is tapped; the screen and any open
   layer shrink to sit above it, like iOS */
/* iOS keyboard keys (js/keyboard.js, Figma 590:8740: 402 x 317). Its three
   system colours have no match among the app's tokens, so they're kept
   here, for the keyboard only. */
.kb{--kb-bg:#232323;--kb-key:#474747;--kb-blue:#0091ff;height:317px;display:flex;flex-direction:column;padding-top:12px;border-radius:27px 27px 0 0;background:var(--kb-bg)}
.kb-keys{display:flex;flex-direction:column;gap:11px;padding:12px 8.5px 0}
.kb-row{display:flex;gap:6px}
.kb-row.in{padding:0 20px}
.kb-row.third{gap:14.25px}
.kb-mid{flex:1;display:flex;gap:6px}
.kb-k{flex:1;min-width:0;height:45px;border-radius:8.5px;background:var(--kb-key);color:var(--ink);
  font-size:25px;line-height:30px;padding-bottom:3px;display:grid;place-items:center;touch-action:manipulation}
.kb-k.mod{flex:none;width:44.67px;font-size:18px}
.kb-k.del{width:45px}
.kb-k.switch{width:91.67px;font-size:18px;padding-bottom:0}
.kb-k.ret{flex:none;width:92px;background:var(--kb-blue)}
.kb-mid.wide .kb-k{font-size:25px}
.kb-k svg{width:24px;height:24px}
.kb-k.del svg{width:28px}
.kb-k.on{background:var(--ink);color:var(--kb-bg)}
.kb-k.down{filter:brightness(1.5)}
.kb-foot{height:70px;display:flex;justify-content:space-between;align-items:flex-start;padding:27px 39px 15px 36px}
.kb-icon{color:var(--ink);opacity:.73;display:grid;place-items:center}
.kb-icon:first-child svg{width:26.92px;height:26.92px}
.kb-icon:last-child svg{width:18.87px;height:28.21px}
.chx-kb.app-kb{position:absolute;left:0;right:0;bottom:0;z-index:95;height:317px;
  transform:translateY(100%);transition:transform .28s var(--ease)}
.chx-kb.app-kb.open{transform:none}
#device .screen,#device .layer{transition:bottom .28s var(--ease)}
#device.kb-open .screen,#device.kb-open .layer{bottom:317px}

/* ---------- log button (global) ---------- */
/* tab bars (Figma 562:8445): near-clear fill + the progressive blur above,
   floating over the content so it scrolls underneath */
.logdock{position:absolute;left:0;right:0;bottom:0;padding:12px 16px calc(16px + var(--safe-b));
  display:flex;align-items:center;justify-content:space-between;z-index:40;background:rgba(0,0,0,.01)}
.logbtn{height:58px;padding:1px 29px 0;justify-content:center;border-radius:34px;background:var(--paper);
  color:#000;font-size:16px;font-weight:700;letter-spacing:normal;text-transform:uppercase;
  display:flex;align-items:center;gap:8px;box-shadow:0 10px 17px rgba(255,255,255,.13);
  transition:transform .22s var(--ease)}
.logbtn:active{transform:scale(.94)}
.logbtn .dot{width:10px;height:10px;border-radius:50%;background:var(--orange)}
.logdock .side{width:58px;height:58px;border-radius:50%;border:1px solid var(--line-2);display:grid;
  place-items:center;background:#0B0B0B}
.logdock .side svg{width:24px;height:24px}

/* ---------- state chips ---------- */
.state{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.state.idea{color:var(--idea)} .state.making{color:var(--making)} .state.finished{color:var(--finished)}

/* ---------- items / home ---------- */
.hero-now{padding:6px 20px 0;position:relative}
.hero-now .kicker{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sec-t{font-size:24px;font-weight:700;letter-spacing:-.55px;text-transform:uppercase;color:#f6f4ec}
.mkcard{position:relative;margin-top:10px;border-radius:48px;padding:20px;
  display:flex;flex-direction:column;align-items:center;gap:8px;overflow:hidden;
  text-align:center}
.mkcard.making{background:linear-gradient(180deg,#f6f4ec 23.558%,#7192ff 100%)}
.mkcard.idea{background:linear-gradient(180deg,#f6f4ec 23.32%,#6ab8ef 100%);
  min-height:210px;justify-content:space-between}
.mkcard .head{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.mkcard .status{display:flex;align-items:center;gap:4px}
.mkcard .status .dot{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.mkcard .status svg{width:6.96px;height:6.96px;flex:none}
.mkcard .status span{font-size:12px;text-transform:uppercase}
.mkcard.making .status span{color:var(--orange)}
.mkcard.idea .status span{color:#040404}
.mkcard .t{font-size:32px;font-weight:500;letter-spacing:-1.05px;line-height:30px;
  color:#040404;margin:0}
.mkcard .sub{font-size:16px;line-height:16px;color:#040404;max-width:320px;margin:0}
.mkcard .img{width:240px;height:190px;overflow:hidden;flex:none}
.mkcard .img img{width:100%;height:100%;object-fit:contain}
.mkcard .acts{display:flex;gap:8px;justify-content:center;padding-top:4px}
.mkcard .acts button{height:40px;padding:1px 16px 0;border-radius:100px;background:#f6f4ec;
  border:1px solid var(--line-2);font-size:14px;font-weight:700;text-transform:uppercase;
  color:#040404}

.blk{margin-top:34px}
.blk-head{display:flex;align-items:center;justify-content:space-between;padding:0 20px 16px}
.blk-head.act{padding-bottom:8px}

/* Items feed (Figma 562:8203): filters, featured card, tile grid */
.feed{padding-bottom:110px}
.feat{padding:0 16px 16px}
.feat .mkcard{margin-top:0}
.feat .mkcard.idea{height:210px;min-height:210px;padding:20px}
.feat .mkcard.idea .sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  max-width:none;line-height:normal}

/* ready to post */
.rtp-row{display:flex;gap:8px;padding:0 20px;overflow-x:auto;scrollbar-width:none}
.rtp-row::-webkit-scrollbar{display:none}
.rtp-card{width:350px;flex:none;background:#f6f4ec;border-radius:40px;
  padding:12px 16px 12px 12px;display:flex;gap:8px;align-items:center;justify-content:center}
.rtp-card .thumb{width:122px;height:92px;flex:none;overflow:hidden}
.rtp-card .thumb img{width:100%;height:100%;object-fit:cover}
.rtp-card .head{display:flex;flex-direction:column;min-width:0}
.rtp-card .head .t{font-family:var(--font);font-size:32px;font-weight:500;
  line-height:30px;letter-spacing:-1.05px;color:#040404}

/* ready to post -- "see all" page */
.rtp-statusbar{display:flex;justify-content:space-between;align-items:center;
  padding:calc(var(--safe-t) + 6px) 20px 0;color:#fff;font-size:15px;font-weight:600}
.rtp-statusbar .icons{display:flex;align-items:center;gap:5px}
.rtp-statusbar .bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.rtp-statusbar .bars i{display:block;width:3px;background:#fff;border-radius:1px}
.rtp-statusbar .bars i:nth-child(1){height:4px}
.rtp-statusbar .bars i:nth-child(2){height:6px}
.rtp-statusbar .bars i:nth-child(3){height:8px}
.rtp-statusbar .bars i:nth-child(4){height:10px}
.rtp-statusbar .wifi{width:15px;height:11px;border:1.5px solid #fff;border-top:0;
  border-radius:0 0 8px 8px}
.rtp-statusbar .batt{width:24px;height:11px;border:1.3px solid #fff;border-radius:3px;
  display:flex;align-items:center;padding:1.5px}
.rtp-statusbar .batt i{display:block;flex:1;height:100%;background:#fff;border-radius:1px}

.rtp-page-head{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 0 20px}
.rtp-page-head .navrow{display:flex;justify-content:space-between;align-items:center;width:100%;height:52px;padding:0 16px}
.rtp-page-head .navbtn{width:40px;height:40px;border-radius:50%;background:#0e0e0e;
  border:1px solid #292929;color:#f6f4ec;display:grid;place-items:center;flex:none}
.rtp-page-head .navbtn-gap{width:40px;height:40px;flex:none}
/* shared sub-page header (ui.js pageHead) */
.page-head{flex:none;position:relative;z-index:6}
.rtp-page-head .navbtn svg{width:16px;height:16px}
.rtp-page-head .t{font-size:20px;font-weight:700;letter-spacing:-.55px;
  text-transform:uppercase;color:#f6f4ec;margin:0}
.rtp-page-head .sub{font-size:16px;color:#f6f4ec;margin:0}

/* actual Figma card exports (assets/posts) -- not rebuilt from primitives.
   Infinite card loop matching infinite-scrolling-cards-slider.webflow.io:
   cards are stacked on the deck's centre and placed purely by JS transform
   (x = slot*80% of card width, scale == opacity == (1 - |slot|*0.2)^2),
   driven by horizontal swipe / trackpad scroll -- see openReadyToPost() in
   items.js. Every card gets the same frame (the re-exported posts are all
   804x~1325); centre card is 75% of the screen width like the reference,
   so neighbours tuck behind it -- smaller only if the screen is too short. */
.rtp-deck{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  container-type:size;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.rtp-deck > *{position:absolute;left:50%;top:50%;
  width:min(75cqw, (100cqh - 24px) * 1242 / 2169);height:auto;aspect-ratio:1242/2169;
  object-fit:cover;display:block;transform-origin:center;will-change:transform,opacity;
  pointer-events:none;-webkit-user-drag:none}
/* a post in the preset Instagram frame (post.js postFrame). The preset is
   1242 x 2169 with a transparent image area from y 186 to 1734; the
   composed image fills it, its type scaled to the frame's width (the
   editor's 370px layout in cqw). The caption patch sits over the preset's
   sample caption, after "dianaclay" (x 250, y 2026 -> 2080). */
.post-frame{position:relative;aspect-ratio:1242/2169;container-type:inline-size;overflow:hidden;border-radius:6.8cqw}
.pf-preset{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.pf-art{position:absolute;left:0;right:0;top:calc(186 / 2169 * 100%);height:calc(1548 / 2169 * 100%)}
.pf-art .pe-img{height:100%}
.pf-art .pe-slide img{width:71cqw;height:71cqw}
.pf-art .pe-lab{font-size:4.32cqw;padding:.5cqw 0}
.pf-art .pe-lab.tl,.pf-art .pe-lab.tr{top:3.8cqw}
.pf-art .pe-lab.bl,.pf-art .pe-lab.br{bottom:4.3cqw}
.pf-art .pe-lab.tl,.pf-art .pe-lab.bl{left:3.8cqw}
.pf-art .pe-lab.tr,.pf-art .pe-lab.br{right:3.8cqw}
.pf-cap{position:absolute;left:calc(250 / 1242 * 100%);right:4cqw;top:calc(2024 / 2169 * 100%);height:calc(58 / 2169 * 100%);
  display:flex;align-items:center;padding-left:.6cqw;background:#fff;color:#0c1014;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--font);font-size:3.75cqw;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rtp-deck > .post-frame{position:absolute;height:auto}

.rtp-bottombar{display:flex;gap:8px;justify-content:center;
  padding:8px 12px calc(16px + var(--safe-b))}
.rtp-bottombar button{height:58px;padding:1px 24px 0;border-radius:100px;background:#0e0e0e;
  border:1px solid #292929;font-size:16px;font-weight:700;text-transform:uppercase;
  color:#f6f4ec}
.rtp-bottombar button.post{background:#FF451A;border-color:#FF451A;color:#040404;box-shadow:0 10px 17px rgba(255,255,255,.13)}

/* ---------- post Edit / Preview (screens/post.js, Figma 493:16808 / 493:16989) ---------- */
.pe-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  height:52px;padding:0 16px;flex:none}
.pe-navbtn{width:40px;height:40px;border-radius:29px;background:#0e0e0e;border:1px solid #292929;
  display:grid;place-items:center;flex:none;color:#f6f4ec}
.pe-navbtn svg{width:16px;height:16px}
.pe-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:4px;height:44px;color:#f6f4ec}
.pe-status{display:flex;align-items:center;gap:4px;font-size:12px;line-height:12px;text-transform:uppercase}
.pe-status .ic{width:8px;height:8px;display:grid;place-items:center}
.pe-status .ic svg{width:7px;height:7px}
.pe-name{font-size:24px;font-weight:500;letter-spacing:-.55px;line-height:24px;text-transform:capitalize;white-space:nowrap;
  padding:4px 0;margin:-4px 0;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pe-tabs{display:flex;margin:16px 16px 0;padding:2px;border-radius:100px;background:#181818;flex:none}
.pe-tab{flex:1;height:40px;padding-top:1px;border-radius:100px;font-size:14px;font-weight:700;
  letter-spacing:-.14px;text-transform:uppercase;color:#54524e}
.pe-tab.on{background:#f4f2ec;color:#040404}
.pe-slot{flex:1;min-height:0;display:flex;flex-direction:column}
.pe-tiles{display:flex;gap:8px;padding:5px 0 32px;flex-wrap:wrap}
.pe-tile{width:100px;height:100px;border-radius:29px;background:#0e0e0e;border:1px solid #292929;
  overflow:hidden;display:grid;place-items:center;color:#f6f4ec;flex:none;position:relative}
.pe-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pe-tile.add svg{width:24px;height:24px}
.pe-tile.on{border-color:#ff4b18}
/* PREVIEW tab: the looping deck of backdrop variants fills the body */
.pe-body.pv{display:flex;flex-direction:column;overflow:hidden;padding-left:0;padding-right:0}
.pe-body{flex:1;min-height:0;overflow-y:auto;padding:12px 16px calc(90px + var(--safe-b));scrollbar-width:none}
.pe-body::-webkit-scrollbar{display:none}
.pe-imgwrap{padding-bottom:16px}
.pe-img{position:relative;height:441px;overflow:hidden}
.pe-slides{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.pe-slides::-webkit-scrollbar{display:none}
.pe-slide{flex:0 0 100%;display:grid;place-items:center;scroll-snap-align:center}
.pe-slide img{width:263px;height:263px;object-fit:contain}
.pe-lab{position:absolute;padding:2px 0;font-size:16px;line-height:normal;color:#8c8c8c;
  pointer-events:none;white-space:nowrap}
.pe-lab.tl,.pe-lab.tr{top:14px;text-transform:uppercase}
.pe-lab.bl,.pe-lab.br{bottom:16px}
.pe-lab.tl,.pe-lab.bl{left:14px}
.pe-lab.tr,.pe-lab.br{right:14px}
.pe-empty{width:100%;height:441px;border-radius:29px;background:#0e0e0e;border:1px solid #292929;
  display:grid;place-items:center;font-size:14px;line-height:15.95px;letter-spacing:.22px;color:#54524e}
.pe-sh{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px}
.pe-sh-t{font-size:24px;font-weight:700;letter-spacing:-.55px;text-transform:uppercase;color:#f6f4ec}
.pe-sh-sub{margin-top:8px;font-size:14px;line-height:15.95px;letter-spacing:.22px;color:#54524e}
.pe-sh-sub.big{font-size:16px}
.pe-sh-act{margin-top:6px;font-size:16px;font-weight:500;text-transform:uppercase;color:#f6f4ec}
.pe-swatches{display:flex;justify-content:space-between;padding-bottom:32px}
.pe-sw{width:40px;height:40px;border-radius:12px;border:1px solid #292929;flex:none}
.pe-sw.on{border:2px solid #FF451A}
.pe-caption{display:block;width:100%;padding:0;background:none;border:0;outline:none;
  font-size:24px;line-height:26px;font-weight:500;color:#f4f2ec;caret-color:#ff451a;resize:none;
  margin-bottom:32px;overflow:hidden}
.pe-caption::placeholder{color:#54524e}
.pe-piece{padding-bottom:32px}
.pe-piece > div{padding-top:8px}
.pe-bottom{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;padding:16px 16px calc(16px + var(--safe-b));background:rgba(0,0,0,.01)}
.pe-regen{width:58px;height:58px;border-radius:29px;background:#0e0e0e;border:1px solid #292929;
  display:grid;place-items:center;color:#f6f4ec;flex:none}
.pe-regen svg{width:24px;height:24px}
.pe-btn{height:58px;padding:1px 24px 0;border-radius:100px;font-size:16px;font-weight:700;
  text-transform:uppercase;color:#040404}
.pe-btn.paper{background:#f6f4ec;box-shadow:0 10px 17px rgba(255,255,255,.13)}
.pe-btn.accent{background:#FF451A;box-shadow:0 10px 17px rgba(255,255,255,.13)}
.pe-btn.dark{width:87px;padding:1px 0 0;background:#0e0e0e;border:1px solid #292929;color:#f6f4ec}
.ph-modal{padding:28px 4px 20px;font-size:16px;line-height:18px;text-align:center;color:#f6f4ec}

/* piece card: "Ready to post" row (Figma 493:16931) */
.rtp-sect{display:flex;justify-content:space-between;align-items:flex-start}
.rtp-sect-sub{margin-top:8px;font-size:16px;line-height:15.95px;letter-spacing:.22px;color:#54524e}

/* filters */
.filters{display:flex;gap:20px;padding:0 16px 16px;overflow-x:auto;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{font-size:16px;font-weight:700;letter-spacing:-.14px;color:var(--ink-faint);
  text-transform:uppercase;white-space:nowrap}
.filters button.on{color:var(--ink)}
.filters .count{font-size:16px;color:var(--ink-faint);margin-left:4px}
.filters button.on .count{color:var(--orange)}

/* archive -- card grid per Figma node 468:63620 */
.archive{display:flex;flex-direction:column;gap:8px;padding:0 16px}
.arch-row{display:flex;gap:8px}
.arch-row.right{justify-content:flex-end}
.arch{position:relative;overflow:hidden;border-radius:32px;height:210px;padding:16px;
  display:flex;flex-direction:column;text-align:left;transition:transform .3s var(--ease)}
.arch:active{transform:scale(.965)}
.arch .st{display:flex;align-items:center;gap:4px;font-size:12px;line-height:1;
  text-transform:uppercase}
.arch .st .sq{width:5px;height:5px;background:currentColor;flex:none}
.arch .st .ic{width:8px;height:8px;flex:none;display:flex;align-items:center;justify-content:center}
.arch .st .ic svg{width:100%;height:100%;display:block}
.arch .t{font-family:var(--font);font-size:20px;font-weight:500;line-height:20px;
  letter-spacing:-.4px}

/* finished/making with a photo -- floating cutout, no card background */
.arch.fin{width:calc((100% - 8px)/2);flex:none;justify-content:flex-end;gap:8px;color:#f6f4ec}
.arch.fin .obj{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.arch.fin .obj .noimg{width:100%;height:100%;border-radius:29px;background:#0B0B0B;
  border:1px solid var(--line-2);display:grid;place-items:center}
.arch.fin .obj .noimg .noimg-t{color:var(--ink-faint);font-family:var(--font);
  font-size:16px;font-weight:400;line-height:15.95px;letter-spacing:.22px}
.arch.fin .obj img{width:100%;height:100%;object-fit:contain}
.arch.fin .info{display:flex;flex-direction:column;gap:8px}
/* making: the cutout on the card's gradient, dark text */
.arch.fin.mk{color:#040404}
.arch.fin.mk .st{color:#040404}

/* idea with a photo -- photo bleeds full-card, dim layer, title overlaid.
   .bgimg/.dim are deliberately not named .ph/.scrim -- both those class
   names already exist globally (.ph is the 132px photo-strip thumbnail,
   .scrim is the modal backdrop, which also carries backdrop-filter:blur)
   and silently won over these rules: an absolutely-positioned element
   with inset:0 AND an inherited explicit width is over-constrained, so
   the browser honored the old width instead of stretching full-bleed --
   that's what produced the 132px-wide strip with the card's solid color
   showing through the rest. */
.arch.bleed{width:calc((100% - 8px)/2);flex:none;justify-content:space-between;color:#f6f4ec}
.arch.bleed .bgimg{position:absolute;inset:0}
.arch.bleed .bgimg img{width:100%;height:100%;object-fit:cover}
/* Figma's literal gradient (transparent 0.44% -> black 123.29%) leaves the
   status row at ~6% darkening -- fine for its own pale example photo, not
   enough contrast for our busier stock photos. Dual-sided instead: dark at
   both top (status row) and bottom (title), clear through the middle. */
.arch.bleed .dim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,
    rgba(0,0,0,0) 55%,rgba(0,0,0,.85) 100%)}
.arch.bleed .st,.arch.bleed .t{position:relative}

/* idea, no photo -- full-width gradient spotlight (small: same card, half-
   width, paired with a photo card -- Figma node 477:64406) */
.arch.spot{width:100%;justify-content:space-between;color:#040404}
.arch.spot.small{width:calc((100% - 8px)/2);flex:none}
.arch.spot .t{margin-bottom:8px}
.arch.spot .d{font-size:16px;line-height:16px}
.arch.spot .clamp2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.arch.spot .clamp3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

/* ---------- sheets / layers ---------- */
#layers{position:absolute;inset:0;pointer-events:none;z-index:60}
.layer{position:absolute;inset:0;pointer-events:auto;isolation:isolate}  /* its contents' z-index stays inside it: a newer layer always covers an older one */
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease)}
.scrim.in{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:94%;background:var(--sheet);
  border-radius:30px 30px 0 0;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(102%);transition:transform .42s var(--ease);
  box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.sheet.in{transform:translateY(0)}
.sheet .grip{width:38px;height:4px;border-radius:3px;background:#333;margin:10px auto 0;flex:none}
.sheet .sbody{overflow-y:auto;padding:18px 20px calc(26px + var(--safe-b))}
.sheet.full{top:0;border-radius:0;max-height:100%}

.page{position:absolute;inset:0;background:var(--bg);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .38s var(--ease)}
.page.in{transform:translateX(0)}
.page-top{display:flex;align-items:center;gap:12px;padding:calc(var(--safe-t) + 10px) 16px 8px;
  flex:none;position:relative;z-index:6}

/* ---------- card detail ---------- */
/* Full-bleed hero, title, and state picker (Figma nodes 478:65918 "no
   photo" / 478:66013 + 478:66106 "with photo") -- fills the device width
   edge-to-edge, starts at y=0, and runs behind the status bar and back/
   chat buttons (both now live inside it -- see .ch-statusbar/.ch-btnrow).
   Only the bottom corners are rounded, via squircle()'s per-corner radius
   in heroCard(); border-radius here is the plain-rect fallback. Two
   treatments, toggled by the .photo modifier (added only for a real,
   non-cutout hero photo -- see isCutout() in card.js for why):
   A (default) -- gradient bg, dark #040404 text/icons, compact (tabs sit
   directly under the title, no forced min-height).
   B (.photo) -- the photo fills the hero behind a dark overlay
   (.ch-dim), text/icons flip white, and min-height + space-between pin
   the tabs to the bottom edge, mirroring the old .mkcard.idea. 480px
   min-height is this project's own choice for "fills the hero" -- the
   task didn't give an exact number. */
.cardhero2{position:relative;display:flex;width:100%;padding-bottom:20px;
  flex-direction:column;align-items:center;border-radius:0 0 48px 48px;
  overflow:hidden;text-align:center;color:#040404}
/* 480, not 446 -- 446 was measured against a one-line title (Blue Line
   Mug); a two-line title (Heart Dishes, Set Of Four) pushes natural
   content to ~465px, and overflow:hidden was silently eating almost
   all of the intended 20px bottom padding instead of clipping visible
   content. 480 covers a two-line title with the padding intact; a
   shorter card still sizes to its own (smaller) natural height, since
   this is a max, not a fixed height. */
.cardhero2:not(.photo){max-height:480px}
/* No justify-content:space-between here anymore -- status bar/buttons/
   title now stack compactly right under each other, same position as
   every gradient (non-photo) card, instead of the title floating in the
   middle and the tabs pinned to the very bottom. min-height keeps the
   photo generously tall; .ch-photo covers the full card regardless of
   where the flex content actually sits, so the picture still fills the
   space below the tabs down to the bottom edge. */
.cardhero2.photo{color:#F4F2EC;min-height:480px}

.cardhero2 .ch-photo{position:absolute;inset:0}
.cardhero2 .ch-photo img{width:100%;height:100%;object-fit:cover}
/* Mirrored from Figma's literal value (was rgba(0,0,0,0) 0.44%, #000
   123.29% -- transparent at top, black past the bottom edge) per your
   instruction: black starts at the top of the card (for status-bar
   legibility) and fades out by the bottom, where the tabs are. Same
   two stop positions reflected around the gradient line. */
.cardhero2 .ch-dim{position:absolute;inset:0;
  background:linear-gradient(179deg,#000 -23.29%,rgba(0,0,0,0) 99.56%)}

/* Reuses items.js's statusBar() glyph shapes, but on currentColor instead
   of hardcoded #fff (that version stays #fff -- it's the "ready to post"
   black bar's own thing) so it can flip with the hero's own color. */
.cardhero2 .ch-statusbar{position:relative;width:100%;display:flex;
  justify-content:space-between;align-items:center;
  padding:calc(var(--safe-t) + 6px) 20px 0;font-size:15px;font-weight:600;color:inherit}
.cardhero2 .ch-statusbar .icons{display:flex;align-items:center;gap:5px}
.cardhero2 .ch-statusbar .bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.cardhero2 .ch-statusbar .bars i{display:block;width:3px;background:currentColor;border-radius:1px}
.cardhero2 .ch-statusbar .bars i:nth-child(1){height:4px}
.cardhero2 .ch-statusbar .bars i:nth-child(2){height:6px}
.cardhero2 .ch-statusbar .bars i:nth-child(3){height:8px}
.cardhero2 .ch-statusbar .bars i:nth-child(4){height:10px}
.cardhero2 .ch-statusbar .wifi{width:15px;height:11px;display:block}
.cardhero2 .ch-statusbar .batt{width:24px;height:11px;border:1.3px solid currentColor;
  border-radius:3px;display:flex;align-items:center;padding:1.5px}
.cardhero2 .ch-statusbar .batt i{display:block;flex:1;height:100%;background:currentColor;
  border-radius:1px}

.cardhero2 .ch-btnrow{position:relative;width:100%;display:flex;
  justify-content:space-between;padding:8px 20px 0}
/* Always solid paper/dark, in both treatments -- per the photo mock, not
   affected by the hero's own dark/white color flip. Border #292929 is
   close but not exact to --line-2 (#2B2B2B) -- kept as the existing
   token per the established near-duplicate policy rather than adding a
   one-off literal. Background is the paper-card literal already used
   elsewhere on this page (#F6F4EC), not the --paper token (#F4F2EC). */
.ch-circle{display:flex;width:40px;height:40px;flex-direction:column;
  justify-content:center;align-items:center;flex-shrink:0;border-radius:29px;
  border:1px solid var(--line-2);background:#F6F4EC;color:#040404}
.ch-circle svg{width:20px;height:20px}
.ch-circle.more svg{width:16px;height:16px}
.bigact.ghost.danger{color:#FF451A}

/* status row and title: same shape/type params as .mkcard .status/.t (Make Next
   card on the Items screen) -- reused verbatim per your instruction. Grouped in
   .ch-head with a fixed 8px gap so the hero's own justify-content:space-between
   (treatment B) distributes its extra space around this group, not inside it
   -- otherwise status and title stretch apart on a card with little content. */
.cardhero2 .ch-head{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:8px;margin-top:16px;padding:0 20px}
.cardhero2 .ch-status{display:flex;align-items:center;gap:4px;font-size:12px;
  text-transform:uppercase;color:inherit}
.cardhero2 .ch-status .ic svg{width:6.96px;height:6.96px;flex:none}
.cardhero2 .ch-status .sq{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* making's orange accent stays treatment-A-only (task #4) -- on a photo
   it'd fight the white-for-legibility rule, so B keeps everything white. */
.cardhero2.making:not(.photo) .ch-status{color:var(--orange)}
.cardhero2.making:not(.photo) .ch-status .sq{background:var(--orange)}
.cardhero2 .ch-t{font-family:var(--font);font-size:32px;font-weight:500;line-height:30px;
  letter-spacing:-1.05px;color:inherit;outline:none;max-width:100%}
.cardhero2 .ch-t[contenteditable]:focus{background:rgba(0,0,0,.06);border-radius:8px}
.cardhero2.photo .ch-t[contenteditable]:focus{background:rgba(255,255,255,.14)}
.cardhero2 .ch-img{position:relative;max-width:100%;height:190px;margin-top:16px}
.cardhero2 .ch-img img{width:100%;height:100%;object-fit:contain;display:block;margin:0 auto}

.cardhero2 .statepick{position:relative;margin:16px 16px 0}
/* Treatment A only -- B's tabs are pinned to the bottom via
   justify-content:space-between instead, not a fixed margin. */
/* 84px only when the tabs sit directly under the title with nothing else
   between them (truly no image at all) -- a card with a cutout .ch-img
   uses the normal 16px instead, since 84px there was pushing the tabs
   past this container's 446px max-height. */
.cardhero2:not(.photo) .ch-head + .statepick{margin-top:84px}
.cardhero2:not(.photo) .ch-img + .statepick{margin-top:16px}
/* Pins the tabs to the card's bottom edge (min-height:480px on .photo
   gives it room to push into) without touching the spacing above --
   status bar/buttons/title keep their normal compact top position.
   Same solid #0E0E0E track as every other card; no translucent variant. */
.cardhero2.photo .statepick{margin-top:auto}

/* Tabs (state picker) -- exact spec values. #0E0E0E is a named system
   surface color (not a near-duplicate of --sheet, kept literal per the
   background-literal precedent); the selected fill and default label
   color are exact matches to --paper and --ink-faint, so those reuse
   the tokens instead of restating the same hex. */
.statepick{display:flex;padding:2px;justify-content:center;align-items:center;
  align-self:stretch;border-radius:100px;background:#0E0E0E}
.statepick button{display:flex;padding:1px 24px 0;flex-direction:column;
  justify-content:center;align-items:center;flex:1 0 0;align-self:stretch;
  border-radius:100px;font-family:var(--font);font-size:14px;font-weight:700;
  line-height:normal;letter-spacing:-.14px;text-transform:uppercase;text-align:center;
  color:var(--ink-faint)}
.statepick button.on{height:40px;background:var(--paper);color:#040404}

/* new section shell (paper-card content, replacing the old dark
   divider-line .sect/.sh, now unused anywhere) */
.sect2{margin-top:28px;padding:0 20px}
.sh2{display:flex;align-items:baseline;justify-content:space-between}
.sh2 .h-mid{letter-spacing:-.02em}
.plan-toggle{font-family:var(--font);font-size:16px;font-weight:500;line-height:normal;
  text-align:center;text-transform:uppercase;color:#F6F4EC}
/* Scoped standalone -- see the comment where this is used in card.js
   for why it isn't just .meta. Exact match to --ink-faint, reused as
   the token instead of restating the hex. */
.plan-sub{font-family:var(--font);font-size:16px;font-weight:400;line-height:15.95px;
  letter-spacing:.22px;color:var(--ink-faint);margin:8px 0 16px}
/* REGENERATE PLAN -- 16px below the plan input, 32px below itself.
   #292929 border kept as --line-2 per the near-duplicate policy (same as
   .ch-circle); #0E0E0E is the established surface literal. Text style
   matches the LOG button (.logbtn): 16px/700 uppercase, inherited font
   stack, normal tracking -- only the colour differs (light on the dark
   surface here vs dark on paper there). */
.regen-plan{display:flex;height:58px;padding:1px 24px 0;justify-content:center;align-items:center;
  margin:16px 0 32px;border-radius:29px;border:1px solid var(--line-2);background:#0E0E0E;
  font-size:16px;font-weight:700;letter-spacing:normal;text-transform:uppercase;color:#F6F4EC}

/* .desc2 and .plan-text (the Plan section's text) share one rule so they
   can't drift apart. min-height:180px is the default -- both grow with
   their content past that. */
.desc2, .plan-text{margin-top:16px;background:#181818;color:#F6F4EC;border-radius:24px;
  padding:16px;font-family:var(--font);font-size:16px;font-weight:400;line-height:18px;
  min-height:180px;outline:none;white-space:pre-wrap}
.desc2:empty:before, .plan-text:empty:before{content:attr(data-ph);color:#54524E}
/* HIDE fully removes the input (and, for Plan, its Regenerate button),
   toggled via the .hidden attribute in card.js. */
.desc2[hidden], .plan-text[hidden], .regen-plan[hidden], .bubbles[hidden]{display:none}

.att-row{display:flex;gap:8px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.att-row::-webkit-scrollbar{display:none}
/* .att-thumb, not the bare .att capture.js already owns (js/screens/capture.js's
   own attachment-preview row, 64px/14px/#121212 -- a real collision this had
   been silently losing to, since that rule comes later in this file and CSS
   specificity ties by source order). Exact spec values. */
.att-thumb{display:flex;width:100px;height:100px;flex-direction:column;
  justify-content:center;align-items:center;aspect-ratio:1/1;border-radius:29px;
  border:1px solid var(--line-2);background:#0E0E0E;overflow:hidden;flex:none;position:relative}
.att-thumb img{width:100%;height:100%;object-fit:cover}
.att-thumb.add svg{width:24px;height:24px;color:var(--ink)}
.att-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px}
.att-cell{width:auto;height:auto;aspect-ratio:1;flex:none;border-radius:29px;overflow:hidden;
  position:relative;background:#0B0B0B;border:1px solid var(--line-2)}
.att-cell img{width:100%;height:100%;object-fit:cover}
.att-cell.add{display:grid;place-items:center}
.att-cell.add svg{width:24px;height:24px;color:var(--ink)}
/* photo-kind tag: plain status-style text (like "MAKING, 23 DAYS AGO"), a
   soft shadow only so it reads on any photo */
.att-cell .k{position:absolute;top:12px;left:14px;font-size:12px;letter-spacing:normal;
  font-weight:400;text-transform:uppercase;color:#f6f4ec;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.att-cell .cp{position:absolute;left:0;right:0;bottom:0;font-size:12px;line-height:1.3;
  padding:6px 7px;color:var(--ink-dim);background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.75))}
.att-cell .x{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.66);display:grid;place-items:center;font-size:11px}

/* ---------- piece card (Figma 562:8202 idea / 562:8712 making / 562:9354 finished) ---------- */
.cx{padding-bottom:32px}
.cx-in{position:relative;display:flex;flex-direction:column;align-items:center;overflow:hidden;
  padding-bottom:16px;border-radius:0 0 48px 48px;color:#040404}
.cx-in.compact{padding-bottom:42px}
.cx-in.dark{background:#040404;color:#f6f4ec}
.cx-in.photo{color:#f6f4ec}
.cx-photo{position:absolute;inset:0}
.cx-photo img{width:100%;height:100%;object-fit:cover}
/* darkest at the top (behind the status and title), clearing towards the
   bottom -- the same direction as the idea cards' colour gradients */
.cx-dim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.95) -23%,rgba(0,0,0,0) 100%)}
.cx .ch-statusbar{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:calc(var(--safe-t) + 6px) 20px 0;font-size:15px;font-weight:600;color:inherit;height:calc(var(--safe-t) + 50px)}
.cx .ch-statusbar .icons{display:flex;align-items:center;gap:5px}
.cx .ch-statusbar .bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.cx .ch-statusbar .bars i{display:block;width:3px;background:currentColor;border-radius:1px}
.cx .ch-statusbar .bars i:nth-child(1){height:4px}
.cx .ch-statusbar .bars i:nth-child(2){height:6px}
.cx .ch-statusbar .bars i:nth-child(3){height:8px}
.cx .ch-statusbar .bars i:nth-child(4){height:10px}
.cx .ch-statusbar .wifi{width:15px;height:11px;display:block}
.cx .ch-statusbar .batt{width:24px;height:11px;border:1.3px solid currentColor;border-radius:3px;padding:1px;display:flex}
.cx .ch-statusbar .batt i{display:block;flex:1;background:currentColor;border-radius:1px}
.cx-top{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:8px;height:52px;padding:0 16px}
.cx-btn{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#f6f4ec;border:1px solid #292929;color:#040404}
.cx-in.dark .cx-btn{background:#0e0e0e;color:#f6f4ec}
.cx-btn svg{width:16px;height:16px}
.cx-title{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:4px;height:44px}
.cx-status{display:flex;align-items:center;gap:4px;font-size:12px;text-transform:uppercase;line-height:12px}
.cx-status .ic{width:8px;height:8px;display:grid;place-items:center;padding-bottom:1px}
.cx-status .ic svg{width:7px;height:7px}
.cx-status.making{color:#ff451a}
.cx-status .dot{width:6px;height:6px;border-radius:50%;background:#ff451a}
.cx-t{font-size:24px;font-weight:500;letter-spacing:-.55px;line-height:24px;
  padding:4px 0;margin:-4px 0;  /* room for descenders; the line still counts as 24px */
  text-align:center;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;outline:none}
.cx-t:focus{white-space:normal}
.cx-hero{position:relative;width:100%;min-height:210px;padding:12px 20px 0;display:flex;
  align-items:center;justify-content:center}
.cx-hero img{width:218px;height:190px;object-fit:contain}

/* paper row under the header: STUDIO MODE switch / READY TO POST */
.cx-row{padding:0 16px 32px}
.cx-box{width:100%;display:flex;align-items:center;gap:4px;padding:16px;border-radius:24px;
  background:#f6f4ec;color:#040404;text-align:left}
.cx-box-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cx-box-t{font-size:16px;font-weight:700;text-transform:uppercase}
.cx-box-s{font-size:12px}
.cx-go{width:40px;height:40px;border-radius:50%;border:1px solid #292929;display:grid;place-items:center;flex:none}
.cx-go svg{width:16px;height:16px}
.sw{height:40px;border-radius:100px;padding:2px 16px 2px 2px;display:flex;align-items:center;gap:10px;
  background:#0e0e0e;flex:none}
.sw-k{width:36px;height:36px;border-radius:100px;background:#f6f4ec}
.sw-t{padding-top:2px;font-size:14px;font-weight:700;text-transform:uppercase;color:#54524e}
.sw.on{flex-direction:row-reverse;padding:2px 2px 2px 16px;background:#ff451a}
.sw.on .sw-t{color:#f6f4ec}

/* sections: PLAN / LOG / CHATS with SHOW-HIDE */
.sx{padding:0 16px 32px}
.sx.open{padding-bottom:16px}
.sx.open.log{padding-bottom:0}
.sx-h{display:flex;align-items:center;justify-content:space-between}
.sx.open .sx-h{padding-bottom:16px}
.sx-t{font-size:24px;font-weight:700;letter-spacing:-.55px;text-transform:uppercase;color:#f6f4ec}
.sx-tog{font-size:16px;font-weight:500;text-transform:uppercase;color:#f6f4ec}
.sx > [hidden]{display:none}
.sx .bubbles{margin-top:0}
.pl-box{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border-radius:24px;
  margin-bottom:16px}
.pl-text{width:100%;font-size:16px;line-height:18px;color:#040404;white-space:pre-wrap;outline:none}
.pl-text:empty:before{content:attr(data-ph);color:#54524e}
/* making: read-only plan, steps as a checklist (onboarding's .bx box,
   orange when ticked; the step greys and strikes through) */
.pl-list{white-space:normal}
.pl-line{white-space:pre-wrap}
.pl-step{position:relative;display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:10px 0;cursor:pointer}
.pl-step input{position:absolute;opacity:0;width:24px;height:24px;margin:0;pointer-events:none}
.pl-step .bx{width:24px;height:24px;border-radius:7px;border:1px solid #292929;flex:none;margin-top:-3px;
  display:grid;place-items:center;color:var(--bg);transition:background .2s var(--ease),border-color .2s var(--ease)}
.pl-step .bx svg{width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .18s var(--ease),transform .25s var(--ease)}
.pl-step .tx{white-space:pre-wrap;text-decoration:line-through;text-decoration-color:transparent;
  transition:color .25s var(--ease),text-decoration-color .25s var(--ease)}
.pl-step input:checked + .bx{background:var(--orange);border-color:var(--orange)}
.pl-step input:checked + .bx svg{opacity:1;transform:none}
.pl-step input:checked ~ .tx{color:var(--ink-faint);text-decoration-color:currentColor}
.pl-step input:focus-visible + .bx{outline:2px solid var(--bg);outline-offset:2px}
/* finished: locked, showing what was ticked while making */
.pl-step:has(input:disabled){cursor:default}
.pl-regen{height:40px;padding:1px 16px 0;border-radius:100px;background:#f6f4ec;border:1px solid #292929;
  font-size:14px;font-weight:700;text-transform:uppercase;color:#040404}

/* LOG: the Log screen's typing area, minimal height */
.lg{min-height:127px;padding-bottom:16px;cursor:text}
.lg-ph{font-size:64px;font-weight:700;line-height:55.04px;letter-spacing:-2.88px;text-transform:uppercase;
  color:#54524e;padding-bottom:16px}
.lg-ph[hidden]{display:none}
.lg-text{font-size:20px;line-height:20px;font-weight:500;color:#f4f2ec;caret-color:#ff451a;outline:none;
  min-height:20px;padding-bottom:16px}   /* Figma 562:8485 */
.lg-ph:not([hidden]) + .lg-text{height:0;min-height:0;padding:0;overflow:hidden}
/* photos but no words yet: the tiles sit right under LOG */
.lg-text:empty:not(:focus){min-height:0;padding:0}
/* logged notes: paragraphs in the log's own type, under the description */
.lg-notes{display:flex;flex-direction:column;gap:16px}
.lg-notes:not(:empty){padding-bottom:16px}   /* the gap to the photos */
.lg-note{outline:none;caret-color:#ff451a}
.lg-note{margin:0;font-size:20px;line-height:20px;font-weight:500;color:#f4f2ec}
.lg-att{display:flex;gap:12px;flex-wrap:wrap;padding-top:5px}
.lg-att[hidden]{display:none}
.lg-att .att{margin:0}

/* bottom bar: main action · + · mic · chat */
.cb-round{width:58px;height:58px;border-radius:50%;background:#0e0e0e;border:1px solid #292929;
  color:#f6f4ec;display:grid;place-items:center;flex:none;position:relative}
.cb-round svg{width:24px;height:24px}
.cb-round[aria-label="Voice"] svg{width:22px;height:22px}
.cb-media{display:flex;gap:8px;flex:none}
.cb-round.rec{background:#ff451a;border-color:#ff451a;color:#040404}
.cb-round.rec svg{width:20px;height:20px}
.cb-round.rec::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(255,69,26,.45);animation:ring 1.5s infinite}

/* piece card bottom bar, per state (Figma 493:19500 / 493:18702 / 493:19297);
   buttons reuse the post Edit screen's .pe-regen / .pe-btn */
.card-bar{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:16px 16px calc(16px + var(--safe-b));
  background:rgba(0,0,0,.01);container-type:inline-size}
/* room at the end of the page so the last content clears the floating bar */
.scroll.under-bar{padding-bottom:calc(90px + var(--safe-b))}
/* Figma's 24px side padding on the 402px frame; eases down on narrower
   phones so labels stay on one line instead of wrapping. */
.card-bar .pe-btn{white-space:nowrap;
  padding-left:max(10px, min(24px, (100cqw - 280px) / 4));
  padding-right:max(10px, min(24px, (100cqw - 280px) / 4))}
/* Live mode sheet */
.live-opt{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;
  font-size:16px;line-height:18px;color:var(--ink);text-align:left}
.live-opt .box{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--line-2);
  display:grid;place-items:center;flex:none;color:transparent}
.live-opt .box svg{width:16px;height:16px}
.live-opt.on .box{background:#FF451A;border-color:#FF451A;color:#040404}
.live-sep{height:1px;background:var(--line);margin:8px 0}
.pe-btn.live-go{width:100%;margin-top:18px;box-shadow:none}
.pe-btn.live-go:disabled{opacity:.4}

.desc{font-size:16px;line-height:18px;letter-spacing:normal;margin-top:12px;white-space:pre-wrap}
.desc[contenteditable]:focus{background:#121212;border-radius:10px;outline:none}

.assume{margin-top:14px;border-radius:20px;padding:15px 16px;
  background:linear-gradient(125deg,rgba(43,54,255,.22),rgba(0,226,255,.10) 55%,rgba(214,255,46,.10));
  border:1px solid rgba(255,255,255,.09)}
.assume .label{color:var(--cyan)}
.assume p{margin:7px 0 0;font-size:16px;line-height:18px;white-space:pre-wrap;
  border-radius:10px;padding:2px 4px;margin-left:-4px;outline:none;
  transition:background .2s var(--ease)}
.assume p[contenteditable]:focus{background:rgba(0,0,0,.42)}
.assume p[contenteditable]:active{background:rgba(0,0,0,.22)}

.params{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:16px}
/* pulled-out values: status-style caption over the value, no box */
.ptag{display:flex;flex-direction:column;gap:3px;min-width:0}
.ptag .k{font-size:12px;letter-spacing:normal;text-transform:uppercase;color:var(--ink-faint)}
.ptag .v{font-size:16px;font-weight:500;letter-spacing:normal}
.ptag.est .k::after{content:" · est";color:var(--cyan)}
.ptag.user .k::after{content:" · logged";color:var(--ink-dim)}
.ptag input{width:100%;min-width:70px}

.steps{counter-reset:s;margin-top:18px;padding:0;list-style:none}
.steps li{counter-increment:s;display:flex;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:16px;line-height:18px}
.steps li::before{content:counter(s,decimal-leading-zero);font-size:12px;letter-spacing:normal;
  color:var(--ink-faint);flex:none;padding-top:3px;font-weight:400}
.risks{margin-top:16px}
.risk{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:16px;
  line-height:18px;color:var(--ink)}
.risk b{color:var(--orange);font-weight:700;flex:none;font-size:12px;letter-spacing:normal;
  text-transform:uppercase;padding-top:2px}
/* .src: source tag (chat replies, Discover, search answers) -- plain 12px
   uppercase like a card status / chat bubble caption, no pill. Colour keeps
   its meaning: YOUR ARCHIVE cyan, CERAMIC REFERENCE grey. */
.src{font-size:12px;line-height:normal;letter-spacing:normal;text-transform:uppercase;color:var(--ink-dim)}
/* padding:0 -- the tag shares the .archive class name with the archive grid */
.src.archive{color:var(--cyan);padding:0}

/* chats (Figma nodes 487:3571 / 487:3575) -- paper bubbles, one 16px
   summary line + a "TYPE, DATE" meta line, whole bubble is the tap
   target. 8px gap header->list and list item->item, matching Figma. */
.bubbles{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.bub{display:flex;flex-direction:column;gap:12px;align-items:flex-start;text-align:left;
  background:#f6f4ec;border-radius:24px;padding:16px;transition:transform .15s var(--ease)}
.bub:active{transform:scale(.98)}
.bub .sum{width:100%;font-family:var(--font);font-size:16px;font-weight:400;
  line-height:18px;color:#040404;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* "TYPE, DATE" meta -- 12px/400 Helvetica Neue, centered, uppercase. */
.bub .w{font-family:var(--font);font-size:12px;font-weight:400;line-height:normal;
  text-transform:uppercase;text-align:center;color:#040404;white-space:nowrap}
.newchat{margin-top:10px;border:1px dashed var(--line-2);border-radius:18px;padding:14px;
  width:100%;text-align:left;font-size:12px;letter-spacing:normal;text-transform:uppercase;
  color:var(--ink-dim)}

/* large pill (Items LOG / card bar / Edit): accent default, .paper, .ghost = dark */
.bigact{margin:26px 20px 0;height:58px;border-radius:100px;padding:1px 24px 0;background:#FF451A;color:#040404;
  width:calc(100% - 40px);font-size:16px;font-weight:700;letter-spacing:normal;
  text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 10px 17px rgba(255,255,255,.13)}
.bigact.paper{background:#f6f4ec;color:#040404}
.bigact.ghost{background:#0e0e0e;border:1px solid #292929;color:#f6f4ec;box-shadow:none}
.bigact:active{transform:scale(.97)}

/* ---------- chat thread ---------- */
.thread{flex:1;overflow-y:auto;padding:12px 20px 20px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:84%;padding:12px 15px;border-radius:20px;font-size:16px;line-height:18px;
  white-space:pre-line}
.msg.me{align-self:flex-end;background:var(--paper);color:#000;border-bottom-right-radius:7px}
.msg.ai{align-self:flex-start;background:#121212;border:1px solid var(--line);
  border-bottom-left-radius:7px}
.msg.ai .src{margin-top:9px;display:table}
.composer{flex:none;display:flex;gap:9px;align-items:flex-end;padding:10px 16px calc(12px + var(--safe-b));
  border-top:1px solid var(--line);background:#060606}
.composer .ti{flex:1;background:#131313;border-radius:22px;padding:13px 16px;font-size:16px;
  max-height:110px;overflow-y:auto}
.composer .ti:empty::before{content:attr(data-ph);color:var(--ink-faint)}
.sendb{width:40px;height:40px;border-radius:50%;background:#f6f4ec;border:1px solid var(--line-2);
  color:#040404;flex:none;display:grid;place-items:center}
.sendb svg{width:20px;height:20px}
.typing{display:flex;gap:4px;padding:14px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);
  animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.16s}.typing i:nth-child(3){animation-delay:.32s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* ---------- log composer ---------- */
.capture{position:absolute;inset:0;background:#040404;display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .34s var(--ease)}
.capture.in{transform:translateY(0)}
/* Log screen, Figma 540:21406 */
.capture .ctop{height:52px;padding:0 16px;display:flex;justify-content:space-between;align-items:center}
.capture .cback,.capture .cmenu{border-radius:50%;background:#0e0e0e;border:1px solid #292929;color:#f6f4ec;
  display:grid;place-items:center;flex:none}
.capture .cback{width:44px;height:44px}
.capture .cmenu{width:40px;height:40px}
.capture .cback svg,.capture .cmenu svg{width:16px;height:16px}
.capture .cmid{flex:1;min-height:0;display:flex;flex-direction:column;padding:40px 16px 20px;cursor:text}
.capture .prompt{font-size:64px;font-weight:700;line-height:55.04px;letter-spacing:-2.88px;
  text-transform:uppercase;color:#54524e}
.capture .prompt[hidden]{display:none}
.capture .live{font-size:26px;line-height:29.64px;letter-spacing:-.78px;font-weight:500;color:#f4f2ec;
  min-height:30px;max-height:100%;overflow-y:auto;outline:none;caret-color:#ff451a}
/* title showing = nothing typed and not focused: no empty line under it */
.capture .prompt:not([hidden]) + .live{height:0;min-height:0}
.capture .cbot{flex:none}
.capture .crow{display:flex;align-items:center;gap:12px;padding:12px 16px calc(16px + var(--safe-b))}
.capture .cmedia{display:flex;gap:8px;flex:none}
.capture .cround{width:58px;height:58px;border-radius:50%;background:#0e0e0e;border:1px solid #292929;
  color:#f6f4ec;display:grid;place-items:center;flex:none}
.capture .cround svg{width:24px;height:24px}
/* mic: dark round like "+"; while listening a flat orange button with a
   stop square, and the pulsing ring */
.mic{width:58px;height:58px;border-radius:50%;background:#0e0e0e;border:1px solid #292929;color:#f6f4ec;
  display:grid;place-items:center;flex:none;position:relative;transition:transform .2s var(--ease)}
.mic.rec{background:#ff451a;border-color:#ff451a;color:#040404}
.mic.rec svg{width:20px;height:20px}
.mic.rec::after{content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(255,69,26,.45);animation:ring 1.5s infinite}
@keyframes ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.28);opacity:0}}
.mic svg{width:22px;height:22px}
.capture .send{flex:1;min-width:0;height:58px;border-radius:100px;padding:1px 30px 0;background:#f6f4ec;
  color:#040404;font-size:16px;font-weight:700;letter-spacing:normal;text-transform:uppercase}
.capture .send:not(.on){cursor:default}
.attachrow{display:flex;gap:12px;padding:6px 16px 0;overflow-x:auto;scrollbar-width:none}
.attachrow::-webkit-scrollbar{display:none}
.attachrow[hidden]{display:none}
/* 100px tile, image inset to r28 inside the r29 border; x badge on the corner */
.att{border-radius:29px;position:relative;width:100px;height:100px;flex:none;
  background:#0e0e0e;border:1px solid #292929;margin:5px 5px 0 0}
.att .ph{position:absolute;inset:0;border-radius:28px;overflow:hidden}
.att .ph img{width:100%;height:100%;object-fit:cover}
.att .x{position:absolute;top:-5px;right:-5px;width:24px;height:24px;border-radius:50%;
  background:#0e0e0e;border:1px solid #292929;color:#f6f4ec;display:grid;place-items:center}
.att .x svg{width:16px;height:16px}
.att .vid{position:absolute;left:10px;bottom:10px;width:22px;height:22px;border-radius:50%;
  background:rgba(4,4,4,.6);color:#f6f4ec;display:grid;place-items:center}
.att .vid svg{width:10px;height:10px}

/* ---------- add media: popover, gallery, camera (media.js) ---------- */
.mp-catch{position:absolute;inset:0;z-index:5}
.mp-pop{position:absolute;z-index:6;width:240px;padding:16px 24px;border-radius:24px;
  background:#181818;border:1px solid #292929;display:flex;flex-direction:column;
  opacity:0;transform:translateY(6px) scale(.97);transform-origin:bottom right;
  transition:opacity .18s,transform .18s var(--ease)}
.mp-pop.in{opacity:1;transform:none}
.mp-pop.below{transform:translateY(-6px) scale(.97);transform-origin:top right}
.mp-pop.below.in{transform:none}
.mp-pop button{height:40px;padding-top:3px;text-align:left;font-size:16px;font-weight:700;
  text-transform:uppercase;color:#f6f4ec}
.mp-panel{position:absolute;z-index:6;left:8px;right:8px;bottom:calc(8px + var(--safe-b));
  height:min(480px,calc(100% - 180px));border-radius:44px;background:#181818;overflow:hidden;
  box-shadow:0 -20px 60px rgba(0,0,0,.6);transform:translateY(calc(100% + 16px));
  transition:transform .32s var(--ease)}
.mp-panel.in{transform:none}
/* photos run under the floating buttons to the panel's edge (Figma) */
.mp-scroll{position:absolute;inset:0;overflow-y:auto;scrollbar-width:none}
.mp-scroll::-webkit-scrollbar{display:none}
.mp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.mp-tile{position:relative;aspect-ratio:1;background:#111;border-radius:2px;overflow:hidden}
.mp-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mp-badge{position:absolute;right:4px;bottom:4px;width:20px;height:20px;border-radius:50%;
  background:#ff451a;border:1px solid #f6f4ec;color:#f6f4ec;font-size:11px;font-weight:700;
  display:none;place-items:center;line-height:1}
.mp-tile.on .mp-badge{display:grid}
.mp-dur{position:absolute;left:6px;bottom:6px;display:flex;align-items:center;gap:3px;
  font-size:11px;font-weight:700;color:#f6f4ec;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mp-dur i{display:grid;width:10px;height:10px}
.mp-bar{position:absolute;left:0;right:0;bottom:0;padding:0 16px 16px;display:flex;
  align-items:center;justify-content:space-between}
.mp-bar.end{align-items:flex-end}
.mp-round{width:58px;height:58px;border-radius:50%;background:#0e0e0e;border:1px solid #292929;
  color:#f6f4ec;display:grid;place-items:center;flex:none}
.mp-round svg{width:24px;height:24px}
.mp-pill{height:58px;padding:1px 30px 0;border-radius:29px;background:#0e0e0e;border:1px solid #292929;
  color:#f6f4ec;font-size:16px;font-weight:700;text-transform:uppercase;white-space:nowrap}
.mp-pill.accent{background:#ff451a;border-color:#ff451a;color:#040404}
.mp-view{position:absolute;inset:0;border-radius:30px;overflow:hidden}
.mp-view img{width:100%;height:100%;object-fit:cover}
.mp-view::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.mp-view.flash::after{animation:mpflash .2s}
@keyframes mpflash{0%{opacity:.8}100%{opacity:0}}
.mp-shutter{width:80px;height:80px;border-radius:50%;border:2px solid #f6f4ec;display:grid;place-items:center}
.mp-shutter i{width:72px;height:72px;border-radius:50%;background:#f6f4ec}
/* video: recording turns the shutter into an orange rounded square */
.mp-shutter i{transition:all .2s var(--ease)}
.mp-shutter.rec i{width:32px;height:32px;border-radius:8px;background:#ff451a}
.mp-timer{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:2;padding:6px 12px 4px;
  border-radius:100px;background:#ff451a;color:#f6f4ec;font-size:14px;font-weight:700}
.mp-timer[hidden]{display:none}
/* camera options: switch camera + flash, stacked above the "···" (12px apart) */
.mp-extra{position:absolute;right:16px;bottom:86px;z-index:2;display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.mp-extra.in{opacity:1;transform:none;pointer-events:auto}
.mp-view.flip img{animation:mpflip .4s var(--ease)}
@keyframes mpflip{50%{transform:scaleX(0);filter:blur(6px)}}
.chat-sys{align-self:center;text-align:center;font-size:12px;text-transform:uppercase;padding:6px 0}

/* ---------- toasts ---------- */
.toasts{position:absolute;left:0;right:0;top:calc(var(--safe-t) + 56px);z-index:90;
  padding:0 16px;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:var(--paper);color:#000;border-radius:20px;
  padding:13px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);transform:translateY(-18px) scale(.97);opacity:0;
  transition:all .2s var(--ease)}
.toast.in{transform:none;opacity:1}
.toast .tx{flex:1;font-size:14px;line-height:1.3;letter-spacing:.22px}
.toast .tx b{text-transform:uppercase;font-weight:700}
.toast .un{font-size:16px;font-weight:500;letter-spacing:normal;text-transform:uppercase;flex:none}
.toast.work{background:#121212;color:var(--ink);border:1px solid var(--line-2)}
.toast.work .un{border-color:var(--line-2)}
.toast .spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--line-2);
  border-top-color:var(--cyan);animation:sp .7s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- search ---------- */
.searchbar{display:flex;align-items:center;gap:10px;margin:0 20px;background:#111;
  border-radius:24px;padding:13px 16px}
.searchbar input{flex:1;font-size:16px}
.searchbar input::placeholder{color:var(--ink-faint)}
.suggests{padding:22px 20px 0;display:flex;flex-direction:column;gap:2px}
.suggests button{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:16px;letter-spacing:normal;line-height:18px}
.suggests button span{color:var(--ink-faint)}
.answer{margin:22px 20px 0;border-radius:24px;padding:18px;
  background:linear-gradient(140deg,rgba(43,54,255,.20),rgba(0,226,255,.08));
  border:1px solid rgba(255,255,255,.08)}
.answer p{margin:0;font-size:16px;line-height:18px;letter-spacing:normal}
.answer p + p{margin-top:10px}
.reslist{padding:20px 20px 0;display:flex;flex-direction:column;gap:10px}
.res{display:flex;gap:13px;align-items:center;text-align:left;padding:9px;border-radius:18px;
  border:1px solid var(--line)}
.res .t{width:58px;height:58px;border-radius:13px;background:#111;flex:none;overflow:hidden;
  display:grid;place-items:center}
.res .t img{width:100%;height:100%;object-fit:contain;padding:4px}
.res .n{font-size:20px;font-weight:500;line-height:20px;letter-spacing:-.4px}
.res .w{font-size:14px;letter-spacing:.22px;color:var(--ink-dim);margin-top:4px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{padding:70px 30px;text-align:center}
.empty .h-big{margin-bottom:12px}

/* ---------- insights ---------- */
/* Insights: one card at a time in the looping deck (see .rtp-deck) */
.ins-page{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 56px) 0 calc(106px + var(--safe-b));touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ins-deck{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}  /* the cards' z-index stays inside the deck, under opened pages */
.ins-deck > .ins{position:absolute;left:50%;top:50%;margin:0;width:calc(100% - 64px);
  transform-origin:center;will-change:transform,opacity;pointer-events:none}
.ins-deck > .ins.center{pointer-events:auto}
.ins-page .ins-foot{flex:none;padding:12px 32px 0}
.ins{margin:0 16px 8px;border-radius:48px;padding:24px;position:relative;overflow:hidden;
  min-height:212px;display:flex;flex-direction:column;justify-content:flex-start}
/* Figma 583:8265: sentence-case headline, 32px medium */
.ins-t{font-size:32px;line-height:30px;font-weight:500;letter-spacing:-1.05px;margin:0}
.ins .note{font-size:16px;line-height:18px;margin-top:12px;opacity:.72}
.ins.orange .note{opacity:1}
.ins.short{min-height:0}
.ins .act{margin-top:18px;align-self:flex-start;display:inline-flex;align-items:center;height:40px;
  border-radius:100px;padding:1px 16px 0;font-size:14px;font-weight:700;letter-spacing:normal;text-transform:uppercase}
.ins.dark{background:#0e0e0e;border:1px solid #292929;color:#f6f4ec}
.ins.dark .act{background:#f6f4ec;color:#040404}
.ins.acid{background:#d6ff2e;color:#040404}
.ins.acid .act{background:#040404;color:#f6f4ec}
.ins.blue{background:#2b36ff;color:#f6f4ec}
.ins.blue .act{background:#f6f4ec;color:#040404}
.ins.orange{background:#ff4a17;color:#f6f4ec}
.ins.orange .act{background:#040404;color:#f6f4ec}
.ins.paper{background:#f6f4ec;color:#040404}
.ins.paper .act{background:#040404;color:#f6f4ec}
.ins-foot{padding:28px 16px 20px;font-size:14px;line-height:18.2px;letter-spacing:.22px;color:#54524e}
.bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.bars{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:16px}
.bars i{flex:1;background:currentColor;opacity:.28;border-radius:3px 3px 0 0;min-height:3px}
.bars i.hi{opacity:1}
.barlab{display:flex;gap:5px;margin-top:7px}
.barlab span{flex:1;font-size:12px;letter-spacing:normal;text-align:center;opacity:.55;
  text-transform:uppercase}
.tech{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:16px}
/* technique chips: same type as the Items screen's NEW CHAT / STUDIO MODE
   chips (14px bold uppercase, upright); the top one is filled, its text
   taking the panel's own background colour (--ins-bg) so it stays legible */
.tech .chip{display:inline-flex;align-items:center;height:40px;padding:1px 16px 0;border-radius:100px;
  border:1px solid currentColor;font-size:14px;font-weight:700;font-style:normal;
  letter-spacing:normal;text-transform:uppercase;opacity:.75}

.evo{display:flex;align-items:flex-end;gap:10px;margin-top:18px;height:74px}
.evo i{flex:1;border-radius:999px 999px 4px 4px;background:currentColor;opacity:.4}
.evo i.lit{opacity:.85}

/* ---------- discover ---------- */
.disc{position:absolute;inset:0;display:flex;flex-direction:column;background:#050505}
.stage{flex:1;position:relative;overflow:hidden}
.dcard{position:absolute;left:20px;right:20px;top:8px;bottom:22px;border-radius:48px;
  overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;will-change:transform}
.dcard .dbg{position:absolute;inset:0}
.dcard .dbg img{width:100%;height:100%;object-fit:contain;padding:190px 26px 26px}
/* text at the top, on the paper part -- like the Items idea card */
.dcard .dtx{position:relative;padding:28px 22px 0;text-align:center;color:#040404}
.dcard .why{font-size:16px;line-height:16px;color:#040404;margin-top:8px}
/* a photo idea: the photo fills the card, darkest at the top (behind the
   text) and clearing towards the bottom, like the piece card's photo header */
.dcard.photo .dbg img{object-fit:cover;padding:0}
.dcard .ddim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.95) -23%,rgba(0,0,0,0) 100%)}
.dcard.photo .dtx,.dcard.photo .why,.dcard.photo .dtx .src,.dcard.photo .dtx .src.archive{color:#f6f4ec}
.dcard .stamp{position:absolute;top:28px;left:22px;z-index:2;border:2px solid;border-radius:12px;
  padding:7px 12px;font-size:14px;font-weight:700;letter-spacing:normal;text-transform:uppercase;opacity:0;
  transform:rotate(-9deg)}
.dcard .stamp.yes{color:var(--orange)}          /* SAVE: the app's orange */
.dcard .stamp.no{right:22px;left:auto;color:var(--ink-faint);transform:rotate(9deg)}   /* NOPE: the inactive tabs' grey */
.dactions{flex:none;display:flex;gap:14px;justify-content:center;align-items:center;
  padding:0 20px calc(16px + var(--safe-b))}
.dact{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:#0e0e0e;border:1px solid #292929;color:#f6f4ec;font-size:22px}
.dact svg{width:24px;height:24px}
.dact.big{background:#FF451A;color:#040404;border:0}
/* COLLIDE: the orange text pill between NOPE and SAVE */
.dact.dcollide{width:auto;padding:1px 30px 0;border-radius:100px;font-size:16px;font-weight:700;text-transform:uppercase}
.dact:active{transform:scale(.9)}

/* ---------- collide (built from the Items + piece card parts) ---------- */
.collide{position:absolute;inset:0;background:#040404;display:flex;flex-direction:column}
.cx-btn.ghost{visibility:hidden}
.cl-stage{padding:0 16px 16px}
.cl-row{display:flex;gap:8px}
.cl-row .arch:is(.fin,.spot,.bleed){width:auto;flex:1 1 0;min-width:0;transition:transform .42s var(--ease),opacity .42s}
.cl-row.n3 .arch{height:170px;padding:12px}
.cl-row.n3 .arch .t{font-size:16px;line-height:17px}
.cl-stage .cl-row{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s var(--ease)}
.cl-stage .cl-row.in{opacity:1;transform:none}
.cl-head{display:flex;flex-direction:column;align-items:center;gap:4px;transition:opacity .18s}
.cl-head.out{opacity:0}
.cl-why{position:relative;padding:8px 24px 0;font-size:16px;line-height:normal;text-align:center;color:#040404;
  animation:clwhy .35s var(--ease)}
.cl-why[hidden]{display:none}
@keyframes clwhy{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.collide .cx-t{white-space:normal}
.cl-rest{opacity:0;transform:translateY(10px);transition:opacity .35s .12s,transform .35s .12s var(--ease)}
.cl-rest.in{opacity:1;transform:none}

/* ---------- share ---------- */
.canvasprev{margin:0 20px;border-radius:24px;overflow:hidden;aspect-ratio:1;position:relative;
  display:grid;place-items:center;transition:background .4s}
.canvasprev img{width:78%;height:78%;object-fit:contain;transition:all .5s var(--ease)}
.canvasprev.story{aspect-ratio:9/16}
.canvasprev.pin{aspect-ratio:2/3}
.canvasprev .cap{position:absolute;left:0;right:0;bottom:0;padding:14px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.5)}
.canvasprev .price{position:absolute;top:14px;left:14px;background:#000;color:#fff;
  border-radius:16px;padding:7px 12px;font-size:11px;font-weight:700;letter-spacing:.08em}
.beforeafter{display:flex;gap:8px;margin:14px 20px 0}
.beforeafter div{flex:1;border-radius:16px;overflow:hidden;background:#111;position:relative}
.beforeafter img{width:100%;aspect-ratio:1;object-fit:cover}
.beforeafter span{position:absolute;top:7px;left:7px;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(0,0,0,.6);padding:4px 7px;border-radius:8px}
.optrow{display:flex;gap:8px;padding:16px 20px 0;overflow-x:auto;scrollbar-width:none}
.optrow::-webkit-scrollbar{display:none}
.opt{flex:none;border:1px solid var(--line-2);border-radius:18px;padding:10px 14px;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.opt.on{border-color:var(--paper);color:var(--paper)}
.swatch{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);flex:none}
.swatch.on{outline:2px solid var(--paper);outline-offset:2px}
.captionbox{margin:18px 20px 0;border:1px solid var(--line);border-radius:20px;padding:16px;
  font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.truth{margin:14px 20px 0;font-size:11px;line-height:1.45;color:var(--ink-faint);
  display:flex;gap:8px}
.truth b{color:var(--cyan);font-weight:700;flex:none}

/* ---------- live activity / lock screen ---------- */
/* Colourful wallpaper in the app's own palette: against the old near-black
   gradient the #0a0a0a live-activity card was invisible. */
.lock{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 15% 8%,   #FF4A17 0%, rgba(255,74,23,0) 58%),
    radial-gradient(110% 70% at 92% 22%,  #2B36FF 0%, rgba(43,54,255,0) 60%),
    radial-gradient(130% 90% at 50% 105%, #00E2FF 0%, rgba(0,226,255,0) 62%),
    linear-gradient(165deg,#3A1B46,#1A1030 60%,#0B0A18);
  display:flex;flex-direction:column;padding:calc(var(--safe-t) + 26px) 12px calc(20px + var(--safe-b))}
.lock .clock{text-align:center;margin-bottom:26px}
.lock .clock .d{font-size:14px;letter-spacing:.02em;opacity:.7}
.lock .clock .t{font-size:74px;font-weight:200;line-height:1;letter-spacing:-.03em;
  font-family:var(--font)}
/* live activity card, Figma 494:24966 */
/* Figma 610:9303 -- 40px radius, 24px padding all round */
.la{background:#0a0a0a;border-radius:40px;padding:24px;box-shadow:0 10px 15px rgba(0,0,0,.28)}
.la .lah{display:flex;align-items:center;gap:10px}
.la .latx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
/* the chevron folds the plan; 44px hit area around the 16px icon */
.la .laic{width:44px;height:44px;margin:-10px -12px -10px 0;display:grid;place-items:center;flex:none}
.la .laic svg{width:16px;height:16px;transition:transform .2s}
.la .laic.up svg{transform:rotate(180deg)}
.la-done{margin-top:16px;font-size:14px;line-height:17px;color:#f6f4ec}
.la .title{font-size:24px;font-weight:500;letter-spacing:-.4px;line-height:normal;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la .lastate{display:flex;align-items:center;gap:4px;font-size:12px;
  text-transform:uppercase;color:#FF451A}
.la .lastate i{width:6px;height:6px;border-radius:50%;background:#FF451A}
/* the making card's plan (card.js planChecklist), light on the dark card;
   long plans scroll inside it */
.la-plan{margin-top:16px;max-height:44vh;overflow-y:auto;scrollbar-width:none}
.la-plan::-webkit-scrollbar{display:none}
.la-plan .pl-text{color:#f6f4ec;font-size:14px;line-height:17px}
.la-plan .pl-step{min-height:40px;padding:8px 0}
.la-plan .pl-step .bx{border-color:#54524e}
.la-plan .pl-step input:checked ~ .tx{color:#54524e}
/* the app's bottom-bar buttons (.pe-btn / .cb-round) */
.la-bar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:16px;container-type:inline-size}
/* 240, not .card-bar's 280: this bar's container is 40px narrower (24px
   lock gutters + 48px widget padding, against the card bar's 32px), so the
   smaller offset makes CLOSE's padding equal POST's at every width. */
.la-bar .pe-btn{box-shadow:none;white-space:nowrap;padding-left:max(10px, min(24px, (100cqw - 240px) / 4));
  padding-right:max(10px, min(24px, (100cqw - 240px) / 4))}
.lock .exit{margin-top:auto;text-align:center;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint);padding-top:20px}

/* ---------- watch ---------- */
.watchwrap{position:absolute;inset:0;background:#0A0A0A;display:grid;place-items:center;padding:20px}
.watch{width:212px;height:258px;border-radius:56px;background:#000;border:9px solid #1C1C1E;
  box-shadow:0 24px 60px rgba(0,0,0,.7);padding:20px 16px;display:flex;flex-direction:column;
  position:relative;overflow:hidden}
.watch .wt{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--orange);
  margin-bottom:8px}
.watch .wbig{font-size:17px;line-height:1.2;font-weight:600;letter-spacing:-.02em;flex:1;
  overflow-y:auto}
.watch .wbig.dim{color:var(--ink-faint)}
.watch .wmic{width:56px;height:56px;border-radius:50%;background:var(--orange);margin:0 auto;
  display:grid;place-items:center;flex:none}
.watch .wmic.rec{background:var(--paper)}
.watch .wok{font-size:12px;text-align:center;color:var(--acid);letter-spacing:.06em}
.watchwrap .hint{position:absolute;bottom:calc(28px + var(--safe-b));left:0;right:0;text-align:center}

/* ---------- onboarding ---------- */
.onb{position:absolute;inset:0;background:#040404;display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 24px) 22px calc(22px + var(--safe-b))}
/* .fadein target -- see the note in onboarding.js's shell(). Carries the
   flex-column layout that used to live directly on .onb's children. */
.onb .ocontent{flex:1;min-height:0;display:flex;flex-direction:column}
/* overflow-x:hidden -- overflow-y:auto alone makes overflow-x compute to
   auto too, and the 52px heading is a few px wider than the column, so a
   stray sideways scroll appeared on the PHOTOS step. */
.onb .obody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;
  flex-direction:column;padding-top:80px}
.onb .label{font-size:14px;font-weight:400;line-height:normal;letter-spacing:0;
  color:var(--ink-faint)}
/* 46px (was 52) so the longest line -- "SCREENSHOT." -- actually fits the
   column on a narrow phone; that overflow is what was forcing the
   sideways scroll, .obody's overflow-x:hidden is just the backstop. */
.onb .h-mega{font-size:46px;line-height:.86;letter-spacing:-.045em;color:#f6f4ec}
.onb p{font-size:16px;line-height:20px;color:var(--ink-dim);margin:16px 0 0;max-width:none}
.onb .ofoot{display:flex;flex-direction:column;gap:10px}
.onb .prim{height:58px;border-radius:30px;background:#f6f4ec;color:#040404;font-size:16px;
  font-weight:700;letter-spacing:0;text-transform:uppercase;padding:0}
.onb .skip{height:58px;font-size:16px;font-weight:700;letter-spacing:0;text-transform:uppercase;
  color:var(--ink-dim);padding:0}
.boards{display:flex;flex-direction:column;gap:2px;margin-top:26px}
.boards button{display:flex;align-items:center;gap:14px;padding:16px 0;text-align:left}
.boards .bx{width:24px;height:24px;border-radius:7px;border:1px solid #292929;flex:none;
  display:grid;place-items:center}
.boards .bx svg{width:16px;height:16px}
.boards .on .bx{background:var(--orange);border:1px solid var(--orange);color:#040404}
.boards .bn{font-size:16px;letter-spacing:0;color:#f6f4ec}
.boards .bc{font-size:14px;color:var(--ink-dim);margin-left:auto}
.scanline{margin-top:24px;display:flex;flex-direction:column;gap:9px}
.scanline .s{display:flex;gap:10px;align-items:center;font-size:13px;opacity:0;
  transform:translateY(6px);transition:all .4s var(--ease)}
.scanline .s.in{opacity:1;transform:none}
.scanline .s b{color:var(--acid);font-weight:700}

/* ---------- misc ---------- */
/* Prototype menu -- sits beside the phone, never over the app's controls.
   Wide screens: just left of the device frame, bottom-aligned with it.
   Phone-width: a slim tab on the left edge, mid-height (the app is
   full-screen there, so this is the least-used strip). */
.devbar{position:fixed;z-index:200;display:flex;flex-direction:column;gap:2px;width:min(190px, calc(50vw - 201px - 24px));
  max-height:80vh;overflow-y:auto;background:#141414;border:1px solid #2a2a2a;border-radius:14px;padding:8px;
  right:calc(50% + 201px + 16px);bottom:calc(50vh - min(437px, 48vh) + 44px)}
.devbar button{font-size:12px;letter-spacing:.02em;color:#aaa;text-align:left;padding:6px 8px;
  border-radius:8px;flex:none}
.devbar button:hover{background:#222;color:#fff}
.devbar .devgrp{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#5a5a5a;padding:8px 8px 2px}
.devbar .devgrp:first-child{padding-top:2px}
.devtoggle{position:fixed;z-index:201;width:32px;height:32px;
  border-radius:50%;background:#141414;border:1px solid #2a2a2a;color:#777;font-size:13px;
  right:calc(50% + 201px + 16px);bottom:calc(50vh - min(437px, 48vh))}
/* Phone-width: no room beside the phone, so no prototype menu */
@media (max-width:759px){ .devtoggle,.devbar{display:none!important} }

.fadein{animation:fi .4s var(--ease)}
@keyframes fi{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.shimmer{background:linear-gradient(90deg,#111,#1c1c1c,#111);background-size:200% 100%;
  animation:sh 1.3s infinite;border-radius:10px}
@keyframes sh{to{background-position:-200% 0}}
.hr{height:1px;background:var(--line);margin:28px 20px 0}
.pinned{border:1px solid var(--line-2);border-radius:20px;padding:14px 16px;margin:16px 20px 0;
  background:#0B0B0B}
.devbar[hidden]{display:none}
/* dark source tag: cyan would be unreadable on the paper part */
.dcard .dtx .src,.dcard .dtx .src.archive{color:#040404}