/* Ruang Ilmu Academy — "The Open Notebook" concept system */
:root{--paper:#F6F1E7;--paper2:#EDE4D3;--ink:#1C2321;--ink2:#4A524F;--teal:#0F4C4A;--saffron:#F2B53A;--hib:#C8413B;--hibt:#A93530;--line:#D6CCB8;--maths:#2E5E8C;--sci:#3F7D58;--lang:#A0522D;--hum:#6B4E8A;--skills:#B8862B;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
.ri{background:var(--paper);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative;overflow:hidden}
.ri h1,.ri h2,.ri h3,.ri h4,.ri p{margin:0}
.ri a{color:inherit}
.ri :focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.zh{font-family:'Noto Sans SC','Plus Jakarta Sans',sans-serif;line-height:1.75}
.fr{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-weight:500;letter-spacing:-.02em;line-height:1.04}
.fr em,em.fr{font-style:italic;font-weight:400}
.zfr{font-family:'Noto Serif SC','Fraunces',serif;font-weight:700;letter-spacing:0;line-height:1.3}
.d72{font-size:72px}.d56{font-size:56px}.d40{font-size:40px;line-height:1.1}.d32{font-size:32px;line-height:1.12}.d24{font-size:24px;line-height:1.2}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:500;line-height:1.4}
.hand{font-family:'Caveat',cursive;font-weight:600;line-height:1.05;color:var(--teal)}
.soft{color:var(--ink2)}
.s14{font-size:14px}.s18{font-size:18px}
.ruled{background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(214,204,184,.7) 31px 32px)}
.mrule{position:absolute;top:0;bottom:0;left:56px;width:1px;background:rgba(200,65,59,.5);box-shadow:4px 0 0 rgba(200,65,59,.22);pointer-events:none;z-index:0}
.card{background:var(--paper2);border-radius:4px;box-shadow:0 1px 0 var(--line),0 12px 24px rgba(28,35,33,.06)}
.sheet{background:var(--paper);border-radius:4px;box-shadow:0 1px 0 var(--line),0 12px 24px rgba(28,35,33,.06)}
.hair{border:1px solid var(--line)}
.hr{height:1px;background:var(--line);border:0;margin:0}
/* logo */
.logo{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);position:relative;padding-left:18px}
.logo::before{content:'';position:absolute;left:0;top:-6px;width:10px;height:26px;background:var(--saffron);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.logo b{font-family:'Fraunces',serif;font-weight:600;font-size:22px;letter-spacing:-.02em}
.logo i{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--ink2)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:4px;font:600 16px/1 'Plus Jakarta Sans',sans-serif;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s,background-position .45s var(--ease),color .25s}
.btn:active{transform:scale(.97)}
.btn-p{color:var(--paper)!important;background:linear-gradient(90deg,var(--ink) 50%,var(--teal) 50%) 100% 0/201% 100%}
.btn-p:hover{background-position:0 0}
.btn-o{color:var(--ink)!important;background:linear-gradient(90deg,var(--ink) 50%,transparent 50%) 100% 0/201% 100%;box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-o:hover{background-position:0 0;color:var(--paper)!important}
.btn-s{color:var(--ink)!important;background:linear-gradient(90deg,var(--ink) 50%,var(--saffron) 50%) 100% 0/201% 100%}
.btn-s:hover{background-position:0 0;color:var(--paper)!important}
.btn-g{color:var(--ink)!important;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-lg{height:56px;padding:0 28px;font-size:17px}
.btn-w{width:100%}
.btn .sub{font-family:'Noto Sans SC',sans-serif;font-weight:500;font-size:13px;opacity:.85}
.btn-load{position:relative;color:transparent!important}
.btn-load::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;border:2px solid rgba(246,241,231,.35);border-top-color:var(--paper);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lnk{font-weight:600;color:var(--teal)!important;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
/* chips + tags */
.chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font:500 14px/1 'Plus Jakarta Sans',sans-serif;color:var(--ink);background:transparent;white-space:nowrap;cursor:pointer}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.sf{background:var(--saffron);border-color:var(--saffron)}
.tag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag-f{background:var(--saffron);color:var(--ink)}
.tag-sale{background:var(--hibt);color:#fff}
.tag-t{background:var(--teal);color:var(--paper)}
.tag-o{box-shadow:inset 0 0 0 1px var(--ink2);color:var(--ink)}
.strike{text-decoration:line-through;color:var(--ink2)}
.price{font-family:'JetBrains Mono',monospace;font-weight:600;letter-spacing:.02em}
.pay{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:3px;box-shadow:inset 0 0 0 1px var(--line);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.06em;color:var(--ink2);background:var(--paper)}
/* icons (mask) */
.ic{display:inline-block;width:20px;height:20px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;flex:none;vertical-align:middle}
.i14{width:14px;height:14px}.i16{width:16px;height:16px}.i24{width:24px;height:24px}.i32{width:32px;height:32px}.i48{width:48px;height:48px}
.ic-lock{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>")}
.ic-unlock{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 7.6-1.8'/></svg>")}
.ic-play{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M8 4.8v14.4a.8.8 0 0 0 1.2.7l11-7.2a.8.8 0 0 0 0-1.4l-11-7.2A.8.8 0 0 0 8 4.8z'/></svg>")}
.ic-check{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>")}
.ic-arrow{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>")}
.ic-back{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M11 6l-6 6 6 6'/></svg>")}
.ic-star{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 2.8l2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17l-5.6 3 1.1-6.2L3 9.4l6.2-.9z'/></svg>")}
.ic-search{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M16 16l4.5 4.5'/></svg>")}
.ic-eye{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>")}
.ic-chev{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")}
.ic-x{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>")}
.ic-plus{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
.ic-dl{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v11M7 10l5 5 5-5M5 20h14'/></svg>")}
.ic-file{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/><path d='M14 3v5h5M9 13h6M9 17h4'/></svg>")}
.ic-heart{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 20s-7.5-4.6-7.5-10.2A4.2 4.2 0 0 1 12 7.3a4.2 4.2 0 0 1 7.5 2.5C19.5 15.4 12 20 12 20z'/></svg>")}
.ic-home{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M4 11l8-7 8 7v9a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1z'/></svg>")}
.ic-book{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5V5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2.5zM8 7h7'/></svg>")}
.ic-grid{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><rect x='4' y='4' width='7' height='7' rx='1'/><rect x='13' y='4' width='7' height='7' rx='1'/><rect x='4' y='13' width='7' height='7' rx='1'/><rect x='13' y='13' width='7' height='7' rx='1'/></svg>")}
.ic-user{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c1-4 4.5-6 8-6s7 2 8 6'/></svg>")}
.ic-users{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20c.7-3.5 3.3-5 6.5-5s5.8 1.5 6.5 5M16 4.5a3.5 3.5 0 0 1 0 7M18 15c2 .6 3.2 2.2 3.5 5'/></svg>")}
.ic-flame{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3c1 4 5 5.5 5 10a5 5 0 0 1-10 0c0-2.5 1.5-3.5 2-5 1 1 1.5 2 3 2-1-2.5-1-5 0-7z'/></svg>")}
.ic-sliders{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M4 7h10M18 7h2M4 17h4M12 17h8'/><circle cx='16' cy='7' r='2'/><circle cx='10' cy='17' r='2'/></svg>")}
.ic-globe{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/></svg>")}
.ic-shield{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/><path d='M8.5 12l2.5 2.5 4.5-5'/></svg>")}
.ic-clock{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>")}
.ic-sigma{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M17.5 5.5c-.3-.4-11-.6-11.2-.3l6.2 6.9-6.4 6.8c3.4.3 8 .2 11.6-.1'/></svg>")}
.ic-beaker{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 3.2h6M10 3.5v6L5 19a1.5 1.5 0 0 0 1.3 2h11.4a1.5 1.5 0 0 0 1.3-2L14 9.4V3.5'/><path d='M7.6 15c2.5-.8 5.6.9 8.9-.2'/></svg>")}
.ic-atom{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5'><ellipse cx='12' cy='12' rx='9.5' ry='3.8'/><ellipse cx='12' cy='12' rx='9.5' ry='3.8' transform='rotate(60 12 12)'/><ellipse cx='12' cy='12' rx='9.5' ry='3.8' transform='rotate(-60 12 12)'/><circle cx='12' cy='12' r='1.3' fill='black'/></svg>")}
.ic-quill{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M20 3.5C12 4 7 9 4.5 20.5'/><path d='M20 3.5c.3 7-5 11.4-11.6 11.2M15 7.5c-1 1-2.6 1.4-4 1.2'/></svg>")}
.ic-brush{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4.5h14M7 4.5v15M17 4.5v15M4 19.5h16M10 9h4M10 13h4'/></svg>")}
.ic-bulb{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.8.8 1 1.6 1 2.5h6c0-.9.2-1.7 1-2.5A6 6 0 0 0 12 3z'/></svg>")}
.ic-mail{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='M3 7l9 6 9-6'/></svg>")}
.ic-menu{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M4 7h16M4 12h16M4 17h10'/></svg>")}
.ic-card{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><rect x='3' y='6' width='18' height='13' rx='2'/><path d='M3 10h18M7 15h4'/></svg>")}
.ic-bank{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10l9-6 9 6M5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 20.5h18'/></svg>")}
.ic-wallet{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zM4 7l11-3v3M16 13.5h2'/></svg>")}
.ic-cap{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M2 9l10-5 10 5-10 5z'/><path d='M6 11v5c3 2 9 2 12 0v-5'/></svg>")}
.ic-refund{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5'/></svg>")}
.ic-chart{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V4M4 20h16M8 16v-4M12 16V8M16 16v-6'/></svg>")}
.ic-pencil{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20l4-1 11-11-3-3L5 16zM14 7l3 3'/></svg>")}
.ic-g{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'><path d='M19.5 8.2A8 8 0 1 0 20 13h-8'/></svg>")}
.ic-tag{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M3 12V4h8l10 10-8 8z'/><circle cx='7.5' cy='8.5' r='1.3'/></svg>")}
.ic-bell{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15zM10 21h4'/></svg>")}
.ic-list{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/></svg>")}
.ic-note{--ic:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h10l4 4v14H5z'/><path d='M8 10h8M8 14h8M8 18h5'/></svg>")}
/* exercise-book covers */
.cover{position:relative;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:3/4;border-radius:3px 6px 6px 3px;padding:16px 16px 18px 30px;color:var(--paper);overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.15),0 14px 28px rgba(28,35,33,.16);background-image:linear-gradient(160deg,rgba(255,255,255,.09),rgba(0,0,0,.06));transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cover::before{content:'';position:absolute;left:0;top:0;bottom:0;width:14px;background:rgba(0,0,0,.2)}
.cover::after{content:'';position:absolute;left:19px;top:8px;bottom:8px;border-left:1.5px dashed rgba(255,255,255,.35)}
.cover:hover,.cover.lift{transform:translateY(-4px) rotate(-2deg);box-shadow:0 1px 0 rgba(0,0,0,.15),0 22px 36px rgba(28,35,33,.22)}
.cv-label{background:var(--paper);color:var(--ink);border-radius:2px;padding:7px 9px 6px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;line-height:1.5;box-shadow:inset 0 -1px 0 var(--line)}
.cv-label span{display:block;border-bottom:1px solid var(--line);margin-top:2px;color:var(--ink2);font-weight:500}
.cv-title{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-.02em;line-height:1.02;position:relative;z-index:1}
.cv-ic{position:absolute;right:14px;top:58%;opacity:.85}
.c-maths{background-color:var(--maths)}.c-sci{background-color:var(--sci)}.c-lang{background-color:var(--lang)}.c-hum{background-color:var(--hum)}.c-skills{background-color:var(--skills);color:var(--ink)}
.c-skills::after{border-color:rgba(28,35,33,.3)}
/* songket */
.songket{background-image:repeating-linear-gradient(45deg,rgba(15,76,74,.08) 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,rgba(15,76,74,.08) 0 1px,transparent 1px 9px)}
.songket-band{height:14px;background:linear-gradient(135deg,var(--c,var(--teal)) 25%,transparent 25%) -7px 0/14px 14px,linear-gradient(225deg,var(--c,var(--teal)) 25%,transparent 25%) -7px 0/14px 14px,linear-gradient(315deg,var(--c,var(--teal)) 25%,transparent 25%) 0 0/14px 14px,linear-gradient(45deg,var(--c,var(--teal)) 25%,transparent 25%) 0 0/14px 14px;opacity:.55}
.songket-line{height:9px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:conic-gradient(from 45deg at 50% 50%,var(--c,var(--teal)) 0 25%,transparent 0 50%,var(--c,var(--teal)) 0 75%,transparent 0) 0 0/9px 9px;opacity:.35}
/* motion */
.w{display:inline-block;opacity:0;transform:translateY(.45em);animation:rise .6s var(--ease) forwards;animation-delay:calc(var(--d,0) * 40ms)}
@keyframes rise{to{opacity:1;transform:none}}
.hl{background-image:linear-gradient(100deg,transparent 0 1%,rgba(242,181,58,.9) 2% 97%,transparent 98%);background-repeat:no-repeat;background-position:0 78%;background-size:0% 62%;animation:hl .9s var(--hd,.7s) var(--ease) forwards;padding:0 .06em;margin:0 -.06em}
.hl-on{background-size:100% 62%;animation:none}
@keyframes hl{to{background-size:100% 62%}}
.draw path,.draw circle,.draw ellipse,.draw polyline,.draw line{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s var(--dl,.4s) var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@supports (animation-timeline: view()){.draw-s path,.draw-s circle,.draw-s ellipse,.draw-s polyline{animation-timeline:view();animation-range:entry 10% cover 40%;animation-delay:0s}.reveal-s{animation:turn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}}
.reveal{animation:turn .9s var(--ease) both}
@keyframes turn{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.fan>*{animation:fan 1.3s .5s var(--ease) both}
@keyframes fan{from{transform:translate(0,0) rotate(0)}}
.slideup{animation:slideup .45s var(--ease) both}
@keyframes slideup{from{transform:translateY(48px);opacity:0}}
.fade{animation:fadein .35s ease both}
@keyframes fadein{from{opacity:0}}
.pageslide{animation:pslide .35s var(--ease) both}
@keyframes pslide{from{transform:translateY(24px);opacity:0}}
.shackle{transform-origin:16px 22px;animation:shackle 1s .4s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes shackle{0%{transform:none}35%{transform:translateY(-9px)}100%{transform:translateY(-9px) rotate(-32deg)}}
.tickfall{position:absolute;animation:tick 1.4s var(--td,.5s) cubic-bezier(.22,1,.36,1) both}
@keyframes tick{from{transform:translate(0,-60px) rotate(0);opacity:0}}
.flip{animation:flip .5s var(--fd,.2s) var(--ease) both;transform-origin:50% 50%}
@keyframes flip{from{transform:rotateX(90deg);opacity:0}}
.pen{position:relative}
.pen::after{content:'';position:absolute;left:2px;right:2px;bottom:-1px;height:2px;border-radius:2px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pen:focus-within::after,.pen.focus::after{transform:scaleX(1)}
.pen.ok::after{transform:scaleX(1);background:var(--sci)}
.pen.err::after{transform:scaleX(1);background:var(--hib)}
/* forms */
.fld{display:flex;flex-direction:column;gap:6px}
.fld>label,.lbl{font-size:14px;font-weight:600;color:var(--ink)}
.inp{width:100%;height:48px;padding:0 14px;background:var(--paper);border:1px solid var(--line);border-radius:4px;font:400 16px/1 'Plus Jakarta Sans',sans-serif;color:var(--ink);outline:none}
.inp::placeholder{color:#6E7471}
.inp:focus,.pen.focus .inp{border-color:var(--teal)}
.pen.err .inp{border-color:var(--hib);background:#F9EDE6}
.msg-err{color:var(--hibt);font-size:14px;font-weight:500;display:flex;gap:6px;align-items:center}
.msg-ok{color:#2F6446;font-size:14px;font-weight:500;display:flex;gap:6px;align-items:center}
.cbx{width:20px;height:20px;accent-color:var(--teal);margin:2px 0 0;flex:none}
.seg{display:flex;padding:4px;border-radius:999px;background:var(--paper2);gap:4px}
.seg>*{flex:1;height:40px;border-radius:999px;border:0;background:transparent;font:600 14px/1 'Plus Jakarta Sans',sans-serif;color:var(--ink2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.seg>.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line),0 4px 10px rgba(28,35,33,.08)}
/* notes */
.note{position:relative;background:var(--paper);padding:28px 24px 22px;border-radius:2px;box-shadow:0 1px 0 var(--line),0 14px 26px rgba(28,35,33,.10);transform:rotate(var(--r,0deg))}
.note::before{content:'';position:absolute;left:50%;top:-10px;width:84px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(242,181,58,.5)}
.note.deep{background:var(--paper2)}
/* misc */
.lockrow{background-image:repeating-linear-gradient(45deg,rgba(15,76,74,.06) 0 1px,transparent 1px 8px),repeating-linear-gradient(-45deg,rgba(15,76,74,.06) 0 1px,transparent 1px 8px)}
.ring{width:var(--s,56px);height:var(--s,56px);border-radius:50%;background:conic-gradient(var(--saffron) calc(var(--p,0)*1%),var(--paper2) 0);display:grid;place-items:center;flex:none}
.ring::before{content:'';grid-area:1/1;width:calc(var(--s,56px) - 10px);height:calc(var(--s,56px) - 10px);border-radius:50%;background:var(--paper)}
.ring>*{grid-area:1/1;position:relative}
.bar{height:6px;border-radius:6px;background:var(--paper2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--saffron);border-radius:6px}
.photo{position:relative;background:linear-gradient(160deg,#cfe0d9,#0F4C4A);display:flex;align-items:flex-end;padding:14px;color:var(--paper);overflow:hidden}
.photo::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(246,241,231,.06) 0 1px,transparent 1px 4px)}
.photo>*{position:relative}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:72px;background:var(--paper);border-top:1px solid var(--line);display:flex;padding:0 8px 8px;z-index:20}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;text-decoration:none;color:var(--ink2);min-height:48px}
.tabbar a.on{color:var(--teal)}
.tabbar a.on .ic{background:var(--teal)}
.dock{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -10px 24px rgba(28,35,33,.06);z-index:20}
.scrim{position:absolute;inset:0;background:rgba(28,35,33,.45)}
.grab{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto}
.acc{border-top:1px solid var(--line)}
.acc>summary{list-style:none;cursor:pointer}
.acc>summary::-webkit-details-marker{display:none}
.kbd-num{font-family:'Caveat',cursive;font-weight:700;color:var(--teal)}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}.w{opacity:1;transform:none}.hl{background-size:100% 62%}.draw path,.draw circle,.draw ellipse,.draw polyline,.draw line{stroke-dashoffset:0}.pen::after{transform:scaleX(1)}}