:root { --base:#f3f5f4; --card:#fff; --text:#343a40; --main:#01B202; --soft:#dafbe1; --border:1px solid rgba(36,41,47,.16); }
* { box-sizing:border-box; }
body { margin:0; color:#3f464d; background:var(--base); font-family:"Noto Sans JP",sans-serif; font-size:16px; line-height:1.7; }
button,input { font:inherit; }
a { color:inherit; }
code,input { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }
:focus-visible { outline:3px solid var(--main); outline-offset:3px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:100; padding:8px 12px; background:var(--text); color:#fff; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.practice-header { position:sticky; top:0; z-index:30; border-bottom:var(--border); background:var(--card); }
.practice-nav { width:calc(100% - 32px); min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; margin-inline:auto; }
.practice-nav a { min-height:44px; display:inline-flex; align-items:center; font-weight:700; text-decoration:none; }
.practice-brand { gap:12px; }
.practice-brand span { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; background:var(--main); color:#fff; }
main { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.practice-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:24px; padding:48px 0 64px; }
.missions,.terminal-card { border:var(--border); border-radius:16px; background:var(--card); }
.missions { align-self:start; padding:24px; }
.mission-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mission-heading h2,.terminal-bar h2 { margin:0; font-size:20px; }
.mission-heading span { color:var(--main); font-weight:700; }
.missions ol { margin:20px 0; padding:0; list-style:none; }
.missions li { display:grid; grid-template-columns:1fr auto; gap:4px 12px; padding:16px 0; border-top:var(--border); }
.missions li::before { content:"未完了"; grid-column:1/-1; color:rgba(36,41,47,.68); font-size:12px; font-weight:700; }
.missions li.is-complete::before { content:"完了"; color:var(--main); }
.missions code { white-space:nowrap; }
.missions button,.terminal-form button,.command-shortcuts button { min-height:44px; border:0; border-radius:8px; cursor:pointer; font-weight:700; }
.missions > button { width:100%; border:var(--border); background:var(--card); }
.terminal-card { overflow:hidden; }
.terminal-bar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 20px; border-bottom:var(--border); }
.terminal-bar span { padding:4px 10px; border-radius:999px; background:var(--soft); color:var(--main); font-size:12px; font-weight:700; }
.workspace-preview { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(240px,.85fr); }
.terminal-output { min-height:320px; max-height:420px; padding:20px; overflow-y:auto; background:var(--text); color:#fff; }
.terminal-output p { margin:0 0 8px; white-space:pre-wrap; }
.terminal-output .error { color:var(--soft); }
.finder-preview { min-width:0; border-left:var(--border); background:var(--card); }
.finder-toolbar { min-height:48px; display:flex; align-items:center; gap:12px; padding:8px 12px; border-bottom:var(--border); font-size:12px; }
.finder-dots { display:flex; gap:5px; }
.finder-dots i { width:8px; height:8px; border-radius:50%; background:var(--soft); border:1px solid var(--main); }
.finder-path { margin:0; padding:10px 12px; border-bottom:var(--border); color:var(--main); font-size:12px; font-weight:700; }
.finder-files { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 8px; min-height:190px; padding:20px 12px; }
.finder-item { min-width:0; text-align:center; font-size:12px; }
.finder-icon { position:relative; width:52px; height:36px; margin:8px auto; border-radius:4px; background:var(--soft); border:1px solid var(--main); }
.finder-icon.folder::before { content:""; position:absolute; top:-7px; left:4px; width:22px; height:8px; border:1px solid var(--main); border-bottom:0; border-radius:4px 4px 0 0; background:var(--soft); }
.finder-icon.file { width:34px; height:44px; background:var(--card); }
.finder-note { margin:0; padding:10px 12px; border-top:var(--border); font-size:12px; }
.terminal-form { display:grid; grid-template-columns:1fr auto; gap:8px; padding:20px 20px 8px; }
.terminal-form label { grid-column:1/-1; font-weight:700; }
.terminal-prompt { min-height:48px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; padding:0 12px; border:2px solid var(--text); border-radius:8px; }
.terminal-prompt input { min-width:0; border:0; outline:0; background:transparent; }
.terminal-form button { padding:8px 24px; background:var(--main); color:#fff; }
.command-shortcuts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; padding:16px 20px 24px; border-top:var(--border); }
.command-shortcuts > h2 { grid-column:1/-1; margin:0; font-size:20px; }
.command-group { min-width:0; }
.command-group h3 { margin:0 0 8px; color:var(--main); font-size:14px; }
.command-group div { display:flex; flex-wrap:wrap; gap:8px; }
.command-shortcuts button { padding:8px 12px; border:var(--border); background:var(--card); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; }
footer { padding:24px; border-top:var(--border); background:var(--card); text-align:center; }
footer a { min-height:44px; display:inline-flex; align-items:center; font-weight:700; }
@media(max-width:900px){.workspace-preview{grid-template-columns:1fr}.finder-preview{border-top:var(--border);border-left:0}}
@media(max-width:800px){.practice-layout{grid-template-columns:1fr}.missions{order:2}.terminal-card{order:1}}
@media(max-width:600px){main{width:calc(100% - 32px)}.practice-nav{min-height:64px}.practice-layout{padding-top:24px}.terminal-form{grid-template-columns:1fr}.terminal-form button{width:100%}.terminal-output{min-height:240px}.command-shortcuts{grid-template-columns:1fr}.missions,.terminal-card{border-radius:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important}}