.article-page{background:linear-gradient(180deg,#fff 0,#fffafd 48%,#f8f0f4 100%)}
.article-hero{color:#fff;background:linear-gradient(115deg,#301522,#6f2946 68%,#a63a68)}
.article-hero__inner{width:min(1120px,100%);margin:0 auto;padding:76px 28px 82px}
.breadcrumb{display:flex;gap:10px;align-items:center;margin-bottom:42px;color:#dcb9c8;font-size:.76rem}
.breadcrumb a{color:#f8dce8;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}
.article-hero .eyebrow{color:#ff9fc0}
.article-hero h1{max-width:860px;margin:0;font-size:clamp(2.5rem,6vw,5.2rem);line-height:1.18;letter-spacing:.055em}
.article-lead{max-width:720px;margin:27px 0 0;color:#efdce4;font-size:clamp(.95rem,1.5vw,1.12rem)}
.article-layout{width:min(1120px,100%);margin:0 auto;padding:76px 24px 110px;display:grid;grid-template-columns:235px minmax(0,720px);justify-content:space-between;gap:64px}
.article-index{position:sticky;top:24px;align-self:start;padding:22px;border:1px solid var(--line);background:#fff}
.article-index>p{margin:0 0 14px;color:var(--pink-dark);font-size:.72rem;font-weight:800;letter-spacing:.08em}
.article-index ol{margin:0;padding-left:1.35rem;color:#a18f97;font-size:.78rem}
.article-index li+li{margin-top:10px}.article-index a{color:#67545d;text-decoration:none}.article-index a:hover{text-decoration:underline}
.article-body{font-size:1rem;line-height:2.05}.article-body>p{margin:0 0 1.35em}
.strategy-list{margin:42px 0 74px;padding:0;display:grid;gap:10px;list-style:none}
.strategy-list a{padding:17px 20px;display:flex;align-items:center;gap:18px;color:var(--ink);background:#fff;border:1px solid var(--line);font-weight:700;text-decoration:none}
.strategy-list span{color:var(--pink);font:800 .75rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.1em}
.article-section{scroll-margin-top:24px;margin-top:78px;padding-top:12px;border-top:1px solid var(--line)}
.section-number{margin:24px 0 5px;color:var(--pink);font:800 .72rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.article-section h2,.article-conclusion h2{margin:0 0 28px;font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.45;letter-spacing:.045em}
.article-section p{margin:0 0 1.35em}
.article-callout{margin:34px 0;padding:28px 30px;border-left:5px solid var(--pink);color:#66233f;background:#fcebf2;font-size:clamp(1.08rem,2vw,1.35rem);line-height:1.8}
.article-conclusion{margin-top:86px;padding:38px 40px;background:#351924;color:#fff}
.article-conclusion .eyebrow{color:#ff9fc0}.article-conclusion p{color:#eddce3}.article-conclusion p:last-child{margin-bottom:0}
.article-bottom-nav{margin-top:52px;padding-top:24px;border-top:1px solid var(--line)}
.article-bottom-nav a{color:var(--pink-dark);font-weight:700;text-decoration:none}.article-bottom-nav a:hover{text-decoration:underline}
.article-hero--python{background:linear-gradient(115deg,#172538,#244f62 68%,#2b7480)}
.article-hero--python .eyebrow{color:#75d9d5}
.article-body code{padding:.08em .32em;color:#335568;background:#edf5f6;border-radius:3px;font:500 .92em/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.article-body pre{margin:26px 0;padding:20px 22px;overflow-x:auto;color:#eaf5f5;background:#17262c;border-left:4px solid #45aaa7;line-height:1.65}
.article-body pre code{padding:0;color:inherit;background:none}
.article-callout--notice{color:#334f59;background:#eaf5f5;border-left-color:#348f8c}
.article-callout--notice p{margin:9px 0 0;font-size:.9rem;font-weight:400;line-height:1.8}
.check-list{margin:26px 0 32px;padding:0;display:grid;gap:10px;list-style:none;counter-reset:condition}
.check-list li{padding:18px 20px 18px 58px;position:relative;background:#fff;border:1px solid var(--line);counter-increment:condition}
.check-list li::before{content:counter(condition);position:absolute;left:20px;top:19px;width:24px;height:24px;display:grid;place-items:center;color:#fff;background:#348f8c;border-radius:50%;font:700 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.file-cards{margin:28px 0 36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.file-cards article{padding:22px 20px;background:#fff;border:1px solid var(--line)}
.file-cards article>code{display:inline-block;color:#fff;background:#348f8c;font-size:1rem;font-weight:800}
.file-cards h3{margin:14px 0 8px;font-size:1rem}.file-cards p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.75}
.article-section>h3{margin:38px 0 12px;font-size:1.25rem}
.save-steps{margin:24px 0 26px;padding:0;display:grid;gap:10px;list-style:none;counter-reset:save-step}
.save-steps li{position:relative;padding:16px 18px 16px 54px;background:#fff;border:1px solid var(--line);counter-increment:save-step}
.save-steps li::before{content:counter(save-step);position:absolute;top:16px;left:17px;width:25px;height:25px;display:grid;place-items:center;color:#fff;background:#348f8c;border-radius:50%;font:700 .72rem/1 ui-monospace,SFMono-Regular,Consolas,monospace}
.save-dialog-guide{margin:34px 0 38px}
.save-dialog-guide figcaption{margin-bottom:10px;color:#4f6068;font-size:.8rem;font-weight:800}
.save-dialog-guide>p{margin:8px 0 0;color:var(--muted);font-size:.72rem}
.save-dialog{overflow:hidden;color:#252525;background:#f5f5f5;border:1px solid #9ba7ad;border-radius:8px;box-shadow:0 16px 35px rgb(30 51 59 / 16%);font:400 .78rem/1.4 "Yu Gothic UI",Meiryo,sans-serif}
.save-dialog__title{padding:9px 12px;display:flex;justify-content:space-between;background:#fff;border-bottom:1px solid #d1d7da}
.save-dialog__body{padding:14px}
.save-dialog__files{min-height:112px;margin-bottom:12px;padding:14px;display:grid;align-content:start;gap:9px;background:#fff;border:1px solid #bbc4c8}
.save-dialog__row{position:relative;margin-top:8px;display:grid;grid-template-columns:118px 1fr;align-items:center;gap:8px}
.save-dialog__row label{text-align:right}
.save-dialog__input{min-height:34px;padding:7px 10px;display:flex;justify-content:space-between;background:#fff;border:1px solid #87959c}
.save-dialog__row.is-highlighted .save-dialog__input{border:2px solid #d8497d;background:#fff9fb}
.save-dialog__mark{position:absolute;right:-7px;top:-7px;width:23px;height:23px;display:grid;place-items:center;color:#fff;background:#d8497d;border-radius:50%;font-weight:800}
.save-dialog__actions{margin-top:14px;display:flex;justify-content:flex-end;gap:8px}.save-dialog__actions span{padding:7px 24px;background:#fff;border:1px solid #89969c}
.terminal-guide{margin:32px 0 38px}.terminal-guide figcaption{margin-bottom:10px;color:#4f6068;font-size:.8rem;font-weight:800}
.explorer-mock{overflow:hidden;color:#202326;background:#fff;border:1px solid #aeb8bd;border-radius:8px 8px 0 0;box-shadow:0 13px 30px rgb(30 51 59 / 12%);font:400 .76rem/1.4 "Yu Gothic UI",Meiryo,sans-serif}
.explorer-mock__title{padding:9px 12px;background:#f6f7f8;border-bottom:1px solid #d1d7da}
.explorer-mock__toolbar{position:relative;padding:10px;display:grid;grid-template-columns:auto 1fr minmax(150px,.65fr);align-items:center;gap:9px;background:#f8f9fa}
.explorer-mock__toolbar strong{padding:7px 10px;border:2px solid #348f8c;background:#fff;font-weight:500}
.explorer-mock__toolbar>span:last-of-type{padding:8px 10px;color:#7a858a;background:#fff;border:1px solid #bdc5c9}
.explorer-mock__toolbar i,.terminal-mock i{position:absolute;width:24px;height:24px;display:grid;place-items:center;color:#fff;background:#d8497d;border-radius:50%;font-style:normal;font-weight:800}
.explorer-mock__toolbar i{left:43%;top:1px}.explorer-mock__files{min-height:112px;padding:18px;display:grid;align-content:start;gap:10px}
.terminal-mock{position:relative;color:#f4f4f4;background:#111;border:1px solid #444;border-top:0;font:400 .78rem/1.55 Consolas,monospace}
.terminal-mock>div{padding:7px 10px;color:#ddd;background:#272727;font-family:"Yu Gothic UI",Meiryo,sans-serif}.terminal-mock pre{margin:0;padding:17px;border:0;background:#111}.terminal-mock i{right:10px;top:37px}
.terminal-guide ol{margin:13px 0 0;padding-left:1.4rem;color:var(--muted);font-size:.8rem}.terminal-guide li+li{margin-top:4px}
.indent-example{margin:25px 0;padding:20px 22px;display:grid;gap:8px;color:#eaf3f3;background:#17262c;border-left:4px solid #45aaa7;font:400 .86rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.indent-example>div{display:grid;grid-template-columns:145px 1fr;align-items:center;gap:10px}.indent-example span{color:#83b4b5;font-size:.72rem}.indent-example code{padding:0;color:inherit;background:none}.indent-example__child code{margin-left:2rem;padding-left:.75rem;color:#8de0bd;border-left:2px solid #45aaa7}
.indent-rules{margin:22px 0 28px;padding:18px 20px 18px 42px;background:#fff;border:1px solid var(--line)}.indent-rules li+li{margin-top:7px}
.prompt-box{position:relative;margin:28px 0;padding:20px 22px 22px;color:#e9f4f5;background:#18272d;border-left:4px solid #45aaa7}
.prompt-box>span{display:block;margin-bottom:10px;color:#75d9d5;font-size:.68rem;font-weight:800;letter-spacing:.1em}
.prompt-box>code{display:block;padding:0 76px 0 0;color:inherit;background:none;white-space:normal}
.prompt-box textarea{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.copy-button{position:absolute;top:18px;right:18px;padding:6px 10px;color:#d9ecec;background:#294047;border:1px solid #47636b;border-radius:4px;cursor:pointer;font:700 .7rem/1.2 inherit}
.copy-button:hover,.copy-button:focus-visible{background:#35535c}
.article-sources{margin-top:48px;padding:26px 28px;background:#fff;border:1px solid var(--line)}
.article-sources h2{margin:0 0 12px;font-size:1rem}.article-sources ul{margin:0;padding-left:1.2rem}.article-sources a{color:var(--pink-dark)}
.source-viewer{margin-top:30px;overflow:hidden;border:1px solid #31494f;background:#101b1f}
.source-viewer__header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#eef8f8;background:#1c3036;border-bottom:1px solid #365158}
.source-viewer__header>div{display:grid;line-height:1.35}.source-viewer__header strong{font-size:.92rem}.source-viewer__header span{color:#9db7bb;font-size:.7rem}
.source-viewer__header button{padding:8px 12px;color:#fff;background:#347f7d;border:1px solid #58aaa7;border-radius:4px;cursor:pointer;font:700 .72rem/1.2 inherit}.source-viewer__header button:hover:not(:disabled),.source-viewer__header button:focus-visible:not(:disabled){background:#409a97}.source-viewer__header button:disabled{cursor:wait;opacity:.55}
.source-viewer__status{margin:0;padding:12px 16px;color:#9db7bb;font-size:.74rem}
.article-body .source-viewer__code{max-height:620px;margin:0;padding:18px 20px;overflow:auto;border:0;background:#101b1f;font-size:.75rem;line-height:1.65;white-space:pre;tab-size:4}
@media(max-width:820px){.article-hero__inner{padding:54px 22px 62px}.breadcrumb{margin-bottom:30px}.article-layout{padding:48px 20px 78px;display:block}.article-index{position:static;margin-bottom:48px}.article-body{font-size:.97rem;line-height:1.95}.strategy-list{margin:34px 0 58px}.article-section{margin-top:62px}.article-conclusion{margin-top:68px;padding:30px 24px}}
@media(max-width:620px){.file-cards{grid-template-columns:1fr}.prompt-box>code{padding-right:0;padding-top:35px}.copy-button{top:16px}.article-body pre{padding:18px 16px;font-size:.82rem}.save-dialog__row{grid-template-columns:1fr;gap:3px}.save-dialog__row label{text-align:left}.save-dialog__mark{right:-5px;top:16px}.save-dialog__files{min-height:90px}.save-dialog__actions span{padding:7px 16px}.explorer-mock__toolbar{grid-template-columns:auto 1fr}.explorer-mock__toolbar>span:last-of-type{display:none}.explorer-mock__toolbar i{left:auto;right:4px}.explorer-mock__files{min-height:90px}.terminal-mock pre{font-size:.68rem;white-space:pre-wrap;overflow-wrap:anywhere}.indent-example>div{grid-template-columns:1fr;gap:1px}.indent-example__child code{margin-left:2rem}}