* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--tok-f4efe6);
color: var(--ink);
line-height: 1.45;
font-size: 18px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.studio-hud {
background: linear-gradient(180deg, var(--tok-dcf6f7) 0%, var(--tok-bfe7e8) 45%, var(--aqua) 100%);
border-top: 2px solid var(--tok-fff);
border-bottom: 3.5px double var(--gold);
box-shadow: 0 4px 16px rgba(13, 92, 99, 0.16);
padding: 10px 18px;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 8px;
}
.hud-top-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.hud-brand {
display: flex;
align-items: center;
gap: 10px;
}
.hud-crest {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--ivory);
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.hud-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 19px;
font-weight: 800;
color: var(--teal);
line-height: 1.1;
}
.hud-sub {
font-size: 10.5px;
font-weight: 700;
color: var(--teal-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hud-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.hud-btn-group {
display: inline-flex;
background: rgba(255, 255, 255, 0.92);
border: 1.5px solid var(--gold);
border-radius: 999px;
padding: 3px;
gap: 3px;
flex-wrap: wrap;
}
.hud-btn {
border: none;
background: transparent;
padding: 6px 12px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 800;
color: var(--teal);
cursor: pointer;
transition: all 0.15s ease;
display: inline-flex;
align-items: center;
gap: 5px;
text-decoration: none;
}
.hud-btn:hover { background: rgba(152, 221, 222, 0.38); }
.hud-btn.active {
background: var(--teal);
color: var(--tok-ffffff);
box-shadow: 0 2px 6px rgba(13, 92, 99, 0.25);
}
.hud-badge-gold {
background: var(--gold);
color: var(--tok-fff);
font-size: 9.5px;
padding: 2px 6px;
border-radius: 999px;
font-weight: 800;
}
.studio-stage {
flex: 1;
padding: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background:
radial-gradient(circle at 10% 10%, rgba(152, 221, 222, 0.28), transparent 45%),
radial-gradient(circle at 90% 15%, rgba(197, 160, 89, 0.2), transparent 40%),
linear-gradient(180deg, var(--tok-faf3e3) 0%, var(--tok-f5efe4) 100%);
}
.viewport-frame {
width: 100%;
max-width: 1440px;
background: var(--ivory);
border: 2.5px solid var(--gold);
border-radius: 22px;
box-shadow: 0 18px 44px rgba(13, 92, 99, 0.15);
overflow: hidden;
display: flex;
flex-direction: column;
transition: max-width 0.25s ease;
}
.viewport-frame.tablet {
max-width: 1024px;
}
.viewport-frame.mobile {
max-width: 390px;
width: 390px;
}
.viewport-header-bar {
background: linear-gradient(180deg, var(--tok-faf3e3) 0%, var(--tok-f0e6d2) 100%);
border-bottom: 2px solid var(--gold);
padding: 8px 14px;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 11px;
font-weight: 700;
color: var(--teal);
gap: 8px;
}
.browser-dots { display: inline-flex; gap: 5px; flex-shrink: 0; }
.browser-dot { width: 9px; height: 9px; border-radius: 50%; }
.browser-dot.red { background: var(--tok-ff5f56); }
.browser-dot.yellow { background: var(--tok-ffbd2e); }
.browser-dot.green { background: var(--tok-27c93f); }
.inner-canvas {
min-height: 700px;
width: 100%;
display: flex;
flex-direction: column;
background:
radial-gradient(circle at 15% 10%, rgba(152, 221, 222, 0.34), transparent 45%),
radial-gradient(circle at 85% 15%, rgba(197, 160, 89, 0.22), transparent 40%),
linear-gradient(180deg, var(--tok-ebf8f8) 0%, var(--cream) 360px, var(--ivory) 100%);
padding: 20px 24px 28px;
align-items: center;
justify-content: flex-start;
gap: 16px;
}
.inpage-topbar {
width: 100%;
max-width: 1140px;
background: linear-gradient(180deg, var(--tok-fffdf9) 0%, var(--tok-faf3e3) 100%);
border: 2px solid var(--gold);
border-radius: 16px;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
box-shadow: 0 6px 18px rgba(13, 92, 99, 0.08);
}
.inpage-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.inpage-brand-crest {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 50%;
background: var(--aqua-top);
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.inpage-brand-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 19px;
font-weight: 800;
color: var(--teal);
line-height: 1.1;
}
.inpage-brand-sub {
font-size: 11px;
font-weight: 700;
color: var(--muted);
}
.inpage-a11y-controls {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.lang-pill-group {
display: inline-flex;
background: var(--tok-faf3e3);
border: 2px solid var(--gold);
border-radius: 999px;
padding: 3px;
min-height: 44px;
align-items: center;
}
.lang-pill-btn {
border: none;
background: transparent;
padding: 6px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 800;
color: var(--teal);
cursor: pointer;
min-height: 36px;
}
.lang-pill-btn.active {
background: var(--teal);
color: var(--tok-fff);
}
.read-aloud-pill {
min-height: 44px;
background: var(--teal);
color: var(--tok-fff);
border: 2px solid var(--gold);
border-radius: 999px;
padding: 6px 16px;
font-size: 12.5px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
box-shadow: 0 3px 10px rgba(13, 92, 99, 0.2);
}
.read-aloud-pill:hover {
background: var(--teal-light);
}
.spoken-strip {
width: 100%;
background: var(--aqua-soft);
border: 1.5px solid var(--gold);
border-radius: 10px;
padding: 6px 12px;
font-size: 12px;
font-weight: 700;
color: var(--teal);
display: flex;
align-items: center;
gap: 8px;
}
.centered-two-col {
width: 100%;
max-width: 1140px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 22px;
align-items: stretch;
}
.centered-two-col > * {
min-width: 0;
max-width: 100%;
}
.viewport-frame.tablet .inpage-topbar,
.viewport-frame.tablet .centered-two-col,
.viewport-frame.tablet .auth-card {
max-width: 960px;
}
.viewport-frame.tablet .centered-two-col {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
}
.hero-showcase-panel {
background: linear-gradient(145deg, var(--tok-e3f6f6) 0%, var(--aqua) 100%);
border: 2.5px solid var(--gold);
border-radius: 22px;
box-shadow: var(--shadow-luxury);
padding: 24px 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: var(--teal);
min-width: 0;
overflow: hidden;
}
.showcase-card {
background: rgba(255, 253, 249, 0.96);
border: 2px solid var(--gold);
border-radius: 18px;
overflow: hidden;
margin: 12px 0;
box-shadow: 0 10px 26px rgba(13, 92, 99, 0.12);
}
.showcase-art {
width: 100%;
min-height: 185px;
background: linear-gradient(135deg, var(--tok-0d5c63) 0%, var(--tok-166970) 58%, var(--tok-c5a059) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--ivory);
border-bottom: 2px solid var(--gold);
padding: 18px 16px;
text-align: center;
}
.showcase-body {
padding: 18px 20px;
}
.showcase-badge {
display: inline-block;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 999px;
background: var(--gold);
color: var(--tok-fff);
margin-bottom: 6px;
}
.showcase-headline {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 24px;
font-weight: 800;
color: var(--teal);
line-height: 1.18;
margin-bottom: 6px;
overflow-wrap: anywhere;
}
.showcase-desc {
font-size: 12.5px;
color: var(--muted);
line-height: 1.48;
overflow-wrap: anywhere;
}
.showcase-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
border-top: 1px solid var(--tok-eae0ce);
padding-top: 10px;
margin-top: 12px;
}
.carousel-dots { display: flex; gap: 6px; align-items: center; }
.carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--tok-d5c7b0);
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.carousel-dot.active {
width: 26px;
border-radius: 999px;
background: var(--teal);
}
.workspace-selector-panel {
background: var(--ivory);
border: 2.5px solid var(--gold);
border-radius: 22px;
box-shadow: var(--shadow-luxury);
padding: 24px 26px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
min-width: 0;
overflow: hidden;
}
.door-card {
background: linear-gradient(180deg, var(--tok-fffdf9) 0%, var(--tok-faf3e3) 100%);
border: 2.5px solid var(--gold);
border-radius: 18px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 12px;
cursor: pointer;
transition: all 0.16s ease;
}
.door-card:hover {
border-color: var(--teal);
background: linear-gradient(180deg, var(--tok-f2fbfb) 0%, var(--tok-e3f6f6) 100%);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(13, 92, 99, 0.14);
}
.door-top {
display: flex;
align-items: flex-start;
gap: 14px;
}
.door-icon {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 14px;
background: var(--ivory);
border: 2px solid var(--gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
box-shadow: 0 3px 8px rgba(13, 92, 99, 0.1);
}
.door-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 23px;
font-weight: 800;
color: var(--teal);
line-height: 1.15;
}
.door-sub {
font-size: 12.2px;
font-weight: 600;
color: var(--muted);
margin-top: 4px;
line-height: 1.42;
}
.door-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.door-cta {
flex: 1;
min-height: 52px;
background: var(--teal);
color: var(--tok-fff);
border: 1.5px solid var(--gold);
border-radius: 12px;
padding: 10px 16px;
font-size: 13px;
font-weight: 800;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: 0 3px 8px rgba(13, 92, 99, 0.2);
}
.voice-btn {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 12px;
background: var(--ivory);
border: 2px solid var(--gold);
color: var(--teal);
font-size: 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.voice-btn:hover {
background: var(--aqua-top);
border-color: var(--teal);
}
.auth-card {
width: 100%;
max-width: 1140px;
background: var(--ivory);
border: 2.5px solid var(--gold);
border-radius: 22px;
box-shadow: var(--shadow-luxury);
padding: 24px 28px;
min-width: 0;
overflow: hidden;
}
.ops-two-col {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 20px;
align-items: stretch;
}
.role-three-col {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin-top: 18px;
}
.back-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: var(--tok-faf3e3);
border: 1.5px solid var(--gold);
color: var(--teal);
font-weight: 800;
font-size: 12px;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
text-align: center;
}
.pin-slots {
display: flex;
justify-content: center;
gap: 10px;
margin: 12px 0;
}
.pin-slot {
width: 52px;
height: 58px;
border: 2.5px solid var(--gold);
border-radius: 12px;
background: var(--tok-fff);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 900;
color: var(--teal);
}
.tactile-keypad {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 280px;
margin: 10px auto;
}
.tactile-key {
min-height: 64px;
background: linear-gradient(180deg, var(--tok-fffdf9) 0%, var(--tok-faf3e3) 100%);
border: 2px solid var(--gold);
border-radius: 14px;
font-size: 21px;
font-weight: 800;
color: var(--teal);
cursor: pointer;
box-shadow: 0 3px 6px rgba(13, 92, 99, 0.1);
}
.tactile-key:active {
background: var(--aqua-top);
transform: scale(0.96);
}
.selfie-box {
width: 100%;
min-height: 210px;
background: radial-gradient(circle at 50% 42%, var(--tok-164e54) 0%, var(--tok-072528) 100%);
border: 2.5px solid var(--gold);
border-radius: 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px;
color: var(--tok-dcf6f7);
text-align: center;
}
.selfie-oval {
width: 108px;
height: 132px;
border: 3px dashed var(--tok-27c93f);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 38px;
background: rgba(152, 221, 222, 0.08);
margin-bottom: 8px;
}