:root{color-scheme:light;--paper:#f8f7f2;--ink:#252d27;--muted:#646b63;--green:#285e48;--line:#dedfd5;--white:#fffefa}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:5px;border-radius:4px}
::selection{background:#d5e7c6}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;left:20px;top:-100px;z-index:20;background:var(--green);color:white;padding:12px 20px;border-radius:8px}
.skip-link:focus{top:16px}
.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;font-size:24px;font-weight:700;letter-spacing:-1.1px;line-height:1}
.brand img{margin-right:10px}
.brand>span{font-weight:400;color:var(--muted)}
nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:550}
nav a:hover,.site-footer>a:hover{color:var(--green)}
.github-link{display:flex;gap:17px;align-items:center;border:1px solid #cdd0c5;border-radius:7px;padding:8px 15px}
.hero{display:grid;grid-template-columns:1.7fr 1fr;gap:20px;align-items:center;padding-top:72px;padding-bottom:80px}
.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:650;color:var(--muted);margin:0 0 18px;line-height:1.5}
.hero .eyebrow{display:flex;align-items:center;gap:9px}
.small-star{font-size:20px;line-height:1;color:var(--green)}
h1{font-size:clamp(42px,4.75vw,66px);font-weight:550;letter-spacing:-3.2px;line-height:1.13;margin:0 0 24px}
h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--green);letter-spacing:-3px}
.intro{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 28px}
.primary-link{display:inline-flex;align-items:center;gap:28px;background:var(--green);color:var(--white);padding:12px 18px;border-radius:6px;font-size:12px;font-weight:550;box-shadow:0 3px 0 #1b403215;transition:background .2s,transform .2s}
.primary-link:hover{background:#1b4634;transform:translateY(-2px)}
.primary-link span{font-size:18px;line-height:1}
.hero-art{height:300px;position:relative;margin-top:-10px}
.orbit{position:absolute;left:50%;top:47%;border:1px solid #dedfd3;border-radius:50%;transform:translate(-50%,-50%)}
.orbit-one{width:225px;height:225px}
.orbit-two{width:340px;height:280px;transform:translate(-50%,-50%) rotate(-28deg);border-style:dashed}
.floating-icon{position:absolute;display:grid;place-items:center;border-radius:23%;box-shadow:0 10px 22px #343f2815;transition:transform .3s}
.floating-icon img{border-radius:23%;width:100%;height:100%;object-fit:cover}
.float-sandfort{width:104px;height:104px;left:34%;top:30%;transform:rotate(-9deg)}
.float-bunyi{width:78px;height:78px;left:9%;top:9%;transform:rotate(-13deg)}
.float-cuffscan{width:75px;height:75px;right:1%;top:16%;transform:rotate(13deg)}
.float-time{width:67px;height:67px;left:14%;top:68%;transform:rotate(8deg);background:#e5ebdd}
.float-music{width:70px;height:70px;right:12%;top:68%;transform:rotate(-8deg);background:#f3d4b8;font-family:Georgia,serif;font-size:49px;color:#80523e}
.hero-art:hover .float-sandfort{transform:rotate(-4deg) translateY(-4px)}
.mini-clock{width:44px;height:44px;border-radius:50%;background:#fffdf4;position:relative;border:1px solid #cad1c3}
.mini-clock::before,.mini-clock::after{content:"";position:absolute;left:21px;bottom:21px;width:2px;height:16px;border-radius:2px;background:#43533e;transform-origin:bottom;transform:rotate(30deg)}
.mini-clock::after{height:12px;transform:rotate(125deg)}
.art-caption{position:absolute;bottom:-17px;left:0;right:0;text-align:center;font-family:Georgia,serif;font-size:13px;font-style:italic;color:#737969}
.art-dot{position:absolute;width:7px;height:7px;background:#a3ae81;border-radius:50%}
.dot-one{top:3%;left:62%}.dot-two{bottom:28%;right:0;background:#d5a37f;width:5px;height:5px}
.collection{padding-top:33px;border-top:1px solid var(--line)}
.collection-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}
.collection-heading .eyebrow{margin-bottom:7px}
h2{font-size:30px;line-height:1.25;letter-spacing:-1px;font-weight:550;margin:0}
h2>span{color:var(--green)}
.app-count{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);font-size:10px;white-space:nowrap;padding-bottom:5px}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:25px}
.filters button{cursor:pointer;border:1px solid var(--line);border-radius:6px;background:transparent;padding:7px 13px;color:var(--muted);font-size:11px;min-height:36px;transition:background .15s,color .15s}
.filters button:hover{background:#eceee5;color:var(--green)}
.filters button[aria-pressed="true"]{background:#e5ecde;border-color:#d5dfca;color:#304b32;font-weight:600}
.filters button span{display:inline-block;background:#cfdbbf;font-size:9px;margin-left:7px;padding:0 5px;border-radius:3px}
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.app-card{min-width:0;position:relative;display:flex;flex-direction:column;border:1px solid #dedfd5;border-radius:13px;background:var(--white);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.app-card:hover{transform:translateY(-4px);border-color:#b9c5b0;box-shadow:0 9px 25px #33482b0b}
.app-card:focus-within{outline:3px solid var(--green);outline-offset:4px}
.app-card h3 a:focus-visible{outline:none}
.app-card h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.wide{grid-column:span 2}
.is-filtered .wide{grid-column:span 1}
.product-visual{height:238px;flex-shrink:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid #00000006}
.card-body{padding:22px 24px 18px;display:flex;flex-direction:column;flex:1}
.card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.card-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ai-pill,.offline-pill{display:inline-flex;padding:3px 9px;border:1px solid;border-radius:999px;font-size:10px;font-weight:550;line-height:1.5}
.ai-pill{border-color:#bfd8f7;background:#e4f0ff;color:#215c98}
.offline-pill{border-color:#bdddc4;background:#e7f3e9;color:#28653b}
h3{font-size:20px;letter-spacing:-.65px;font-weight:620;line-height:1.3;margin:0}
.card-link-arrow{display:none}
.platform,.status-label{font-size:9px;color:#6a7066;white-space:nowrap}
.status-label{background:#f1ede1;border:1px solid #e6e1d3;color:#746143;padding:3px 7px;border-radius:4px;font-size:8px}
.card-body p{font-size:12px;line-height:1.75;color:var(--muted);margin:12px 0 20px;max-width:62ch}
.card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid #eeeee6;font-size:9px;color:#747a70}
.site-address{color:#475a43;font-weight:550;white-space:nowrap}
.site-address>span{padding-left:4px}
.visual-label{position:absolute;top:22px;left:27px;font-size:9px;letter-spacing:1.8px;color:#7a6f56;font-weight:600}
.sandfort-visual{background:#ede9da;align-items:flex-start;padding:54px 30px 0}
.sandfort-shot{width:440px;max-width:90%;height:auto;flex-shrink:0;border-radius:8px;box-shadow:0 12px 35px #5f533626;transform:rotate(-2deg)}
.bunyi-visual{background:#eceaf6;flex-direction:column;gap:24px}
.visual-app-icon{width:67px;height:67px;border-radius:16px;box-shadow:0 7px 19px #48417620}
.waveform{height:50px;display:flex;align-items:center;gap:5px;color:#8b83b5}
.waveform i{width:4px;height:12px;background:currentColor;border-radius:3px}
.waveform i:nth-child(3n){height:28px}.waveform i:nth-child(4n){height:42px}.waveform i:nth-child(5n){height:23px}.waveform i:nth-child(7n){height:50px}.waveform i:nth-child(2n){opacity:.6}
.visual-caption{position:absolute;bottom:19px;left:8px;right:8px;font-size:9px;color:#78728e;text-align:center;letter-spacing:.15px}
.alunan-visual{background:#f2e4d9;padding-bottom:19px}
.record{width:146px;height:146px;border-radius:50%;background:repeating-radial-gradient(circle,#3d3933 0px,#3d3933 2px,#484139 3px,#484139 4px);display:grid;place-items:center;box-shadow:6px 9px 14px #77543b20;transform:rotate(-16deg)}
.record>span{background:#d0a782;width:62px;height:62px;border-radius:50%;text-align:center;display:flex;flex-direction:column;justify-content:center;font-family:Georgia,serif;color:#44382c;line-height:1.1;font-size:12px}
.record b{font-size:25px;font-weight:400}
.record-orbit{position:absolute;inset:25px 30px 40px;border:1px solid #d8c6b2;border-radius:50%;transform:rotate(-25deg)}
.music-spark{position:absolute;color:#b17c55;font-size:30px}.spark-one{left:42px;top:31px}.spark-two{right:40px;bottom:52px;font-size:22px}
.alunan-visual .visual-caption{color:#826e5e}
.time-visual{background:#e5ebe2;gap:12px;padding:25px 20px}
.clock-preview{background:#f7f7ef;border:1px solid #dbe0d4;width:132px;max-width:48%;border-radius:11px;padding:16px 10px 10px;display:flex;align-items:center;flex-direction:column;box-shadow:0 5px 10px #58664b08;transform:rotate(-5deg)}
.clock-preview>span{font-size:10px;font-weight:600}
.clock-preview small{font-size:8px;letter-spacing:1px;margin-top:7px;opacity:.7}
.clock-face{border:1px solid #d9ddcf;border-radius:50%;width:83px;height:83px;margin-top:12px;position:relative;background:#fcfcf7}
.clock-face>span{position:absolute;font-size:8px;left:0;right:0;text-align:center}
.clock-twelve{top:3px}.clock-six{bottom:3px}
.clock-face i{position:absolute;bottom:40px;left:40px;width:2px;background:#43503c;border-radius:3px;transform-origin:bottom}
.hour-hand{height:22px;transform:rotate(40deg)}.minute-hand{height:29px;transform:rotate(120deg)}
.clock-face::after{position:absolute;content:"";width:5px;height:5px;top:38px;left:38px;background:#8a9e67;border-radius:50%}
.night{background:#35443b;color:#f3f4ed;border-color:#35443b;transform:rotate(6deg) translateY(10px)}
.night .clock-face{background:#29372e;border-color:#5b6859}.night .clock-face i{background:#eef0df}.night .hour-hand{transform:rotate(190deg)}
.cuffscan-visual{background:#e7eef4;justify-content:flex-end;padding-right:25px}
.phone-preview{width:126px;position:absolute;top:25px;right:33px;border:4px solid #32404d;border-radius:19px;overflow:hidden;box-shadow:0 9px 20px #384f6522;transform:rotate(7deg);background:white}
.phone-preview img{width:100%;height:auto}
.cuffscan-icon{position:absolute;top:42px;left:29px;border-radius:14px;box-shadow:0 5px 15px #45628017}
.cuffscan-note{max-width:calc(100% - 215px);position:absolute;left:27px;top:125px;font-family:Georgia,serif;font-style:italic;font-size:18px;line-height:1.4;color:#57718a}
.score-visual{background:#000}
.score-hero{width:100%;height:100%;object-fit:contain}
.whatweek-visual{background:#f2eccf}
.week-paper{position:relative;background:#fffdf1;width:187px;padding:29px 12px 16px;border:1px solid #e0d8b4;border-radius:6px;box-shadow:5px 6px 0 #e3dbb9;transform:rotate(6deg);text-align:center}
.week-paper>span{font-size:7px;letter-spacing:1px;color:#857d59}
.week-paper>strong{display:block;font-family:Georgia,serif;font-size:33px;line-height:1.1;font-weight:400;margin:9px 0;color:#706d39}
.week-paper strong span{font-style:italic;display:block;font-size:17px;line-height:1.25;color:#a39a65}
.calendar-rings{display:flex;position:absolute;top:-8px;left:29px;right:29px;justify-content:space-between}.calendar-rings i{height:19px;width:5px;background:#aaa17b;border-radius:3px}
.week-dots{display:flex;justify-content:center;gap:7px;margin-top:15px}.week-dots i{width:7px;height:7px;border-radius:50%;background:#d4d3ac}.week-dots i:nth-child(odd){background:#919668}
.qr-visual{background:#edf0fb;padding-bottom:18px}
.qr-paper{display:grid;place-items:center;width:142px;height:142px;background:white;border:1px solid #dce2f5;border-radius:14px;box-shadow:5px 7px 0 #dce2f5;transform:rotate(-6deg)}
.qr-paper svg{width:94px;height:94px;color:#2345eb}
.qr-visual .visual-caption{color:#62697e}
.collection-note{font-size:11px;color:#797d71;text-align:center;margin:26px 0 64px}
.about{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:80px 1fr 220px;gap:28px;align-items:center;padding-block:48px}
.about-symbol{font-size:70px;line-height:1;color:#6e8556}.about .eyebrow{margin-bottom:10px}.about h2{font-size:28px}.about p:not(.eyebrow){font-size:13px;line-height:1.8;color:var(--muted);max-width:560px;margin:15px 0}
.text-link{font-size:12px;font-weight:600;color:var(--green);text-decoration:underline;text-underline-offset:5px;text-decoration-color:#b9c6ae}.text-link span{margin-left:6px}
.about-aside{justify-self:end;font-family:Georgia,serif;font-style:italic;font-size:23px;line-height:1.5;color:#8b947b;transform:rotate(-5deg)}
.site-footer{display:flex;gap:30px;align-items:center;padding-block:32px;font-size:11px;color:var(--muted)}
.site-footer .brand{color:var(--ink);font-size:19px}.site-footer p{margin:0 auto 0 0;font-size:10px}.site-footer>a:not(.brand){font-size:10px;white-space:nowrap}
/* Keep the requested app groups together on desktop; filters flow naturally. */
@media(min-width:1101px){
  .app-grid:not(.is-filtered){grid-template-columns:repeat(12,minmax(0,1fr))}
  .app-grid:not(.is-filtered) .app-card{grid-column:span 3}
  .app-grid:not(.is-filtered) .card-sandfort{grid-column:span 8}
  .app-grid:not(.is-filtered) .card-bunyi{grid-column:span 4}
  .app-grid:not(.is-filtered) .card-alunan,.app-grid:not(.is-filtered) .card-cuffscan{grid-column:span 6}
  .card-time .card-heading,.card-score .card-heading,.card-whatweek .card-heading,.card-qr .card-heading{flex-wrap:wrap}
  .card-time .card-footer,.card-score .card-footer,.card-whatweek .card-footer,.card-qr .card-footer{flex-wrap:wrap}
}
@media(min-width:851px) and (max-width:1100px){.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wide{grid-column:span 1}}
@media(min-width:1400px){.hero{padding-block:85px}.hero-art{margin-right:20px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}h1{font-size:51px;letter-spacing:-2.8px}h1 em{letter-spacing:-2.8px}.hero{grid-template-columns:1.6fr 1fr}.hero-art{transform:scale(.86);transform-origin:right center}.card-body{padding-inline:18px}.card-heading{flex-wrap:wrap;gap:5px 9px}.card-footer{flex-wrap:wrap;gap:5px}.clock-preview{padding-inline:7px}.cuffscan-visual .phone-preview{right:17px;width:112px}.cuffscan-note{font-size:15px;left:17px}.cuffscan-icon{left:19px;width:54px;height:54px}.time-visual{padding-inline:12px;gap:8px}.app-grid{gap:18px}.about{grid-template-columns:70px 1fr 170px}}
@media(max-width:850px){.hero{grid-template-columns:1fr .6fr;gap:0;padding-block:60px}h1{font-size:44px;letter-spacing:-2px}h1 em{letter-spacing:-2px}.hero-art{transform:scale(.7);width:320px;justify-self:end;margin-left:-90px}.hero .eyebrow{font-size:8px;letter-spacing:1.3px}.intro{font-size:14px}.app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wide{grid-column:span 1}.sandfort-visual{padding-inline:12px}.sandfort-shot{max-width:none;width:350px}.sandfort-visual .visual-label{left:20px;font-size:8px}.card-heading{flex-wrap:nowrap}h3{font-size:19px}.about{grid-template-columns:55px 1fr;gap:22px}.about-symbol{font-size:56px}.about-aside{display:none}.site-footer{gap:20px}.site-footer p{font-size:9px}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.site-header{height:78px}.brand{font-size:22px}.brand img{width:28px;height:28px;margin-right:8px}nav{gap:18px;font-size:11px}.github-link{border:0;padding:0;gap:5px}nav a:nth-child(2){display:none}.hero{display:block;position:relative;padding-top:44px;padding-bottom:40px}.hero .eyebrow{font-size:8px;letter-spacing:1.1px;margin-bottom:18px}.small-star{font-size:18px}h1{font-size:clamp(35px,8.4vw,50px);letter-spacing:-1.8px;line-height:1.15;margin-bottom:20px}h1 em{letter-spacing:-1.8px}.intro{font-size:14px;margin-bottom:24px}.desktop-break{display:none}.hero-art{display:none}.primary-link{padding:11px 15px;font-size:11px;gap:23px}.collection{padding-top:26px}.collection-heading{align-items:flex-start;gap:14px;margin-bottom:22px}.collection-heading .eyebrow{font-size:9px;letter-spacing:1.4px}h2{font-size:24px;letter-spacing:-.8px}.app-count{font-size:8px;white-space:normal;text-align:right;width:55px;padding-top:24px;flex-shrink:0}.filters{gap:7px;margin-bottom:21px}.filters button{font-size:10px;padding:7px 10px;min-height:36px}.app-grid{grid-template-columns:1fr;gap:20px}.wide,.card-whatweek{grid-column:auto}.card-whatweek{display:flex}.product-visual,.card-whatweek .product-visual{height:245px;min-height:0}.card-body{padding:21px 22px 18px}.card-heading{flex-wrap:nowrap}h3{font-size:22px}.platform{font-size:10px}.status-label{font-size:9px}.card-body p{font-size:13px;margin-block:12px 20px}.card-footer{font-size:10px;flex-wrap:nowrap}.sandfort-visual{padding-top:52px}.sandfort-shot{width:390px;max-width:94%}.visual-label{font-size:9px!important}.cuffscan-visual .phone-preview{width:140px;right:35px}.cuffscan-icon{width:66px;height:66px;left:36px}.cuffscan-note{font-size:20px;left:33px;max-width:110px}.clock-preview{width:140px;padding-block:17px 12px}.time-visual{gap:20px}.clock-face{width:91px;height:91px}.clock-face i{left:44px;bottom:44px}.clock-face::after{left:42px;top:42px}.clock-preview>span{font-size:11px}.collection-note{font-size:10px;line-height:1.8;margin:23px 14px 40px}.about{padding-block:32px;gap:18px;grid-template-columns:38px 1fr;align-items:start}.about-symbol{font-size:43px;margin-top:29px}.about h2{font-size:25px}.about .eyebrow{font-size:8px;letter-spacing:1.1px}.about p:not(.eyebrow){font-size:12px}.text-link{font-size:10px}.site-footer{flex-wrap:wrap;column-gap:24px;row-gap:17px;padding-block:25px}.site-footer .brand{font-size:19px}.site-footer p{font-size:9px;flex-basis:calc(100% - 130px);margin:0}.site-footer>a:not(.brand){font-size:10px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.card-body{padding-inline:17px}.card-footer{font-size:9px}.status-label{font-size:8px}.cuffscan-visual .phone-preview{right:25px;width:128px}.cuffscan-note{left:23px;font-size:17px;max-width:85px}.cuffscan-icon{left:26px}.site-footer p{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.app-card:hover,.primary-link:hover{transform:none}}