:root{--bg:#050b14;--panel:#07111d;--ink:#edf8ff;--muted:#9db5c7;--cyan:#49e7ff;--magenta:#ff4fc6;--violet:#b776ff;--orange:#ffad42;--green:#50f5c5;--blue:#5c9dff;--tone:var(--cyan);font-family:"Courier New",ui-monospace,monospace;color-scheme:dark}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:#02060c;color:var(--ink);overscroll-behavior:none}body{display:grid;place-items:center;background:radial-gradient(circle at 50% 0,#10243b 0,transparent 48%),#02060c}img{-webkit-user-drag:none}.app{width:min(100%,540px);height:100dvh;max-height:1000px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:max(14px,env(safe-area-inset-top)) 14px max(10px,env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(8,20,34,.97),rgba(3,10,18,.99));border-inline:1px solid #17374b;position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.app:after,.panel:after{content:"";pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen;z-index:20}.brandbar{display:flex;align-items:center;gap:14px;border-bottom:1px solid #285b78;padding:2px 4px 10px}.brand{font-size:clamp(1.55rem,7vw,2.35rem);font-weight:900;letter-spacing:-.08em;text-shadow:0 0 16px rgba(73,231,255,.22);white-space:nowrap}.brand-ai{color:var(--cyan)}.brand-promise{border-left:1px solid #367494;padding-left:12px;font-size:.68rem;font-weight:900;line-height:1.2;letter-spacing:.08em;color:#b5f0ff}.install-button{margin-left:auto;border:1px solid var(--green);background:#09241f;color:var(--green);font:700 .7rem inherit;padding:8px;z-index:21}.statusbar{display:flex;justify-content:space-between;gap:8px;color:#9ae6f7;font-size:.64rem;font-weight:900;letter-spacing:.05em;padding-inline:4px}.viewport{min-height:0;touch-action:none;outline:none;position:relative}.news-card{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(170px,1fr) auto auto;border:1px solid var(--tone);background:linear-gradient(180deg,rgba(8,23,37,.88),rgba(4,13,22,.96));box-shadow:inset 0 0 22px rgba(73,231,255,.035);overflow:hidden}.tone-cyan{--tone:var(--cyan)}.tone-magenta{--tone:var(--magenta)}.tone-orange{--tone:var(--orange)}.tone-violet{--tone:var(--violet)}.tone-green{--tone:var(--green)}.card-meta,.panel-meta{display:flex;justify-content:space-between;color:var(--tone);font-weight:800;font-size:.88rem;letter-spacing:.04em;padding:12px 14px;border-bottom:1px dotted color-mix(in srgb,var(--tone),transparent 40%)}.visual{margin:0;min-height:0;overflow:hidden;border-bottom:1px solid color-mix(in srgb,var(--tone),transparent 45%);background:#06111d}.visual img,.panel-visual img{width:100%;height:100%;display:block;object-fit:cover}.headline-block{padding:14px}.headline-block h1,.panel h2{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.65rem,7.8vw,2.55rem);line-height:.94;letter-spacing:.025em;margin:0 0 10px;text-transform:uppercase;hyphens:auto;overflow-wrap:break-word}.headline-block p,.panel p{font-family:ui-sans-serif,system-ui,sans-serif;font-size:1rem;line-height:1.45;color:#d8e8f2;margin:0}.source-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;color:var(--tone);font-size:.82rem;font-weight:900;letter-spacing:.03em;border-top:1px dotted color-mix(in srgb,var(--tone),transparent 55%)}.controls{display:grid;grid-template-columns:52px 1fr 1fr 52px;gap:7px}.controls button,.back-button{min-height:52px;border:1px solid var(--cyan);background:#06131f;color:var(--cyan);font:800 .7rem "Courier New",monospace;letter-spacing:.035em}.controls .story-button{border-color:var(--blue);color:var(--blue);background:#07112a}.controls .protection-button{border-color:var(--green);color:var(--green);background:#062019}.controls button:disabled{opacity:.3}.controls span{display:block}.arrow svg{display:block;margin:0 auto}.controls .arrow svg{width:24px;height:24px;margin-bottom:3px}#prevButton .arrow svg,#nextButton .arrow svg{width:30px;height:30px;margin:0 auto}.ad-art{position:relative;height:100%;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(80,245,197,.24),transparent 58%),repeating-linear-gradient(0deg,rgba(80,245,197,.07) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(80,245,197,.07) 0 1px,transparent 1px 24px),#041510}.visual .ad-pro img{width:auto;height:62%;aspect-ratio:1;filter:drop-shadow(0 0 30px rgba(80,245,197,.4))}.ad-art strong{position:absolute;left:14px;top:10px;font:900 clamp(2.4rem,12vw,3.8rem) Impact,"Arial Black",sans-serif;letter-spacing:.04em;color:var(--green);text-shadow:0 0 18px rgba(80,245,197,.45)}.ad-art em{position:absolute;right:14px;bottom:12px;padding:6px 10px;background:var(--green);color:#03110e;font:800 1rem "Courier New",monospace;font-style:normal}.ad-product .card-pair{width:112px;height:130px;min-height:0;transform:scale(1.75)}.affiliate-note{display:block;margin-top:7px;font:700 .68rem/1.35 "Courier New",monospace;color:#9cc9bd}.ad-sponsor img{width:100%;height:100%;object-fit:cover}.ad-sponsor strong{position:static;font-size:clamp(1.8rem,9vw,3rem);text-align:center;padding:0 14px}.ad-cta{flex:none;border:1px solid var(--green);background:var(--green);color:#03110e;padding:8px 10px;font:900 .72rem "Courier New",monospace;letter-spacing:.04em;text-decoration:none}.enter-right{animation:inRight .22s ease-out}.enter-left{animation:inLeft .22s ease-out}.edge-start{animation:edgeStart .3s ease-out}@keyframes inRight{from{transform:translateX(12%);opacity:.35}}@keyframes inLeft{from{transform:translateX(-12%);opacity:.35}}@keyframes edgeStart{40%{transform:translateX(4%)}}
.panel{--sheet:var(--blue);width:min(100%,540px);max-width:100%;height:100dvh;max-height:1000px;margin:auto;padding:0;border:1px solid var(--sheet);background:linear-gradient(180deg,#081321,#030a12);color:var(--ink);overflow:hidden}.sheet-top{--sheet:var(--green)}.panel-settings{--sheet:var(--violet)}.panel::backdrop{background:rgba(0,0,0,.82)}.panel-content{height:100%;overflow-y:auto;overscroll-behavior:contain;position:relative}.sheet-head{position:sticky;top:0;z-index:21;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:max(14px,env(safe-area-inset-top)) 18px 12px;background:#081321;border-bottom:1px dotted color-mix(in srgb,var(--sheet),transparent 45%);touch-action:none}.story-head{flex-wrap:wrap}.sheet-close{min-height:46px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--sheet);background:#06131f;color:var(--sheet);font:800 .78rem "Courier New",monospace;letter-spacing:.06em}.sheet-close .arrow svg{width:20px;height:20px}.panel-meta{color:var(--sheet);margin-bottom:14px;border-color:color-mix(in srgb,var(--sheet),transparent 40%)}.sheet-head .panel-meta{flex:1;justify-content:flex-end;margin:0;padding:0;border:0;font-size:.78rem;white-space:nowrap}.sheet-head .panel-meta span{display:none}.gear{width:46px;height:46px;display:grid;place-items:center;padding:0;border:1px solid var(--sheet);background:#062019;color:var(--sheet)}.gear svg{width:32px;height:32px;display:block}.gear.is-active{background:var(--sheet);color:#0d0418}.sheet-body{padding:16px 18px max(18px,env(safe-area-inset-bottom))}.panel h2{font-size:clamp(2rem,8vw,2.8rem)}.sheet-top h2{font-size:clamp(1.55rem,6.4vw,2.2rem)}.panel h3{font-size:1rem;color:var(--sheet);margin:20px 0 8px}.panel p+p{margin-top:12px}.panel-story .sheet-body>p{line-height:1.6}.panel .story-date{color:var(--sheet);font:900 .84rem "Courier New",monospace;letter-spacing:.04em;margin:0 0 16px}.panel-visual{height:220px;margin:20px 0 0;border:1px solid var(--sheet);overflow:hidden}.source-link{display:flex;justify-content:space-between;gap:10px;margin:20px 0;padding:16px;border-block:1px dotted var(--sheet);color:var(--sheet);font-weight:700;text-decoration:none;font-size:.8rem}.back-button{width:100%;margin-top:8px;border-color:var(--sheet);color:var(--sheet)}.action-list{border:1px solid var(--green);padding:8px 10px;margin-top:14px}.action-list h3{margin:0 0 6px;border-bottom:1px dotted #2c8f77;padding-bottom:8px}.action-list>div{display:grid;grid-template-columns:42px 1fr;align-items:center;min-height:44px;border-bottom:1px dotted #256956;font-family:ui-sans-serif,system-ui,sans-serif;font-size:.88rem}.action-list>div:last-child{border-bottom:0}.action-list>.tip{display:block}.tip-toggle{width:100%;min-height:44px;display:grid;grid-template-columns:42px 1fr 22px;align-items:center;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.tip-toggle .chev svg{display:block;width:14px;height:14px;margin-left:auto;color:var(--green);transition:transform .2s}.tip-toggle[aria-expanded="true"] .chev svg{transform:rotate(180deg)}.tip-toggle[aria-expanded="true"]>span:not(.chev){color:var(--green);font-weight:700}.tip-how{padding:0 4px 12px 42px;animation:tipIn .2s ease-out}.panel .tip-how p{font-size:.88rem;line-height:1.5;color:#d4f7ec}@keyframes tipIn{from{opacity:0;transform:translateY(-4px)}}.panel-protection.tip-open .product-card{display:none}.panel .disclaimer{margin-top:8px;font-size:.74rem;line-height:1.4;color:#9cc9bd}.legal{margin-top:22px;padding:0 10px;border:1px solid var(--sheet)}.legal .tip-toggle{grid-template-columns:1fr 22px;min-height:50px;color:var(--sheet);font:800 .82rem "Courier New",monospace;letter-spacing:.05em}.legal .tip-toggle .chev svg,.legal .tip-toggle[aria-expanded="true"]>span:not(.chev){color:var(--sheet)}.legal .tip-how{padding:0 2px 12px}.panel .legal .tip-how p{font-size:.82rem;line-height:1.5;color:#ddd3f2}.action-list b{border:1px solid var(--green);color:var(--green);padding:6px;text-align:center;margin-right:8px}.product-card{display:grid;grid-template-columns:1fr 112px;gap:10px;border:1px solid var(--green);padding:12px;margin-top:14px;background:linear-gradient(135deg,#07221e,#07101b)}.product-copy small{color:var(--green)}.product-copy h3{margin:4px 0;color:#fff;font-size:.92rem}.product-copy p{font-size:.8rem}.features{font-size:.52rem;color:#77dfc6;margin:9px 0}.product-copy a{display:inline-block;border:1px solid var(--green);padding:9px;color:var(--green);font-weight:800;text-decoration:none;font-size:.68rem}.card-pair{position:relative;min-height:130px}.card-pair>div{position:absolute;width:72px;height:112px;padding:9px;border:1px solid #6591be;border-radius:5px;background:linear-gradient(145deg,#142d4d,#07101f);font-weight:800;box-shadow:0 8px 15px #0008}.card-pair>div:first-child{left:5px;transform:rotate(-7deg)}.card-pair>div:last-child{right:0;bottom:0;transform:rotate(7deg)}.card-pair i{display:inline-block;width:13px;height:13px;background:#a9bccb;margin:9px 3px 0 0}.pro-card{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--green);margin-top:14px;padding:12px}.pro-card small,.pro-card strong{display:block;color:var(--green)}.pro-card strong{font-size:1.1rem;margin-top:3px}.pro-card p{font-size:.7rem;margin-top:4px}.pro-card button{border:1px solid var(--green);background:var(--green);color:#03110e;padding:12px;font-weight:900}.pixel-art{display:block;color:var(--green)}.pixel-art svg{display:block;width:100%;height:auto}.ad-product .pixel-art{width:min(62%,240px);filter:drop-shadow(0 0 22px rgba(80,245,197,.35))}.product-card>.pixel-art{align-self:center}.action-list.locked h3{display:flex;justify-content:space-between;align-items:center}.lock svg{display:block;width:18px;height:auto;color:var(--green)}.action-list.locked>div{min-height:34px}.action-list.locked i{display:block;height:10px;background:repeating-linear-gradient(90deg,rgba(80,245,197,.4) 0 6px,transparent 6px 10px)}.upsell strong{color:#fff;font:900 .92rem/1.2 "Courier New",monospace;margin:5px 0 0}.upsell small{color:var(--green);font-weight:800}.upsell button{flex:none}.panel h3.shop-title{margin:14px 0 8px}.shop-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.shop-tile{display:grid;gap:6px;align-content:start;padding:10px;border:1px solid var(--green);background:linear-gradient(135deg,#07221e,#07101b);color:var(--ink);text-decoration:none}.tile-art{height:58px;display:grid;place-items:center;overflow:hidden}.tile-art .pixel-art{width:76px}.tile-art .card-pair{width:112px;height:130px;min-height:0;flex:none;transform:scale(.42)}.shop-tile b{font:900 .72rem/1.2 "Courier New",monospace;letter-spacing:.02em}.tile-price{color:var(--green);font:900 .7rem "Courier New",monospace}.setting{margin-top:18px}.setting h3{margin:0 0 10px}.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice button{min-height:58px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--sheet);background:#0d0a1c;color:var(--sheet);font:800 .9rem "Courier New",monospace;letter-spacing:.06em}.choice button[aria-checked="true"]{background:var(--sheet);color:#0d0418}.flag svg{display:block;width:30px;height:20px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.sheet-top[open]{animation:sheetFromTop .3s cubic-bezier(.2,.8,.2,1)}.sheet-bottom[open]{animation:sheetFromBottom .3s cubic-bezier(.2,.8,.2,1)}.sheet-top.closing{animation:sheetToTop .22s ease-in forwards}.sheet-bottom.closing{animation:sheetToBottom .22s ease-in forwards}@keyframes sheetFromTop{from{transform:translateY(-100%)}}@keyframes sheetFromBottom{from{transform:translateY(100%)}}@keyframes sheetToTop{to{transform:translateY(-100%)}}@keyframes sheetToBottom{to{transform:translateY(100%)}}
@media(min-width:700px){body{padding:20px}.app,.panel{height:min(940px,calc(100dvh - 40px))}.app{border:1px solid #2b6a8d}.controls button{font-size:.8rem}}@media(max-height:720px){.app{gap:6px}.visual{min-height:135px}.headline-block{padding:10px}.headline-block h1{font-size:1.55rem}.headline-block p{font-size:.86rem}.controls button{min-height:45px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
/* ---- additions of the web app; the approved mobile view above stays exactly as in the prototype ---- */
[hidden]{display:none!important}
/* The phone view always fits the visible screen: the height is measured (app.js, --app-height) because mobile browsers
   show and hide their bars; on phones the app sits at the top, so a taller page behind the bars can never push the
   buttons out of sight; low screens get a more compact card, long titles are shortened instead of overflowing. */
.app{height:100vh;height:100dvh;height:var(--app-height,100dvh);grid-template-rows:auto auto minmax(0,1fr) auto}
.panel{height:100vh;height:100dvh;height:var(--app-height,100dvh)}
@media (max-width:699px){html,body{height:auto;min-height:100%}body{place-items:start center}}
@media (min-width:700px){.app,.panel{height:min(940px,calc(var(--app-height,100dvh) - 40px))}}
.headline-block h1,.headline-block p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
@media (max-height:640px){
  .news-card{grid-template-rows:auto minmax(90px,1fr) auto auto}.visual{min-height:90px}
  .headline-block h1{font-size:clamp(1.25rem,6vw,1.8rem);-webkit-line-clamp:3}.headline-block p{font-size:.86rem;-webkit-line-clamp:2}
  .brand{font-size:clamp(1.3rem,6vw,1.9rem)}.brandbar{padding-bottom:6px}.controls button{min-height:42px}
}
@media (max-height:520px){
  .app{gap:5px;grid-template-rows:auto minmax(0,1fr) auto}.statusbar,.brand-promise{display:none}
  .card-meta{padding:6px 12px}.source-row{padding:6px 12px}.headline-block{padding:8px 12px}
  .headline-block h1{-webkit-line-clamp:2;margin-bottom:4px}.headline-block p{-webkit-line-clamp:1}
  .controls button{min-height:38px}.controls .arrow svg{width:18px;height:18px;margin-bottom:0}#prevButton .arrow svg,#nextButton .arrow svg{width:22px;height:22px}
}
.visual.placeholder{display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--tone),transparent 72%),transparent 60%),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px),#06111d}
.visual.placeholder span,.thumb.placeholder span{font:900 clamp(2rem,10vw,3.4rem) Impact,"Arial Black",sans-serif;letter-spacing:-.04em;color:var(--tone);opacity:.75}
.empty-card{display:grid;place-items:center;text-align:center;padding:24px;height:100%;border:1px solid var(--cyan);font-family:ui-sans-serif,system-ui,sans-serif;color:#d8e8f2;line-height:1.5}
.edge-end{animation:edgeEnd .3s ease-out}@keyframes edgeEnd{40%{transform:translateX(-4%)}}
.lang-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang-list button{min-height:46px;border:1px solid var(--sheet);background:#0d0a1c;color:var(--sheet);font:800 .82rem "Courier New",monospace;letter-spacing:.04em;padding:6px}
.lang-list button[aria-checked="true"]{background:var(--sheet);color:#0d0418}
.lang-select summary{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 14px;border:1px solid var(--sheet);background:#0d0a1c;color:var(--sheet);font:800 .9rem "Courier New",monospace;letter-spacing:.04em;cursor:pointer;list-style:none}
.lang-select summary::-webkit-details-marker{display:none}
.lang-select .chev{margin-inline-start:auto}.lang-select .chev svg{display:block;width:14px;height:14px;transition:transform .2s}.lang-select[open] .chev svg{transform:rotate(180deg)}
.lang-options{display:grid;gap:2px;max-height:46vh;overflow-y:auto;overscroll-behavior:contain;margin-top:6px;padding:4px;border:1px solid var(--sheet);background:#0d0a1c}
.lang-options button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 10px;border:0;background:transparent;color:var(--sheet);font:800 .82rem "Courier New",monospace;letter-spacing:.04em;text-align:start;cursor:pointer}
.lang-options button[aria-checked="true"]{background:var(--sheet);color:#0d0418}
.lang-flag{flex:none;font-size:1.35rem;line-height:1;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.lang-select span,.lang-options span{unicode-bidi:plaintext}
.legal-links{display:flex;flex-wrap:wrap;gap:10px 14px;margin:16px 0 4px}
.legal-links a{color:var(--sheet);font:800 .74rem "Courier New",monospace;letter-spacing:.05em;text-decoration:none;border-bottom:1px dotted var(--sheet)}
.share-button{width:100%;min-height:52px;margin-top:14px;border:1px solid var(--green);background:#062019;color:var(--green);font:800 .78rem "Courier New",monospace;letter-spacing:.06em}
.panel-share,.panel-install{--sheet:var(--green)}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.share-grid a,.share-grid button{min-height:58px;display:flex;align-items:center;justify-content:center;border:1px solid var(--sheet);background:#062019;color:var(--sheet);font:800 .82rem "Courier New",monospace;letter-spacing:.05em;text-decoration:none}
.share-grid .copy{grid-column:1/-1}
.install-steps{margin:14px 0 0;padding:0;list-style:none;counter-reset:step}
.install-steps li{counter-increment:step;display:grid;grid-template-columns:42px 1fr;align-items:center;min-height:52px;border-bottom:1px dotted #256956;font-family:ui-sans-serif,system-ui,sans-serif;color:#d8e8f2}
.install-steps li:before{content:counter(step,decimal-leading-zero);border:1px solid var(--green);color:var(--green);padding:6px;text-align:center;margin-inline-end:8px;font:800 .8rem "Courier New",monospace}
.offline-note{position:absolute;left:14px;right:14px;bottom:78px;z-index:22;border:1px solid var(--orange);background:#231606;color:var(--orange);font:800 .72rem "Courier New",monospace;padding:8px;text-align:center}
.controls span,.card-meta span,.source-row span,.statusbar span,.brand-promise,.panel-meta,.sheet-close,.lang-list button{unicode-bidi:plaintext}
[dir=rtl] .brand-promise{border-left:0;border-right:1px solid #367494;padding-left:0;padding-right:12px}
[dir=rtl] .install-button{margin-left:0;margin-right:auto}
[dir=rtl] .tip-toggle{text-align:right}[dir=rtl] .tip-how{padding:0 42px 12px 4px}[dir=rtl] .action-list b{margin-right:0;margin-left:8px}
.desk{display:none}
.notice-visual{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--tone),transparent 70%),transparent 62%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 22px),#06111d}
.notice-visual span{font:900 clamp(5rem,30vw,9rem) Impact,"Arial Black",sans-serif;color:var(--tone);text-shadow:0 0 30px color-mix(in srgb,var(--tone),transparent 50%)}
.notice-card .headline-block p+p{margin-top:8px}
.notice-dialog{width:min(92vw,460px);padding:0;border:1px solid var(--tone);background:linear-gradient(180deg,#081321,#030a12);color:var(--ink)}
.notice-dialog::backdrop{background:rgba(0,0,0,.78)}
.notice-box{padding:16px 18px 20px}
.notice-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px dotted color-mix(in srgb,var(--tone),transparent 40%);padding-bottom:10px;margin-bottom:12px}
.notice-label{color:var(--tone);font:900 .82rem "Courier New",monospace;letter-spacing:.08em}
.notice-close{width:44px;height:44px;border:1px solid var(--tone);background:#06131f;color:var(--tone);font:900 1.4rem "Courier New",monospace;cursor:pointer}
.notice-dialog h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;font-size:clamp(1.6rem,7vw,2.2rem);line-height:1;text-transform:uppercase;margin:0 0 10px}
.notice-dialog p{font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5;color:#d8e8f2;margin:0 0 10px}
/* the image of the case of a notice: a wide strip, so the popup stays short on the phone */
.notice-art{margin:2px 0 12px;border:1px solid color-mix(in srgb,var(--tone),transparent 45%);background:#06111d;overflow:hidden}
.notice-art img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover}
.notice-button{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:14px;border:1px solid var(--tone);background:var(--tone);color:#03110e;font:900 .8rem "Courier New",monospace;letter-spacing:.05em;text-decoration:none}
body.doc-page{display:block}
.doc{width:min(100%,760px);min-height:100dvh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 18px 40px;background:linear-gradient(180deg,rgba(8,20,34,.97),rgba(3,10,18,.99));border-inline:1px solid #17374b}
.doc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #285b78;padding-bottom:12px;margin-bottom:18px}
.doc-head .brand{color:var(--ink);text-decoration:none;font-size:1.8rem}
.doc-head a.back{color:var(--cyan);text-decoration:none;font:800 .76rem "Courier New",monospace;letter-spacing:.05em}
.doc h1{font-family:Impact,"Arial Black",sans-serif;font-size:clamp(1.8rem,7vw,2.6rem);text-transform:uppercase;letter-spacing:.02em;margin:0 0 16px}
.doc h2,.doc h3{color:var(--cyan);margin:22px 0 8px}
.doc p,.doc li{font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.6;color:#d8e8f2}
.doc a{color:var(--cyan)}
.doc-foot{margin-top:28px;border-top:1px dotted #285b78;padding-top:12px;display:flex;flex-wrap:wrap;gap:12px}
.doc-foot a{font:800 .74rem "Courier New",monospace;letter-spacing:.05em;color:var(--cyan);text-decoration:none}
.chooser{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.panel p.setting-note{margin:0 0 10px;font-size:.86rem;color:#ddd3f2}
.push-list{display:grid;gap:8px}
.push-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:8px 10px;border:1px solid var(--sheet);background:#0d0a1c;color:var(--sheet);text-align:start;font:inherit;cursor:pointer}
.push-list button:disabled{opacity:.6}
.push-copy{flex:1;display:grid;gap:3px;min-width:0}
.push-copy b{font:800 .82rem "Courier New",monospace;letter-spacing:.04em}
.push-copy small{font:400 .8rem/1.35 ui-sans-serif,system-ui,sans-serif;color:#ddd3f2}
.push-mark{flex:none;min-width:52px;padding:6px 8px;border:1px solid var(--sheet);text-align:center;font:900 .74rem "Courier New",monospace;letter-spacing:.06em}
.push-list button[aria-checked="true"] .push-mark{background:var(--sheet);color:#0d0418}
.panel p.push-note{margin-top:10px;padding:8px 10px;border:1px dotted var(--sheet);font-size:.82rem;color:#ddd3f2}
.push-copy b,.push-copy small,.push-mark,.panel p.setting-note,.panel p.push-note{unicode-bidi:plaintext}
.chooser a{display:block;border:1px solid var(--cyan);padding:12px;color:var(--cyan);text-decoration:none;font:800 .86rem "Courier New",monospace}
@media (min-width:1100px){
  html,body{height:auto;min-height:100%}body{display:block;padding:0}
  .app{display:none}
  .desk{display:block;width:min(100%,1320px);margin:0 auto;padding:22px 32px 48px}
  .desk-head{display:flex;align-items:center;gap:18px;border-bottom:1px solid #285b78;padding:0 0 14px}
  .desk-head .brand{font-size:2.4rem;text-decoration:none;color:var(--ink)}
  .desk-tagline{color:#9ae6f7;font-size:.72rem;font-weight:900;letter-spacing:.06em}
  .desk-actions{margin-left:auto;display:flex;gap:10px;align-items:center}
  .desk-actions .install-button{margin:0;padding:10px 14px;cursor:pointer}
  .desk-actions .gear{--sheet:var(--violet);cursor:pointer}
  .desk-main{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:22px;margin-top:22px;align-items:start}
  .desk-top{height:auto;grid-template-rows:auto auto auto auto auto}
  .desk-top .visual{aspect-ratio:16/9;max-height:540px}
  .desk-top .headline-block h1{font-size:3rem}
  .desk-story{padding:4px 18px 18px;border-top:1px dotted color-mix(in srgb,var(--tone),transparent 55%)}
  .desk-story h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;font-size:2rem;text-transform:uppercase;margin:16px 0 12px;letter-spacing:.02em}
  .desk-story h3{color:var(--tone);margin:22px 0 8px;font-size:1rem}
  .desk-story p{font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.65;color:#d8e8f2;margin:0 0 12px}
  .desk-story .story-date{color:var(--tone);font:900 .84rem "Courier New",monospace;letter-spacing:.04em}
  .desk-story .source-link{display:flex;justify-content:space-between;gap:10px;padding:14px 0;border-bottom:1px dotted var(--tone);color:var(--tone);font-weight:700;text-decoration:none;font-size:.82rem}
  .desk-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .desk-share a,.desk-share button{border:1px solid var(--green);background:#062019;color:var(--green);font:800 .74rem "Courier New",monospace;letter-spacing:.05em;padding:10px 12px;text-decoration:none;cursor:pointer}
  .desk-protect{--sheet:var(--green);position:sticky;top:18px;border:1px solid var(--green);background:linear-gradient(180deg,#081321,#030a12);padding:16px 18px}
  .desk-protect .panel-meta{padding:0 0 12px;margin-bottom:12px}
  .desk-protect h2{font-family:Impact,"Arial Black",sans-serif;font-weight:400;font-size:1.9rem;line-height:1;text-transform:uppercase;margin:0 0 10px}
  .desk-protect p{font-family:ui-sans-serif,system-ui,sans-serif;line-height:1.5;color:#d8e8f2;margin:0}
  .desk-protect h3{color:var(--green);font-size:1rem}
  .desk-protect .tip-how p{font-size:.9rem;color:#d4f7ec}
  .desk-protect .disclaimer{margin-top:10px;font-size:.74rem;color:#9cc9bd}
  .desk-section{margin-top:34px}
  .desk-section h2{color:var(--cyan);font:900 1rem "Courier New",monospace;letter-spacing:.08em;border-bottom:1px dotted #285b78;padding-bottom:10px;margin:0 0 14px}
  .desk-section h2.tone-magenta{color:var(--magenta)}.desk-section h2.tone-orange{color:var(--orange)}.desk-section h2.tone-violet{color:var(--violet)}
  .desk-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}
  .desk-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .desk-card{display:grid;grid-template-rows:auto auto 1fr;text-align:left;border:1px solid var(--tone);background:linear-gradient(180deg,rgba(8,23,37,.88),rgba(4,13,22,.96));color:var(--ink);padding:0;cursor:pointer;font:inherit;overflow:hidden}
  .desk-card[aria-current="true"]{box-shadow:0 0 0 2px var(--tone)}
  .desk-card .card-meta{font-size:.72rem;padding:8px 10px}
  .desk-card .thumb{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;background:#06111d}.desk-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .desk-card b{font-family:Impact,"Arial Black",sans-serif;font-weight:400;font-size:1.25rem;line-height:1;text-transform:uppercase;padding:10px;overflow-wrap:break-word}
  .desk-foot{margin-top:40px;border-top:1px solid #285b78;padding-top:14px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;color:#9db5c7;font-size:.8rem}
  .desk-foot a{color:var(--cyan);text-decoration:none;font:800 .76rem "Courier New",monospace;letter-spacing:.05em}
  .desk-notice{display:flex;align-items:center;gap:16px;margin-top:18px;border:1px solid var(--tone);background:linear-gradient(90deg,color-mix(in srgb,var(--tone),transparent 88%),#030a12);padding:12px 14px}
  .desk-notice>div{flex:1}.desk-notice b{display:block;font:400 1.4rem Impact,"Arial Black",sans-serif;text-transform:uppercase;margin:4px 0}
  .desk-notice p{font-family:ui-sans-serif,system-ui,sans-serif;color:#d8e8f2;margin:0}
  [dir=rtl] .desk-actions{margin-left:0;margin-right:auto}[dir=rtl] .desk-card{text-align:right}
}

/* legal pages: the note above an automatic translation */
.doc-note{border:1px solid #367494;border-left-width:4px;padding:10px 14px;margin:0 0 18px;font-size:.9rem;color:#b5f0ff}
[dir=rtl] .doc-note{border-left-width:1px;border-right-width:4px}

/* the bell in place of the install button (install the app, later: switch push messages on) and in the push hint: it
   swings three times in hard pixel steps, then rests; still with reduced motion */
.bell-button{margin-left:auto;display:grid;place-items:center;width:42px;height:42px;flex:none;border:1px solid var(--green);background:#09241f;color:var(--green);padding:0;z-index:21;cursor:pointer}
.bell-button[hidden]{display:none}
[dir=rtl] .bell-button{margin-left:0;margin-right:auto}
.bell-button svg,.push-hint-bell svg,.bell-art svg{display:block;width:24px;height:24px;transform-origin:50% 12%;animation:bell-ring 4.8s steps(1,end) infinite}
@keyframes bell-ring{0%{transform:rotate(0)}3%{transform:rotate(-18deg)}6%{transform:rotate(18deg)}9%{transform:rotate(-18deg)}12%{transform:rotate(18deg)}15%{transform:rotate(-12deg)}18%{transform:rotate(12deg)}21%,100%{transform:rotate(0)}}
.bell-art{display:grid;place-items:center;width:64px;height:64px;margin:4px 0 12px;border:1px solid var(--green);color:var(--green)}
.bell-art svg{width:40px;height:40px}
.bell-later{display:block;width:100%;min-height:44px;margin-top:8px;border:1px dotted #2c8f77;background:transparent;color:#9cc9bd;font:900 .76rem "Courier New",monospace;letter-spacing:.05em;cursor:pointer}
.bell-dialog .notice-button{width:100%;cursor:pointer}
@media (min-width:1100px){.desk-actions .bell-button{margin:0}}

/* the hint below "What can I do?" for everyone without push messages: short, with the ringing bell, closed for good with × */
.push-hint{position:relative;display:grid;grid-template-columns:42px 1fr;align-items:center;gap:6px 12px;margin-top:12px;border:1px solid var(--green);background:#07201b;padding:10px 12px}
.push-hint-bell{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--green);color:var(--green)}
.push-hint-copy{display:flex;flex-direction:column;gap:3px;min-width:0;padding-inline-end:26px}
.push-hint-copy b{font:900 .78rem "Courier New",monospace;letter-spacing:.06em;color:var(--green)}
.push-hint-copy span{font:.8rem/1.35 ui-sans-serif,system-ui,sans-serif;color:#d8e8f2}
.push-hint-on{grid-column:2;justify-self:start;min-height:38px;border:1px solid var(--green);background:var(--green);color:#03110e;font:900 .74rem "Courier New",monospace;letter-spacing:.05em;padding:0 14px;cursor:pointer}
.push-hint-close{position:absolute;top:0;inset-inline-end:0;width:36px;height:36px;border:0;background:transparent;color:var(--green);font:900 1.2rem "Courier New",monospace;cursor:pointer}
/* the switches the bell and the hint lead to light up briefly */
.push-setting.is-pointed{animation:point-out 1.2s steps(3,end) 2}
@keyframes point-out{0%,100%{box-shadow:none}50%{box-shadow:0 0 0 2px var(--green),0 0 0 5px rgba(80,245,197,.25)}}
@media (prefers-reduced-motion:reduce){.bell-button svg,.push-hint-bell svg,.bell-art svg,.push-setting.is-pointed{animation:none}}

/* brand: the A of "AI" carries the four bars of the logo and stands exactly as tall as the I (cap height of the font, 0.59 em) */
.brand-word{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.brand-mark{display:inline-block;height:.59em;width:auto;vertical-align:baseline;margin-right:.02em;overflow:visible;filter:drop-shadow(0 0 6px rgba(73,231,255,.22))}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* first-visit guide (job 26): the card peeks up and the existing FULL NEWS button pulses — three 5-second cycles,
   no new element; with reduced motion nothing moves (the guide never starts there anyway) */
.guide-on .news-card{animation:guidePeek 5s ease-in-out 3}
@keyframes guidePeek{0%,4%,20%,100%{transform:translateY(0)}9%{transform:translateY(-26px)}14%{transform:translateY(0)}17%{transform:translateY(-10px)}}
.guide-pulse{animation:guidePulse 5s ease-in-out 3}
@keyframes guidePulse{0%,24%,68%,100%{box-shadow:0 0 0 rgba(96,130,255,0);transform:scale(1)}32%,50%{box-shadow:0 0 20px rgba(96,130,255,.85),inset 0 0 12px rgba(96,130,255,.3);transform:scale(1.05)}41%,59%{box-shadow:0 0 5px rgba(96,130,255,.25);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.guide-on .news-card,.guide-pulse{animation:none}}

/* the install button at the end of the full story (job 26): the same look as the buttons around it, in the install green */
.install-cta{border-color:#2f9e5f;color:#5dff7c}