:root { --paper:#f4f1e9; --card:#fffcf7; --ink:#252922; --muted:#77796f; --line:#deded2; --green:#346650; --coral:#df745b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.6 -apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; -webkit-font-smoothing:antialiased; }
button,a { color:inherit; font:inherit; touch-action:manipulation; }
button { cursor:pointer; border:0; }
button:focus-visible,a:focus-visible { outline:3px solid var(--coral); outline-offset:4px; }
img { display:block; max-width:100%; }
h1,h2,p { margin:0; }
::selection { background:#ee7b6240; }
.page-wrap { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:fixed; z-index:10; left:20px; top:-100px; padding:10px 18px; background:var(--ink); color:#fff; border-radius:6px; }
.skip-link:focus { top:12px; }
.page-header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:38px 0 28px; }
.eyebrow { font-size:11px; color:var(--green); letter-spacing:1px; margin-bottom:9px; }
h1 { font-size:35px; font-weight:650; letter-spacing:-.035em; line-height:1.3; }
.page-intro { margin-top:9px; color:var(--muted); font-size:13px; }
.header-note { color:var(--muted); font-size:11px; padding-bottom:3px; white-space:nowrap; }
.skill-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.skill-card { min-width:0; background:var(--card); border:1px solid var(--line); border-radius:15px; overflow:hidden; }
.card-copy { padding:20px 22px 17px; }
.card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-heading h2 { font-size:20px; font-weight:650; line-height:1.4; letter-spacing:-.025em; white-space:nowrap; }
.card-number { color:#92998c; font-size:11px; font-weight:500; margin-right:9px; vertical-align:2px; letter-spacing:.03em; }
.tool-label { color:var(--muted); font-size:10px; white-space:nowrap; }
.card-copy>p { color:#6b7065; font-size:12px; line-height:1.8; margin-top:8px; }
.preview { position:relative; width:calc(100% - 44px); height:246px; margin-inline:22px; padding:0; background:#e6e8df; border:1px solid #00000009; border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.preview img { width:100%; height:100%; object-fit:contain; transition:transform .2s ease; }
.preview:hover img { transform:scale(1.015); }
.unity-preview { background:#e2eadd; }
.unity-preview img { width:auto; max-width:100%; filter:drop-shadow(0 5px 10px #26392a1f); }
.jianying-preview { background:#eae0d6; }
.photopea-preview { background:#e5dfe9; }
.analytics-preview { background:#14232d; }
.preview-label { position:absolute; bottom:12px; left:12px; color:#3c5a45; background:#fffffff0; border-radius:5px; padding:4px 8px; font-size:9px; box-shadow:0 2px 8px #00000008; }
.synthetic-label { color:#dceadf; background:#253c40f2; border:1px solid #8ca69b55; }
.zoom-icon { position:absolute; right:11px; bottom:11px; width:27px; height:27px; display:grid; place-items:center; background:#fffffff0; border:1px solid #d1d9cd; border-radius:50%; font-size:17px; line-height:1; }
.card-actions { display:flex; align-items:center; gap:19px; padding:17px 22px 20px; min-height:75px; }
.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:36px; padding:7px 13px; background:var(--green); color:#fff; font-size:11px; border-radius:6px; white-space:nowrap; }
.primary-button>span { font-size:9px; }
.primary-button:hover { background:#264f3d; }
.text-button { padding:7px 0; background:transparent; color:#697462; font-size:11px; white-space:nowrap; }
.text-button>span { margin-left:3px; }
.text-button:hover { color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.page-footer { display:flex; justify-content:space-between; gap:20px; color:#8c9084; font-size:10px; padding:22px 1px 26px; }
.media-dialog { padding:0; border:0; border-radius:12px; background:var(--card); color:var(--ink); width:min(1120px,calc(100% - 40px)); max-height:calc(100dvh - 40px); overflow:auto; box-shadow:0 24px 100px #0005; }
.media-dialog::backdrop { background:#101910b3; backdrop-filter:blur(4px); }
.media-dialog:not([open]) { display:none; }
.dialog-header { position:sticky; top:0; z-index:2; background:var(--card); display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 20px; border-bottom:1px solid var(--line); }
.dialog-header h2 { font-size:17px; font-weight:600; line-height:1.5; }
.dialog-close { display:grid; place-items:center; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:#eeede5; font-size:26px; line-height:1; }
.dialog-close:hover { background:#deded2; }
.dialog-content { display:flex; justify-content:center; align-items:center; min-height:150px; background:#121c18; }
.dialog-content img,.dialog-content video { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 205px); object-fit:contain; }
.dialog-content video { width:100%; min-height:150px; }
.dialog-description { color:var(--muted); font-size:11px; line-height:1.7; padding:14px 20px 18px; }
.dialog-error { font-size:12px; color:#a54930; padding:0 20px 18px; }
.dialog-error[hidden] { display:none; }
body.dialog-open { overflow:hidden; }
@media(max-width:1000px) {
  .page-wrap { width:calc(100% - 48px); }
  .card-heading { flex-wrap:wrap; gap:3px 10px; }
  .card-heading h2 { font-size:19px; }
  .card-copy { padding:18px 18px 14px; }
  .card-copy>p { font-size:11px; }
  .preview { width:calc(100% - 36px); height:230px; margin-inline:18px; }
  .card-actions { gap:15px; padding:15px 18px 18px; }
  .tool-label { font-size:9px; }
}
@media(max-width:700px) {
  .page-wrap { width:calc(100% - 32px); }
  .page-header { padding:27px 2px 23px; }
  h1 { font-size:29px; }
  .eyebrow { font-size:10px; margin-bottom:7px; }
  .page-intro { font-size:11px; margin-top:8px; }
  .header-note { display:none; }
  .skill-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .skill-card { border-radius:12px; }
  .card-copy { padding:18px 17px 14px; }
  .card-heading h2 { font-size:19px; }
  .card-number { font-size:10px; margin-right:7px; }
  .card-copy>p { font-size:11px; margin-top:8px; }
  .preview { width:calc(100% - 34px); height:clamp(183px,56vw,275px); margin-inline:17px; border-radius:7px; }
  .card-actions { min-height:71px; gap:17px; padding:14px 17px 18px; }
  .primary-button { min-height:36px; font-size:10px; padding-inline:11px; gap:7px; }
  .text-button { font-size:10px; }
  .tool-label { font-size:9px; }
  .preview-label { bottom:10px; left:10px; font-size:8px; }
  .zoom-icon { right:9px; bottom:9px; width:24px; height:24px; font-size:16px; }
  .page-footer { display:block; padding:20px 2px 24px; font-size:9px; }
  .page-footer p+p { margin-top:4px; }
  .media-dialog { width:calc(100% - 20px); max-height:calc(100dvh - 24px); border-radius:10px; }
  .dialog-header { padding:13px 15px; gap:12px; }
  .dialog-header h2 { font-size:14px; }
  .dialog-close { width:32px; height:32px; font-size:25px; }
  .dialog-content img,.dialog-content video { max-height:calc(100dvh - 195px); }
  .dialog-description { padding:12px 15px 16px; font-size:10px; }
  .dialog-error { padding:0 15px 16px; font-size:11px; }
}
@media(max-width:360px) {
  .card-heading { gap:5px; }
  .card-heading h2 { font-size:18px; }
  .tool-label { font-size:8px; }
  .card-copy>p { font-size:10px; }
  .card-actions { gap:11px; }
  .primary-button { padding-inline:9px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
}