:root{--paper:#f7f5ef;--ink:#303b32;--muted:#7e8177;--line:#e1e1d6;--green:#344e3e}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI","Yu Gothic",Meiryo,sans-serif;font-size:14px;line-height:1.8}a{color:inherit;text-decoration:none}button,input{font:inherit}a,button,input{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #ab7540;outline-offset:5px}.skip{position:absolute;left:20px;top:-100px;background:white;padding:10px;z-index:5}.skip:focus{top:10px}.sidebar{position:fixed;width:264px;inset:0 auto 0 0;padding:38px 27px 24px;background:#eeeee5;border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;font-family:Georgia,serif;font-size:24px;font-weight:bold;letter-spacing:-1px;white-space:nowrap}.brand-icon{font-size:28px}.brand small{display:block;font:8px/2.5 "Segoe UI",sans-serif;letter-spacing:2px}.sidebar-intro{font-size:12px;color:var(--muted);margin:30px 0}.nav-link,.categories a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:5px;font-size:13px}.nav-link.active,.categories a.active{background:#dee4d6;color:#304934;font-weight:600}.nav-link span{font-size:20px;line-height:1}.sidebar b{margin-left:auto;font-size:11px;font-weight:400;color:var(--muted)}.nav-heading{font-size:10px;letter-spacing:2px;color:var(--muted);margin:32px 14px 9px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block}.html{background:#8c9b74}.js{background:#c1a268}.workflow{background:#a28773}.sidebar-note{margin-top:auto;padding:36px 14px 30px}.sidebar-note>span{font-size:30px;color:#83906f}.sidebar-note p{font-size:15px;letter-spacing:2px}.sidebar-note small{font-size:8px;letter-spacing:2px;color:var(--muted)}footer{border-top:1px solid var(--line);padding-top:20px;font-size:10px;color:var(--muted)}footer span{font-size:9px}main{margin-left:264px;padding:0 6%;min-height:100vh}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:var(--muted)}.topbar-dash{margin:0 15px;color:#bbb}.topbar-right{letter-spacing:1px}.topbar-right i{display:inline-block;width:5px;height:5px;background:#8c9b74;border-radius:50%;margin-right:7px}.hero{padding:54px 0 40px;position:relative}.eyebrow{font-size:10px;letter-spacing:3px;color:#8b785c;font-weight:600}.hero h1{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(32px,3.5vw,48px);font-weight:500;line-height:1.5;letter-spacing:2px;margin:14px 0 18px}.hero h1 em{font-style:normal;color:#8c9875}.hero p{font-size:13px;color:var(--muted);line-height:2}.hero-mark{position:absolute;right:20px;top:70px;transform:rotate(-12deg);font-size:65px;color:#9d9e84;border:1px solid #cdd0bd;border-radius:50%;width:125px;height:125px;display:grid;place-items:center;opacity:.65}.search-wrap{position:relative;max-width:460px;margin-top:26px}.search-wrap span{position:absolute;left:17px;top:10px;color:var(--muted);font-size:20px}.search-wrap input{width:100%;padding:13px 18px 13px 46px;border:1px solid #ddded3;border-radius:6px;background:#fffef9;color:var(--ink);font-size:12px}.section-head{display:flex;justify-content:space-between;align-items:center;margin:12px 0 22px}.section-head h2{font-size:18px;letter-spacing:1px;font-weight:500;margin:0}.section-head small{font-size:10px;letter-spacing:1px;color:var(--muted);margin-left:12px}.section-head>a{font-size:11px;color:#64735d}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.card{background:#fffef9;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #344e3e10}.art{height:162px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#e3e8d9}.art:before,.art:after{content:"";position:absolute;border:1px solid #ffffff50;border-radius:50%;width:190px;height:190px;right:-60px;top:-50px}.art:after{width:130px;height:130px;left:-40px;top:90px}.art-js{background:#ede5d0}.art-workflow{background:#e7ded4}.art-symbol{font-family:Georgia,serif;font-size:48px;color:#647355;letter-spacing:4px}.art-js .art-symbol{color:#9c8554}.art-workflow .art-symbol{color:#8b7461}.card-body{padding:22px 21px;display:flex;flex:1;flex-direction:column}.tag{font-size:9px;letter-spacing:.7px;color:#61734f;display:inline-block;background:#edf0e5;border-radius:3px;padding:2px 7px;align-self:flex-start}.tag-javascript{background:#f4eddb;color:#927642}.tag-workflow{background:#f0e9e0;color:#91745e}.card h3{font-size:16px;line-height:1.8;font-weight:600;margin:12px 0 8px}.card p{font-size:11px;line-height:1.9;color:var(--muted);margin:0 0 20px}.card-meta{font-size:9px;color:#96988d;display:flex;gap:8px;margin-top:auto}.card-meta .arrow{margin-left:auto;color:#596a4e;font-size:16px}.welcome-note{margin:38px 0;display:flex;align-items:center;gap:20px;border:1px solid var(--line);border-radius:6px;padding:20px 25px;background:#eeeee4}.welcome-note>span{font-size:24px;color:#82906f}.welcome-note p{margin:0;font-size:12px}.welcome-note small{color:var(--muted);font-size:11px}.bottom-note{margin-top:42px;padding:23px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#929487;font-size:9px;letter-spacing:1.5px}.empty{grid-column:1/-1;padding:50px;border:1px dashed #c8cbbd;text-align:center;color:var(--muted)}.empty button{border:0;background:var(--green);color:white;border-radius:4px;padding:8px 18px;cursor:pointer}.article{max-width:760px;margin:40px auto 70px}.back{font-size:12px;color:#6d7c60}.article h1{font-family:Georgia,"Yu Mincho",serif;font-size:32px;line-height:1.6;margin:18px 0}.article .art{border-radius:7px;height:220px;margin:30px 0}.article-content{font-size:14px;line-height:2.1}.article-content h2{font-size:21px;margin-top:32px}.article-content code{background:#e9ebdf;padding:2px 5px;border-radius:3px;font-size:12px}.article-content pre{background:#303b32;color:#f1f2e6;padding:22px;border-radius:6px;overflow:auto;line-height:1.8}.article-content pre code{padding:0;background:none;color:inherit}.article-end{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-size:12px;color:var(--muted)}@media(min-width:1450px){main{padding-left:8%;padding-right:8%}.art{height:190px}}@media(max-width:1100px){.sidebar{width:225px;padding-left:20px;padding-right:20px}main{margin-left:225px;padding:0 4%}.grid{gap:14px}.card-body{padding:17px 15px}.hero-mark{right:0;width:100px;height:100px;font-size:48px}.card h3{font-size:14px}}@media(max-width:800px){.sidebar{position:relative;width:100%;padding:20px 22px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:23px}.sidebar-intro,.sidebar-note,.sidebar footer,.nav-heading{display:none}.sidebar>nav{display:flex;margin-top:15px;gap:6px}.sidebar .categories{margin-top:9px;flex-wrap:wrap}.nav-link,.categories a{padding:6px 10px;font-size:11px}.sidebar b{margin-left:8px}.categories a{background:#e6e8dc}main{margin-left:0;padding:0 6%}.topbar{height:58px}.hero{padding:32px 0}.hero-mark{top:50px;width:75px;height:75px;font-size:36px}.hero h1{font-size:33px}.hero p{max-width:75%}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-right{font-size:9px}.article h1{font-size:26px}}@media(max-width:500px){.grid{grid-template-columns:1fr;gap:22px}.art{height:180px}.card-body{padding:22px}.card h3{font-size:17px}.card p{font-size:12px}.hero-mark{display:none}.hero p{max-width:100%}.hero h1{font-size:32px}.topbar-right{display:none}.section-head small{display:none}.welcome-note{padding:18px;gap:13px}.welcome-note small{display:block}.bottom-note{font-size:8px;letter-spacing:.5px}.article h1{font-size:24px}}@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}
@media(max-width:500px){.section-head small{display:inline;font-size:9px}}