﻿.platform-header{height:80px}.platform-header .brand{letter-spacing:-1px}.platform-nav{display:flex;gap:25px;align-items:center;font-size:12px;color:#757575}.platform-shell{max-width:1180px;margin:auto;padding:70px 35px 100px}.platform-shell h1{font-size:64px;letter-spacing:-3px;line-height:1.1;margin:22px 0}.platform-shell .intro{max-width:600px;color:#818181;font-size:14px}.status-chip{display:inline-flex;gap:8px;align-items:center;border:1px solid #dadada;border-radius:30px;font-size:9px;letter-spacing:1px;padding:8px 12px;color:#787878}.status-chip:before{content:'';width:5px;height:5px;background:#919191;border-radius:50%}.platform-card{border:1px solid #dadada;border-radius:13px;padding:32px;background:#fafafa}.platform-card h2{font-size:28px;letter-spacing:-1px;margin-bottom:20px}.platform-card p{font-size:13px;color:#818181}.platform-card label{display:block;font-size:12px;margin:20px 0 8px}.platform-card input{width:100%;padding:13px 15px;border:1px solid #cfcfcf;border-radius:6px;background:white;font:inherit;font-size:14px;color:#282828}.platform-card .button{border:0;cursor:pointer;justify-content:center}.platform-card .button:disabled{background:#e2e2e2;color:#8a8a8a;cursor:not-allowed;transform:none}.notice{font-family:'IBM Plex Sans Thai',sans-serif;font-size:12px;color:#737373;line-height:1.8;padding:17px 20px;background:#eaeaea;border-radius:7px;border:1px solid #dddddd}.muted{color:#8c8c8c;font-size:12px;line-height:1.8}.auth-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:95px;align-items:start;margin-top:35px}.auth-copy{padding-top:40px}.auth-copy h1{font-size:70px}.auth-copy blockquote{margin:40px 0;padding:0 0 0 20px;border-left:1px solid #bcbcbc;font-family:'IBM Plex Sans Thai';font-size:16px;line-height:1.9;color:#757575}.auth-card .button{width:100%;margin:15px 0}.auth-card .separator{font-size:10px;color:#9c9c9c;text-align:center;margin:25px 0;display:flex;align-items:center;gap:12px}.separator:before,.separator:after{content:'';height:1px;background:#e2e2e2;flex:1}.auth-card h3{font-size:16px;font-weight:500;margin-top:20px}.checkout-layout{display:grid;grid-template-columns:1fr 390px;gap:55px;margin-top:45px}.order-total{font-size:44px;letter-spacing:-2px;margin:25px 0}.order-total small{font-size:13px;color:#8c8c8c;letter-spacing:0;margin-left:7px}.order-lines{list-style:none;padding:0;margin:25px 0}.order-lines li{padding:13px 0;border-bottom:1px solid #e2e2e2;font-family:'IBM Plex Sans Thai';font-size:13px;color:#767676}.order-lines li:before{content:'↗';margin-right:12px}.checkout-summary{align-self:start;position:sticky;top:30px}.checkout-summary dl{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:25px 0;font-size:12px}.checkout-summary dd{text-align:right;margin:0}.checkout-summary dt{color:#8e8e8e}.checkout-summary .button{width:100%;margin-top:20px}.checkout-state{font-family:'IBM Plex Sans Thai';font-size:12px;line-height:1.8;color:#7b7b7b;margin:15px 0}.learning-body{background:#efefef}.learning-intro{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:35px}.learning-intro h1{font-size:46px;letter-spacing:-2px;margin:20px 0 12px}.learning-intro p{font-size:13px;color:#848484;margin:0}.learner-badge{font-size:11px;padding:10px 13px;border:1px solid #d7d7d7;border-radius:6px;color:#6e6e6e}.learning-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:25px;margin-top:25px}.player-shell{border-radius:10px;overflow:hidden;border:1px solid #373737;background:#171717;position:relative;aspect-ratio:16/9;isolation:isolate;color:#dbdbdb}.player-top{position:absolute;top:20px;left:25px;right:25px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:1.7px;z-index:2;color:#848484}.demo-chart{position:absolute;inset:20% 8%;display:flex;align-items:center;justify-content:center;gap:3%;opacity:.55;background:repeating-linear-gradient(0deg,transparent 0 39px,#8585851a 40px)}.demo-chart i{width:2.5%;height:var(--h);background:linear-gradient(90deg,#787878,#b7b7b7);transform:translateY(var(--y));position:relative}.demo-chart i:before{content:'';width:1px;height:calc(100% + 20px);position:absolute;left:50%;top:-10px;background:#9b9b9b}.player-message{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#131313aa;text-align:center;z-index:3;gap:13px;padding:35px}.player-message h2{font-size:24px;font-weight:450;letter-spacing:-.8px;margin:0}.player-message p{font-size:11px;color:#9c9c9c;max-width:340px;margin:0}.play-demo{width:58px;height:58px;border:1px solid #7b7b7b;background:#b3b3b316;border-radius:50%;color:white;font-size:20px;cursor:pointer;margin-bottom:10px}.player-shell.playing .player-message{opacity:0;pointer-events:none}.player-shell.playing .demo-chart i{animation:chart-pulse 3s ease-in-out infinite alternate;animation-delay:calc(var(--n)*-.2s)}@keyframes chart-pulse{to{transform:translateY(calc(var(--y) - 15px));opacity:.5}}.watermark{position:absolute;top:30%;left:8%;font:500 13px Inter,sans-serif;letter-spacing:1px;color:#f0f0f070;text-shadow:0 1px 3px #000;pointer-events:none;z-index:5;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:watermark-drift 23s linear infinite alternate}.watermark span{display:block;font-size:8px;margin-top:4px;letter-spacing:1.5px;color:#e5e5e550}@keyframes watermark-drift{0%{top:20%;left:8%}25%{top:65%;left:40%}50%{top:35%;left:55%}75%{top:70%;left:15%}100%{top:25%;left:45%}}.player-controls{position:absolute;bottom:0;left:0;right:0;padding:16px 22px;background:linear-gradient(transparent,#0f0f0fe6);display:flex;justify-content:space-between;z-index:6;align-items:center}.player-controls button{border:0;background:none;color:#c2c2c2;cursor:pointer;font-size:11px}.player-controls small{font-size:8px;letter-spacing:1px;color:#888888}.lesson-sidebar{border:1px solid #d7d7d7;border-radius:10px;background:#f9f9f9;overflow:hidden;align-self:start}.lesson-sidebar h2{font-size:16px;font-weight:500;letter-spacing:-.3px;padding:22px;margin:0;border-bottom:1px solid #e2e2e2}.lesson-sidebar button{width:100%;background:none;border:0;border-bottom:1px solid #e5e5e5;padding:18px;text-align:left;cursor:pointer;color:#707070;display:flex;gap:12px;font-size:12px;font-family:inherit}.lesson-sidebar button.active{background:#e6e6e6;color:#2e2e2e}.lesson-sidebar button:disabled{cursor:not-allowed;color:#a4a4a4}.lesson-sidebar button span{flex:1}.lesson-sidebar small{font-size:9px}.lesson-details{margin-top:28px}.lesson-details h2{font-size:26px;letter-spacing:-1px;margin:10px 0}.lesson-details p{font-size:13px;color:#7c7c7c;max-width:700px}.learning-tabs{display:flex;gap:25px;border-bottom:1px solid #d7d7d7;margin-top:30px}.learning-tabs button{background:none;border:0;padding:15px 0;cursor:pointer;font-size:12px;color:#888888;font-family:inherit}.learning-tabs button[aria-selected=true]{color:#2d2d2d;border-bottom:2px solid #474747}.learning-panel{padding:20px 0}.learning-panel textarea{display:block;width:100%;min-height:130px;border:1px solid #d2d2d2;border-radius:6px;background:#f9f9f9;padding:16px;font-family:'IBM Plex Sans Thai';resize:vertical;font-size:13px}.learning-panel h3{font-size:15px;font-weight:500}.learning-panel p{font-size:13px;color:#777777}.learning-panel .button{border:1px solid #cdcdcd;cursor:pointer;background:transparent;margin-top:15px;font-size:11px}.learning-panel[hidden]{display:none}.billing-link{display:inline-block;color:#585858;border-bottom:1px solid #bcbcbc;padding-bottom:4px;font-size:12px;margin-top:10px}.plan-section{background:#f0f0f0}.plan-intro{display:flex;justify-content:space-between;align-items:end;gap:30px}.plan-intro p{color:#7d7d7d;font-size:13px}.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:35px}.plan{padding:30px;border:1px solid #d7d7d7;border-radius:10px;display:flex;flex-direction:column;position:relative;background:#f8f8f8}.plan.featured{background:#222222;color:#efefef;border-color:#222222}.plan .plan-label{font-size:9px;letter-spacing:1.5px;color:#8c8c8c}.plan h3{font-size:25px;font-weight:500;letter-spacing:-.8px;margin:24px 0 16px}.plan .plan-price{font-size:40px;font-weight:450;letter-spacing:-2px}.plan-price small{font-size:12px;letter-spacing:0;color:#8c8c8c}.plan p{font-size:12px;color:#878787;min-height:46px}.plan ul{list-style:none;padding:20px 0;margin:20px 0;border-top:1px solid #d8d8d8;flex:1}.plan.featured ul{border-color:#464646}.plan li{font-family:'IBM Plex Sans Thai';font-size:12px;line-height:1.8;margin-bottom:14px;color:#808080}.plan.featured li{color:#b6b6b6}.plan li:before{content:'↗';margin-right:10px}.plan .button{justify-content:space-between;border:1px solid #cbcbcb}.plan.featured .button{background:#e8e8e8;color:#282828;border:0}.plan-section .section-label{margin-bottom:25px}.plans-note{font-size:11px;color:#8d8d8d;margin-top:23px;line-height:1.8}.community{display:grid;grid-template-columns:1fr 1fr;gap:80px}.community p{font-size:14px;color:#808080}.social-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:center}.social-link{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px;border:1px solid #d3d3d3;border-radius:8px;font-size:16px;background:#f4f4f4;text-align:left;font-family:inherit;color:#5d5d5d}.social-link small{font-size:9px;color:#989898;display:block;margin-top:10px}.social-link[aria-disabled=true]{opacity:.7;cursor:not-allowed}.journey-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:30px;margin-top:45px;border-top:1px solid #dcdcdc}.journey-strip h3{font-size:15px;font-weight:500}.journey-strip p{font-size:12px;color:#868686}.section-top p{max-width:300px}.hero-copy{max-width:480px}.brand-statement{font-size:11px;letter-spacing:1.8px;margin:25px 0 15px;color:#838383}@media(max-width:1000px){.auth-layout{gap:40px}.checkout-layout{grid-template-columns:1fr 330px;gap:25px}.plans-grid{gap:12px}.plan{padding:22px}.plan .plan-price{font-size:34px}.learning-layout{grid-template-columns:minmax(0,1fr) 240px}.community{gap:35px}.journey-strip{grid-template-columns:1fr 1fr}}@media(max-width:750px){.platform-header{height:75px}.platform-nav{gap:15px;font-size:10px}.platform-shell{padding:40px 6% 70px}.platform-shell h1{font-size:44px;letter-spacing:-2px}.auth-layout,.checkout-layout{grid-template-columns:1fr;gap:30px;margin-top:0}.auth-copy{padding-top:0}.auth-copy blockquote{margin:25px 0;font-size:14px}.platform-card{padding:25px}.checkout-summary{position:static}.learning-layout{grid-template-columns:1fr}.learning-intro{align-items:start}.learning-intro h1{font-size:36px}.learner-badge{font-size:9px;max-width:140px;overflow:hidden;text-overflow:ellipsis}.player-message h2{font-size:18px}.player-message{padding:20px;gap:7px}.player-message p{font-size:9px}.play-demo{width:40px;height:40px;margin-bottom:0;font-size:16px}.player-top{top:12px;left:15px;right:15px;font-size:7px}.watermark{font-size:10px}.player-controls{padding:13px}.player-controls small{font-size:7px}.lesson-sidebar button{padding:15px}.plan-intro{display:block}.plans-grid{grid-template-columns:1fr;gap:18px}.plan{padding:28px}.plan p{min-height:0}.community{grid-template-columns:1fr;gap:15px}.social-link{padding:18px;font-size:14px}.journey-strip{gap:15px}.learning-tabs{gap:20px}.learning-tabs button{font-size:11px}.notice{padding:15px;font-size:11px}}@media(prefers-reduced-motion:reduce){.watermark,.demo-chart i{animation:none!important}}
#drive-video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;background:#151515}#drive-video[hidden]{display:none}.streaming .player-message,.streaming .player-top,.streaming .demo-chart{display:none}.streaming .watermark{z-index:5}.streaming .player-controls{padding:8px 15px;right:auto;left:0;background:#131313b8;max-width:60%}.streaming .player-controls small{display:none}.player-shell:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0}.player-shell:fullscreen .watermark{font-size:22px}dialog{border:1px solid #d4d4d4;border-radius:13px;background:#f6f6f6;color:#282828;width:min(440px,90vw);padding:35px;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#18181899;backdrop-filter:blur(5px)}dialog h2{font-size:24px;font-weight:500;letter-spacing:-.6px}.dialog-close{position:absolute;right:16px;top:12px;font:24px Inter;border:0;background:none;color:#7d7d7d;cursor:pointer}.qr-placeholder{margin:25px auto;width:190px;height:190px;display:grid;place-items:center;border:2px dashed #afafaf;border-radius:8px;background:repeating-linear-gradient(45deg,#e6e6e6 0 6px,#f2f2f2 6px 12px)}.qr-placeholder span{text-align:center;font:500 16px Inter;letter-spacing:1px;color:#8c8c8c;background:#f2f2f2;padding:15px 8px}.qr-placeholder small{display:block;font-size:10px;margin-top:10px;letter-spacing:0}dialog .order-total{text-align:center;font-size:32px}#promptpay-preview{background:transparent}

.payment-dialog{width:min(520px,92vw);max-height:90dvh;overflow:auto}.bank-account{display:flex;flex-direction:column;gap:12px;border:1px solid #ddd;border-radius:8px;padding:22px;margin:22px 0;background:#fff;font-size:13px}.bank-account strong{font-size:28px;font-weight:500;letter-spacing:1px}.bank-account .button{border:1px solid #ccc;background:#f5f5f5;justify-content:center;cursor:pointer}.bank-account p{font-size:11px;margin:0;color:#666}.payment-qr{display:block;width:min(100%,300px);height:auto;margin:22px auto;border:1px solid #e1e1e1;border-radius:6px}.payment-total-label{text-align:center;font-size:11px;color:#888}.payment-dialog .order-total{margin:10px 0}.payment-download{display:flex;justify-content:center;margin:18px 0}.payment-dialog .notice{margin-top:20px}

[hidden]{display:none!important}.member-order{margin-bottom:15px}.member-order h3{margin-top:0;font-size:18px}.member-order small{font-size:10px;color:#888}.auth-card a.button{display:flex;justify-content:center}.platform-card input:invalid:not(:placeholder-shown){border-color:#a27272}
.member-order .order-payment-link{display:flex;width:fit-content;margin-top:20px;min-height:44px}.member-order .order-payment-link:focus-visible{outline:2px solid #777;outline-offset:4px}
.device-session-block{position:fixed;inset:0;z-index:999999;background:#161616bb;backdrop-filter:blur(8px);display:grid;place-items:center;padding:25px;overflow:auto}.device-session-block .platform-card{max-width:480px;width:100%;background:#f8f8f6}.device-session-block h2{font-family:Inter,"IBM Plex Sans Thai",sans-serif;line-height:1.5;font-size:26px}.device-session-block .billing-link{display:block;width:fit-content;margin-top:24px}.device-session-block:focus{outline:none}
