// Terminal direction — styles only

const tStyles = {
  page: {
    width: '100%', minHeight: '100%', background: '#FAFAF7', color: '#0A0A0A',
    fontFamily: "'JetBrains Mono', 'Geist Mono', ui-monospace, monospace",
    fontSize: 14, lineHeight: 1.65, position: 'relative',
  },
  gridBg: {
    position: 'absolute', inset: 0,
    backgroundImage: 'linear-gradient(#0a0a0a09 1px, transparent 1px), linear-gradient(90deg, #0a0a0a09 1px, transparent 1px)',
    backgroundSize: '32px 32px', pointerEvents: 'none',
    maskImage: 'radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%)',
    WebkitMaskImage: 'radial-gradient(ellipse at 50% 0%, black 0%, transparent 70%)',
  },
  inner: { position: 'relative', maxWidth: 1040, margin: '0 auto', padding: '32px 48px 96px' },

  topbar: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '14px 18px', border: '1px solid #0a0a0a', borderRadius: 6,
    background: '#FFFFFF', boxShadow: '4px 4px 0 #0a0a0a', fontSize: 12, marginBottom: 56,
  },
  topbarL: { display: 'flex', alignItems: 'center', gap: 10 },
  dot: (c) => ({ width: 10, height: 10, borderRadius: '50%', background: c, border: '1px solid #0a0a0a' }),
  topbarPath: { color: '#666', marginLeft: 12 },
  topbarR: { display: 'flex', gap: 18, fontSize: 12 },
  navLink: { color: '#0a0a0a', textDecoration: 'none', cursor: 'pointer', position: 'relative' },

  promptBlock: { marginBottom: 28 },
  prompt: { color: '#666' },
  promptUser: { color: '#0066CC', fontWeight: 600 },
  promptCmd: { color: '#0a0a0a' },
  cursor: {
    display: 'inline-block', width: 8, height: 16, background: '#0a0a0a',
    verticalAlign: 'text-bottom', marginLeft: 2, animation: 'blink 1s steps(1) infinite',
  },

  heroName: {
    fontFamily: "'JetBrains Mono', monospace", fontSize: 44, fontWeight: 700,
    lineHeight: 1.05, margin: '24px 0 12px', letterSpacing: '-0.02em',
  },
  heroTagline: {
    fontSize: 16, lineHeight: 1.55, color: '#1a1a1a', maxWidth: 720,
    margin: '0 0 22px', fontStyle: 'italic',
    paddingLeft: 14, borderLeft: '2px solid #0a0a0a',
  },
  heroRoles: { fontSize: 14, color: '#444', marginBottom: 24 },
  heroRoleTag: {
    display: 'inline-block', padding: '3px 8px', border: '1px solid #0a0a0a',
    borderRadius: 3, fontSize: 11, marginRight: 6, marginBottom: 6, background: '#fff',
  },

  statsGrid: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginTop: 28 },
  statBox: {
    border: '1px solid #0a0a0a', background: '#fff', padding: '18px 18px 16px',
    boxShadow: '4px 4px 0 #0a0a0a', position: 'relative',
  },
  statValue: { fontSize: 32, fontWeight: 700, lineHeight: 1, letterSpacing: '-0.02em', color: '#0a0a0a' },
  statLabel: { marginTop: 8, fontSize: 11, color: '#666', textTransform: 'uppercase', letterSpacing: '0.06em' },
  statTick: { position: 'absolute', top: 8, right: 10, fontSize: 10, color: '#999' },

  section: { marginTop: 72 },
  sectionH: {
    display: 'flex', alignItems: 'baseline', gap: 12, fontSize: 13, color: '#666',
    marginBottom: 18, paddingBottom: 8, borderBottom: '1px dashed #0a0a0a44',
  },
  sectionN: { color: '#0a0a0a', fontWeight: 700 },
  sectionMeta: { marginLeft: 'auto', fontSize: 11, color: '#999' },
  aboutText: { fontSize: 14.5, lineHeight: 1.75, color: '#1a1a1a', maxWidth: 720 },

  stackGrid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginTop: 6 },
  stackBlock: {
    border: '1px solid #0a0a0a', background: '#fff', padding: '14px 16px 16px',
    boxShadow: '3px 3px 0 #0a0a0a',
  },
  stackHead: {
    fontSize: 11, color: '#666', textTransform: 'uppercase', letterSpacing: '0.08em',
    marginBottom: 12, paddingBottom: 8, borderBottom: '1px dashed #0a0a0a33',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  stackHeadName: { color: '#0a0a0a', fontWeight: 700 },
  stackList: { display: 'flex', flexWrap: 'wrap', gap: 6 },
  stackChip: {
    fontSize: 11.5, padding: '3px 8px', border: '1px solid #0a0a0a22',
    borderRadius: 3, background: '#FAFAF7', color: '#0a0a0a',
  },

  expWrap: { position: 'relative', paddingLeft: 22, marginTop: 4 },
  expRail: { position: 'absolute', left: 6, top: 8, bottom: 8, width: 1, borderLeft: '1px dashed #0a0a0a55' },
  expItem: { position: 'relative', paddingBottom: 28 },
  expDot: {
    position: 'absolute', left: -22, top: 6, width: 13, height: 13, borderRadius: 999,
    background: '#FAFAF7', border: '2px solid #0a0a0a',
  },
  expHead: {
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
    flexWrap: 'wrap', gap: 8, marginBottom: 6,
  },
  expCompany: { fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em' },
  expRole: { color: '#666', fontSize: 13 },
  expPeriod: { fontSize: 11, color: '#999', textTransform: 'uppercase', letterSpacing: '0.06em' },
  expBullets: { margin: '8px 0 0', padding: 0, listStyle: 'none' },
  expBullet: {
    fontSize: 13, color: '#1a1a1a', lineHeight: 1.65, paddingLeft: 18,
    position: 'relative', marginBottom: 4,
  },
  expBulletMark: { position: 'absolute', left: 0, top: 0, color: '#999' },

  contactRow: { display: 'flex', justifyContent: 'space-between', padding: '8px 0', borderBottom: '1px dashed #0a0a0a22', fontSize: 13 },
  contactKey: { color: '#666' },
  contactVal: { color: '#0a0a0a', textDecoration: 'none' },

  // projects
  projTabs: {
    display: 'flex', gap: 0, marginBottom: 18, border: '1px solid #0a0a0a',
    background: '#fff', boxShadow: '4px 4px 0 #0a0a0a', overflow: 'hidden',
    position: 'sticky', top: 8, zIndex: 20,
  },
  projTab: (active) => ({
    flex: 1, padding: '12px 14px', fontSize: 12, textAlign: 'left',
    background: active ? '#0a0a0a' : '#fff', color: active ? '#FAFAF7' : '#0a0a0a',
    border: 'none', borderRight: '1px solid #0a0a0a',
    cursor: 'pointer', fontFamily: 'inherit', display: 'flex', alignItems: 'center', gap: 10,
    transition: 'background 120ms',
  }),
  projTabDot: (c) => ({ width: 7, height: 7, borderRadius: 999, background: c, boxShadow: `0 0 0 3px ${c}33` }),
  projTabLabel: { fontWeight: 700, letterSpacing: '0.02em' },
  projTabCount: { marginLeft: 'auto', fontSize: 10, opacity: 0.65 },

  projList: { display: 'flex', flexDirection: 'column', gap: 14 },
  projCard: {
    border: '1px solid #0a0a0a', background: '#fff', boxShadow: '4px 4px 0 #0a0a0a',
    padding: '20px 22px', position: 'relative',
  },
  projHead: {
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
    gap: 14, marginBottom: 6, flexWrap: 'wrap',
  },
  projName: { fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em' },
  projRole: { fontSize: 11, color: '#666', textTransform: 'uppercase', letterSpacing: '0.06em' },
  projSummary: { fontSize: 13, color: '#1a1a1a', fontStyle: 'italic', marginBottom: 12, paddingLeft: 12, borderLeft: '2px solid #0a0a0a' },
  projDetail: { fontSize: 12.5, lineHeight: 1.7, color: '#333' },
  projStack: { display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 14, paddingTop: 12, borderTop: '1px dashed #0a0a0a22' },
  projAccent: (c) => ({
    position: 'absolute', top: 0, left: 0, bottom: 0, width: 3, background: c,
  }),

  footer: { marginTop: 80, fontSize: 11, color: '#999', display: 'flex', justifyContent: 'space-between' },
};

const tKeyframes = `
  @keyframes blink { 50% { opacity: 0; } }
  .t-nav:hover::before { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: #0a0a0a; }
  .t-stack:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #0a0a0a; }
  .t-stack { transition: transform 120ms, box-shadow 120ms; }
  .t-chip:hover { background: #fff !important; border-color: #0a0a0a !important; }
  .t-projcard:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #0a0a0a; }
  .t-projcard { transition: transform 140ms, box-shadow 140ms; }
  .t-projtab:hover:not(:disabled) { background: #f0f0ea; }

  @media (max-width: 720px) {
    .t-inner { padding: 20px 14px 64px !important; }
    .t-topbar { flex-wrap: wrap !important; padding: 12px 14px !important; margin-bottom: 32px !important; gap: 10px; box-shadow: 3px 3px 0 #0a0a0a !important; }
    .t-topbar-path { display: none !important; }
    .t-topbar-r { gap: 12px 14px !important; flex-wrap: wrap; width: 100%; }
    .t-hero-name { font-size: 32px !important; margin: 18px 0 10px !important; }
    .t-hero-tagline { font-size: 13.5px !important; max-width: 100% !important; padding-left: 10px !important; }
    .t-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 22px !important; }
    .t-stat-box { padding: 14px !important; box-shadow: 3px 3px 0 #0a0a0a !important; }
    .t-stat-value { font-size: 22px !important; }
    .t-section { margin-top: 48px !important; }
    .t-section-h { font-size: 12px !important; gap: 8px !important; flex-wrap: wrap; }
    .t-stack-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .t-stack { box-shadow: 3px 3px 0 #0a0a0a !important; }
    .t-projtabs { box-shadow: 3px 3px 0 #0a0a0a !important; top: 6px !important; }
    .t-projtabs > .t-projtab { padding: 9px 8px !important; font-size: 11px !important; gap: 6px !important; min-width: 0; }
    .t-projtabs > .t-projtab > .t-projtab-count { display: none !important; }
    .t-projcard { padding: 16px !important; box-shadow: 3px 3px 0 #0a0a0a !important; }
    .t-projcard:hover { box-shadow: 4px 4px 0 #0a0a0a !important; }
    .t-exp-company { font-size: 15px !important; }
    .t-footer { flex-direction: column !important; gap: 4px !important; align-items: flex-start !important; margin-top: 56px !important; }
  }

  @media (max-width: 380px) {
    .t-hero-name { font-size: 26px !important; }
    .t-stat-value { font-size: 20px !important; }
    .t-stat-box { padding: 12px !important; }
  }
`;

window.tStyles = tStyles;
window.tKeyframes = tKeyframes;