/* WINNETRIE PORTFOLIO v1.2
   Scoped styles: no shared site files are modified.
   Palette: midnight / ice blue / electric violet / warm pink.
*/
.portfolio-page {
    --pf-bg: #070c19;
    --pf-panel: #101a2a;
    --pf-panel-strong: #142136;
    --pf-white: #f5f9ff;
    --pf-muted: #a3b2c8;
    --pf-dim: #7689a5;
    --pf-border: rgba(118, 162, 211, .17);
    --pf-cyan: #52d7ff;
    --pf-purple: #b39bff;
    --pf-pink: #fb75c5;
    --pf-green: #7cebc4;
    font-family: 'Segoe UI', 'Trebuchet MS', Arial, sans-serif !important;
    color: var(--pf-white);
    background: var(--pf-bg) !important;
    line-height: 1.55;
    overflow-x: hidden;
}
.portfolio-page *, .portfolio-page *::before, .portfolio-page *::after { box-sizing: border-box; }
.portfolio-page button, .portfolio-page input { font: inherit; }
.portfolio-page a { color: inherit; }
.portfolio-page :focus-visible { outline: 2px solid var(--pf-cyan); outline-offset: 4px; }
.portfolio-skip { position: fixed; top: -100px; left: 140px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: #11334b; }
.portfolio-skip:focus { top: 12px; }
.portfolio-page .sidebar-button, .portfolio-page .account-button { font-family: 'Segoe UI', Arial, sans-serif; }
.portfolio-page .timmy-sidebar { top: 20px; left: 16px; }
.portfolio-page .top-bar { top: 20px; right: 26px; }
.portfolio-shell { position: relative; isolation: isolate; min-height: 100vh; margin-left: 113px; overflow: hidden; background:
    linear-gradient(transparent, transparent),
    radial-gradient(ellipse 650px 460px at 85% 3%, rgba(83,38,143,.14), transparent 85%),
    radial-gradient(ellipse 600px 550px at 7% 13%, rgba(17,124,183,.10), transparent 80%),
    #070c19;
}
.portfolio-shell::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .22; pointer-events: none;
    background-image: linear-gradient(rgba(80, 154, 214, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 154, 214, .09) 1px, transparent 1px);
    background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000 0%, transparent 80%);
}
.portfolio-ambient { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); z-index: -1; }
.portfolio-ambient-one { width: 300px; height: 300px; right: -125px; top: 340px; background: rgba(129, 76, 224, .13); }
.portfolio-ambient-two { width: 260px; height: 260px; left: -155px; top: 1350px; background: rgba(46, 188, 255, .10); }
.portfolio-container { position: relative; width: min(1340px, 100%); margin: 0 auto; padding: 120px clamp(22px,4.5vw,68px) 25px; }
.portfolio-eyebrow, .section-overline, .console-header, .console-footer, .portfolio-hero-note, .portfolio-resultbar,
.project-card-meta, .project-featured, .project-card-bottom, .portfolio-footerline, .sidecard-heading, .about-panel-head,
.about-panel-foot, .detail-facts span, .detail-small-note, .detail-breadcrumb, .related-card small, .portfolio-breadcrumbs {
    font-family: Consolas, 'Courier New', monospace;
}
.portfolio-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; color: #8ecfff; font-size: 11px; letter-spacing: 1.6px; font-weight: 700; }
.live-dot, .status-pip { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: #80ebc3; box-shadow: 0 0 12px rgba(128,235,195,.85); flex-shrink: 0; }
.eyebrow-line { height: 1px; width: 30px; background: #4d7498; opacity: .8; }
.portfolio-hero { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(310px,.90fr); align-items: center; gap: clamp(32px,5vw,80px); padding-bottom: 83px; }
.portfolio-hero h1 { font-weight: 800; font-size: clamp(35px,4.1vw,63px); letter-spacing: -2.9px; line-height: 1.13; margin: 25px 0; max-width: 740px; }
.portfolio-hero h1 span, .section-heading h2 span, .portfolio-about h2 span, .related-projects h2 span { color: var(--pf-cyan); background: linear-gradient(110deg, #8bdeff 0%, #6ee4ed 43%, #dca9ff 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.portfolio-hero-lead { max-width: 610px; color: #ced9e9; font-size: clamp(15px,1.4vw,18px); line-height: 1.75; }
.portfolio-hero-lead strong { color: var(--pf-white); }
.portfolio-hero-sub { max-width: 620px; margin-top: 14px; color: var(--pf-muted); font-size: 15px; line-height: 1.8; }
.portfolio-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 24px; }
.portfolio-btn { display: inline-flex; justify-content: center; align-items: center; gap: 15px; min-height: 47px; padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 13px; letter-spacing: .1px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.portfolio-btn:hover { transform: translateY(-2px); }
.portfolio-btn span { font-size: 16px; line-height: 1; }
.portfolio-btn-primary { color: #07101e !important; background: linear-gradient(105deg,#69d8ff,#a9d7ff); box-shadow: 0 6px 25px rgba(58,183,255,.20); }
.portfolio-btn-primary:hover { box-shadow: 0 8px 30px rgba(66,202,255,.35); }
.portfolio-btn-ghost { color: #d4e1f2 !important; background: rgba(21,39,60,.55); border-color: rgba(151,188,231,.22); }
.portfolio-btn-ghost:hover, .portfolio-btn-outline:hover { border-color: rgba(106,215,255,.72); background: #162b42; }
.portfolio-btn-outline { background: transparent; border-color: rgba(94,181,215,.4); color: var(--pf-cyan) !important; }
.portfolio-hero-note { display: flex; align-items: center; gap: 10px; color: #92a8c2; font-size: 10px; letter-spacing: .2px; }
.portfolio-hero-note .status-pip { width: 5px; height: 5px; }
/* Decorative developer console: readable in CSS only. */
.hero-console { position: relative; min-width: 0; border-radius: 18px; border: 1px solid rgba(96,180,240,.32); background: linear-gradient(153deg, rgba(20,33,55,.94), rgba(12,19,33,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.39), 0 0 60px rgba(63,171,246,.09), inset 0 1px rgba(255,255,255,.08); transform: rotate(1.5deg); overflow: hidden; }
.hero-console::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg,rgba(58,189,255,.06),transparent 45%,rgba(148,89,255,.055)); }
.console-header { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 17px; border-bottom: 1px solid rgba(107,155,211,.15); color: #a9bdd5; font-size: 9px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.window-dots { display: flex; align-items: center; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #f17b8a; }
.window-dots i:nth-child(2) { background: #f0c96a; }.window-dots i:nth-child(3) { background: #76daa9; }
.console-header-right { margin-left: auto; color: #73e4b8; font-size: 9px; }
.console-content { padding: 24px clamp(16px,2vw,30px) 18px; }
.console-prompt { color: #8bdafa; font: 11px Consolas,monospace; margin-bottom: 15px; }
.console-cursor { color: #b1a0ff; animation: cursorblink 1.1s steps(1) infinite; }
@keyframes cursorblink { 50% { opacity: 0; } }
.console-code { font: clamp(11px,1.15vw,14px)/2 Consolas,'Courier New',monospace; color: #d9e3f2; }
.code-purple { color: #c59bff; } .code-cyan { color: #6dd9ff; } .code-yellow { color: #f9d48d; } .code-mint { color: #78e5bb; }
.console-signal { margin-top: 23px; padding: 14px 15px; border: 1px solid rgba(100,210,225,.16); border-radius: 8px; background: rgba(54,181,194,.045); }
.signal-bars { height: 28px; display: flex; align-items: center; gap: 5px; overflow: hidden; }
.signal-bars span { flex: 1; max-width: 9px; height: 35%; border-radius: 2px; background: linear-gradient(0deg,#49c5e9,#b5a1ff); box-shadow: 0 0 12px rgba(77,217,245,.3); }
.signal-bars span:nth-child(3n) {height: 85%;}.signal-bars span:nth-child(5n) {height: 52%;}.signal-bars span:nth-child(7n) {height: 100%;}.signal-bars span:nth-child(11n) {height: 71%;}
.console-signal > span { display: block; margin-top: 8px; font: 9px Consolas,monospace; letter-spacing: 1px; color: #8bdaeb; }
.console-footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid rgba(107,155,211,.15); font-size: 9px; letter-spacing: .8px; color: #778ea9; }
.portfolio-highlights { display: flex; justify-content: space-around; align-items: center; gap: 20px; border: 1px solid var(--pf-border); border-radius: 15px; padding: 23px 28px; background: linear-gradient(115deg,rgba(19,34,55,.82),rgba(12,23,40,.66)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.highlight-item { display: flex; align-items: center; gap: 14px; }.highlight-number { color: #8ce0ff; font-size: 31px; line-height: 1; font-weight: 800; letter-spacing: -1px; }.highlight-label { color: #92a6bd; font-size: 12px; }.highlight-sep { width: 1px; align-self: stretch; background: rgba(142,189,231,.15); }.highlight-word { font: 700 clamp(12px,1.5vw,19px) Consolas,monospace; letter-spacing: -.4px; white-space: nowrap; }.highlight-word em { font-style: normal; color: #d0abff; }
/* Sections */
.portfolio-work { padding-top: 110px; scroll-margin-top: 40px; }.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 35px; }.section-overline { font-size: 11px; letter-spacing: 2px; color: #93b2d1; font-weight: 700; }.section-overline span { color: #65d6fb; margin-right: 9px; }
.section-heading h2, .portfolio-about h2, .related-projects h2 { margin: 12px 0 11px; font-size: clamp(28px,3vw,43px); line-height: 1.14; letter-spacing: -1.2px; font-weight: 800; }.section-heading p { font-size: 14px; color: var(--pf-muted); max-width: 610px; line-height: 1.7; }.section-heading-mark { font: 800 34px Consolas,monospace; color: rgba(94,205,253,.17); margin-right: 10px; }
.portfolio-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 17px; }.portfolio-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.portfolio-filter { padding: 9px 13px; border: 1px solid rgba(111,156,195,.17); border-radius: 9px; background: rgba(19,32,51,.67); color: #9aafc8; cursor: pointer; white-space: nowrap; font-weight: 600; font-size: 12px; transition: .19s ease; }
.portfolio-filter:hover { background: rgba(32,56,82,.86); border-color: rgba(104,196,255,.4); color: #f4fbff; }.portfolio-filter.is-active { background: linear-gradient(100deg,rgba(39,159,208,.22),rgba(91,84,179,.18)); border-color: rgba(78,213,249,.7); color: #8ee6ff; box-shadow: inset 0 0 19px rgba(39,155,235,.08); }
.portfolio-search { display: flex; align-items: center; gap: 8px; min-width: 190px; max-width: 270px; padding: 0 12px; border: 1px solid var(--pf-border); border-radius: 9px; color: #9bb5cb; background: rgba(15,26,44,.84); }
.portfolio-search > span:first-child { font-size: 25px; line-height: 1; }.portfolio-search input { border: 0; outline: 0; width: 100%; min-width: 0; height: 40px; color: #fff; background: transparent; font-size: 12px; }.portfolio-search:focus-within { border-color: var(--pf-cyan); }.portfolio-search input::placeholder { color: #788da4; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.portfolio-resultbar { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: #738aa4; font-size: 10px; letter-spacing: .3px; }.portfolio-resultbar > span:first-child { color: #bed4e7; }.resultbar-separator { width: 3px; height: 3px; border-radius: 50%; background: #5b84a2; }
.portfolio-project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 19px; }.project-card[hidden], .portfolio-empty[hidden] { display: none !important; }
.project-card { --card-accent: #63d8ff; min-width: 0; position: relative; overflow: hidden; border: 1px solid rgba(105,150,202,.20); border-radius: 15px; background: linear-gradient(160deg,rgba(23,38,61,.98),rgba(11,22,39,.96)); box-shadow: 0 12px 35px rgba(0,0,0,.15); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.project-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb,var(--card-accent), transparent 40%); box-shadow: 0 15px 45px rgba(0,0,0,.35), 0 0 32px color-mix(in srgb,var(--card-accent),transparent 90%); }
.accent-cyan { --card-accent:#69d8ff; }.accent-mint { --card-accent:#72e8c7; }.accent-violet { --card-accent:#bba0ff; }.accent-amber { --card-accent:#ffd389; }.accent-coral { --card-accent:#ff9caa; }
.project-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; }.project-card-image { position: relative; height: 183px; overflow: hidden; background: #0b1930; border-bottom: 1px solid rgba(112,160,211,.12); }.project-card-image::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -20px 35px rgba(4,12,24,.18); }
/* Direct external link on Minecraft cards; separate from the internal card link. */
.project-card-curseforge { position:absolute; top:12px; right:12px; z-index:5; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:7px; border:1px solid rgba(255,175,123,.55); background:rgba(17,23,39,.91); color:#ffc49d !important; font:700 10px Consolas,'Courier New',monospace; letter-spacing:.2px; text-decoration:none; box-shadow:0 3px 12px rgba(0,0,0,.25); backdrop-filter:blur(7px); transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.project-card-curseforge:hover { background:#362536; border-color:#ffc49d; transform:translateY(-2px); }
.project-card-curseforge span {font-size:13px;line-height:1;}
.project-card-image img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }.project-card:hover .project-card-image img { transform:scale(1.055); }
.project-featured { position:absolute; top:12px; left:12px; z-index:1; border:1px solid rgba(148,213,251,.25); background:rgba(9,21,36,.78); backdrop-filter:blur(10px); border-radius:6px; padding:6px 9px; font-size:9px; letter-spacing:1px; color:#dff4ff; }
.project-featured span {color:#8fe9ff;}.project-image-arrow { position:absolute; z-index:2; right:12px; bottom:12px; display:grid; place-items:center; height:32px; width:32px; border-radius:8px; border:1px solid rgba(208,236,255,.25); background:rgba(9,20,36,.78); font-size:19px; color:#e5f5ff; transition:transform .22s ease, background .22s ease; }.project-card:hover .project-image-arrow { transform:translate(2px,-2px); background:rgba(27,92,136,.92); }
.project-card-body { padding:19px 19px 15px; display:flex; flex:1; flex-direction:column; }.project-card-meta { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#8ba6c6; font-size:10px; letter-spacing:.45px; }.project-card-meta span:first-child {color:var(--card-accent);}.project-card h3 { font-size:20px; letter-spacing:-.45px; margin:10px 0 8px; line-height:1.3; }.project-card p { font-size:13px; color:#a7b7c9; line-height:1.7; margin:0; flex:1; min-height:65px; }.project-card-tags { display:flex; flex-wrap:wrap; gap:6px; margin:17px 0; }.project-card-tags span, .detail-stack span, .skill-chips span { display:inline-flex; align-items:center; border-radius:5px; padding:5px 8px; border:1px solid rgba(110,151,196,.16); background:rgba(79,113,165,.10); color:#b8c9d9; font-size:10px; }
.project-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:5px; border-top:1px solid rgba(137,175,220,.13); padding-top:12px; color:#8199af; font-size:10px; }.project-status { display:flex; align-items:center; gap:6px; }.project-status i {width:6px; height:6px; border-radius:50%; background:var(--card-accent);box-shadow:0 0 8px var(--card-accent);}.project-readmore {color:var(--card-accent);font-family:'Segoe UI',Arial,sans-serif;font-weight:700;font-size:11px;white-space:nowrap;}.project-readmore span {font-size:14px;}
.portfolio-empty { border:1px dashed rgba(105,204,255,.36);padding:35px 22px; border-radius:12px; margin:20px 0; color:#abc8dd; text-align:center; background:rgba(16,34,53,.45); }
/* About / contact */
.portfolio-about { display:grid; grid-template-columns:1fr minmax(290px,.86fr); gap:clamp(28px,6vw,90px); padding:115px 0 100px; scroll-margin-top:70px; }.about-main h2 {max-width:530px;margin:18px 0 22px;}.about-main p {color:#adbdcf; font-size:14px;line-height:1.9; margin-bottom:14px;max-width:570px;}.portfolio-text-link {display:inline-flex;gap:12px;align-items:center;margin-top:19px;color:#80dfff !important;text-decoration:none;font-size:13px;font-weight:700;}.portfolio-text-link:hover {text-decoration:underline;}.about-skill-panel {border:1px solid var(--pf-border);background:linear-gradient(135deg,#152338,#101a2b);border-radius:15px;padding:25px 27px;box-shadow:0 10px 45px rgba(0,0,0,.16);}.about-panel-head {display:flex;justify-content:space-between;letter-spacing:1.2px;color:#87a9c4;font-size:10px;border-bottom:1px solid rgba(145,191,227,.11);padding-bottom:18px;}.tiny-led {width:7px;height:7px;background:#78edc9;box-shadow:0 0 12px #52cbac;border-radius:50%;}.about-skill-panel h3 {font-size:18px;margin:22px 0 24px;}.about-skill-group {margin-top:21px;}.about-skill-group strong {display:block;color:#94d7ed;font-size:11px;margin-bottom:9px;}.skill-chips {display:flex;flex-wrap:wrap;gap:8px;}.skill-chips span {font-size:11px;padding:7px 11px;}.about-panel-foot {padding-top:23px;margin-top:23px;border-top:1px solid rgba(145,191,227,.11);font-size:9px;letter-spacing:1.5px;color:#738da9;}
.portfolio-contact {position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:36px 38px;border:1px solid rgba(99,201,250,.32);border-radius:18px;background:radial-gradient(ellipse 300px 200px at 100% 0%,rgba(81,58,162,.23),transparent),linear-gradient(105deg,#102b40,#151f39);}.portfolio-contact .contact-decoration {position:absolute;right:24%;font-size:145px;line-height:1;color:rgba(101,211,244,.08);pointer-events:none;}.portfolio-contact h2 {margin:11px 0 7px;font-size:clamp(21px,2vw,29px);letter-spacing:-.5px;}.portfolio-contact p {color:#a4bcd1;font-size:13px;}.portfolio-contact .portfolio-btn {white-space:nowrap;position:relative;}
.portfolio-footerline {display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 0 0;margin-top:24px;font-size:10px;color:#7389a5;letter-spacing:1px;}.portfolio-footerline a {text-decoration:none;color:#9fdcfc;}.portfolio-footerline a:hover {color:white;}.portfolio-footerline > span:nth-child(2) span {color:#d49bff;}
/* Detail page */
.detail-container {padding-top:125px;padding-bottom:60px;}.portfolio-breadcrumbs {display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#7891ad;font-size:11px;margin:0 0 22px;}.portfolio-breadcrumbs a {color:#8ab8d5;text-decoration:none;}.portfolio-breadcrumbs a:hover {text-decoration:underline;}.portfolio-breadcrumbs strong {color:#d8e9f6;font-weight:400;}.detail-back {display:inline-block;margin:0 0 25px;font-size:12px;color:#80d9fb !important;text-decoration:none;}.detail-back:hover {text-decoration:underline;}
.detail-hero { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(20px,5vw,65px);align-items:center;padding:30px 0 49px;}.detail-hero h1 {font-size:clamp(36px,4.4vw,62px);line-height:1.12;letter-spacing:-2px;margin:20px 0 12px;overflow-wrap:anywhere;}.detail-hero h1 span {color:var(--card-accent);}.detail-subtitle {color:#dce8f6;font-size:18px;font-weight:600;margin-bottom:13px;}.detail-summary {color:#aebed1;line-height:1.8;font-size:14px;max-width:560px;}.detail-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:23px;}.detail-cover-frame {border:1px solid rgba(117,183,223,.27);border-radius:16px;padding:8px;background:linear-gradient(145deg,#1b2d44,#0b1424);box-shadow:0 24px 45px rgba(0,0,0,.25),0 0 40px rgba(90,184,255,.09);transform:rotate(1deg);}.detail-cover-frame img {width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;}
.detail-facts {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--pf-border);border-radius:13px;background:rgba(17,30,49,.77);padding:18px 6px;}.detail-facts div {display:flex;flex-direction:column;gap:6px;padding:4px 20px;border-right:1px solid rgba(135,174,220,.16);min-width:0;}.detail-facts div:last-child {border-right:0;}.detail-facts span {font-size:10px;letter-spacing:1.2px;color:#7e9bb4;}.detail-facts strong {font-size:13px;font-weight:650;color:#e1edfa;}
.detail-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(35px,6vw,100px);padding-top:75px;scroll-margin-top:20px;}.detail-section {padding-bottom:42px;margin-bottom:35px;border-bottom:1px solid rgba(112,166,210,.13);}.detail-section:last-child {border-bottom:0;}.detail-section h2 {font-size:clamp(23px,2.6vw,30px);letter-spacing:-.7px;margin:10px 0 17px;}.detail-section p {max-width:790px;color:#acbfd3;font-size:15px;line-height:1.95;margin-bottom:13px;}.detail-sidecard {background:rgba(17,31,50,.92);border:1px solid rgba(124,170,214,.18);border-radius:13px;padding:21px;margin-bottom:15px;}.sidecard-heading {display:flex;justify-content:space-between;color:#9bbeda;font-size:10px;letter-spacing:1.2px;margin-bottom:22px;}.sidecard-heading span {color:#71ddff;}.detail-highlights {display:grid;gap:15px;padding:0;margin:0;list-style:none;}.detail-highlights li {position:relative;padding-left:18px;color:#bdcde0;font-size:13px;line-height:1.5;}.detail-highlights li::before {content:'◈';position:absolute;left:0;color:#78dbff;}.detail-stack {display:flex;flex-wrap:wrap;gap:8px;}.detail-stack span {font-size:11px;padding:7px 10px;}.detail-small-note {margin-top:25px;padding:14px 5px;border-top:1px solid rgba(121,178,229,.14);letter-spacing:1px;color:#7398b6;font-size:10px;}.detail-small-note > span {color:#58cfef;}.detail-small-note div {font-family:'Segoe UI',Arial,sans-serif;letter-spacing:0;color:#7f94ab;margin-top:12px;line-height:1.6;font-size:12px;}
.related-projects {margin-top:10px;padding-top:25px;border-top:1px solid rgba(119,167,214,.17);}.related-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:24px;}.related-card {display:flex;gap:17px;align-items:center;padding:11px;min-width:0;background:#101e31;border:1px solid rgba(127,179,226,.2);border-radius:12px;text-decoration:none;transition:transform .2s ease,border-color .2s ease;}.related-card:hover {transform:translateY(-3px);border-color:var(--card-accent);}.related-card img {width:112px;height:81px;object-fit:cover;border-radius:7px;flex-shrink:0;}.related-card > span:nth-child(2) {display:flex;flex-direction:column;gap:4px;min-width:0;}.related-card small {color:var(--card-accent);font-size:10px;}.related-card strong {color:#f2f6ff;font-size:16px;line-height:1.3;}.related-arrow {margin-left:auto;color:var(--card-accent);font-size:22px;}.detail-end {display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:50px;font:11px Consolas,monospace;color:#6e8fa8;}.detail-end a {text-decoration:none;color:#85ddff;}.detail-end a:hover {text-decoration:underline;}.not-found {min-height:55vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;}.not-found h1 {font-size:clamp(30px,5vw,57px);}.not-found h1 span {color:#7ddcff;}.not-found p {color:#a3b7c9;}
@media (max-width: 1220px) {
    .portfolio-hero {gap:35px;grid-template-columns:minmax(0,1fr) minmax(290px,.87fr);}.portfolio-hero h1 {font-size:clamp(34px,3.9vw,50px);letter-spacing:-1.7px;}.portfolio-project-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
    .portfolio-toolbar {align-items:stretch;}.portfolio-search {flex:1;max-width:300px;}
}
@media (max-width: 990px) {
    .portfolio-hero {grid-template-columns:1fr;}.hero-console {width:min(560px,100%);transform:none;}.portfolio-highlights {flex-wrap:wrap;justify-content:space-between;}.portfolio-about {grid-template-columns:1fr;gap:36px;}.detail-hero {grid-template-columns:1fr;}.detail-cover-frame {max-width:620px;transform:none;}.detail-layout {gap:30px;grid-template-columns:minmax(0,1fr) 250px;}
}
@media (max-width: 760px) {
    /* The original sidebar stays intact elsewhere. Only portfolio turns it into a compact mobile dock. */
    .portfolio-page .timmy-sidebar {position:fixed;top:auto;bottom:0;left:0;right:0;width:100%;padding:8px 10px max(8px,env(safe-area-inset-bottom));height:auto;gap:7px;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-start;overflow-x:auto;background:rgba(5,11,22,.96);border-top:1px solid rgba(117,186,231,.3);backdrop-filter:blur(18px);z-index:110;scrollbar-width:thin;}
    .portfolio-page .sidebar-button {width:68px;height:56px;min-width:68px;flex:0 0 68px;gap:2px;border-radius:10px;padding:5px;}.portfolio-page .sidebar-button img {width:23px;height:23px;}.portfolio-page .sidebar-button span {font-size:9px;}.portfolio-page .sidebar-button:hover {transform:translateY(-2px);}
    .portfolio-page .top-bar {top:10px;right:12px;}.portfolio-page .account-button {width:57px;height:55px;border-radius:12px;gap:0;}.portfolio-page .account-button img {width:24px;height:24px;}.portfolio-page .account-button span {font-size:9px;}.portfolio-page .welcome-text {right:65px;font-size:12px;}
    .portfolio-shell {margin-left:0;padding-bottom:77px;}.portfolio-container {padding:104px 20px 20px;}.portfolio-hero {padding-bottom:45px;}.portfolio-hero h1 {font-size:clamp(33px,8vw,48px);letter-spacing:-1.5px;}.portfolio-eyebrow {padding-right:130px;line-height:1.8;}.portfolio-work {padding-top:73px;}.portfolio-project-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}.project-card-body {padding:14px 13px 12px;}.project-card-image {height:145px;}.project-card h3 {font-size:17px;}.project-card p {font-size:12px;}.project-card-meta {font-size:9px;}.project-card-tags span {font-size:9px;}.project-card-bottom {font-size:9px;}.project-readmore {font-size:10px;}.portfolio-about {padding:80px 0;}.detail-container {padding-top:95px;}.detail-layout {grid-template-columns:1fr;gap:10px;padding-top:50px;}.detail-sidebar {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}.detail-small-note {display:none;}.detail-facts {grid-template-columns:repeat(2,minmax(0,1fr));}.detail-facts div:nth-child(2) {border-right:0;}.detail-facts div:nth-child(-n+2) {border-bottom:1px solid rgba(135,174,220,.16);padding-bottom:14px;}.detail-facts div:nth-child(n+3) {padding-top:14px;}.related-card img {width:90px;height:73px;}.related-card strong {font-size:14px;}.portfolio-contact {padding:27px;}
}
@media (max-width: 540px) {
    .portfolio-container {padding-left:16px;padding-right:16px;}.portfolio-hero h1 {font-size:34px;}.portfolio-hero-lead {font-size:15px;}.portfolio-highlights {gap:14px;padding:19px 16px;}.highlight-item {gap:7px;flex-direction:column;align-items:flex-start;flex:1;}.highlight-number {font-size:24px;}.highlight-word {font-size:11px;white-space:normal;}.highlight-label {font-size:10px;}.highlight-sep {align-self:stretch;}.section-heading-mark {display:none;}.portfolio-toolbar {flex-direction:column;}.portfolio-search {max-width:none;width:100%;}.portfolio-project-grid {grid-template-columns:1fr;gap:17px;}.project-card-image {height:190px;}.project-card h3 {font-size:20px;}.project-card p {min-height:auto;font-size:13px;}.project-card-body {padding:19px;}.project-card-bottom {font-size:10px;}.portfolio-contact {flex-direction:column;align-items:flex-start;}.portfolio-footerline {font-size:9px;}.detail-hero {padding:20px 0 30px;}.detail-hero h1 {font-size:39px;}.detail-facts div {padding-left:11px;padding-right:11px;}.detail-facts strong {font-size:12px;}.detail-sidebar {grid-template-columns:1fr;}.related-grid {grid-template-columns:1fr;}.detail-actions .portfolio-btn {width:100%;}.portfolio-breadcrumbs {gap:7px;font-size:10px;}.detail-subtitle {font-size:16px;}
}
@media (prefers-reduced-motion: reduce) {
    .portfolio-page *, .portfolio-page *::before, .portfolio-page *::after {animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}