/* Offliner home page. Ported from the Claude Design canvas. */
[v-cloak]{display:none}
body{margin:0;background:#F3EEE4;font-family:'Avenir Next','Avenir','Nunito Sans','Helvetica Neue',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:#16130F}a:hover{color:#5B5348}
*{box-sizing:border-box}
button{font:inherit;cursor:pointer}
.cta{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(22,19,15,.55)}
.cta:active{transform:translateY(0) scale(.98)}
.cta .arr{display:inline-block;transition:transform .18s ease}
.cta:hover .arr{transform:translateX(4px)}
.lnk{text-decoration:none;position:relative}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.lnk:hover::after{transform:scaleX(1)}
.lift{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.lift:hover{transform:translateY(-4px);box-shadow:0 24px 48px -28px rgba(22,19,15,.45)}
.tab{transition:background-color .2s ease,color .2s ease}
.tab:hover{background:rgba(22,19,15,.035)}
.press{transition:transform .12s ease,opacity .12s ease}
.press:active{transform:scale(.96);opacity:.85}
@keyframes lamp{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,90,31,.55)}50%{opacity:.6;box-shadow:0 0 0 7px rgba(255,90,31,0)}}
.lamp{animation:lamp 2.2s ease-in-out infinite}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq{animation:marq 40s linear infinite}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.r1{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
.r2{animation:rise .9s .12s cubic-bezier(.2,.8,.2,1) both}
.r3{animation:rise .9s .24s cubic-bezier(.2,.8,.2,1) both}
.r4{animation:rise 1.1s .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes shakeA{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes shakeB{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.shakeA{animation:shakeA .42s ease}
.shakeB{animation:shakeB .42s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fade{animation:fadein .4s cubic-bezier(.2,.8,.2,1) both}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
.sheet{animation:sheet .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes glow{0%,100%{opacity:.55}50%{opacity:.9}}
.glow{animation:glow 5s ease-in-out infinite}
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:#DCD3C3;outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#16130F;border:6px solid #F3EEE4;box-shadow:0 0 0 1px #16130F,0 6px 16px -6px rgba(22,19,15,.6);cursor:grab}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#16130F;border:6px solid #F3EEE4;box-shadow:0 0 0 1px #16130F;cursor:grab}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #FF5A1F;outline-offset:3px}
.grain{background-image:radial-gradient(rgba(22,19,15,.05) 1px,transparent 1px);background-size:3px 3px}
/* ---------- iPhone + Offliner app tokens (from the shipped SwiftUI screens) ---------- */
/* iPhone 17 Pro frame: titanium band, 7px black border, Dynamic Island, hardware buttons, status bar. */
.ph{position:relative;flex:none;width:320px;height:664px;border-radius:58px;padding:3px;
  background:linear-gradient(90deg,#28282b 0%,#7d7d83 1.1%,#3c3c40 2.4%,#1d1d20 5%,#1d1d20 95%,#3c3c40 97.6%,#7d7d83 98.9%,#28282b 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.55),0 60px 100px -50px rgba(22,19,15,.85),0 30px 60px -34px rgba(22,19,15,.45)}
.ph::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 2.2%,rgba(255,255,255,0) 97.8%,rgba(255,255,255,.14) 100%)}
.bez{position:relative;z-index:2;width:100%;height:100%;border-radius:55px;background:#030303;padding:7px;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px rgba(255,255,255,.04)}
.scr{position:relative;width:100%;height:100%;border-radius:48px;background:#000;overflow:hidden;color:#FFFFFF;font-family:'Avenir Next','Avenir','Nunito Sans','Helvetica Neue',sans-serif;font-size:14px;line-height:1.3;isolation:isolate}
.isl{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:22}
.isl i{position:absolute;right:9px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3a52 0,#0d1520 45%,#05070a 70%);box-shadow:0 0 0 1.5px #0b0b0d}
.hw{position:absolute;width:3px;border-radius:2px;z-index:0;background:linear-gradient(90deg,#17171a,#606066 55%,#2a2a2d)}
.hw-action,.hw-volup,.hw-voldn{left:-2.5px;border-radius:2px 0 0 2px}
.hw-power,.hw-cam{right:-2.5px;border-radius:0 2px 2px 0;background:linear-gradient(270deg,#17171a,#606066 55%,#2a2a2d)}
.hw-action{top:116px;height:30px}
.hw-volup{top:168px;height:50px}
.hw-voldn{top:228px;height:50px}
.hw-power{top:188px;height:80px}
.hw-cam{top:392px;height:42px;right:-1.5px;width:2px;background:linear-gradient(270deg,#0d0d10,#3a3a40)}
.sb{position:absolute;top:13px;left:0;right:0;height:22px;padding:0 24px 0 36px;display:flex;align-items:center;justify-content:space-between;z-index:21;pointer-events:none;color:#fff;font:600 14.5px/1 -apple-system,'SF Pro Text','Helvetica Neue',Arial,sans-serif;letter-spacing:-.01em}
.sb-r{display:flex;align-items:center;gap:5px}
.sb-r svg{fill:currentColor}
.sb-bat{position:relative;width:24px;height:11.5px;border-radius:3.6px;border:1px solid rgba(255,255,255,.42);padding:1.5px;margin-right:2px}
.sb-bat::after{content:"";position:absolute;right:-3.5px;top:3.2px;width:1.6px;height:4px;border-radius:0 1px 1px 0;background:rgba(255,255,255,.42)}
.sb-bat-lvl{display:block;width:78%;height:100%;border-radius:1.8px;background:#fff}
.amb{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 50% 0%,rgba(255,90,31,.10),rgba(255,90,31,0) 60%)}
.pad{position:relative;height:100%;padding:52px 16px 92px;display:flex;flex-direction:column;gap:10px}
.card{background:#16161C;border:1px solid rgba(255,255,255,.07);border-radius:22px}
.mut{color:#9C9CA8}
.obtn{border:0;color:#FFFFFF;font-weight:600;border-radius:999px;background:linear-gradient(180deg,#FF7A40 0%,#FF5A1F 55%,#EE4C12 100%);box-shadow:0 10px 26px -10px rgba(255,90,31,.85),inset 0 1px 0 rgba(255,255,255,.25)}
.tile{border:1px solid rgba(255,255,255,.07);background:#1A1A21;border-radius:16px;color:#FFFFFF;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.tabbar{position:absolute;left:12px;right:12px;bottom:12px;height:62px;border-radius:32px;background:rgba(30,30,36,.92);border:1px solid rgba(255,255,255,.07);backdrop-filter:blur(12px);display:flex;align-items:center;padding:5px;gap:2px;z-index:10}
.tb{flex:1;height:52px;border:0;border-radius:26px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:500;color:#9C9CA8;transition:background-color .2s ease,color .2s ease}
.tb.on{background:#2E2E36;color:#FFFFFF}
.chipo{border:1px solid rgba(255,255,255,.12);background:#1A1A21;color:#FFFFFF;border-radius:999px;font-weight:600;transition:background-color .2s ease,border-color .2s ease}
.chipo.on{background:#FF5A1F;border-color:#FF5A1F}
.tgl{width:51px;height:31px;border-radius:999px;border:0;padding:2px;display:flex;transition:background-color .2s ease}
.knob{width:27px;height:27px;border-radius:50%;background:#FFFFFF;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s ease}
@media (max-width:860px){.navlinks{display:none !important}}
@media (prefers-reduced-motion:reduce){.marq,.lamp,.r1,.r2,.r3,.r4,.fade,.shakeA,.shakeB,.sheet,.glow{animation:none !important}}