*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#171819;color:#fff}body{font-family:Arial,sans-serif}.story{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;display:flex;flex-direction:column}.backdrop,.shade{position:absolute;inset:-14px;z-index:-2}.backdrop{background:#2a3034 center/cover no-repeat;filter:blur(6px);transform:scale(1.035);transition:background-image .4s}.shade{z-index:-1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.12) 32%,rgba(0,0,0,.68) 75%,rgba(0,0,0,.9))}.top{padding:max(18px,env(safe-area-inset-top)) 24px 0;position:relative;z-index:3}.progress{height:3px;background:#ffffff69;border-radius:4px;overflow:hidden}.progress span{display:block;width:0;height:100%;background:#fff}.top-line{display:flex;align-items:center;gap:14px;padding-top:20px}.brand{font:700 27px Georgia,serif;letter-spacing:-1.3px;color:#fff;text-decoration:none;white-space:nowrap}.brand span,.mode i{color:#92b9da}.mode{font-size:10px;letter-spacing:.13em;font-weight:700;color:#eee;flex:1}.mode i{font-style:normal}.close{color:white;text-decoration:none;font:300 31px Arial;line-height:1;padding:0 3px}.tap-zones{position:absolute;inset:100px 0 42%;display:flex}.tap-zones button{width:50%;border:0;background:transparent;cursor:pointer}.content{width:min(100%,680px);margin:auto auto 0;padding:100px 24px max(23px,env(safe-area-inset-bottom));position:relative;z-index:2;pointer-events:none}.content>*{pointer-events:auto}.eyebrow{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;font-weight:700;margin-bottom:14px;text-shadow:0 1px 5px #000}.live-dot{width:7px;height:7px;background:#82b0d7;border-radius:50%}.counter{margin-left:auto;letter-spacing:.05em;font-weight:400}.card{padding:25px 24px 26px;border:1px solid #ffffff38;border-radius:5px;background:rgba(12,13,14,.74);backdrop-filter:blur(12px);box-shadow:0 16px 50px #0003}.source-line{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#c8dfef;text-transform:uppercase}.source-line span+span{font-weight:400;color:#d6d6d6;letter-spacing:.03em}.card h1{font:700 clamp(29px,7vw,48px)/1.07 Georgia,serif;letter-spacing:-.025em;margin:17px 0 13px}.card p{font:15px/1.55 Arial,sans-serif;color:#e1e1e1;margin:0;max-width:55ch}.read{display:inline-flex;gap:20px;align-items:center;margin-top:24px;color:white;text-decoration:none;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:700;border-bottom:1px solid #82b0d7;padding-bottom:8px}.read[hidden]{display:none}.read span{font-size:16px}.controls{display:flex;align-items:center;gap:10px;margin-top:18px}.controls button{width:38px;height:38px;border:1px solid #ffffff6b;border-radius:50%;background:#1515157a;color:#fff;font-size:17px;cursor:pointer}.controls .pause{background:#fff;color:#171717;border-color:#fff;font-size:15px;font-weight:700}.hint{margin-left:auto;color:#eee;font-size:11px}.credit{font-size:9px;letter-spacing:.15em;color:#ffffffa8;margin:22px 0 0}.controls button:focus-visible,.close:focus-visible,.read:focus-visible,.brand:focus-visible{outline:2px solid white;outline-offset:4px}@media(min-width:800px){.top{padding-left:40px;padding-right:40px}.content{padding-bottom:38px}.card{padding:32px}.story{min-height:100vh}}@media(max-width:400px){.top{padding-left:16px;padding-right:16px}.mode{font-size:9px}.content{padding-left:16px;padding-right:16px}.card{padding:21px}.hint{font-size:10px}}

/* Leitura diretamente sobre a imagem */
.card{background:transparent;border:0;border-radius:0;backdrop-filter:none;box-shadow:none;padding:12px 0 8px;text-shadow:0 2px 12px #000,0 1px 3px #000}.shade{background:linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.3) 30%,rgba(0,0,0,.76) 68%,rgba(0,0,0,.94))}.controls{position:relative;justify-content:center;margin-top:22px}.hint{position:absolute;top:49px;left:0;right:0;margin:0;text-align:center}.credit{text-align:center;margin-top:42px}@media(min-width:800px){.card{padding:12px 0 8px}}@media(max-width:400px){.card{padding:12px 0 8px}}

/* Marca e cores Timtim por Timtim */
.brand{color:#fff;letter-spacing:-.05em}.brand em{font-weight:400;font-size:.78em}.live-dot{background:#e9c35a}.read{border-color:#e9c35a}.source-line{color:#d4e6f3}@media(max-width:400px){.brand{font-size:22px}.mode{font-size:8px}}
