/* Petty.app tokens
   palette: wallpaper #FFD400 · teal #26C4AF / deep #0E8F7E · lavender #9B7FC7 (Petty+ accent)
            iOS grouped bg #F2F2F7 · card #FFFFFF · separator #D1D1D6 · secondary text #6C6C70
            iOS blue #007AFF (GET) · badge red #FF3B30 · ink #111111
   type:    M PLUS Rounded 1c (500/700/800/900) for UI, Sometype Mono (400/600) for versions + CA
   space:   4 8 12 16 24 32 48 px
   radius:  squircle 22.4% · card 14px · sheet 28px · pill 999px
   motion:  one idiom, iOS sheet spring cubic-bezier(.32,.72,0,1) at 280ms */
@font-face{font-family:"MRounded";src:url(assets/fonts/m-plus-rounded-1c-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"MRounded";src:url(assets/fonts/m-plus-rounded-1c-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"MRounded";src:url(assets/fonts/m-plus-rounded-1c-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"MRounded";src:url(assets/fonts/m-plus-rounded-1c-latin-900-normal.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"SMono";src:url(assets/fonts/sometype-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SMono";src:url(assets/fonts/sometype-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --yellow:#FFD400; --yellow-deep:#E6BE00;
  --teal:#26C4AF; --teal-deep:#0E8F7E; --lav:#9B7FC7;
  --bg:#F2F2F7; --card:#FFFFFF; --sep:#D1D1D6; --sec:#6C6C70; --ink:#111111;
  --blue:#007AFF; --red:#FF3B30;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --r-card:14px; --r-sheet:28px; --sq:22.4%;
  --spring:cubic-bezier(.32,.72,0,1); --t:280ms;
  --ui:"MRounded",ui-rounded,system-ui,sans-serif; --mono:"SMono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--ui);font-weight:500;color:var(--ink);background:var(--yellow);
  background-image:radial-gradient(rgba(17,17,17,.07) 1.5px,transparent 1.6px);background-size:22px 22px;
  line-height:1.45;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer}
code,.mono{font-family:var(--mono)}
.muted{color:var(--sec)}
h1,h2{margin:0;font-weight:900;letter-spacing:-.01em}
h2{font-size:22px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}

/* status bar */
.statusbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);padding:10px 16px;font-weight:800;font-size:15px;background:rgba(255,212,0,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sb-time{font-variant-numeric:tabular-nums;min-width:48px}
.sb-island{background:#111;color:#fff;border-radius:999px;padding:5px 14px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.sb-right{display:flex;gap:var(--s2);align-items:center}
.sb-batt{border:2px solid var(--ink);border-radius:5px;padding:0 5px;font-size:11px;position:relative;
  background:linear-gradient(90deg,var(--red) 8%,transparent 8%)}

/* home screen */
.home{padding:var(--s6) var(--s4) var(--s5);max-width:1080px;margin:0 auto}
.home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,84px));justify-content:center;gap:var(--s5) var(--s4)}
.hs-icon{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;background:none;border:0;padding:0;color:var(--ink)}
.hs-icon .sq{position:relative;width:64px;height:64px;border-radius:var(--sq);display:block}
.hs-dim .sq{background:rgba(255,255,255,.45);border:2px dashed rgba(17,17,17,.25)}
.hs-dim .lbl{opacity:.55}
.hs-petty .sq img{width:64px;height:64px;border-radius:var(--sq);border:2.5px solid var(--ink);object-fit:cover}
.hs-petty:active .sq{transform:scale(.92)}
.hs-icon .sq{transition:transform var(--t) var(--spring)}
.hs-petty.wiggle .sq{animation:wig .5s var(--spring)}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}}
.badge{position:absolute;top:-8px;right:-12px;background:var(--red);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:1px 7px;border:2px solid var(--yellow)}
.lbl{font-size:12px;font-weight:700}
.home-hint{text-align:center;margin:var(--s5) 0 0;font-weight:800;font-size:15px}

/* the sheet */
.sheet{position:relative;max-width:1080px;margin:0 auto;background:var(--bg);border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:var(--s3) var(--s4) var(--s7);box-shadow:0 -2px 0 var(--ink);min-height:60vh}
.grabber{display:block;width:40px;height:5px;border-radius:999px;background:var(--sep);margin:0 auto var(--s5)}
.listing-head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);align-items:start}
.app-icon{width:96px;height:96px;border-radius:var(--sq);border:3px solid var(--ink);object-fit:cover;box-shadow:0 6px 0 var(--yellow-deep)}
.listing-head h1{font-size:28px;line-height:1.1}
.subtitle{margin:4px 0 2px;color:var(--sec);font-size:15px}
.dev{margin:0;color:var(--blue);font-size:14px;font-weight:700}
.lh-actions{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap}
.btn-get{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;font-weight:900;font-size:16px;letter-spacing:.02em;padding:7px 26px;border-radius:999px;transition:transform var(--t) var(--spring)}
.btn-get:active{transform:scale(.94)}
.iap{font-size:11px;color:var(--sec);font-weight:700}
.bundle{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s3);background:var(--card);border:1px solid var(--sep);border-radius:12px;padding:6px 6px 6px 10px;max-width:100%}
.bundle-k{font-size:10px;font-weight:800;color:var(--sec);text-transform:uppercase;white-space:nowrap}
.bundle-v{flex:1;min-width:0;font-size:13px;overflow-wrap:anywhere;line-height:1.3}
.bundle-copy{border:0;background:var(--bg);color:var(--blue);font-weight:800;font-size:13px;border-radius:8px;padding:5px 10px}
.bundle.copied .bundle-copy{background:var(--teal);color:#fff}

.stats{list-style:none;margin:var(--s5) 0 0;padding:var(--s3) 0;display:flex;overflow-x:auto;border-top:1px solid var(--sep);border-bottom:1px solid var(--sep);scrollbar-width:none}
.stats li{flex:1 0 96px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 var(--s2);border-right:1px solid var(--sep);text-align:center}
.stats li:last-child{border-right:0}
.stats small{font-size:10px;font-weight:800;color:var(--sec);letter-spacing:.04em}
.stats strong{font-size:20px;font-weight:900;color:#3a3a3c}
.stats span{font-size:12px;color:var(--sec)}
.stars{--n:1;font-size:12px;letter-spacing:1px}
.stars::before{content:"\2605\2605\2605\2605\2605";background:linear-gradient(90deg,var(--sec) calc(var(--n)*20%),#D1D1D6 0);-webkit-background-clip:text;background-clip:text;color:transparent}
.stars.s2{--n:2}

.block{margin-top:var(--s6)}
.block-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.block p{margin:var(--s2) 0}

/* screenshots */
.shots{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s3) 0 var(--s2);margin-top:var(--s2)}
.shot{flex:0 0 220px;height:420px;margin:0;scroll-snap-align:start;border-radius:22px;border:2.5px solid var(--ink);overflow:hidden;display:flex;flex-direction:column;position:relative}
.shot figcaption{font-weight:900;font-size:21px;line-height:1.15;padding:var(--s5) var(--s4) 0;z-index:1}
.shot img{margin:auto auto 0;width:92%}
.shot-y{background:var(--yellow)}
.shot-t{background:var(--teal);color:#fff}
.shot-t .shot-hand{width:70%;margin:auto;animation:talk 1.8s var(--spring) infinite alternate}
@keyframes talk{to{transform:translateX(10px) rotate(-6deg)}}
.shot-l{background:var(--lav);color:#fff}
.shot-l .shot-wide{width:auto;height:62%;max-width:none;object-fit:cover;object-position:78% 50%;margin:auto 0 0 -150px}
.shot-w{background:#fff}
.shot-w .shot-x{width:60%;margin:auto;border-radius:var(--sq);border:2.5px solid var(--ink)}

.versions{margin-top:var(--s3);background:var(--card);border-radius:var(--r-card);padding:var(--s3) var(--s4)}
.versions summary{color:var(--blue);font-weight:800;cursor:pointer}
.versions ol{list-style:none;padding:0;margin:var(--s3) 0 0}
.versions li{padding:var(--s2) 0;border-top:1px solid var(--sep);font-size:14px}
.versions code{display:inline-block;min-width:52px;color:var(--teal-deep);font-weight:600}

/* ratings + reviews */
.rr-grid{display:grid;gap:var(--s4);margin-top:var(--s3)}
.rating-card{background:var(--card);border-radius:var(--r-card);padding:var(--s4);align-self:start}
.big-score{display:flex;align-items:baseline;gap:var(--s2)}
.big-score strong{font-size:56px;font-weight:900;line-height:1}
.big-score small{color:var(--sec);font-weight:800}
.histo{list-style:none;padding:0;margin:var(--s3) 0}
.histo li{display:grid;grid-template-columns:14px 1fr;align-items:center;gap:var(--s2);font-size:11px;color:var(--sec);font-weight:800}
.histo i{display:block;height:5px;border-radius:999px;background:linear-gradient(90deg,#3a3a3c var(--w),#E5E5EA 0)}
.tap-rate{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;border-top:1px solid var(--sep);padding-top:var(--s3)}
petty-stars{display:inline-flex}
petty-stars button{border:0;background:none;font-size:26px;color:#C7C7CC;padding:2px 3px;transition:color .15s,transform var(--t) var(--spring)}
petty-stars button.on{color:var(--blue)}
petty-stars.snap button{transform:scale(.8)}
.rate-note{font-size:13px;margin:var(--s2) 0 0}
.btn-write{margin-top:var(--s3);width:100%;border:0;border-radius:12px;background:var(--teal);color:#fff;font-weight:900;font-size:16px;padding:12px;box-shadow:0 4px 0 var(--teal-deep);transition:transform var(--t) var(--spring),box-shadow var(--t) var(--spring)}
.btn-write:active{transform:translateY(3px);box-shadow:0 1px 0 var(--teal-deep)}

.feed{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
petty-review{display:block;position:relative;background:var(--card);border-radius:var(--r-card);padding:var(--s4) 44px var(--s4) var(--s4);
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;will-change:transform}
petty-review:not(:defined){padding-right:var(--s4)}
petty-review:not(:defined)::before{content:attr(title);display:block;font-weight:900;margin-bottom:4px}
petty-review.dragging{cursor:grabbing;transition:none!important}
petty-review.settle{transition:transform var(--t) var(--spring),opacity var(--t) var(--spring)}
petty-review.fresh{animation:drop .42s var(--spring)}
@keyframes drop{from{transform:translateY(-14px) scale(.97);opacity:0}}
petty-review.collapse{transition:height var(--t) var(--spring),margin var(--t) var(--spring),padding var(--t) var(--spring);overflow:hidden}
.rv-top{display:flex;flex-direction:column}
.rv-title{font-weight:900;font-size:16px;margin:0}
.rv-meta{font-size:12px;color:var(--sec)}
.rv-stars{margin:2px 0 var(--s2);color:#FF9500;font-size:13px;letter-spacing:1px}
.rv-body{margin:0;font-size:15px}
.rv-resp{margin:var(--s3) 0 0;padding-left:var(--s3);border-left:3px solid var(--teal);font-size:14px}
.rv-resp b{display:block;font-size:12px;color:var(--sec)}
.rv-x{position:absolute;top:10px;right:10px;width:26px;height:26px;border:0;border-radius:50%;background:var(--bg);color:var(--sec);font-weight:900;line-height:1}
.feed-empty{text-align:center;font-weight:800;padding:var(--s5) 0}

/* information */
.info{margin:var(--s3) 0 0;background:var(--card);border-radius:var(--r-card);padding:0 var(--s4)}
.info div{display:flex;justify-content:space-between;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--sep)}
.info div:last-child{border-bottom:0}
.info dt{color:var(--sec)}
.info dd{margin:0;text-align:right;min-width:0;overflow-wrap:anywhere}
.links{margin-top:var(--s4);background:var(--card);border-radius:var(--r-card);overflow:hidden}
.links a{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s4);text-decoration:none;font-weight:700;border-bottom:1px solid var(--sep)}
.links a:last-child{border-bottom:0}
.links a:active{background:#E5E5EA}
.links a span:nth-child(2){flex:1}
.links i{font-style:normal;color:#C7C7CC;font-size:24px;line-height:1}
.li-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:10px;font-weight:900;flex:0 0 32px;border:1.5px solid var(--ink)}
.li-get{background:var(--blue);color:#fff}

/* notification toggle */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);background:var(--card);border-radius:var(--r-card);padding:12px var(--s4);margin-top:var(--s3);cursor:pointer;position:relative}
.toggle-row small{display:block;font-size:13px}
.toggle-row input{position:absolute;opacity:0;width:1px;height:1px}
.switch{flex:0 0 51px;height:31px;border-radius:999px;background:#E9E9EA;position:relative;transition:background var(--t) var(--spring)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform var(--t) var(--spring)}
.toggle-row input:checked+.switch{background:#34C759}
.toggle-row input:checked+.switch::after{transform:translateX(20px)}
.toggle-row input:focus-visible+.switch{outline:3px solid var(--blue);outline-offset:2px}

.foot{margin-top:var(--s7);text-align:center;font-size:13px}
.foot p{margin:var(--s1) 0}

/* toasts (iOS banners) */
.toasts{position:fixed;top:50px;left:0;right:0;z-index:60;display:flex;flex-direction:column;align-items:center;gap:var(--s2);padding:0 var(--s3);pointer-events:none}
petty-toast{pointer-events:auto;display:flex;gap:var(--s3);align-items:center;width:min(100%,380px);background:rgba(245,245,247,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:20px;padding:10px 14px;box-shadow:0 8px 24px rgba(17,17,17,.18),0 0 0 1.5px rgba(17,17,17,.9);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;animation:tin .42s var(--spring)}
@keyframes tin{from{transform:translateY(-120%);opacity:0}}
petty-toast.settle{transition:transform var(--t) var(--spring),opacity var(--t) var(--spring)}
petty-toast img{width:38px;height:38px;border-radius:var(--sq);border:1.5px solid var(--ink);flex:0 0 38px}
.t-body{flex:1;min-width:0}
.t-head{display:flex;justify-content:space-between;font-size:12px;color:var(--sec);font-weight:800}
.t-msg{font-size:14px;font-weight:700;margin:1px 0 0}

/* hand stamp */
.hand-stamp{position:fixed;left:50%;top:50%;z-index:70;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-12deg)}
.hand-stamp img{width:120px;filter:drop-shadow(0 6px 0 rgba(17,17,17,.9))}
.hand-stamp span{background:var(--ink);color:var(--yellow);font-weight:900;font-size:15px;padding:4px 12px;border-radius:999px}
.hand-stamp.show{animation:stamp .75s var(--spring)}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) scale(.4) rotate(-14deg)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(4deg)}70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9) rotate(0)}}

.noscript{position:fixed;bottom:0;left:0;right:0;margin:0;background:var(--ink);color:var(--yellow);text-align:center;padding:10px;font-weight:800}

@media (min-width:920px){
  .home{padding-top:var(--s7)}
  .home-grid{grid-template-columns:repeat(4,96px);gap:var(--s6)}
  .hs-icon .sq,.hs-petty .sq img{width:80px;height:80px}
  .sheet{padding:var(--s4) var(--s7) var(--s7);margin-bottom:0}
  .listing-head{grid-template-columns:160px minmax(0,1fr);gap:var(--s5)}
  .app-icon{width:160px;height:160px}
  .listing-head h1{font-size:40px}
  .subtitle{font-size:18px}
  .bundle{max-width:420px}
  .shot{flex-basis:250px;height:470px}
  .rr-grid{grid-template-columns:320px 1fr;gap:var(--s5)}
  .rating-card{position:sticky;top:64px}
  .toasts{align-items:flex-end;padding-right:var(--s5)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}