@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
:root{--ink:#24232c;--purple:#8985b5;--paper:#efede4;--line:rgba(36,35,44,.24)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;padding:10px;background:#202027;color:var(--ink);font-family:'Noto Sans KR',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #5865d5;outline-offset:6px}main{overflow:hidden;border-radius:14px}.hero{height:calc(100svh - 20px);min-height:900px;max-height:1080px;background:var(--purple);position:relative;overflow:hidden;color:var(--paper)}.hero:after,.note-art:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{position:relative;z-index:5;display:flex;align-items:center;padding:25px 34px;gap:22px}.brand{font:700 24px 'Barlow Condensed',sans-serif;letter-spacing:.3px}.brand span{font-size:12px;vertical-align:top;margin-left:4px}.status{border:1px solid #eeecde66;border-radius:30px;padding:7px 13px;font:15px 'Barlow Condensed',sans-serif}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#cee99c;margin-right:8px}nav{display:flex;gap:29px;margin-left:auto;font:600 19px 'Barlow Condensed',sans-serif}nav a:hover{color:#d3edaa}.title-block{position:relative;z-index:2;width:82%;margin:30px auto 0;text-align:center}.eyebrow{font:500 15px 'Barlow Condensed',sans-serif;letter-spacing:2px}.title-block h1{font-family:'Times New Roman',serif;font-size:clamp(70px,13.6vw,225px);font-weight:400;letter-spacing:-.065em;line-height:.92;margin:18px 0 18px;padding-right:.055em}.title-caption{display:flex;justify-content:space-between;border-top:1px solid #efede450;padding-top:13px;font:18px 'Times New Roman',serif;letter-spacing:.5px}.robot-wrap{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:650px;height:515px}.robot{height:100%;width:100%;overflow:visible}.robot-caption{position:absolute;bottom:68px;left:0;width:100%;text-align:center}.robot-caption>span{font:600 19px 'Barlow Condensed',sans-serif;letter-spacing:1px}.robot-caption p{font-size:14px;margin:10px 0 20px}.robot-caption a{display:inline-flex;gap:25px;border-bottom:1px solid #efede46b;padding-bottom:9px;font-size:12px}.lid{transform-origin:230px 130px;transform:rotate(-15deg) translateY(-8px)}.ideas{animation:float 6s ease-in-out infinite}.orbital-label{position:absolute;z-index:3;top:54%;font-size:13px;line-height:1.9}.left-label{left:8%;transform:rotate(-7deg)}.tiny-star{font-size:54px;line-height:1}.hand-line{display:block;font:50px Georgia;text-align:center;transform:rotate(-30deg)}.right-label{right:8%;top:57%;transform:rotate(5deg)}.right-label>span{font:16px/1.2 'Barlow Condensed',sans-serif;letter-spacing:1px}.right-label p{font-size:12px}.hero-bottom{position:absolute;bottom:23px;left:34px;right:34px;display:flex;justify-content:space-between;z-index:4;font:13px 'Barlow Condensed',sans-serif;letter-spacing:1px}.hero-bottom a span{margin-left:14px}.stars{position:absolute;inset:0;background-image:radial-gradient(circle at 12% 38%,#fff9 0 1px,transparent 2px),radial-gradient(circle at 83% 33%,#fff9 0 1px,transparent 2px),radial-gradient(circle at 73% 70%,#fff8 0 1px,transparent 2px),radial-gradient(circle at 21% 83%,#fff8 0 1px,transparent 2px);background-size:500px 530px}.section{padding:55px 7% 100px;background:var(--paper)}.section-top{display:flex;justify-content:space-between;font:14px 'Barlow Condensed',sans-serif;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:20px}.section-top span:last-child{font:11px 'Noto Sans KR',sans-serif;letter-spacing:0}.section-heading{display:flex;justify-content:space-between;align-items:end;margin:46px 0 35px}h2{font:400 clamp(40px,5vw,76px)/1.03 Georgia,serif;letter-spacing:-3px;margin:0}h2 em{font-weight:400}p{line-height:1.9}.section-heading>p,.library-layout>div>p{font-size:13px;color:#68666b}.filter-bar{display:flex;gap:25px;align-items:center;border-bottom:1px solid var(--line);margin-bottom:28px}.filter-bar button{background:none;border:0;padding:15px 0;cursor:pointer;color:#777479;font-size:12px}.filter-bar button.active{border-bottom:2px solid var(--ink);color:var(--ink)}sup{font:11px 'Barlow Condensed';margin-left:4px}.filter-bar>span{font-size:10px;color:#79767b;margin-left:auto}.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.note-card{text-align:left;border:0;padding:0;background:none;cursor:pointer}.note-card[hidden]{display:none}.note-art{height:250px;position:relative;padding:20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:transform .25s}.note-card:hover .note-art{transform:translateY(-5px)}.art-one{background:#b8b5d0}.art-two{background:#303239;color:#dbe9bb}.art-three{background:#d2dba9}.art-label,.art-bottom{font:12px 'Barlow Condensed',sans-serif;letter-spacing:1px}.art-bottom{font-size:10px}.attention-art{display:flex;align-items:center;justify-content:center;gap:10px;font:italic 35px Georgia}.attention-art span{border:1px solid #53516a;border-radius:50%;height:65px;width:65px;display:grid;place-items:center}.attention-art i{font-size:19px}.terminal-art{font:18px/1.9 monospace;display:flex;flex-direction:column;padding-left:12px}.terminal-art span:first-child{color:#adafbb}.thought-art{font:40px/.95 Georgia;position:relative;letter-spacing:-2px;padding-left:10px}.thought-art>span{position:absolute;font-size:120px;right:10px;top:-10px;color:#626d3f}.note-meta{display:flex;justify-content:space-between;font-size:10px;margin:22px 0 13px}.note-meta span{font:11px 'Barlow Condensed';color:#75737b}.note-card h3{font-size:21px;font-weight:500;line-height:1.5;letter-spacing:-.7px;margin:0}.note-card p{font-size:12px;color:#767279;margin:12px 0}.read{display:inline-block;font-size:11px;margin-top:9px;border-bottom:1px solid #999;padding-bottom:5px}.library{background:#e4e1d7}.library-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:70px;margin-top:55px}.library h2{font-size:clamp(40px,4.5vw,65px)}.shelf-star{display:block;color:#8783aa;font-size:100px;margin-top:35px;line-height:1}.resource-list>a{display:flex;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}.resource-list>a:first-child{padding-top:0}.resource-list>a>span{font:13px 'Barlow Condensed';align-self:flex-start;margin-top:3px}.resource-list small{font:11px 'Barlow Condensed';letter-spacing:1px;color:#79767c}.resource-list h3{font:24px Georgia;margin:9px 0}.resource-list p{font-size:11px;margin:0;color:#777279}.resource-list b{font:28px Georgia;margin-left:auto;transition:transform .2s}.resource-list a:hover b{transform:translate(4px,-4px)}.about{background:#b6b1cc}.about-layout{display:grid;grid-template-columns:1fr 1.3fr;gap:80px;margin-top:70px;align-items:center}.about-symbol{font:italic 260px Georgia;position:relative;text-align:center;line-height:1;border:1px solid #24232c70;border-radius:50%;width:290px;height:290px}.about-symbol>span{font:80px Georgia;position:absolute;top:5px;right:30px}.about-symbol small{display:block;font:11px 'Barlow Condensed';letter-spacing:2px;margin-top:45px}.about h2{font-family:'Noto Sans KR',sans-serif;font-size:39px;letter-spacing:-2px;line-height:1.45;margin:22px 0}.about h2 em{font-style:normal}.about-layout>div>p:not(.eyebrow){font-size:13px;max-width:510px}.signature{display:block;font:italic 25px Georgia;margin-top:30px}footer{background:#26252e;color:var(--paper);padding:50px 7% 25px}footer>a{display:flex;justify-content:space-between;align-items:center;font:normal clamp(40px,9.5vw,150px) 'Times New Roman';letter-spacing:-6px}footer>a>span{font-size:70px}footer>div{display:flex;justify-content:space-between;border-top:1px solid #ffffff30;margin-top:30px;padding-top:20px;font:11px 'Barlow Condensed';letter-spacing:1px}footer>div>span:nth-child(2){font:10px 'Noto Sans KR'}dialog{border:0;border-radius:10px;padding:55px;width:min(650px,90vw);max-height:85svh;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#201e35aa;backdrop-filter:blur(5px)}dialog h2{font:500 29px/1.5 'Noto Sans KR';letter-spacing:-1px;margin:25px 0}dialog p{font-size:14px}.close-dialog{position:absolute;right:20px;top:15px;border:0;background:none;font-size:22px;cursor:pointer}.draft-label{border-top:1px solid var(--line);padding-top:20px;color:#7b777f;font-size:11px!important}body:has(dialog[open]){overflow:hidden}@keyframes float{50%{transform:translateY(-10px)}}@media(min-width:1500px){.robot-wrap{height:590px;width:735px}.title-block{margin-top:40px}}@media(max-width:900px){header{padding:24px}.status{display:none}.hero{min-height:900px}.title-block{width:90%;margin-top:50px}.title-caption{font-size:13px}.orbital-label{top:43%}.left-label{left:6%}.right-label{right:6%;top:45%}.robot-wrap{height:480px;width:600px}.section{padding:40px 5% 65px}.note-grid{gap:16px}.note-art{height:210px;padding:15px}.attention-art{gap:5px}.attention-art span{width:42px;height:48px;font-size:25px}.thought-art{font-size:32px}.thought-art>span{font-size:85px}.note-card h3{font-size:18px}.about-layout{gap:35px}.about-symbol{width:220px;height:220px;font-size:200px}.about h2{font-size:30px}.library-layout{gap:35px}}@media(max-width:600px){body{padding:6px}main{border-radius:10px}.hero{height:calc(100svh - 12px);min-height:740px;max-height:900px}header{padding:22px 18px;gap:10px}.brand{font-size:20px}nav{font-size:15px;gap:16px}.title-block{margin-top:45px;width:92%}.title-block h1{font-size:15vw;margin:18px 0}.eyebrow{font-size:11px;letter-spacing:1.6px}.title-caption{font-size:9px;letter-spacing:0;padding-top:10px}.robot-wrap{width:510px;height:420px;bottom:0}.robot-caption{bottom:65px}.robot-caption p{font-size:12px}.robot-caption>span{font-size:17px}.orbital-label{font-size:11px;top:37%}.tiny-star{font-size:33px}.left-label{left:7%}.right-label{right:7%;top:39%}.right-label>span{font-size:11px}.right-label p{font-size:10px}.hand-line{display:none}.hero-bottom{left:18px;right:18px;bottom:19px;font-size:10px}.hero-bottom>span:nth-child(2){display:none}.section-top{font-size:12px}.section-top span:last-child{font-size:9px}.section-heading{display:block;margin-top:32px}.section-heading>p{margin-top:24px;font-size:12px}h2{font-size:48px;letter-spacing:-2px}.filter-bar{gap:19px}.filter-bar button{font-size:11px}.filter-bar>span{display:none}.note-grid{grid-template-columns:1fr;gap:42px}.note-art{height:260px;padding:22px}.attention-art span{width:70px;height:70px;font-size:37px}.attention-art{gap:15px}.terminal-art{font-size:22px}.thought-art{font-size:49px}.thought-art>span{font-size:140px;right:30px}.note-card h3{font-size:23px}.note-meta{margin-top:18px}.library-layout,.about-layout{grid-template-columns:1fr;gap:30px;margin-top:35px}.shelf-star{display:none}.library h2{font-size:46px}.resource-list h3{font-size:22px}.about-symbol{margin:0 auto 50px}.about h2{font-size:32px}.about-layout .eyebrow{font-size:10px}footer{padding:35px 5% 24px}footer>a{font-size:13vw;letter-spacing:-3px}footer>a>span{font-size:40px}footer>div>span:nth-child(2){display:none}dialog{padding:40px 25px}dialog h2{font-size:24px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}


/* Scroll-driven robot reveal; clip preserves the sticky scrolling ancestor. */
main { overflow: clip; }
.hero-scroll { position: relative; padding-bottom: 700px; background: var(--purple); }
.hero-scroll .hero { position: sticky; top: 0; }
.lid { transform: none; transform-origin: 0 0; }
.ideas { animation: none; }
.ai-element { opacity: 0; }
.title-block { opacity: var(--title-opacity, 1); }
@media (max-width: 600px) { .hero-scroll { padding-bottom: 500px; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { padding-bottom: 0; }
  .hero-scroll .hero { position: relative; top: 0 !important; }
  .title-block { opacity: 1; }
}

.hero-scroll { padding-bottom: 0; }

/* Full-viewport camera stage and a seamless handoff to the actual notes. */
.hero-scroll .hero { height: 100svh; min-height: 0; max-height: none; top: 0; }
.hero-scroll { padding: 0; }
.hero .robot-wrap { height: min(56svh, 590px); width: min(69svh, 735px); transform-origin: 51.25% 30.38%; will-change: transform; }
.hero .title-block { margin-top: 2svh; }
.hero .title-block h1 { font-size: min(13.6vw, 19svh); }
.hero .robot-caption { bottom: 12%; opacity: var(--caption-opacity, 1); }
.hero .robot-caption p { margin: 6px 0 12px; }
.hero .orbital-label, .hero header, .hero .hero-bottom { opacity: var(--detail-opacity, 1); }
.notes { position: relative; z-index: 6; margin-top: calc(-1 * var(--scene-height, 100svh)); min-height: 100svh; transform-origin: 50% 0; will-change: transform, opacity; }
.about h2 { font-family: Georgia, serif; font-size: clamp(34px, 4vw, 60px); line-height: 1.15; }
.about h2 em { font-style: italic; }
@media (max-width: 600px) {
  .hero .title-block { margin-top: 5svh; }
  .hero .title-block h1 { font-size: 15vw; }
  .hero .robot-wrap { height: min(56svh, 460px); width: min(69svh, 566px); }
  .hero .orbital-label { top: 34%; }
  .hero .robot-caption>span { font-size: 15px; }
  .hero .robot-caption p, .hero .robot-caption a { font-size: 10px; }
  .filter-bar { gap: 15px; flex-wrap: wrap; }
  .section-top span:last-child { max-width: 48%; text-align: right; }
  .note-card h3 { letter-spacing: -.4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll .hero { position: relative; }
  .notes { margin-top: 0; transform: none !important; opacity: 1 !important; clip-path: none !important; }
}