@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --green:#D2FFAD;--lemon:#FFFB80;--peach:#FFCD9E;--lilac:#C8BDFF;--sky:#D1E0FF;
  --ink:#17171B;--ink2:#5E5E68;--line:#E9E8E3;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Onest,-apple-system,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
img{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
[contenteditable]{outline:none;border-radius:4px;cursor:text;transition:background .15s,box-shadow .15s}
[contenteditable]:hover{box-shadow:0 0 0 4px rgba(127,127,127,.09);background:rgba(127,127,127,.09)}
[contenteditable]:focus{box-shadow:0 0 0 4px rgba(200,189,255,.35);background:rgba(200,189,255,.35)}
.tag{font-style:normal;font-size:12.5px;font-weight:500;padding:2px 8px;border-radius:6px;color:#17171B;white-space:nowrap}
.green{background:var(--green)}.lemon{background:var(--lemon)}.peach{background:var(--peach)}.lilac{background:var(--lilac)}.sky{background:var(--sky)}

/* composer */
.m-comp{position:fixed;z-index:60;left:50%;bottom:22px;transform:translateX(-50%);width:min(560px,calc(100vw - 32px));background:#fff;border-radius:18px;box-shadow:0 1px 1px rgba(0,0,0,.05),0 12px 40px rgba(20,20,30,.16);overflow:hidden;color:#17171B}
.m-comp-bar{display:flex;align-items:center;padding:6px 6px 6px 18px}
.m-comp textarea{flex:1;border:0;outline:0;resize:none;font:inherit;font-size:15px;line-height:22px;background:none;color:inherit;height:22px;max-height:120px}
.m-comp textarea::placeholder{color:var(--ink2)}
.m-comp.open textarea{height:66px}
.m-comp-send{width:34px;height:34px;border-radius:12px;background:#17171B;color:#fff;font-size:15px;align-self:flex-end;transition:transform .15s var(--ease)}
.m-comp-send:hover{transform:scale(1.06)}
.m-comp-tray{display:none;padding:14px 18px 2px}
.m-comp.open .m-comp-tray{display:block}
.m-comp.open .m-comp-tray[style*="none"]{display:none}
.m-comp-label{font-size:12.5px;color:var(--ink2);margin-bottom:8px}
.m-comp-shots{display:flex;gap:8px}
.m-comp-shots button{width:64px;height:92px;border-radius:9px;overflow:hidden;background:#eee;transition:transform .18s var(--ease)}
.m-comp-shots button:hover{transform:translateY(-3px)}
.m-comp-shots img{width:100%;height:100%;object-fit:cover;object-position:top}
body.m-dropping::after{content:'Drop it. That’s all.';position:fixed;inset:12px;z-index:100;border-radius:20px;background:rgba(200,189,255,.92);display:grid;place-items:center;font-size:32px;font-weight:600;color:#17171B;pointer-events:none}

/* landing sheet */
.m-land{position:fixed;inset:0;z-index:90;background:rgba(18,18,24,.42);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;animation:fade .2s}
.m-land-card{background:#fff;color:#17171B;border-radius:22px;display:flex;gap:26px;padding:22px;max-width:680px;width:100%;max-height:86vh;animation:rise .35s var(--ease)}
.m-land-shot{width:170px;height:360px;object-fit:cover;object-position:top;border-radius:12px;flex:none}
.m-land-list{flex:1;display:flex;flex-direction:column;gap:9px;min-width:0;overflow:auto;padding:4px 2px}
.m-land-head{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.m-land-row{display:flex;align-items:center;justify-content:space-between;gap:12px;animation:rise .4s var(--ease) both;font-size:14.5px}
.m-land-row b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-land-go{margin-top:auto;align-self:flex-start;background:#17171B;color:#fff;padding:9px 16px;border-radius:11px;font-weight:500;animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* original viewer */
.m-light{position:fixed;inset:0;z-index:95;background:rgba(14,14,18,.72);backdrop-filter:blur(10px);display:grid;place-items:center;padding:24px;animation:fade .15s}
.m-light-in{display:flex;gap:20px;max-height:90vh;align-items:flex-start;color:#fff}
.m-light img{max-height:88vh;max-width:60vw;border-radius:14px}
.m-light pre{background:#fff;color:#111;padding:20px;border-radius:12px;white-space:pre-wrap;max-width:50vw}
.m-light-side{width:240px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.m-light-side span{opacity:.7}
.m-light-side p{margin:8px 0 0;opacity:.85;white-space:pre-line}
.m-orig{font-size:13.5px;line-height:1.5}
.m-light-side button{align-self:flex-start;margin-top:12px;background:rgba(255,255,255,.14);padding:7px 13px;border-radius:9px;color:#fff}

/* toast */
.m-toast{position:fixed;z-index:97;left:50%;bottom:92px;transform:translate(-50%,8px);background:#17171B;color:#fff;font-size:13.5px;padding:8px 14px;border-radius:11px;display:flex;gap:12px;opacity:0;pointer-events:none;transition:.2s var(--ease)}
.m-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.m-toast button{color:var(--lemon);font-weight:500}

/* prototype chrome: not part of the app */
.m-chrome{position:fixed;z-index:80;right:14px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;pointer-events:none}
.m-chrome nav{display:flex;align-items:center;gap:1px;padding:3px;border-radius:11px;background:rgba(22,22,28,.9);color:#fff;backdrop-filter:blur(10px);pointer-events:auto}
.m-chrome a,.m-chrome button{padding:4px 9px;border-radius:8px;color:rgba(255,255,255,.62);transition:.12s}
.m-chrome a span{opacity:.5;margin-right:5px}
.m-chrome a:hover,.m-chrome button:hover{color:#fff}
.m-chrome a.on{background:rgba(255,255,255,.14);color:#fff}
.m-chrome button{border-left:0}
.m-chrome #m-why{margin-left:6px;color:var(--lemon)}
.m-chrome #m-why.on{background:var(--lemon);color:#17171B}
.m-chrome-q{display:none}
body.m-why .m-chrome-q{display:block;max-width:360px;text-align:right;background:rgba(22,22,28,.9);color:#fff;padding:7px 11px;border-radius:10px;line-height:1.4}
body.m-why [data-why]{outline:1.5px dashed rgba(124,102,255,.75);outline-offset:2px;cursor:help!important}
.m-tip{position:fixed;z-index:99;width:340px;background:#17171B;color:#fff;font-size:13px;line-height:1.45;padding:10px 12px;border-radius:11px;box-shadow:0 8px 30px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .1s}
.m-tip.on{opacity:1}

@media (max-width:700px){
  .m-chrome a{padding:4px 6px}.m-chrome a{font-size:0}.m-chrome a span{font-size:12px;margin:0;opacity:1}
  .m-land-card{flex-direction:column;gap:14px}.m-land-shot{width:100%;height:140px}
  .m-light-in{flex-direction:column}.m-light img{max-width:100%;max-height:60vh}
}