/* Revela — photo.we4.com.br
   Layout: folha de contato — prova ampliada à esquerda, painel de ajustes à direita, tira de filme com abas embaixo */
:root{
  --bg:#E8EBE8; --surface:#F6F7F5; --ink:#1A1E1C; --muted:#5B6560; --line:#C7CDC8;
  --mark:#C4302A; --film:#1B1D1C; --edge:#D2A85E; --chk1:#d9dcda; --chk2:#f1f2f1;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root{--bg:#121514;--surface:#1B1F1D;--ink:#E5E9E6;--muted:#97A29C;--line:#2C3330;--mark:#F0645A;--film:#0B0C0C;--chk1:#2a2d2c;--chk2:#3a3e3c;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:1200px;margin:0 auto;padding-block:max(20px,env(safe-area-inset-top,0px)) 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,6vw,52px);letter-spacing:-.03em;margin:0;line-height:1}
h1 span{color:var(--mark)}
.tag{color:var(--muted);margin:0;max-width:52ch}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
.main{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
@media (max-width:860px){.main{grid-template-columns:1fr}}

/* prova */
.stage{background:var(--film);border-radius:4px;padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.edge{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--edge);display:flex;justify-content:space-between;align-items:center;gap:10px;text-transform:uppercase;min-width:0}
.edge span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view{position:relative;aspect-ratio:var(--ar,1.5);width:min(100%,calc(68vh * var(--ar,1.5)));margin-inline:auto;max-width:100%;background:#000}
.view.transp{background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/22px 22px}
.view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#orig{display:none;clip-path:inset(0 calc(100% - var(--corte,50%)) 0 0)}
.view.cmp #orig{display:block}
.linha{display:none;position:absolute;top:0;bottom:0;left:var(--corte,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);pointer-events:none}
.linha span{position:absolute;top:8px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.55);padding:2px 6px;border-radius:3px;white-space:nowrap}
.linha span:first-child{right:8px}.linha span:last-child{left:8px}
.view.cmp .linha{display:block}
#corte{display:none;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.view.cmp #corte{display:block}
.status{position:absolute;left:10px;right:10px;bottom:10px;margin:0;background:rgba(15,16,16,.86);color:#f3efe6;font-size:13px;padding:8px 12px;border-radius:6px;border-left:3px solid var(--edge)}
.status.erro{border-left-color:var(--mark)}
.mini{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--edge);background:none;border:1px solid currentColor;border-radius:999px;padding:3px 10px;cursor:pointer;flex:none}
.mini[aria-pressed="true"]{background:var(--edge);color:var(--film)}
.drop{outline:2px dashed transparent;outline-offset:-8px}
.drop.over{outline-color:var(--edge)}

/* painel */
.panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.block{display:flex;flex-direction:column;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.block:last-child{border-bottom:0}
.label{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
summary.label{cursor:pointer;list-style:none}
summary.label::after{content:" ▾"}
details:not([open]) summary.label::after{content:" ▸"}
details.block{display:block}
details.block>*+*{margin-top:10px}
.btn{font:600 15px var(--body);border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);padding:11px 16px;border-radius:999px;cursor:pointer;text-align:center}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.small{font-size:13px;padding:7px 12px}
.btn:focus-visible,.frame:focus-visible,input:focus-visible,.sug:focus-visible,.aba:focus-visible,.mini:focus-visible,summary:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
.hint{font-size:13px;color:var(--muted);margin:0}
.sugs{display:flex;flex-direction:column;gap:8px}
.sug{display:flex;gap:10px;align-items:flex-start;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:10px 12px;cursor:pointer;color:var(--ink);font:inherit}
.sug b{display:block;font-weight:600}
.sug small{color:var(--muted);font-size:13px;line-height:1.4}
.sug .n{font-family:var(--mono);font-size:12px;color:var(--mark);padding-top:2px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row .btn{flex:1 1 auto}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:600}
.switch input{width:18px;height:18px;accent-color:var(--mark)}
input[type=text]{font:500 15px var(--body);width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
.ajustes{display:grid;grid-template-columns:auto minmax(0,1fr) 3.2em;gap:6px 10px;align-items:center;font-size:14px}
.ajustes input[type=range]{width:100%;accent-color:var(--mark)}
.ajustes output{font:500 12px var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}

.peca{border:1.5px solid var(--ink);border-radius:8px;padding:14px;background:var(--surface)}
.panel .peca{border-bottom:1.5px solid var(--ink)}
.peca .label{color:var(--mark);font-weight:500}
textarea{font:500 15px/1.4 var(--body);width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);resize:vertical;min-height:3.2em}
textarea:focus-visible,.chip:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
.exemplos{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:500 12px var(--body);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer}
.chip:hover{border-color:var(--ink)}
.resposta{margin:0;padding:10px 12px;border-radius:6px;background:var(--bg);border-left:3px solid var(--mark);font-size:14px}
.resposta.erro{color:var(--mark)}
.btn[disabled]{opacity:.55;cursor:progress}

/* tira de efeitos */
.tira{display:flex;flex-direction:column;gap:0}
.abas{display:flex;gap:4px;flex-wrap:wrap}
.aba{font:600 14px var(--body);background:transparent;color:var(--muted);border:0;border-radius:6px 6px 0 0;padding:9px 16px;cursor:pointer}
.aba[aria-selected="true"]{background:var(--film);color:#f3efe6}
.ia-tag{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--edge);margin-left:4px}
.strip{background:var(--film);border-radius:0 4px 4px 4px;padding:10px 12px 8px;overflow-x:auto}
.frames{display:flex;gap:10px;width:max-content}
.frame{background:none;border:0;padding:6px;cursor:pointer;display:flex;flex-direction:column;gap:6px;align-items:flex-start;position:relative;border-radius:10px}
.frame canvas{display:block;width:124px;height:auto;border-radius:2px}
.frame.transp canvas{background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/12px 12px}
.frame .cap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--edge);max-width:124px;text-align:left}
.frame .cap i{font-style:normal;opacity:.6;margin-right:6px}
.frame.on::after{content:"";position:absolute;inset:-2px;border:3px solid var(--mark);border-radius:46% 54% 50% 48%/52% 46% 54% 48%;transform:rotate(-1.5deg);pointer-events:none}
.frame .star{position:absolute;top:10px;right:10px;background:var(--mark);color:#fff;font:500 10px var(--mono);padding:1px 6px;border-radius:999px;letter-spacing:.06em}
.frame.bloq canvas{filter:grayscale(1) brightness(.55)}
.frame.bloq::before{content:"IA";position:absolute;top:34px;left:50%;transform:translateX(-50%);font:500 12px var(--mono);letter-spacing:.12em;color:#fff;border:1px solid #fff;padding:2px 8px;border-radius:999px;z-index:1}
.frame.indisp{opacity:.4}
.foot{font-size:13px;color:var(--muted);margin:10px 0 0}
@media (max-width:860px){.frame canvas{width:104px}.frame .cap{max-width:104px}.stage{padding:10px}}
.foot a{color:inherit}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}