@charset "UTF-8";
.highlight .err { color: #e3d2d2; background-color: #8c2121; }
.highlight .c { color: #8a8a8a; }
.highlight .c1 { color: #8a8a8a; }
.highlight .cm { color: #8a8a8a; }
.highlight .cp { color: #8a8a8a; }
.highlight .cs { color: #8a8a8a; font-style: italic; }
.highlight .gd { color: #d85a5a; }
.highlight .gd .x { color: #d85a5a; }
.highlight .ge { font-style: italic; }
.highlight .gh { color: #999999; }
.highlight .gi { color: #4ec64e; }
.highlight .gi .x { color: #4ec64e; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gr { color: #f07178; }
.highlight .gs { font-weight: bold; }
.highlight .gt { color: #f07178; }
.highlight .gu { color: #aaaaaa; }
.highlight .k { color: #d85a7b; }
.highlight .kc { color: #d85a7b; }
.highlight .kd { color: #d85a7b; }
.highlight .kp { color: #d85a7b; }
.highlight .kr { color: #d85a7b; }
.highlight .kt { color: #ffcb6b; }
.highlight .n { color: #c7d1d8; }
.highlight .na { color: #11a69f; }
.highlight .nb { color: #d85a7b; }
.highlight .bp { color: #999999; }
.highlight .nc { color: #11a69f; }
.highlight .ne { color: #990000; }
.highlight .nf { color: #5ab780; }
.highlight .ni { color: #11a69f; }
.highlight .nn { color: #11a69f; }
.highlight .no { color: #9d99e6; }
.highlight .nt { color: #de3581; }
.highlight .nv { color: #9680b1; }
.highlight .vc { color: #9680b1; }
.highlight .vg { color: #9680b1; }
.highlight .vi { color: #9680b1; }
.highlight .o { color: #bcd890; }
.highlight .ow { color: #bcd890; }
.highlight .m { color: #9d99e6; }
.highlight .mf { color: #9d99e6; }
.highlight .mh { color: #9d99e6; }
.highlight .mi { color: #9d99e6; }
.highlight .il { color: #9d99e6; }
.highlight .mo { color: #9d99e6; }
.highlight .s { color: #baa94a; }
.highlight .s1 { color: #baa94a; }
.highlight .s2 { color: #baa94a; }
.highlight .sb { color: #baa94a; }
.highlight .sc { color: #baa94a; }
.highlight .sd { color: #baa94a; }
.highlight .se { color: #baa94a; }
.highlight .sh { color: #baa94a; }
.highlight .si { color: #baa94a; }
.highlight .sr { color: #009926; }
.highlight .ss { color: #3c90f5; }
.highlight .sx { color: #baa94a; }
.highlight .w { color: #eeffff; }
.highlight .lineno, .highlight .gl { color: #8a8a8a; }
.highlight .hll { background-color: #373730; }

html { font-size: 16px; }

/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font: 400 16px/1.5 -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", Roboto, Helvetica, Arial, sans-serif; color: #959595; background-color: #181818; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; overflow-wrap: break-word; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, div.highlight, figure.highlight { margin-bottom: 15px; }

hr { margin-top: 30px; margin-bottom: 30px; }

/** `main` element */
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { color: #bbbbbb; font-weight: 500; }

/** Links */
a { color: #5691cd; text-decoration: none; }
a:visited { color: #80bbff; }
a:hover { color: #959595; text-decoration: underline #999999; text-underline-offset: 3px; }
.social-media-list a:hover { text-decoration: none; }
.social-media-list a:hover .username { text-decoration: underline; }

/** Blockquotes */
blockquote { color: #999999; border-left: 4px solid #2b2b2b; padding-left: 15px; font-size: 1.05rem; font-style: italic; }
blockquote > :last-child { margin-bottom: 0; }
blockquote i, blockquote em { font-style: normal; }

/** Code formatting */
pre, code { font-family: "Menlo", "Inconsolata", "Consolas", "Roboto Mono", "Ubuntu Mono", "Liberation Mono", "Courier New", monospace; background-color: #222222; }
@media screen and (max-width: 600px) { pre, code { font-family: monospace; } }

pre { padding: 8px 12px; font-size: 15px; line-height: 1.4; color: #bbbbbb; overflow-x: auto; }
pre > code { display: inline-block; width: 100%; }

div.highlight, figure.highlight { border: 1px solid #2b2b2b; border-radius: 3px; }
div.highlight pre, figure.highlight pre { margin: 0; }
div.highlight table, div.highlight tbody, div.highlight th, div.highlight tr, div.highlight td, figure.highlight table, figure.highlight tbody, figure.highlight th, figure.highlight tr, figure.highlight td { margin: 0; padding: 0; border: 0; }
div.highlight .lineno, div.highlight .gl, figure.highlight .lineno, figure.highlight .gl { text-align: right; }

figure.highlight table { margin: -8px -12px -14px; }
figure.highlight td.gutter { border-right: 1px solid #2b2b2b; }
figure.highlight td.code { width: 100%; }

code.highlighter-rouge { padding: 1px 5px; font-size: 14px; border: 1px solid #2b2b2b; border-radius: 3px; }

/** Wrapper */
.wrapper { max-width: 800px; margin: 0 auto; padding: 0 30px; }
@media screen and (max-width: 600px) { .wrapper { padding-right: 18px; padding-left: 18px; } }

/** Clearfix */
.wrapper:after { content: ""; display: table; clear: both; }

/** Icons */
.orange { color: #f66a0a; }

.grey { color: #828282; }

.svg-icon { width: 1.25em; height: 1.25em; display: inline-block; fill: currentColor; vertical-align: text-bottom; overflow: visible; }

/** Tables */
table { margin-bottom: 30px; width: 100%; text-align: left; color: #959595; border-collapse: collapse; border: 1px solid #2b2b2b; }
table tr:nth-child(even) { background-color: #222222; }
table th, table td { padding: 10px 15px; }
table th { background-color: #323232; border: 1px solid #3e3e3e; }
table td { border: 1px solid #2b2b2b; }
@media screen and (max-width: 800px) { table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } }

/** Site header */
.site-header { position: relative; width: 100%; min-height: 55.95px; line-height: 54px; background-color: #181818; border-top: 5px solid #999999; border-bottom: 1px solid #2b2b2b; }

.site-title { font-size: 1.625rem; font-weight: 300; letter-spacing: -1px; margin-bottom: 0; float: left; }
@media screen and (max-width: 600px) { .site-title { padding-right: 45px; } }
.site-title, .site-title:visited { color: #a6a6a6; }

.site-nav { float: right; border: none; background-color: inherit; }
.site-nav label[for="nav-trigger"], .site-nav #nav-trigger { display: none; }
.site-nav .nav-item { color: #959595; }
.site-nav .nav-item:not(:last-child) { margin-right: 15px; }
@media screen and (max-width: 600px) { .site-nav { position: absolute; top: 9px; right: 18px; background-color: #181818; border: 1px solid #2b2b2b; border-radius: 5px; text-align: right; }
  .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; cursor: pointer; }
  .site-nav .menu-icon { float: right; width: 36px; height: 26px; line-height: 0; padding-top: 18px; text-align: center; }
  .site-nav .menu-icon::before { font-family: "Font Awesome 7 Free"; font-weight: 900; }
  .site-nav .menu-icon > svg path { fill: #999999; }
  .site-nav #nav-trigger ~ label[for=nav-trigger] .menu-icon::before { content: "\f0c9"; font-size: 1.25em; }
  .site-nav #nav-trigger ~ .nav-items { clear: both; display: none; }
  .site-nav #nav-trigger:checked ~ label[for=nav-trigger] .menu-icon::before { content: "\f00d"; font-size: 1.5em; }
  .site-nav #nav-trigger:checked ~ .nav-items { display: block; padding-bottom: 5px; }
  .site-nav #nav-trigger:checked ~ .nav-items .nav-item { margin-left: 20px; padding: 5px 10px; }
  .site-nav .nav-item { display: block; margin-right: 15px; padding: 5px 0; color: #959595; line-height: 1.5; } }

/** Site footer */
.site-footer { border-top: 1px solid #2b2b2b; padding: 30px 0; }

.footer-heading { font-size: 1.125rem; margin-bottom: 15px; }

.feed-subscribe .svg-icon { padding: 5px 5px 2px 0; }

.contact-list, .social-media-list { list-style: none; margin-left: 0; }

.footer-col-wrapper, .social-links { font-size: 0.9375rem; color: #858585; }

.footer-col { margin-bottom: 15px; }

.footer-col-1, .footer-col-2 { width: calc(50% - (30px / 2)); }

.footer-col-3 { width: calc(100% - (30px / 2)); }

@media screen and (min-width: 800px) { .footer-col-1 { width: calc(35% - (30px / 2)); }
  .footer-col-2 { width: calc(20% - (30px / 2)); }
  .footer-col-3 { width: calc(45% - (30px / 2)); } }
@media screen and (min-width: 600px) { .footer-col-wrapper { display: flex; }
  .footer-col { width: calc(100% - (30px / 2)); padding: 0 15px; }
  .footer-col:first-child { padding-right: 15px; padding-left: 0; }
  .footer-col:last-child { padding-right: 0; padding-left: 15px; } }
/** Page content */
.page-content { padding: 30px 0; flex: 1 0 auto; }

.page-heading { font-size: 2rem; }

.post-list-heading { font-size: 1.75rem; }

.post-list { margin-left: 0; list-style: none; }
.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #858585; }

.post-link { display: block; font-size: 1.5rem; }

/** Posts */
.post-header { margin-bottom: 30px; padding-bottom: 18px; text-align: center; border-bottom: 1px solid #2b2b2b; }

.post-meta .bullet-divider { padding-inline: 15px; }
.post-meta .meta-label { font-weight: 600; }
.post-meta .force-inline { display: inline; }
.post-meta .force-inline::before { content: "•"; padding-inline: 5px; }
.post-meta .post-authors { margin-top: 3px; }

.post-title, .post-content h1 { margin-bottom: 10px; font-size: 2.625rem; font-weight: 400; letter-spacing: -1px; line-height: 1.15; }
@media screen and (min-width: 800px) { .post-title, .post-content h1 { font-size: 2.625rem; } }

.post-content { margin-bottom: 30px; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { margin-top: 30px; }
.post-content h2 { font-size: 1.75rem; }
@media screen and (min-width: 800px) { .post-content h2 { font-size: 2rem; } }
.post-content h3 { font-size: 1.375rem; }
@media screen and (min-width: 800px) { .post-content h3 { font-size: 1.625rem; } }
.post-content h4 { font-size: 1.25rem; }
.post-content h5 { font-size: 1.125rem; }
.post-content h6 { font-size: 1.0625rem; }

.comments-disabled-message { text-align: center; font-weight: 300; }

.social-media-list { display: table; margin: 0 auto; }
.social-media-list li { float: left; min-width: 45px; min-height: 45px; text-align: center; margin: 5px 10px 5px 0; }
.social-media-list li:last-of-type { margin-right: 0; }
.social-media-list li a { display: block; padding: 10px 12px; border: 1px solid #2b2b2b; }
.social-media-list li a:hover { border-color: #a6a6a6; }

/** Pagination navbar */
.pagination { display: table; margin: 0 auto; list-style-type: none; }
.pagination li { float: left; margin: 0 3px; min-width: 45px; min-height: 45px; text-align: center; }
.pagination li a { display: block; text-decoration: none; border: 1px solid #2b2b2b; }
.pagination li a:hover { border-color: #a6a6a6; }
.pagination li a, .pagination li div { min-width: 41px; padding: 10px 12px; text-align: center; box-sizing: border-box; }
.pagination li div { border: 1px solid transparent; }
.pagination li div.pager-edge { color: #2b2b2b; border: 1px dashed; }
.pagination li div.current-page { font-weight: bold; }

/** Task-lists */
.task-list { margin-left: 0; padding-left: 18px; }

.task-list-item { list-style-type: none; }
.task-list-item-checkbox { position: relative; margin-right: 9px; margin-left: -15px; appearance: none; border: 8px solid #2b2b2b; vertical-align: text-top; z-index: -1; }
.task-list-item-checkbox::after { position: absolute; top: -8px; left: -3px; width: 4px; height: 10px; content: ""; border: solid transparent; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.task-list-item-checkbox:checked::after { border-color: #999999; }

/** Grid helpers */
@media screen and (min-width: 800px) { .one-half { width: calc(50% - (30px / 2)); } }
:root { --accent: #4CAFEF; --accent-700: #007ACC; --accent-700-hover: #005FA3; --background: #121212; --bg-0: #000; --bg-1: #1F2020; --bg-2: #1F1F1F; --bg-3: #2A2D2D; --black1: black; --blue: #3182CE; --blue1: #007aff; --blueShadow1: #2196f3; --dt-leaderboard: #e85252; --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a); --gray1: #8e8e93; --gray2: #636366; --gray3: #48484a; --gray4: #3a3a3c; --gray5: #2c2c2e; --gray6: #1c1c1e; --green: #4ADE80; --green-bg: #2D5A3D; --green1: #34c759; --left-msg-bg: white; --lightBlue1: #4bbaff; --login-container-bg: #1e1e1e; --msger-send-btn-bg: blue; --msger-send-btn-hover-bg: darkblue; --my-custom-cat: #02375a; --my-custom-dog: #cafff3; --orange: #ED8936; --panel: #2B2B2B; --popup-bg: #222; --red: #E53E3E; --right-msg-bg: lightBlue1; --status-indicator-base-bg: rgba(255, 255, 255, 0.05); --status-indicator-base-border: rgba(255, 255, 255, 0.1); --status-indicator-error-bg: rgba(220, 53, 69, 0.2); --status-indicator-error-border: rgba(220, 53, 69, 0.3); --status-indicator-error-color: #dc3545; --status-indicator-pending-bg: rgba(255, 193, 7, 0.2); --status-indicator-pending-border: rgba(255, 193, 7, 0.3); --status-indicator-pending-color: #ffc107; --status-indicator-success-bg: rgba(40, 167, 69, 0.2); --status-indicator-success-border: rgba(40, 167, 69, 0.3); --status-indicator-success-color: #28a745; --success-green: #28A745; --surface: #333; --teal: #38B2AC; --text: #F0F0F0; --text-muted: #aaa; --toggle-btn-bg: green; --toggle-btn-hover-bg: darkgreen; --validation-error-color: #ef4444; --validation-focus-color: #6366f1; --validation-success-color: #10b981; --warn: #FBBF24; --warn-bg: #5A3D2D; --white1: white; --white2: rgba(255, 255, 255, 0.87); --white3: #e1e1e6; }

/** Button Mixins Reusable button patterns for consistent styling across the application */
/** Base Control Common color and interaction styles for all controls @private - Use specific mixins instead */
/** Text Button Standard rectangular button with text content */
/** Icon Button Square button designed for icon-only content */
/** Emphasized Button Button with inverted colors for primary actions */
/** Toggle Button */
/** Select Control */
/** Panel Mixins Reusable panel patterns for consistent content containers */
/** Button Mixins Reusable button patterns for consistent styling across the application */
/** Base Control Common color and interaction styles for all controls @private - Use specific mixins instead */
/** Text Button Standard rectangular button with text content */
/** Icon Button Square button designed for icon-only content */
/** Emphasized Button Button with inverted colors for primary actions */
/** Toggle Button */
/** Select Control */
/** Container Mixins */
.gamebuilder-title { text-align: center; font-size: clamp(1.1em, 2.5vw, 2em); font-weight: bold; letter-spacing: clamp(0.5px, 0.2vw, 2px); }
@media (max-width: 768px) { .gamebuilder-title { font-size: 1.1em; letter-spacing: 0.5px; } }

.creator-layout { display: flex; gap: 10px; padding: 10px; height: calc(100vh - 68px); max-height: calc(100vh - 68px); box-sizing: border-box; overflow: hidden; }
@media (max-width: 1200px) { .creator-layout { gap: 8px; padding: 8px; } }
@media (max-width: 1000px) { .creator-layout { gap: 5px; padding: 5px; } }
@media (max-width: 768px) { .creator-layout { flex-direction: column; height: auto; max-height: none; overflow: visible; gap: 6px; padding: 6px; } }

.col-asset { flex: 0 0 clamp(165px, 20%, 300px); display: flex; flex-direction: column; }
@media (max-width: 768px) { .col-asset { flex: none; max-height: 300px; } }

.col-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
@media (max-width: 768px) { .col-main { flex: none; min-height: 70vh; } }
.col-main.view-code .panel-game { display: none; }
.col-main.view-game .panel-code { display: none; }
.col-main.view-code .panel-code, .col-main.view-game .panel-game { flex: 1; }
.col-main.view-split .main-content { flex-direction: row; }
.col-main.view-split .panel-game { flex: 0 0 55%; }
.col-main.view-split .panel-code { flex: 1; }
@media (max-width: 768px) { .col-main.view-code .panel-game, .col-main.view-game .panel-code { display: flex !important; }
  .col-main .main-content { flex-direction: column !important; }
  .col-main .panel-game { flex: 0 0 45% !important; }
  .col-main .panel-code { flex: 1 !important; } }

.view-controls { display: flex; gap: 4px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 4px; }
@media (max-width: 1000px) { .view-controls { margin-bottom: 6px; padding: 3px; gap: 3px; } }
@media (max-width: 768px) { .view-controls { display: none; } }

.view-btn { flex: 1; padding: 7px 14px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: rgba(255, 255, 255, 0.55); cursor: pointer; font-size: clamp(0.68em, 0.8vw, 0.78em); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; transition: all 0.18s ease; }
@media (max-width: 1200px) { .view-btn { padding: 6px 10px; } }
@media (max-width: 1000px) { .view-btn { padding: 5px 7px; letter-spacing: 0.03em; } }
.view-btn.active { background: var(--pref-accent-color, #4CAFEF); border-color: var(--pref-accent-color, #4CAFEF); color: #000; box-shadow: 0 0 12px color-mix(in srgb, var(--pref-accent-color, #4CAFEF) 50%, transparent); font-weight: 700; }
.view-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); }

.main-content { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
@media (max-width: 1000px) { .main-content { gap: 6px; } }

.glass-panel { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
@media (max-width: 1000px) { .glass-panel { border-radius: 8px; } }

.panel-header { padding: 16px; background: rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700; text-transform: uppercase; font-size: clamp(0.72em, 0.9vw, 0.9em); letter-spacing: clamp(0.3px, 0.08em, 1px); display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 1200px) { .panel-header { padding: 12px 14px; } }
@media (max-width: 1000px) { .panel-header { padding: 8px 10px; } }

.panel-controls { display: flex; gap: 8px; align-items: center; }
@media (max-width: 1000px) { .panel-controls { gap: 5px; } }

.icon-btn { background: var(--pref-bg-color); border: 1px solid var(--ui-border); color: var(--pref-text-color); font-family: var(--pref-font-family); font-size: var(--pref-font-size); cursor: pointer; transition: all 0.2s; height: 38px; padding: 8px 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 8px; margin-left: 0; position: relative; }
.icon-btn:hover { background: var(--panel-mid); border-color: var(--pref-accent-color); }
.icon-btn:focus { outline: none; border-color: var(--pref-accent-color); }
.icon-btn:hover { opacity: 0.9; transform: scale(1.05); }
@media (max-width: 768px) { .icon-btn { height: 44px; } }
@media (max-width: 768px) { .icon-btn { margin-left: 0.25rem; width: 44px; } }
.icon-btn:hover::after { content: attr(data-tooltip); position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 1000; pointer-events: none; }
@media (max-width: 1200px) { .icon-btn { width: 28px !important; height: 28px !important; padding: 5px !important; } }
@media (max-width: 1000px) { .icon-btn { width: 24px !important; height: 24px !important; padding: 3px !important; } }
.icon-btn.staged { box-shadow: 0 0 10px rgba(0, 200, 0, 0.9); border-color: rgba(0, 200, 0, 0.9); }

.step-indicator { font-size: clamp(9px, 0.9vw, 11px); color: var(--text-muted); margin-right: 4px; }

.add-item-btn { background: var(--pref-bg-color); border: 1px solid var(--ui-border); color: var(--pref-text-color); font-family: var(--pref-font-family); font-size: var(--pref-font-size); cursor: pointer; transition: all 0.2s; height: 38px; padding: 8px 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 8px; margin-left: 0; position: relative; font-size: 18px; line-height: 1; padding: 0; }
.add-item-btn:hover { background: var(--panel-mid); border-color: var(--pref-accent-color); }
.add-item-btn:focus { outline: none; border-color: var(--pref-accent-color); }
.add-item-btn:hover { opacity: 0.9; transform: scale(1.05); }
@media (max-width: 768px) { .add-item-btn { height: 44px; } }
@media (max-width: 768px) { .add-item-btn { margin-left: 0.25rem; width: 44px; } }
.add-item-btn:hover::after { content: attr(data-tooltip); position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.9); color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 1000; pointer-events: none; }

.scroll-form { flex: 1; overflow-y: auto; padding: 15px; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
@media (max-width: 1200px) { .scroll-form { padding: 11px; } }
@media (max-width: 1000px) { .scroll-form { padding: 8px; } }
.scroll-form::-webkit-scrollbar { width: 4px; }
.scroll-form::-webkit-scrollbar-track { background: transparent; }
.scroll-form::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.scroll-form::-webkit-scrollbar-thumb:hover { background: #475569; }

.asset-group { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 14px; margin-bottom: 15px; }
@media (max-width: 1200px) { .asset-group { padding: 10px; margin-bottom: 10px; } }
@media (max-width: 1000px) { .asset-group { padding: 7px; margin-bottom: 8px; border-radius: 6px; } }

.group-title { font-size: clamp(0.72em, 0.85vw, 0.8em); font-weight: bold; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
@media (max-width: 1000px) { .group-title { margin-bottom: 8px; } }

.creator-layout label { display: block; font-size: clamp(0.62em, 0.75vw, 0.7em); margin-bottom: 5px; }
@media (max-width: 1000px) { .creator-layout label { margin-bottom: 3px; } }
.creator-layout select, .creator-layout input { width: 100%; padding: clamp(4px, 0.5vw, 8px) !important; border-radius: 4px; font-size: clamp(0.75em, 0.9vw, 0.85em); margin-bottom: clamp(5px, 0.7vw, 10px); color: var(--pref-text-color, #fff); background: var(--pref-bg-color, #000); border: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; }
.creator-layout select { color: var(--pref-text-color, #fff); background: var(--pref-bg-color, #000); }
.creator-layout select option { color: var(--pref-text-color, #fff); background: var(--pref-bg-color, #000); }
.creator-layout select:disabled, .creator-layout select option[disabled] { color: var(--text-muted, rgba(255, 255, 255, 0.5)); }

.creator-layout .btn { padding: clamp(7px, 0.8vw, 12px); border-radius: 6px; border: none; background: var(--pref-bg-color); color: var(--pref-text-color); font-family: var(--pref-font-family); font-weight: bold; cursor: pointer; transition: all 0.2s; text-transform: uppercase; font-size: clamp(0.75em, 0.85vw, 0.85em); display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.creator-layout .btn:hover { background: var(--panel-mid); opacity: 0.9; }
.creator-layout .btn-sm { padding: 6px; border-radius: 4px; font-size: clamp(0.62em, 0.72vw, 0.7em); }
@media (max-width: 1000px) { .creator-layout .btn-sm { padding: 4px; } }
.creator-layout .btn-confirm { background: var(--pref-accent-color); border-color: var(--pref-accent-color); }
.creator-layout .btn-run { background: var(--pref-bg-color); border: 1px solid var(--ui-border); color: var(--pref-text-color); font-family: var(--pref-font-family); font-size: var(--pref-font-size); cursor: pointer; transition: all 0.2s; height: 38px; padding: 8px 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 8px; margin-left: 8px; background: var(--pref-accent-color); border-color: var(--pref-accent-color); color: var(--pref-bg-color); }
.creator-layout .btn-run:hover { background: var(--panel-mid); border-color: var(--pref-accent-color); }
.creator-layout .btn-run:focus { outline: none; border-color: var(--pref-accent-color); }
.creator-layout .btn-run:hover { opacity: 0.9; transform: scale(1.05); }
@media (max-width: 768px) { .creator-layout .btn-run { height: 44px; } }
@media (max-width: 768px) { .creator-layout .btn-run { margin-left: 0.25rem; width: 44px; } }
.creator-layout .btn-run:hover { background: var(--pref-accent-color); border-color: var(--pref-accent-color); opacity: 0.85; transform: scale(1.05); }
.creator-layout .btn-danger { background: #e74c3c; border-color: #e74c3c; }

.help-panel { display: none; position: absolute; top: 50px; right: 16px; background: rgba(0, 0, 0, 0.95); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 12px; max-width: 300px; z-index: 100; font-size: clamp(0.75em, 0.85vw, 0.85em); line-height: 1.4; }
.help-panel.active { display: block; }

.code-panel { flex: 1; position: relative; }

.editor-container { position: relative; flex: 1; width: 100%; overflow: hidden; }

.code-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; font-family: 'Fira Code', 'Monaco', 'Courier New', monospace; font-size: clamp(10px, 1.05vw, 13px); line-height: clamp(16px, 1.65vw, 20px); border: none; resize: none; outline: none; z-index: 2; white-space: pre; overflow: auto; }
@media (max-width: 1000px) { .code-layer { padding: 12px; } }

.highlight-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; pointer-events: none; z-index: 1; }
@media (max-width: 1000px) { .highlight-layer { padding: 12px; } }

.highlight-box { position: absolute; background: color-mix(in srgb, var(--pref-accent-color) 25%, transparent); border-left: 4px solid var(--pref-accent-color); left: 10px; width: calc(100% - 20px); display: block !important; }

.highlight-persistent-block { position: absolute; background: rgba(255, 230, 0, 0.6); border: 2px solid #ffdd00; border-left-width: 4px; left: 10px; width: calc(100% - 20px); }

.typing-highlight { position: absolute; background: color-mix(in srgb, var(--pref-accent-color) 25%, transparent); border-left: 4px solid var(--pref-accent-color); left: 10px; width: calc(100% - 20px); }

.game-frame { flex: 1; position: relative; }
.game-frame iframe, .game-frame canvas { width: 100%; height: 100%; border: none; }

.draw-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.draw-overlay.active { pointer-events: auto; }
.draw-overlay.mode-barrier { cursor: crosshair; }

.draw-rect { position: absolute; box-sizing: border-box; }
.draw-rect.barrier { border: 2px solid #ff2d2d; background: rgba(255, 0, 0, 0.05); }

.draw-toolbar { display: flex; gap: 8px; margin-top: 8px; }

.draw-btn { background: var(--pref-bg-color); border: 1px solid var(--ui-border); color: var(--pref-text-color); font-family: var(--pref-font-family); font-size: var(--pref-font-size); cursor: pointer; transition: all 0.2s; height: 38px; padding: 8px 12px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; font-size: 0.8em; }
.draw-btn:hover { background: var(--panel-mid); border-color: var(--pref-accent-color); }
.draw-btn:focus { outline: none; border-color: var(--pref-accent-color); }
.draw-btn:hover { opacity: 0.9; transform: scale(1.05); }
@media (max-width: 768px) { .draw-btn { height: 44px; } }
.draw-btn.active { border-color: var(--pref-accent-color); background: rgba(255, 255, 255, 0.08); }

.wall-slot { margin-top: 8px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.08); }
@media (max-width: 1000px) { .wall-slot { padding: 7px; margin-top: 5px; } }

.wall-fields label { display: block; }
.wall-fields select { color: var(--pref-text-color, #fff); }

.site-nav .trigger { display: none; flex-direction: column; position: absolute; right: 0; top: 60px; /* adjust as needed */ width: 200px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); z-index: 1000; }

.site-nav .nav-trigger:checked ~ label + .trigger, .site-nav .nav-trigger:checked + label + .trigger { display: flex; }

@media (min-width: 600px) { .site-nav .trigger { display: flex !important; position: static; flex-direction: row; background: none; box-shadow: none; width: auto; } }
#loginArea.page-link { /* Add any custom login link styles here */ opacity: 1; }

#site-logo { height: 40px; vertical-align: middle; margin-right: 10px; }

:root { --accent: #4CAFEF; --accent-700: #007ACC; --accent-700-hover: #005FA3; --background: #121212; --bg-0: #000; --bg-1: #1F2020; --bg-2: #1F1F1F; --bg-3: #2A2D2D; --black1: black; --blue: #3182CE; --blue1: #007aff; --blueShadow1: #2196f3; --dt-leaderboard: #e85252; --gradient1: linear-gradient(120deg, #1e1e1e 45%, #2a2a2a); --gray1: #8e8e93; --gray2: #636366; --gray3: #48484a; --gray4: #3a3a3c; --gray5: #2c2c2e; --gray6: #1c1c1e; --green: #4ADE80; --green-bg: #2D5A3D; --green1: #34c759; --left-msg-bg: white; --lightBlue1: #4bbaff; --login-container-bg: #1e1e1e; --msger-send-btn-bg: blue; --msger-send-btn-hover-bg: darkblue; --my-custom-cat: #02375a; --my-custom-dog: #cafff3; --orange: #ED8936; --panel: #2B2B2B; --popup-bg: #222; --red: #E53E3E; --right-msg-bg: lightBlue1; --status-indicator-base-bg: rgba(255, 255, 255, 0.05); --status-indicator-base-border: rgba(255, 255, 255, 0.1); --status-indicator-error-bg: rgba(220, 53, 69, 0.2); --status-indicator-error-border: rgba(220, 53, 69, 0.3); --status-indicator-error-color: #dc3545; --status-indicator-pending-bg: rgba(255, 193, 7, 0.2); --status-indicator-pending-border: rgba(255, 193, 7, 0.3); --status-indicator-pending-color: #ffc107; --status-indicator-success-bg: rgba(40, 167, 69, 0.2); --status-indicator-success-border: rgba(40, 167, 69, 0.3); --status-indicator-success-color: #28a745; --success-green: #28A745; --surface: #333; --teal: #38B2AC; --text: #F0F0F0; --text-muted: #aaa; --toggle-btn-bg: green; --toggle-btn-hover-bg: darkgreen; --validation-error-color: #ef4444; --validation-focus-color: #6366f1; --validation-success-color: #10b981; --warn: #FBBF24; --warn-bg: #5A3D2D; --white1: white; --white2: rgba(255, 255, 255, 0.87); --white3: #e1e1e6; }

.lesson-container { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; padding: 1rem; }
@media (max-width: 768px) { .lesson-container { flex-direction: column; } }

/* Sidebar */
.lesson-sidebar { flex: 0 0 250px; max-width: 100%; background: #1F2020; padding: 1rem; border-radius: 8px; position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
@media (max-width: 768px) { .lesson-sidebar { position: relative; top: auto; max-height: none; overflow: visible; width: 100%; } }

/* Main content */
.lesson-content { flex: 1 1 0; min-width: 300px; }

.time-display { background: #2A2D2D; padding: 0.5rem; margin: 0.25rem 0; border-radius: 4px; text-align: center; }
.time-display span { font-size: 1.2rem; font-weight: bold; color: #4CAFEF; display: block; }
.time-display small { font-size: 0.75rem; color: #aaa; }

.timer-status { text-align: center; padding: 0.25rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-top: 0.5rem; }
.timer-status.active { background: #2D5A3D; color: #4ADE80; }
.timer-status.paused { background: #5A3D2D; color: #FBBF24; }

.progress-bar { background: #333; border-radius: 6px; height: 12px; width: 100%; margin: 0.5rem 0; }
.progress-bar .progress-fill { background: #4CAFEF; height: 100%; width: 0%; border-radius: 6px; }

.btn { display: inline-block; color: white; padding: 15px 25px; border-radius: 4px; text-decoration: none; margin: 0.5rem 0.25rem; border: none; cursor: pointer; font-family: arial; font-weight: bolder; background: #007ACC; }
.btn:hover { background: #005FA3; border-radius: 25px; transition: border-radius 2s; }

.small-btn { font-size: 0.75rem; padding: 3px 6px; margin-top: 0.5rem; }

.sandbox textarea { width: 100%; height: 120px; font-family: monospace; margin-bottom: 0.5rem; }

.resources, .sandbox, .lesson-quiz { background: #2B2B2B; padding: 1rem; border-radius: 8px; margin: 1rem 0; color: #F0F0F0; }

#badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.badge { background: #333; color: #fff; padding: 6px 10px; border-radius: 20px; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }

.congrats-popup { position: fixed; top: 20px; right: -300px; background: #222; color: #fff; padding: 12px 18px; border-radius: 8px; font-weight: bold; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); transition: right 0.3s ease, opacity 0.3s ease; opacity: 0.95; z-index: 9999; }
.congrats-popup.show { right: 20px; }

.lesson-quiz textarea { width: 100%; min-height: 120px; padding: 10px; border-radius: 6px; border: 1px solid #444; font-size: 1rem; resize: vertical; box-sizing: border-box; background: #1F1F1F; color: #F0F0F0; }
.lesson-quiz button:hover { background: #1aa3ff; }
.lesson-quiz #reflection-status { margin-top: 0.5rem; font-size: 0.85rem; font-style: italic; color: #9ACDFF; }

.blackboard { width: 100%; min-height: 240px; }

#blackboard-canvas { border: 1px solid #ccc; background: #000; cursor: crosshair; }

.blackboard-description { margin-top: 10px; color: #ccc; }

.demo-label { display: block; text-align: center; margin: 6px 0; }

#demo-canvas-wrapper { background: white; border: 2px solid #333; display: block; margin: 0 auto; }

#demo-code { display: none; margin: 8px auto; overflow: auto; }

.info-box { padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; border-left: 4px solid #3182CE; }

.challenge-box { padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; border-left: 4px solid #38B2AC; }

.think-box { padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; border-left: 4px solid #ED8936; }

.checkpoint-box, .key-points { padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; border-left: 4px solid #3182CE; }

.warning-box { padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; border-left: 4px solid #E53E3E; }

.success { padding: 20px; margin: 20px 0; border-radius: 0 8px 8px 0; border-left: 4px solid #28A745; }

.flashcards-section { background: #2B2B2B !important; padding: 1rem !important; border-radius: 8px !important; margin: 1rem 0 2rem 0 !important; color: #F0F0F0 !important; max-width: 100% !important; box-sizing: border-box !important; }

.flashcard-container { position: relative !important; width: 100% !important; max-width: 280px !important; height: 140px !important; perspective: 1500px !important; margin: 1rem auto 1.5rem auto !important; display: block !important; }
.flashcard-container.hidden { display: none !important; }

.flashcard-inner { position: relative !important; width: 100% !important; height: 100% !important; transition: transform 0.6s ease !important; transform-style: preserve-3d !important; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important; border-radius: 12px !important; }
.flashcard-inner.flipped { transform: rotateY(180deg) !important; }

.flashcard-front, .flashcard-back { position: absolute !important; width: 100% !important; height: 100% !important; backface-visibility: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding: 12px !important; border-radius: 8px !important; background: #1E293B !important; color: #F8FAFC !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; }

.flashcard-back { transform: rotateY(180deg) !important; }

.card-counter { position: absolute !important; top: 12px !important; right: 12px !important; background: rgba(255, 255, 255, 0.15) !important; border-radius: 15px !important; padding: 4px 10px !important; font-size: 0.8rem !important; }

.flashcard-front h3, .flashcard-back h4 { text-align: center !important; margin-bottom: 1rem !important; color: white !important; }

.flashcard-back p { text-align: center !important; margin-bottom: 1rem !important; color: white !important; }

.flashcard-controls { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; margin: 1rem 0 1.5rem 0 !important; gap: 0.4rem !important; max-width: 100% !important; }
.flashcard-controls button { flex: 0 1 auto !important; min-width: 60px !important; max-width: 100px !important; padding: 6px 10px !important; font-size: 0.75rem !important; border-radius: 4px !important; border: none !important; cursor: pointer !important; white-space: nowrap !important; }

.flashcard-actions { display: flex !important; gap: 0.5rem !important; flex: 1 !important; }
.flashcard-actions .know-btn, .flashcard-actions .review-btn { flex: 1 !important; min-width: 60px !important; font-size: 0.75rem !important; padding: 6px 10px !important; }
.flashcard-actions .know-btn { background: #10B981 !important; color: white !important; }
.flashcard-actions .review-btn { background: #F59E0B !important; color: white !important; }

.card-status { margin-top: 12px !important; font-size: 0.85rem !important; color: #CBD5E1 !important; text-align: center !important; }

#flashcard-review-sidebar button { width: 100%; background: #334155; border: none; color: white; padding: 8px; border-radius: 6px; cursor: pointer; margin-bottom: 5px; font-size: 0.85rem; }
#flashcard-review-sidebar button:hover { background: #475569; }

.flashcard-front h3, .flashcard-back h4 { text-align: center !important; margin-bottom: 0.5rem !important; color: white !important; font-size: 1rem !important; }

.flashcard-back p { text-align: center !important; margin-bottom: 0.5rem !important; color: white !important; font-size: 0.9rem !important; }

.flashcard-front .btn, .flashcard-back .btn { padding: 6px 12px !important; font-size: 0.8rem !important; }

.flashcard-deck { width: 100% !important; max-width: 100% !important; overflow: hidden !important; }

.footer-links { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; }

.footer-previous { justify-self: start; margin-left: 10vw; }

.footer-home { justify-self: center; }

.footer-next { justify-self: end; margin-right: 10vw; }

.hh-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; }

.hh-header { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 24px; margin-bottom: 2rem; border: 1px solid rgba(255, 107, 53, 0.3); }

.hh-badge { display: inline-block; background: linear-gradient(135deg, #ff6b35, #f7931e); color: #000; padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }

.hh-title { font-size: 2.75rem; font-weight: 800; background: linear-gradient(90deg, #ff6b35, #f7931e, #ff6b35); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: hh-gradient 3s ease infinite; margin: 0 0 1rem 0; }

@keyframes hh-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.hh-description { color: #b0bec5; font-size: 1.1rem; line-height: 1.7; max-width: 900px; margin: 0 auto; }

.hh-card { background: linear-gradient(145deg, #1e1e2e 0%, #252540 100%); border-radius: 24px; padding: 2.5rem; margin-bottom: 2rem; border: 2px solid rgba(255, 107, 53, 0.3); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }

.hh-card-grid { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 1024px) { .hh-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .hh-card-grid { grid-template-columns: 1fr; } }

.hh-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: rgba(0, 0, 0, 0.2); border-radius: 16px; border: 1px solid rgba(255, 107, 53, 0.2); }
@media (max-width: 1024px) { .hh-visual { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; } }

.hh-image-link { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3); width: 100%; }
.hh-image-link:hover .hh-image { transform: scale(1.05); }
.hh-image-link:hover .hh-overlay { opacity: 1; }

.hh-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.hh-overlay { position: absolute; inset: 0; background: rgba(255, 107, 53, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.hh-overlay span { color: #000; font-weight: 700; font-size: 1.1rem; }

.hh-status { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #000; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; text-align: center; }

.hh-team { text-align: center; margin-top: auto; }

.hh-team-label { display: block; color: #78909c; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }

.hh-team-name { display: block; color: #ff6b35; font-weight: 700; font-size: 1rem; }

.hh-content { display: flex; flex-direction: column; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 16px; border: 1px solid rgba(255, 107, 53, 0.2); }

.hh-project-title { font-size: 1.75rem; font-weight: 800; color: #fff; margin: 0 0 0.25rem 0; }

.hh-subtitle { color: #ff6b35; font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 107, 53, 0.2); }

.hh-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; flex-grow: 1; }

.hh-keypoint { display: flex; align-items: flex-start; gap: 0.5rem; color: #e0e0e0; font-size: 0.9rem; line-height: 1.4; }

.hh-check { color: #ff6b35; font-weight: bold; flex-shrink: 0; }

.hh-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }

.hh-tech-tag { background: rgba(255, 107, 53, 0.15); color: #ff6b35; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255, 107, 53, 0.3); }

.hh-details { display: flex; flex-direction: column; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 16px; border: 1px solid rgba(255, 107, 53, 0.2); }

.hh-section-title { color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(255, 107, 53, 0.3); }

.hh-about { color: #b0bec5; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem 0; }

.hh-impact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; flex-grow: 1; }

.hh-impact-item { background: rgba(255, 107, 53, 0.1); color: #e0e0e0; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem; border-left: 3px solid #ff6b35; }

.hh-btn { display: inline-block; background: linear-gradient(135deg, #ff6b35, #f7931e); color: #000; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.2s, box-shadow 0.2s; margin-top: auto; }
.hh-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 107, 53, 0.4); color: #000; text-decoration: none; }

.wp-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; }

.wp-header { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #0d0d0d 100%); border-radius: 24px; margin-bottom: 2rem; border: 1px solid rgba(255, 138, 128, 0.3); }

.wp-badge { display: inline-block; background: linear-gradient(135deg, #ff8a80, #5b9bd5); color: #fff; padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }

.wp-title { font-size: 2.75rem; font-weight: 800; background: linear-gradient(90deg, #ff8a80, #5b9bd5, #ffffff, #ff8a80); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: wp-gradient 3s ease infinite; margin: 0 0 1rem 0; }

@keyframes wp-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.wp-description { color: #b0b0b0; font-size: 1.1rem; line-height: 1.7; max-width: 900px; margin: 0 auto; }

.wp-card { background: linear-gradient(145deg, #0a0a0a 0%, #151515 100%); border-radius: 24px; padding: 2.5rem; margin-bottom: 2rem; border: 2px solid rgba(255, 138, 128, 0.3); box-shadow: 0 20px 60px rgba(255, 138, 128, 0.2); }

.wp-card-grid { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 1024px) { .wp-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .wp-card-grid { grid-template-columns: 1fr; } }

.wp-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: rgba(91, 155, 213, 0.05); border-radius: 16px; border: 1px solid rgba(91, 155, 213, 0.3); }
@media (max-width: 1024px) { .wp-visual { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; } }

.wp-image-link { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(255, 138, 128, 0.4); width: 100%; }
.wp-image-link:hover .wp-image { transform: scale(1.05); }
.wp-image-link:hover .wp-overlay { opacity: 1; }

.wp-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.wp-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 138, 128, 0.9), rgba(91, 155, 213, 0.9)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.wp-overlay span { color: #fff; font-weight: 700; font-size: 1.1rem; }

.wp-status { background: linear-gradient(135deg, #ff8a80, #5b9bd5); color: #fff; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; text-align: center; }

.wp-team { text-align: center; margin-top: auto; }

.wp-team-label { display: block; color: #b0b0b0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }

.wp-team-name { display: block; color: #ff8a80; font-weight: 700; font-size: 1rem; }

.wp-content { display: flex; flex-direction: column; padding: 1rem; background: rgba(91, 155, 213, 0.05); border-radius: 16px; border: 1px solid rgba(91, 155, 213, 0.3); }

.wp-project-title { font-size: 1.75rem; font-weight: 800; color: #ffffff; margin: 0 0 0.25rem 0; }

.wp-subtitle { color: #5b9bd5; font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(91, 155, 213, 0.3); }

.wp-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; flex-grow: 1; }

.wp-keypoint { display: flex; align-items: flex-start; gap: 0.5rem; color: #e8e8e8; font-size: 0.9rem; line-height: 1.4; }

.wp-check { color: #ff8a80; font-weight: bold; flex-shrink: 0; }

.wp-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }

.wp-tech-tag { background: rgba(91, 155, 213, 0.15); color: #5b9bd5; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(91, 155, 213, 0.4); }

.wp-details { display: flex; flex-direction: column; padding: 1rem; background: rgba(255, 138, 128, 0.05); border-radius: 16px; border: 1px solid rgba(255, 138, 128, 0.3); }

.wp-section-title { color: #ffffff; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(255, 138, 128, 0.4); }

.wp-about { color: #b0b0b0; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem 0; }

.wp-impact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; flex-grow: 1; }

.wp-impact-item { background: rgba(255, 138, 128, 0.1); color: #e8e8e8; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem; border-left: 3px solid #ff8a80; }

.wp-btn { display: inline-block; background: linear-gradient(135deg, #ff8a80, #5b9bd5); color: #fff; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.2s, box-shadow 0.2s; margin-top: auto; }
.wp-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 138, 128, 0.5); color: #fff; text-decoration: none; }

.dd-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; }

.dd-header { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #050d1a 0%, #071020 50%, #0a1628 100%); border-radius: 24px; margin-bottom: 2rem; border: 1px solid rgba(0, 229, 255, 0.3); position: relative; overflow: hidden; }
.dd-header::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 229, 255, 0.02) 2px, rgba(0, 229, 255, 0.02) 4px); pointer-events: none; }

.dd-badge { display: inline-block; background: linear-gradient(135deg, #00e5ff, #69f0ae); color: #000; padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }

.dd-title { font-size: 2.75rem; font-weight: 800; background: linear-gradient(90deg, #00e5ff, #69f0ae, #00e5ff); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: dd-gradient 3s ease infinite; margin: 0 0 1rem 0; }

@keyframes dd-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.dd-description { color: #8fa3c0; font-size: 1.1rem; line-height: 1.7; max-width: 900px; margin: 0 auto; }

.dd-card { background: linear-gradient(145deg, #0a1628 0%, #0d1f3c 100%); border-radius: 24px; padding: 2.5rem; margin-bottom: 2rem; border: 2px solid rgba(0, 229, 255, 0.25); box-shadow: 0 20px 60px rgba(0, 229, 255, 0.1), 0 0 0 1px rgba(105, 240, 174, 0.05); }

.dd-card-grid { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 1024px) { .dd-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .dd-card-grid { grid-template-columns: 1fr; } }

.dd-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: rgba(0, 229, 255, 0.04); border-radius: 16px; border: 1px solid rgba(0, 229, 255, 0.2); }
@media (max-width: 1024px) { .dd-visual { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; } }

.dd-image-link { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 229, 255, 0.3); width: 100%; }
.dd-image-link:hover .dd-image { transform: scale(1.05); }
.dd-image-link:hover .dd-overlay { opacity: 1; }

.dd-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.dd-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 229, 255, 0.9), rgba(105, 240, 174, 0.9)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.dd-overlay span { color: #000; font-weight: 700; font-size: 1.1rem; }

.dd-status { background: linear-gradient(135deg, #00e5ff, #69f0ae); color: #000; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; text-align: center; }

.dd-team { text-align: center; margin-top: auto; }

.dd-team-label { display: block; color: #8fa3c0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }

.dd-team-name { display: block; color: #00e5ff; font-weight: 700; font-size: 0.95rem; }

.dd-content { display: flex; flex-direction: column; padding: 1rem; background: rgba(105, 240, 174, 0.04); border-radius: 16px; border: 1px solid rgba(105, 240, 174, 0.2); }

.dd-project-title { font-size: 1.75rem; font-weight: 800; color: #d0e4f7; margin: 0 0 0.25rem 0; }

.dd-subtitle { color: #69f0ae; font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(105, 240, 174, 0.25); }

.dd-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; flex-grow: 1; }

.dd-keypoint { display: flex; align-items: flex-start; gap: 0.5rem; color: #d0e4f7; font-size: 0.9rem; line-height: 1.4; }

.dd-check { color: #69f0ae; font-weight: bold; flex-shrink: 0; }

.dd-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }

.dd-tech-tag { background: rgba(0, 229, 255, 0.1); color: #00e5ff; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(0, 229, 255, 0.3); font-family: 'Courier New', monospace; }

.dd-details { display: flex; flex-direction: column; padding: 1rem; background: rgba(255, 110, 64, 0.04); border-radius: 16px; border: 1px solid rgba(255, 110, 64, 0.2); }

.dd-section-title { color: #d0e4f7; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(0, 229, 255, 0.35); }

.dd-about { color: #8fa3c0; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem 0; }

.dd-impact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; flex-grow: 1; }

.dd-impact-item { background: rgba(105, 240, 174, 0.08); color: #d0e4f7; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem; border-left: 3px solid #69f0ae; }

.dd-btn { display: inline-block; background: linear-gradient(135deg, #00e5ff, #69f0ae); color: #000; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.2s, box-shadow 0.2s; margin-top: auto; }
.dd-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4); color: #000; text-decoration: none; }

.g-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; }

.g-header { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #0d0d0d 100%); border-radius: 24px; margin-bottom: 2rem; border: 1px solid rgba(155, 89, 182, 0.3); }

.g-badge { display: inline-block; background: linear-gradient(135deg, #9b59b6, #3498db); color: #fff; padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }

.g-title { font-size: 2.75rem; font-weight: 800; background: linear-gradient(90deg, #9b59b6, #3498db, #ffffff, #9b59b6); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: wp-gradient 3s ease infinite; margin: 0 0 1rem 0; }

@keyframes wp-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.g-description { color: #b0b0b0; font-size: 1.1rem; line-height: 1.7; max-width: 900px; margin: 0 auto; }

.g-card { background: linear-gradient(145deg, #0a0a0a 0%, #151515 100%); border-radius: 24px; padding: 2.5rem; margin-bottom: 2rem; border: 2px solid rgba(155, 89, 182, 0.3); box-shadow: 0 20px 60px rgba(155, 89, 182, 0.2); }

.g-card-grid { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 1024px) { .g-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .g-card-grid { grid-template-columns: 1fr; } }

.g-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: rgba(52, 152, 219, 0.05); border-radius: 16px; border: 1px solid rgba(52, 152, 219, 0.3); }
@media (max-width: 1024px) { .g-visual { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; } }

.g-image-link { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(155, 89, 182, 0.4); width: 100%; }
.g-image-link:hover .g-image { transform: scale(1.05); }
.g-image-link:hover .g-overlay { opacity: 1; }

.g-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.g-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(155, 89, 182, 0.9), rgba(52, 152, 219, 0.9)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.g-overlay span { color: #fff; font-weight: 700; font-size: 1.1rem; }

.g-status { background: linear-gradient(135deg, #9b59b6, #3498db); color: #fff; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; text-align: center; }

.g-team { text-align: center; margin-top: auto; }

.g-team-label { display: block; color: #b0b0b0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }

.g-team-name { display: block; color: #9b59b6; font-weight: 700; font-size: 1rem; }

.g-content { display: flex; flex-direction: column; padding: 1rem; background: rgba(52, 152, 219, 0.05); border-radius: 16px; border: 1px solid rgba(52, 152, 219, 0.3); }

.g-project-title { font-size: 1.75rem; font-weight: 800; color: #ffffff; margin: 0 0 0.25rem 0; }

.g-subtitle { color: #3498db; font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(52, 152, 219, 0.3); }

.g-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; flex-grow: 1; }

.g-keypoint { display: flex; align-items: flex-start; gap: 0.5rem; color: #e8e8e8; font-size: 0.9rem; line-height: 1.4; }

.g-check { color: #9b59b6; font-weight: bold; flex-shrink: 0; }

.g-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }

.g-tech-tag { background: rgba(52, 152, 219, 0.15); color: #3498db; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(52, 152, 219, 0.4); }

.g-details { display: flex; flex-direction: column; padding: 1rem; background: rgba(155, 89, 182, 0.05); border-radius: 16px; border: 1px solid rgba(155, 89, 182, 0.3); }

.g-section-title { color: #ffffff; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(155, 89, 182, 0.4); }

.g-about { color: #b0b0b0; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem 0; }

.g-impact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; flex-grow: 1; }

.g-impact-item { background: rgba(155, 89, 182, 0.1); color: #e8e8e8; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem; border-left: 3px solid #9b59b6; }

.g-btn { display: inline-block; background: linear-gradient(135deg, #9b59b6, #3498db); color: #fff; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.2s, box-shadow 0.2s; margin-top: auto; }
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(155, 89, 182, 0.5); color: #fff; text-decoration: none; }

.be-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; }

.be-header { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #0d0d0d 100%); border-radius: 24px; margin-bottom: 2rem; border: 1px solid rgba(46, 204, 113, 0.3); }

.be-badge { display: inline-block; background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; }

.be-title { font-size: 2.75rem; font-weight: 800; background: linear-gradient(90deg, #2ecc71, #27ae60, #ffffff, #2ecc71); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: wp-gradient 3s ease infinite; margin: 0 0 1rem 0; }

@keyframes wp-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.be-description { color: #b0b0b0; font-size: 1.1rem; line-height: 1.7; max-width: 900px; margin: 0 auto; }

.be-card { background: linear-gradient(145deg, #0a0a0a 0%, #151515 100%); border-radius: 24px; padding: 2.5rem; margin-bottom: 2rem; border: 2px solid rgba(46, 204, 113, 0.3); box-shadow: 0 20px 60px rgba(46, 204, 113, 0.2); }

.be-card-grid { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 1024px) { .be-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .be-card-grid { grid-template-columns: 1fr; } }

.be-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: rgba(39, 174, 96, 0.05); border-radius: 16px; border: 1px solid rgba(39, 174, 96, 0.3); }
@media (max-width: 1024px) { .be-visual { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; } }

.be-image-link { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(46, 204, 113, 0.4); width: 100%; }
.be-image-link:hover .be-image { transform: scale(1.05); }
.be-image-link:hover .be-overlay { opacity: 1; }

.be-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.be-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(46, 204, 113, 0.9), rgba(39, 174, 96, 0.9)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.be-overlay span { color: #fff; font-weight: 700; font-size: 1.1rem; }

.be-status { background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; text-align: center; }

.be-team { text-align: center; margin-top: auto; }

.be-team-label { display: block; color: #b0b0b0; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }

.be-team-name { display: block; color: #2ecc71; font-weight: 700; font-size: 1rem; }

.be-content { display: flex; flex-direction: column; padding: 1rem; background: rgba(39, 174, 96, 0.05); border-radius: 16px; border: 1px solid rgba(39, 174, 96, 0.3); }

.be-project-title { font-size: 1.75rem; font-weight: 800; color: #ffffff; margin: 0 0 0.25rem 0; }

.be-subtitle { color: #27ae60; font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(39, 174, 96, 0.3); }

.be-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; flex-grow: 1; }

.be-keypoint { display: flex; align-items: flex-start; gap: 0.5rem; color: #e8e8e8; font-size: 0.9rem; line-height: 1.4; }

.be-check { color: #2ecc71; font-weight: bold; flex-shrink: 0; }

.be-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }

.be-tech-tag { background: rgba(39, 174, 96, 0.15); color: #27ae60; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(39, 174, 96, 0.4); }

.be-details { display: flex; flex-direction: column; padding: 1rem; background: rgba(46, 204, 113, 0.05); border-radius: 16px; border: 1px solid rgba(46, 204, 113, 0.3); }

.be-section-title { color: #ffffff; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(46, 204, 113, 0.4); }

.be-about { color: #b0b0b0; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem 0; }

.be-impact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; flex-grow: 1; }

.be-impact-item { background: rgba(46, 204, 113, 0.1); color: #e8e8e8; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem; border-left: 3px solid #2ecc71; }

.be-btn { display: inline-block; background: linear-gradient(135deg, #2ecc71, #27ae60); color: #fff; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.2s, box-shadow 0.2s; margin-top: auto; }
.be-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(46, 204, 113, 0.5); color: #fff; text-decoration: none; }

.ed-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; }

.ed-header { text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 50%, #16213e 100%); border-radius: 24px; margin-bottom: 2rem; border: 1px solid rgba(255, 107, 53, 0.3); position: relative; overflow: hidden; }
.ed-header::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(78, 205, 196, 0.03) 10px, rgba(78, 205, 196, 0.03) 20px); pointer-events: none; }

.ed-badge { display: inline-block; background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; padding: 0.5rem 1.5rem; border-radius: 50px; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4); }

.ed-title { font-size: 2.75rem; font-weight: 800; background: linear-gradient(90deg, #ff6b35, #f7931e, #4ecdc4); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: ed-gradient 4s ease infinite; margin: 0 0 1rem 0; }

@keyframes ed-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.ed-description { color: #a8b3cf; font-size: 1.1rem; line-height: 1.7; max-width: 900px; margin: 0 auto; }

.ed-card { background: linear-gradient(145deg, #16213e 0%, #1e3a5f 100%); border-radius: 24px; padding: 2.5rem; margin-bottom: 2rem; border: 2px solid rgba(255, 107, 53, 0.25); box-shadow: 0 20px 60px rgba(255, 107, 53, 0.15), 0 0 0 1px rgba(78, 205, 196, 0.1); }

.ed-card-grid { display: grid; grid-template-columns: 250px 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 1024px) { .ed-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .ed-card-grid { grid-template-columns: 1fr; } }

.ed-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: rgba(255, 107, 53, 0.06); border-radius: 16px; border: 1px solid rgba(255, 107, 53, 0.25); }
@media (max-width: 1024px) { .ed-visual { grid-column: 1 / -1; max-width: 280px; margin: 0 auto; } }

.ed-image-link { position: relative; display: block; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3); width: 100%; }
.ed-image-link:hover .ed-image { transform: scale(1.05); }
.ed-image-link:hover .ed-overlay { opacity: 1; }

.ed-image { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }

.ed-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 107, 53, 0.95), rgba(247, 147, 30, 0.95)); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.ed-overlay span { color: #fff; font-weight: 700; font-size: 1.1rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

.ed-status { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; padding: 0.5rem 1.2rem; border-radius: 20px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; text-align: center; box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4); }

.ed-team { text-align: center; margin-top: auto; }

.ed-team-label { display: block; color: #a8b3cf; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.25rem; }

.ed-team-name { display: block; color: #ff6b35; font-weight: 700; font-size: 0.95rem; }

.ed-content { display: flex; flex-direction: column; padding: 1rem; background: rgba(78, 205, 196, 0.06); border-radius: 16px; border: 1px solid rgba(78, 205, 196, 0.25); }

.ed-project-title { font-size: 1.75rem; font-weight: 800; color: #e8eef7; margin: 0 0 0.25rem 0; }

.ed-subtitle { color: #4ecdc4; font-size: 0.95rem; font-weight: 600; margin: 0 0 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid rgba(78, 205, 196, 0.25); }

.ed-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; flex-grow: 1; }

.ed-keypoint { display: flex; align-items: flex-start; gap: 0.5rem; color: #e8eef7; font-size: 0.9rem; line-height: 1.4; }

.ed-check { color: #4ecdc4; font-weight: bold; flex-shrink: 0; }

.ed-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }

.ed-tech-tag { background: rgba(255, 107, 53, 0.12); color: #ff6b35; padding: 0.35rem 0.7rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255, 107, 53, 0.3); font-family: 'Courier New', monospace; }

.ed-details { display: flex; flex-direction: column; padding: 1rem; background: rgba(247, 147, 30, 0.06); border-radius: 16px; border: 1px solid rgba(247, 147, 30, 0.25); }

.ed-section-title { color: #e8eef7; font-size: 1rem; font-weight: 700; margin: 0 0 0.75rem 0; padding-bottom: 0.5rem; border-bottom: 2px solid rgba(255, 107, 53, 0.35); }

.ed-about { color: #a8b3cf; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.25rem 0; }

.ed-impact-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.25rem; flex-grow: 1; }

.ed-impact-item { background: rgba(78, 205, 196, 0.1); color: #e8eef7; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem; border-left: 3px solid #4ecdc4; }

.ed-btn { display: inline-block; background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; padding: 0.75rem 1.5rem; border-radius: 12px; font-weight: 700; text-decoration: none; text-align: center; transition: transform 0.2s, box-shadow 0.2s; margin-top: auto; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); }
.ed-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5); color: #fff; text-decoration: none; }

.uesl-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.uesl-header { text-align: center; padding: 3rem 2rem 2.5rem; background: linear-gradient(135deg, #0f0a1e 0%, #160d2e 50%, #0d1a2e 100%); border-radius: 16px; margin-bottom: 2rem; border: 1px solid rgba(124, 58, 237, 0.25); position: relative; overflow: hidden; }
.uesl-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 30% 40%, rgba(124, 58, 237, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 60%, rgba(6, 182, 212, 0.06) 0%, transparent 50%); pointer-events: none; }

.uesl-badge { display: inline-block; padding: 0.4rem 1.2rem; background: linear-gradient(135deg, #7c3aed, #06b6d4); border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.25rem; }

.uesl-title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 1rem; background: linear-gradient(90deg, #7c3aed, #06b6d4, #7c3aed); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: uesl-gradient 4s ease infinite; }

@keyframes uesl-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.uesl-description { font-size: 1rem; color: #94a3b8; max-width: 700px; margin: 0 auto; line-height: 1.7; }

.uesl-card { background: #1a1033; border: 1px solid rgba(124, 58, 237, 0.25); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.uesl-card:hover { border-color: rgba(124, 58, 237, 0.5); box-shadow: 0 8px 32px rgba(124, 58, 237, 0.12); }

.uesl-card-grid { display: grid; grid-template-columns: 240px 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 1024px) { .uesl-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .uesl-card-grid { grid-template-columns: 1fr; } }

.uesl-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.uesl-image-link { display: block; position: relative; border-radius: 12px; overflow: hidden; border: 2px solid rgba(124, 58, 237, 0.25); transition: border-color 0.3s ease; text-decoration: none; }
.uesl-image-link:hover { border-color: #7c3aed; }
.uesl-image-link:hover .uesl-image { transform: scale(1.04); }
.uesl-image-link:hover .uesl-overlay { opacity: 1; }

.uesl-image { width: 100%; height: 200px; object-fit: contain; background: #0f0a1e; display: block; transition: transform 0.3s ease; padding: 1rem; }

.uesl-overlay { position: absolute; inset: 0; background: rgba(124, 58, 237, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.uesl-overlay span { color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; }

.uesl-status { display: inline-block; padding: 0.35rem 1rem; background: rgba(6, 182, 212, 0.12); color: #06b6d4; border: 1px solid rgba(6, 182, 212, 0.3); border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-align: center; }

.uesl-team { text-align: center; font-size: 0.8rem; }

.uesl-team-label { display: block; color: #94a3b8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }

.uesl-team-name { color: #e2e8f0; font-weight: 500; line-height: 1.4; }

.uesl-project-title { font-size: 1.4rem; font-weight: 800; color: #e2e8f0; margin: 0 0 0.4rem; }

.uesl-subtitle { font-size: 0.9rem; color: #7c3aed; font-weight: 600; margin: 0 0 1.25rem; font-style: italic; }

.uesl-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }

.uesl-keypoint { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: #e2e8f0; line-height: 1.5; }

.uesl-check { color: #06b6d4; font-weight: 700; flex-shrink: 0; margin-top: 0.05em; }

.uesl-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.uesl-tech-tag { padding: 0.3rem 0.75rem; background: rgba(124, 58, 237, 0.12); color: #7c3aed; border: 1px solid rgba(124, 58, 237, 0.3); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }

.uesl-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #7c3aed; margin: 0 0 0.75rem; }

.uesl-about { font-size: 0.9rem; color: #94a3b8; line-height: 1.7; margin: 0 0 1.5rem; }

.uesl-impact-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }

.uesl-impact-item { font-size: 0.85rem; color: #e2e8f0; padding: 0.5rem 0.75rem; background: rgba(6, 182, 212, 0.06); border-left: 3px solid #06b6d4; border-radius: 0 6px 6px 0; line-height: 1.5; }

.uesl-btn { display: inline-block; padding: 0.65rem 1.5rem; background: linear-gradient(135deg, #7c3aed, #06b6d4); color: #fff; font-weight: 700; font-size: 0.875rem; border-radius: 8px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.uesl-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4); color: #fff; text-decoration: none; }

.uesl-section-card { background: #1a1033; border: 1px solid rgba(124, 58, 237, 0.25); border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; }

.uesl-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #7c3aed; margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(124, 58, 237, 0.25); }

.uesl-problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .uesl-problems-grid { grid-template-columns: 1fr; } }

.uesl-problem-item { background: rgba(124, 58, 237, 0.06); border: 1px solid rgba(124, 58, 237, 0.15); border-radius: 10px; padding: 1rem 1.1rem; }
.uesl-problem-item p { margin: 0; font-size: 0.875rem; color: #e2e8f0; line-height: 1.6; }

.uesl-problem-num { display: block; font-size: 1.6rem; font-weight: 800; color: rgba(124, 58, 237, 0.35); line-height: 1; margin-bottom: 0.5rem; }

.uesl-ideas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .uesl-ideas-grid { grid-template-columns: 1fr; } }

.uesl-idea-item { background: rgba(6, 182, 212, 0.05); border: 1px solid rgba(6, 182, 212, 0.2); border-radius: 10px; padding: 1rem 1.1rem; }

.uesl-idea-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }

.uesl-idea-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: linear-gradient(135deg, #7c3aed, #06b6d4); border-radius: 50%; font-size: 0.75rem; font-weight: 800; color: #fff; flex-shrink: 0; }

.uesl-idea-title { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; margin: 0; }

.uesl-idea-desc { font-size: 0.825rem; color: #94a3b8; line-height: 1.6; margin: 0; }

.uesl-tech-table { display: flex; flex-direction: column; gap: 0.6rem; }

.uesl-tech-row { display: grid; grid-template-columns: 220px 24px 1fr; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(124, 58, 237, 0.5); }
.uesl-tech-row:last-child { border-bottom: none; }
@media (max-width: 768px) { .uesl-tech-row { grid-template-columns: 1fr; gap: 0.25rem; } }

.uesl-tech-arrow { color: #06b6d4; font-weight: 700; text-align: center; }
@media (max-width: 768px) { .uesl-tech-arrow { display: none; } }

.uesl-tech-solve { font-size: 0.875rem; color: #94a3b8; line-height: 1.5; }

.uesl-issues-list { display: flex; flex-direction: column; gap: 0.6rem; }

.uesl-issue-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; color: #e2e8f0; line-height: 1.5; padding: 0.5rem 0.75rem; background: rgba(124, 58, 237, 0.04); border-radius: 6px; }

.uesl-issue-icon { color: #7c3aed; font-size: 0.9rem; flex-shrink: 0; margin-top: 0.1em; }

.pusd-infograph { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

.pusd-header { text-align: center; padding: 3rem 2rem 2.5rem; background: linear-gradient(135deg, #0a1628 0%, #0d1e3a 50%, #111827 100%); border-radius: 16px; margin-bottom: 2rem; border: 1px solid rgba(30, 64, 175, 0.3); position: relative; overflow: hidden; }
.pusd-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle at 25% 35%, rgba(30, 64, 175, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 65%, rgba(245, 158, 11, 0.07) 0%, transparent 50%); pointer-events: none; }

.pusd-badge { display: inline-block; padding: 0.4rem 1.2rem; background: linear-gradient(135deg, #1e40af, #dd8e09); border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: #fff; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.25rem; }

.pusd-title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 1rem; background: linear-gradient(90deg, #7d96e9, #f59e0b, #7d96e9); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: pusd-gradient 4s ease infinite; }

@keyframes pusd-gradient { 0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; } }
.pusd-description { font-size: 1rem; color: #94a3b8; max-width: 700px; margin: 0 auto; line-height: 1.7; }

.pusd-card { background: #0f1f3d; border: 1px solid rgba(30, 64, 175, 0.3); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.pusd-card:hover { border-color: rgba(30, 64, 175, 0.6); box-shadow: 0 8px 32px rgba(30, 64, 175, 0.15); }

.pusd-card-grid { display: grid; grid-template-columns: 240px 1fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 1024px) { .pusd-card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .pusd-card-grid { grid-template-columns: 1fr; } }

.pusd-visual { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.pusd-image-link { display: block; position: relative; border-radius: 12px; overflow: hidden; border: 2px solid rgba(30, 64, 175, 0.3); transition: border-color 0.3s ease; text-decoration: none; }
.pusd-image-link:hover { border-color: #f59e0b; }
.pusd-image-link:hover .pusd-image { transform: scale(1.04); }
.pusd-image-link:hover .pusd-overlay { opacity: 1; }

.pusd-image { width: 100%; height: 200px; object-fit: contain; background: #0a1628; display: block; transition: transform 0.3s ease; padding: 1rem; }

.pusd-overlay { position: absolute; inset: 0; background: rgba(30, 64, 175, 0.75); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; }
.pusd-overlay span { color: #fff; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.05em; }

.pusd-status { display: inline-block; padding: 0.35rem 1rem; background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.35); border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-align: center; }

.pusd-team { text-align: center; font-size: 0.8rem; }

.pusd-team-label { display: block; color: #94a3b8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.25rem; }

.pusd-team-name { color: #e2e8f0; font-weight: 500; line-height: 1.4; }

.pusd-project-title { font-size: 1.4rem; font-weight: 800; color: #e2e8f0; margin: 0 0 0.4rem; }

.pusd-subtitle { font-size: 0.9rem; color: #f59e0b; font-weight: 600; margin: 0 0 1.25rem; font-style: italic; }

.pusd-keypoints { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem; }

.pusd-keypoint { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: #e2e8f0; line-height: 1.5; }

.pusd-check { color: #f59e0b; font-weight: 700; flex-shrink: 0; margin-top: 0.05em; }

.pusd-tech-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.pusd-tech-tag { padding: 0.3rem 0.75rem; background: rgba(30, 64, 175, 0.15); color: #93a8ec; border: 1px solid rgba(30, 64, 175, 0.4); border-radius: 999px; font-size: 0.75rem; font-weight: 600; }

.pusd-section-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #f59e0b; margin: 0 0 0.75rem; }

.pusd-about { font-size: 0.9rem; color: #94a3b8; line-height: 1.7; margin: 0 0 1.5rem; }

.pusd-impact-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.75rem; }

.pusd-impact-item { font-size: 0.85rem; color: #e2e8f0; padding: 0.5rem 0.75rem; background: rgba(245, 158, 11, 0.07); border-left: 3px solid #f59e0b; border-radius: 0 6px 6px 0; line-height: 1.5; }

.pusd-btn { display: inline-block; padding: 0.65rem 1.5rem; background: linear-gradient(135deg, #1e40af, #dd8e09); color: #fff; font-weight: 700; font-size: 0.875rem; border-radius: 8px; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pusd-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(30, 64, 175, 0.45); color: #fff; text-decoration: none; }

.pusd-section-card { background: #0f1f3d; border: 1px solid rgba(30, 64, 175, 0.3); border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: 1.5rem; }

.pusd-section-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #f59e0b; margin-bottom: 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(30, 64, 175, 0.3); }

.pusd-problems-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .pusd-problems-grid { grid-template-columns: 1fr; } }

.pusd-problem-item { background: rgba(30, 64, 175, 0.07); border: 1px solid rgba(30, 64, 175, 0.2); border-radius: 10px; padding: 1rem 1.1rem; }
.pusd-problem-item p { margin: 0; font-size: 0.875rem; color: #e2e8f0; line-height: 1.6; }

.pusd-problem-num { display: block; font-size: 1.6rem; font-weight: 800; color: rgba(245, 158, 11, 0.4); line-height: 1; margin-bottom: 0.5rem; }

.pusd-ideas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 768px) { .pusd-ideas-grid { grid-template-columns: 1fr; } }

.pusd-idea-item { background: rgba(245, 158, 11, 0.05); border: 1px solid rgba(245, 158, 11, 0.2); border-radius: 10px; padding: 1rem 1.1rem; }

.pusd-idea-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }

.pusd-idea-num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: linear-gradient(135deg, #1e40af, #dd8e09); border-radius: 50%; font-size: 0.75rem; font-weight: 800; color: #fff; flex-shrink: 0; }

.pusd-idea-title { font-size: 0.9rem; font-weight: 700; color: #e2e8f0; margin: 0; }

.pusd-idea-desc { font-size: 0.825rem; color: #94a3b8; line-height: 1.6; margin: 0; }

.pusd-tech-table { display: flex; flex-direction: column; gap: 0.6rem; }

.pusd-tech-row { display: grid; grid-template-columns: 220px 24px 1fr; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(30, 64, 175, 0.5); }
.pusd-tech-row:last-child { border-bottom: none; }
@media (max-width: 768px) { .pusd-tech-row { grid-template-columns: 1fr; gap: 0.25rem; } }

.pusd-tech-arrow { color: #f59e0b; font-weight: 700; text-align: center; }
@media (max-width: 768px) { .pusd-tech-arrow { display: none; } }

.pusd-tech-solve { font-size: 0.875rem; color: #94a3b8; line-height: 1.5; }

.pusd-issues-list { display: flex; flex-direction: column; gap: 0.6rem; }

.pusd-issue-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; color: #e2e8f0; line-height: 1.5; padding: 0.5rem 0.75rem; background: rgba(30, 64, 175, 0.05); border-radius: 6px; }

.pusd-issue-icon { color: #f59e0b; font-size: 0.9rem; flex-shrink: 0; margin-top: 0.1em; }